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

Integration with RadMap

  • Demo Configurator

You can filter the pin markers on the map by clicking on the colorized country areas.

You can data bind RadMap Markers and Shapes on the client to a RadClientDataSource control since Q2 2014. This functionality is provided out of the box through the server-side ClientDataSourceID property of the Layer which also has its client-side counterpart - the set_clientDataSourceID() method.

Client-side data binding means fewer postbacks, easier integration with various data services and a more flexible client-side development.

The map needs JSON literals with the necessary fields:

  • for Markers you need a point with coordinates.
  • for Shapes you need objects that follow the GeoJSON specifications .
  • additional fields can be present in the objects and they can be accessed in the marker tooltip template with the #= marker.dataItem.FieldName # syntax. You can alternatively use a field to define a simple tooltip via the TitleField property.
  • you can modify shapes in the ShapeCreated event with JavaScript in case you need to apply further modifications on their structure/appearance.
  • you can provide an array of JSON literals to the map by yourself in its OnInit event to use as a datasource. More information and examples are available in the RadMap client-side data binding help article.

In this example, the RadClientDataSource control requests *.json files that contain the appropriate data. The one that works with the Shapes layer has its WebServiceDataSourceSettings.ServiceType property is set to GeoJSON. You can filter the data through the client data source control object easily and this will not require additional requests for the files (or in the common case - the service). You can read more on the matter in the ClientDataSource Filtering demo.

Click on the countries from the selected continent or use the Choose Map Destination dropdown to show points of interest for a specific country or continent respectively. The OnShapeClick event of the map are used to determine which shape was clicked so the filter collection of the RadClientDataSource is populated accordingly.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Map.ClientSideDataBinding.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="DestinationMarkersData">
        <DataSource>
            <WebServiceDataSourceSettings>
                <Select Url="JSON/DestinationMarkersData.json" DataType="JSON" ContentType="application/json" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>

    <telerik:RadClientDataSource runat="server" ID="ContinentDataSource">
        <DataSource>
            <WebServiceDataSourceSettings ServiceType="GeoJSON">
                <Select Url="JSON/Continents/continent_Europe_subunits.json" DataType="JSON" ContentType="application/json" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>

    <div class="demo-container size-auto">
        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="3">
            <LayerDefaultsSettings>
                <ShapeSettings>
                    <StyleSettings>
                        <FillSettings Color="#e4d092" Opacity="0.4" />
                        <StrokeSettings Color="#b5a58d" />
                    </StyleSettings>
                </ShapeSettings>
            </LayerDefaultsSettings>
            <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="Shape" ClientDataSourceID="ContinentDataSource">
                </telerik:MapLayer>
                <telerik:MapLayer Type="Marker" ClientDataSourceID="DestinationMarkersData" LocationField="location" TitleField="city">
                    <TooltipSettings Template="#= marker.dataItem.city # - #= marker.dataItem.country #"></TooltipSettings>
                </telerik:MapLayer>
            </LayersCollection>
            <ClientEvents OnShapeClick="OnShapeClick" OnMarkerCreated="modifyToCustomMarkers" />
        </telerik:RadMap>
    </div>
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            var controlID={
                continentSelector: "<%= ContinentSelector.ClientID %>",
                markerDataSource: "<%= DestinationMarkersData.ClientID %>",
                resetButton: "<%= ResetButton.ClientID %>"
            };
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxManager runat="server" ID="theAjaxManager">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ContinentDataSource" LoadingPanelID="RadAjaxLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="DestinationMarkersData" LoadingPanelID="RadAjaxLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadMap1" LoadingPanelID="RadAjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel" Transparency="50">
    </telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="wide">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ContinentSelector" Label="Choose Main Destination: " AutoPostBack="true">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Africa" Value="AfricaDataSource" />
                                    <telerik:RadComboBoxItem Text="Asia" Value="AsiaDataSource" />
                                    <telerik:RadComboBoxItem Text="Europe" Value="EuropeDataSource" Selected="true" />
                                    <telerik:RadComboBoxItem Text="North America" Value="NorthAmericaDataSource" />
                                    <telerik:RadComboBoxItem Text="Oceania" Value="OceaniaDataSource" />
                                    <telerik:RadComboBoxItem Text="South America" Value="SouthAmericaDataSource" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="ResetButton" AutoPostBack="false" OnClientClicked="resetContinentMarkers" Text="Show all places in destination"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance