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

Tile Layers

  • Demo Configurator
Map Tile Service:OpenStreetMap

RadMap lets you load maps from different Web Map Tile Services by using a MapLayer with Type=Tile. This demo shows a sample configuration for a few free providers that you can see in the code-behind. You can switch between the different map providers through the Map Tile Service dropdown.

The main properties you need to set for the MapLayer are:

  • Type should be set to Tile
  • UrlTemplate should link the desired service in the proper format. You can find examples in the Value properties of the Map Tile Service dropdown.
  • The Attribution property is used to provide a copyright notice about the map service owners.

You can find more details on the configuration options of the map layer in the Tile Layers help article.

The services used to provide the maps must conform to the OSGeo specifications. You can read more about them in the following resources:

Important: to use the Bing provider, you need a valid key from Microsoft. The one used for this demo is valid only for the Telerik domain. Instructions on obtaining one for your application are provided in the Create a Bing Map key article from Microsoft.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Map.TileLayers.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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" Width="100%" Height="500">
            <CenterSettings Latitude="39.639537564366705" Longitude="-92.548828125" />
            <LayerDefaultsSettings>
                <TileSettings Subdomains="a,b,c" />
            </LayerDefaultsSettings>
        </telerik:RadMap>
    </div>

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="serviceDDList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMap1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <qsf:DropDownList runat="server" ID="serviceDDList" AutoPostBack="true" Label=" Map Tile Service:">
                        <Items>
                            <telerik:DropDownListItem Text="OpenStreetMap" Value="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png" Selected="true" />
                            <telerik:DropDownListItem Text="OpenCycleMap" Value="http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png" />
                            <telerik:DropDownListItem Text="ThunderForest" Value="https://#= subdomain #.tile.thunderforest.com/cycle/#= zoom #/#= x #/#= y #.png" />
                            <telerik:DropDownListItem Text="Bing" Value="Bing" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance