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

Client-side API

Event log
  • Demo Configurator

RadMap for ASP.NET AJAX is a server wrapper over the Kendo Map widget. Thus, it exposes all methods and events the Kendo Map widget API offers . You can access the widget object via the standard .data("kendoMap") jQuery approach or through the get_kendoWidget method in the MS AJAX control object RadMap has.

This demo shows how you can:

  • get the Kendo widget reference through the get_kendoWidget method in the IScriptControl object (obtained through $find()). See the getMapClientObject() function for an example.
  • use the Kendo API to change the map center location and zoom level. See the setZoomLevel() and setCenterPosition() functions.
  • subscribe to the Kendo Map events through the markup. See the ClientEvents inner tag.
  • use the event data that is passed—to change the location/zoom controls and populate the events history. See the syncConfigurationControls() function and the rest of the event handlers.
Change the coordinates and zoom level to modify the map. Panning or zooming the map will also update the data in the textboxes and in the dropdown.
  • DefaultVB.aspx
  • scripts.js
<%@ Page Title="" Language="VB"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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" />
    <div class="demo-container size-auto">
        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="4" MaxZoom="18">
            <CenterSettings Latitude="30.455" Longitude="-84.2533" />
            <LayersCollection>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                    Attribution="&copy; <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
            </LayersCollection>
            <ClientEvents 
                OnInitialize="logInitialize"
                OnLoad="map_load"
                OnClick="logClick"
                OnPan="logPan"
                OnPanEnd="logPanEnd"
                OnReset="logReset"
                OnZoomStart="logZoomStart"
                OnZoomEnd="logZoomEnd" />
        </telerik:RadMap>
    </div>
    <qsf:EventLogConsole runat="server" AllowClear="true" />
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="rntb_latitude" Label="Latitude" Value="30.455" MinValue="-90" MaxValue="90" Size="Medium" runat="server">
                                <NumberFormat DecimalDigits="4" />
                                <ClientEvents OnValueChanged="setCenterPosition" OnLoad="latitudeBox_load" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="rntb_longitude" Label="Longitude" Value="-84.2533" MinValue="-180" MaxValue="180" Size="Medium" runat="server">
                                <NumberFormat DecimalDigits="4" />
                                <ClientEvents OnValueChanged="setCenterPosition" OnLoad="longitudeBox_load" />
                            </qsf:NumericTextBox>
                            <qsf:DropDownList runat="server" ID="rddl_zoom" Label="Zoom level" OnClientItemSelected="setZoomLevel" Size="Narrow" OnClientLoad="zoomBox_load">
                                <Items>
                                    <telerik:DropDownListItem Text="1 (min)" Value="1" />
                                    <telerik:DropDownListItem Text="2" Value="2" />
                                    <telerik:DropDownListItem Text="3" Value="3" />
                                    <telerik:DropDownListItem Text="4" Value="4" Selected="true" />
                                    <telerik:DropDownListItem Text="5" Value="5" />
                                    <telerik:DropDownListItem Text="6" Value="6" />
                                    <telerik:DropDownListItem Text="7" Value="7" />
                                    <telerik:DropDownListItem Text="8" Value="8" />
                                    <telerik:DropDownListItem Text="9" Value="9" />
                                    <telerik:DropDownListItem Text="10" Value="10" />
                                    <telerik:DropDownListItem Text="11" Value="11" />
                                    <telerik:DropDownListItem Text="12" Value="12" />
                                    <telerik:DropDownListItem Text="13" Value="13" />
                                    <telerik:DropDownListItem Text="14" Value="14" />
                                    <telerik:DropDownListItem Text="15" Value="15" />
                                    <telerik:DropDownListItem Text="16" Value="16" />
                                    <telerik:DropDownListItem Text="17" Value="17" />
                                    <telerik:DropDownListItem Text="18 (max)" Value="18" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance