New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Markers

TELERIK OFFICES

The Marker functionality of the RadMap allows you to add points of interest to the map. These points are defined by their geographical position on the map and can show useful information to the user in a tooltip. A simple illustration of a Marker in a RadMap is available in the RadMap Element Structure article.

To add Markers to the Map you can:

  • Set them declaratively through the MarkersCollection of the RadMap control. You can find an example in the Overview demo.
  • Use the RadClientDataSource control to bind a MapLayer with Type="Marker" to a client-side data source. This is the approach used in this demo.
  • Use server-side data binding to populate the MapMarker collection. You can find an example in the DataSet demo.

To bind the RadMap to a client data source:

  1. Add a RadClientDataSource control and configure it to request the desired data (the MarkersData.json file in this case).
  2. Add a MapLayer to the LayersCollection of the RadMap.
  3. Set its Type to Marker.
  4. Set the client data source ID to the ClientDataSourceID property.
  5. Use the LocationField attribute to specify the data field that represents the latitude and longitude position of the marker. The location must be an array of numbers in the format - [ latitude, longitude ].
  6. Optionally, you can specify the shape of the markers via the Shape property of the MapLayer. You can see how to use custom shapes for the markers in the Client-side Data Binding demo.
  7. Optionally, the marker tooltip settings can be modified via the TooltipSettings tag of the MapLayer. It allows you to fine tune the tooltips' appearance, content and animations. You can find a full list of the available settings in the Server-side API reference.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Map.Markers.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <DataSource>
            <WebServiceDataSourceSettings>
                <Select DataType="JSON" Url="JSON/MarkersData.json" />
            </WebServiceDataSourceSettings>
        </DataSource>
        <ClientEvents OnChange="OnChange" />
    </telerik:RadClientDataSource>
    <div class="demo-container size-auto">
        <h2 class="mapTitle">TELERIK OFFICES</h2>
        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap">
            <CenterSettings Latitude="23" Longitude="10" />
            <LayersCollection>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                    Attribution="&copy; <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
                <telerik:MapLayer Type="Marker" Shape="PinTarget" ClientDataSourceID="RadClientDataSource1" LocationField="location">
                    <TooltipSettings AutoHide="false" Width="300"
                        Template="<div class='leftCol'><div class='flag'></div></div><div class='rightCol'><div class='country'>#= marker.dataItem.country #</div><div class='city'>#= marker.dataItem.city #</div><div class='address'>#= marker.dataItem.address #</div><div class='address'>#= marker.dataItem.address2 #</div><div class='phone'>p #= marker.dataItem.phone #</div><div class='email'>e <a href='mailto:#= marker.dataItem.email #'>#= marker.dataItem.email #</a></div><div class='location'>Location:#= location.lat #, #= location.lng #</div></div>">
                        <AnimationSettings>
                            <OpenSettings Duration="300" Effects="fade:in" />
                            <CloseSettings Duration="200" Effects="fade:out" />
                        </AnimationSettings>
                    </TooltipSettings>
                </telerik:MapLayer>
            </LayersCollection>
            <ClientEvents OnMarkerCreated="OnMarkerCreated" />
        </telerik:RadMap>
        <div id="contactsContainer">
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance