Image Tile Providers

• Nov 19, 2024
• 7 minutes to read

A MapControl uses image tile data providers to provide map image layers with data from imagery services. Specify the ImageLayer.DataProvider property to add tiles from imagery services to the map.

The Map control supports the following tile providers:

• Bing Maps Data Provider
• Azure Maps Data Provider
• OpenStreetMap Data Provider

Create a data provider to use another online imagery service or load image tiles from an intranet server.

You can also generate tiles from an image tile source at runtime.

Bing Maps Data Provider

This data provider loads image tiles from the MS Bing Maps.

Important

On May 21, 2024, Microsoft announced that Bing Maps for Enterprise and its API will be discontinued. Azure Maps will be a single unified enterprise mapping platform available from Microsoft.

We are working on API compatible with Azure Maps and expect to ship it with our next major release (v24.2).

If you have an existing license to Bing Maps for Enterprise, you can continue using our existing API. You need to transition to new API until June 30, 2025 (free and basic license) or until June 30, 2028 (enterprise license).

The last date you can get a new license to Bing Maps for Enterprise is June 30, 2025. If you do not have an existing license after that date, you would not be able to use our map controls with Bing Maps or Azure Maps (until we release the new API). During that time, you can use other map providers supported by our controls, such as OpenStreetMap.

Note

Read and accept the Microsoft® Bing™ Maps Platform APIs Terms Of Use before you use Bing Maps.

You should register a Bing Maps key to use the Bing Maps services. Refer to How to: Get a Bing Maps Key for more information.

Use the BingMapDataProvider class to work with Bing Maps:

XAML

<dxm:MapControl>
    <dxm:MapControl.Layers>
        <dxm:ImageLayer>
            <dxm:ImageLayer.DataProvider>
                <dxm:BingMapDataProvider BingKey="Your Bing Maps key here"
                                         Kind="Hybrid"/>
            </dxm:ImageLayer.DataProvider>
        </dxm:ImageLayer>
    </dxm:MapControl.Layers>
</dxm:MapControl>

Use the following API members to connect the Map Control to the Bing Maps service:

Member	Description
ImageLayer	Displays map images obtained from the map image data provider.
ImageLayer.DataProvider	Gets or sets the provider used to obtain images from an image source.
BingMapDataProvider	The class that loads map images from the Bing Maps data provider.
BingMapDataProvider.BingKey	Get or sets the key that is required to connect to the Bing Maps data provider.
BingMapDataProvider.Kind	Gets or sets a value specifying the type of images to be displayed on a map.

The Map Control also supports the following Bing Maps data providers:

• BingElevationDataProvider
• BingGeocodeDataProvider
• BingRouteDataProvider
• BingSearchDataProvider

Azure Maps Data Provider

This data provider loads image tiles from Microsoft Azure Maps.

Note

You should register an Azure Maps key to use the Azure Maps services. Refer to the following help topic for additional information: Create an Azure Maps Account.

Use the following API members to connect the Map Control to the Azure Maps service:

Member	Description
ImageLayer	Displays map images obtained from the map image data provider.
ImageLayer.DataProvider	Gets or sets the provider used to obtain images from an image source.
AzureMapDataProvider	Loads map images from the Azure Maps data provider.
AzureMapDataProvider.AzureKey	Specifies the key you receive when you create an Azure Maps account.

You can also specify the following settings for a map layer:

Member	Description
CultureName	Gets or sets the Culture name used to obtain data from Azure GIS services.
LocalizedView	Specifies the map view for a certain country/region.
Tileset	Specifies the tileset that the provider loads from the service.
Projection	Gets a projection used by the Azure Maps data provider.

The following example connects to Azure Maps and specifies map layers:

XAML

<dxm:MapControl>
    <dxm:ImageLayer>
        <dxm:AzureMapDataProvider Tileset="Imagery" AzureKey="your key"/>
    </dxm:ImageLayer>
    <dxm:ImageLayer>
        <dxm:AzureMapDataProvider Tileset="BaseLabelsRoad" AzureKey="your key"/>
    </dxm:ImageLayer>
</dxm:MapControl>

OpenStreetMap Data Provider

This data provider loads image tiles from the the OpenStreetMap service.

Note

Review the Copyright and License and Tile usage policy pages before using map images in the OpenStreetMap format.

You should provide the UserAgent parameter with a valid value to identify your application.

Use the OpenStreetMapDataProvider class to work with OpenStreetMap:

XAML

<dxm:MapControl>
    <dxm:MapControl.Layers>
        <dxm:ImageLayer>
            <dxm:ImageLayer.DataProvider>
                <dxm:OpenStreetMapDataProvider TileUriTemplate="http://{subdomain}.tile.MyCustomOSMProvider.org/{tileLevel}/{tileX}/{tileY}.png"
                                               WebRequest="OnWebRequest"/>
            </dxm:ImageLayer.DataProvider>
        </dxm:ImageLayer>
    </dxm:MapControl.Layers>
</dxm:MapControl>

C#

private void OnWebRequest(object sender, DevExpress.Xpf.Map.MapWebRequestEventArgs e) {
    e.UserAgent = "DevExpress OpenStreetMapProvider example";
}

VB.NET

Private Sub OnWebRequest(ByVal sender As Object, ByVal e As DevExpress.Xpf.Map.MapWebRequestEventArgs)
    e.UserAgent = "DevExpress OpenStreetMapProvider example"
End Sub

