New to Telerik UI for WinUI? Download free 30-day trial

Custom Azure Maps Provider for the Azure Maps Services

The RadMap control does not provide an out-of-the-box provider for the Azure Maps services. This article will showcase how to implement a custom provider that works with these services. To do so, derive from the TiledProvider class and provide a custom TiledMapSource that will request tiled data from the Azure Maps services.

Creating a custom TiledProvider class

public class CustomAzureMapProvider : TiledProvider, ICloneable 
{ 
    /// <summary>  
    /// Initializes a new instance of the MyMapProvider class.  
    /// </summary>  
    public CustomAzureMapProvider() 
            : base() 
    { 
        CustomAzureMapSource source = new CustomAzureMapSource(); 
        this.MapSources.Add(source.UniqueId, source); 
        this.SetMapSource(source.UniqueId); 
    } 
 
    /// <summary>  
    /// Returns the SpatialReference for the map provider.  
    /// </summary>  
    public override ISpatialReference SpatialReference 
    { 
        get 
        { 
            return new MercatorProjection(); 
        } 
    } 
 
    public object Clone() 
    { 
        var newProvider = new CustomAzureMapProvider(); 
 
        return newProvider; 
    } 
} 
 
public class CustomAzureMapSource : TiledMapSource 
{ 
    internal const string UrlFormat = "https://atlas.microsoft.com/map/tile?subscription-key=&lt;ApiKey&gt;&amp;api-version=2024-04-01&amp;tilesetId=microsoft.base.road&amp;zoom={zoom}&amp;x={x}&amp;y= {y}"; 
 
    /// <summary>  
    /// Initializes a new instance of the MyMapSource class.  
    /// </summary>  
    public CustomAzureMapSource() 
          : base(1, 20, 256, 256) 
    { 
    } 
 
    /// <summary>  
    /// Initialize provider.  
    /// </summary>  
    public override void Initialize() 
    { 
        this.RaiseInitializeCompleted(); 
    } 
 
    /// <summary>  
    /// Gets the image URI.  
    /// </summary>  
    /// <param name="tileLevel">Tile level.</param>  
    /// <param name="tilePositionX">Tile X.</param>  
    /// <param name="tilePositionY">Tile Y.</param>  
    /// <returns>URI of image.</returns>  
    protected override Uri GetTile(int tileLevel, int tilePositionX, int tilePositionY) 
    { 
        int zoomLevel = ConvertTileToZoomLevel(tileLevel); 
        string url = UrlFormat.Replace("{x}", tilePositionX.ToString()); 
        url = url.Replace("{y}", tilePositionY.ToString()); 
        url = url.Replace("<ApiKey>", MapHelper.AzureKey); 
        url = url.Replace("{zoom}", zoomLevel.ToString()); 
        return new Uri(url); 
    } 
} 
 
internal static class MapHelper 
{ 
    public static string AzureKey = "Your Subscription Key"; 
} 

Setting the CustomAzureMapProvider to the Provider property of RadMap

<telerik:RadMap x:Name="radMap"> 
    <telerik:RadMap.Provider> 
        <local:CustomAzureMapProvider/> 
    </telerik:RadMap.Provider> 
</telerik:RadMap> 
RadMap with custom provider for the Azure Maps services

RadMap with custom provider for the Azure Maps services

In this article
Not finding the help you need?