Use the following API members to connect the Map Control to the OpenStreetMap service:

Member	Description
ImageLayer	Displays map images obtained from the map image data provider.
ImageLayer.DataProvider	Gets or sets the provider used to obtain images from an image source.
OpenStreetMapDataProvider	The class that loads map images from a web resource that provides data in the OpenStreetMap format.
MapImageDataProviderBase.WebRequest	Occurs when the Map control sends a request to a web service.
OpenStreetMapDataProvider.TileUriTemplate	Gets or sets a template that is used to obtain image tiles from the current OpenStreetMap provider.
MapWebRequestEventArgs.UserAgent	Gets or sets the value of the user-agent HTTP header.

The Map Control also supports the following OpenStreetMap data providers:

• OsmGeocodeDataProvider
• OsmSearchDataProvider

Generate Tiles at Runtime

Perform the following steps to populate a map with custom tiles created at runtime:

• Create an ImageTileDataProvider object and assign it to the ImageLayer.DataProvider property.
• Create a class that inherits the ImageTileSource class.
• Implement the ImageTileSource.GetImageSource method that returns a bitmap for each tile based on its indices and the map control’s zoom level.
• Assign an instance of the class you developed to the ImageTileDataProvider.TileSource property.

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DXMapInMemoryTileProvider"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map" 
        x:Class="DXMapInMemoryTileProvider.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <dxm:MapControl>
            <dxm:ImageLayer x:Name="imageLayer"/>
        </dxm:MapControl>
    </Grid>
</Window>

C#

using DevExpress.Xpf.Map;
using System;
using System.Globalization;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace DXMapInMemoryTileProvider {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            ImageTileDataProvider tileDataProvider = new ImageTileDataProvider();
            tileDataProvider.TileSource = new SimpleTileGenerator();
            this.imageLayer.DataProvider = tileDataProvider;
        }
    }
    public class SimpleTileGenerator : ImageTileSource {
        Random rnd = new Random();
        public override string Name => nameof(SimpleTileGenerator);
        public override ImageSource GetImageSource(long x, long y, int level, Size size) {
            DrawingVisual drawingVisual = new DrawingVisual();
            using (DrawingContext drawingContext = drawingVisual.RenderOpen()) {
                FormattedText text = new FormattedText($"{x}:{y}:{level}", new CultureInfo("en-us"),
                                     FlowDirection.LeftToRight, new Typeface("Arial"), 14, Brushes.Black);
                drawingContext.DrawRectangle(new SolidColorBrush(Color.FromArgb(128, (byte)rnd.Next(255),
                                                                        (byte)rnd.Next(255), (byte)rnd.Next(255))), null, 
                                                                        new Rect(new Point(), size));
                drawingContext.DrawText(text, new Point(5, 5));
                drawingContext.Close();
            }
            RenderTargetBitmap bmp = new RenderTargetBitmap((int)size.Width, (int)size.Height, 96, 96, PixelFormats.Pbgra32);
            bmp.Render(drawingVisual);
            return bmp;
        }
        protected override MapDependencyObject CreateObject() {
            return new SimpleTileGenerator();
        }
    }
}

VB.NET

Imports DevExpress.Xpf.Map
Imports System
Imports System.Globalization
Imports System.Windows
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Namespace DXMapInMemoryTileProvider
    Public Partial Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
            Dim tileDataProvider As ImageTileDataProvider = New ImageTileDataProvider()
            tileDataProvider.TileSource = New SimpleTileGenerator()
            Me.imageLayer.DataProvider = tileDataProvider
        End Sub
    End Class
    Public Class SimpleTileGenerator
        Inherits ImageTileSource
        Private rnd As Random = New Random()
        Public Overrides ReadOnly Property Name As String
            Get
                Return NameOf(SimpleTileGenerator)
            End Get
        End Property
        Public Overrides Function GetImageSource(ByVal x As Long, ByVal y As Long, ByVal level As Integer, ByVal size As Size) As ImageSource
            Dim drawingVisual As DrawingVisual = New DrawingVisual()

            Using drawingContext As DrawingContext = drawingVisual.RenderOpen()
                Dim text As FormattedText = New FormattedText($"{x}:{y}:{level}", New CultureInfo("en-us"), FlowDirection.LeftToRight, New Typeface("Arial"), 14, Brushes.Black)
                drawingContext.DrawRectangle(New SolidColorBrush(Color.FromArgb(128, CByte(rnd.[Next](255)), CByte(rnd.[Next](255)), CByte(rnd.[Next](255)))), Nothing, New Rect(New Point(), size))
                drawingContext.DrawText(text, New Point(5, 5))
                drawingContext.Close()
            End Using
            Dim bmp As RenderTargetBitmap = New RenderTargetBitmap(CInt(size.Width), CInt(size.Height), 96, 96, PixelFormats.Pbgra32)
            bmp.Render(drawingVisual)
            Return bmp
        End Function

        Protected Overrides Function CreateObject() As MapDependencyObject
            Return New SimpleTileGenerator()
        End Function
    End Class
End Namespace

The Map Control stores the loaded tiles in cache. To customize cache parameters, use the MapControl.CacheOptions property.

Custom Image Data Provider

To develop a data provider, create a MapDataProviderBase class descendant and define a custom image tile source for it. This image tile source should be derived from MapTileSourceBase and provide a way to retrieve image tiles.

Example:

• How to: Load Image Tiles from a Local Directory