How to: Load Image Tiles from OpenStreetMap

Dec 29, 2020
3 minutes to read

This example uses OpenStreetMapDataProvider to connect Map Control to the OpenStreetMap service.

Follow the steps below to display the OpenStreetMap geodata in the Map Control:

Use the ServicePointManager.SecurityProtocol property to specify the network security protocol before the InitializeComponent method call.
Create a MapControl object. Set the MapControl.Dock property to the DockStyle.Fill value to fit the Map Control to the form. Call the Add method to add the Map Control to the form’s control collection.
Create ImageLayer and use the MapControl.Layers.Add method to add this layer to the map.
Create an OpenStreetMapDataProvider object and assign it to the ImageLayer.DataProvider property. Specify the OpenStreetMapDataProvider.TileUriTemplate property to load data from an OSM server. Our example contains a sample template string that does not connect to an existing OSM server.
Handle the OpenStreetMapDataProvider.WebRequest event and use the e.UserAgent property to pass the user-agent HTTP header to the server.

Note

Specify a valid OSM server name in the OpenStreetMapDataProvider.TileUriTemplate property. For instance, you can set your own tile server, use a public OSM server or choose alternative OSM servers. For more information, refer to the following article: Tile Usage Policy.

View Example: How to: Load Image Tiles from OpenStreetMap

MainForm.cs
MainForm.vb

csharp

using System;
using System.Windows.Forms;
using DevExpress.XtraEditors;
using DevExpress.XtraMap;

namespace ConnectToOpenStreet {
    public partial class Form1 : Form {
        public Form1() {
            // Specify the network security protocol. 
            ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e) {
            // Create a Map Control.
            MapControl map = new MapControl();

            // Specify the map position on the form.           
            map.Dock = DockStyle.Fill;

            // Add the Map Control to the form.
            this.Controls.Add(map);

            // Create an image tiles layer and add it to the map.
            ImageLayer tileLayer = new ImageLayer();
            map.Layers.Add(tileLayer);            

            // Create an Open Street Map data provider.
            OpenStreetMapDataProvider provider = new OpenStreetMapDataProvider();
            tileLayer.DataProvider = provider;

            // Specify the TileUriTemplate property to connect the Map Control to an OSM server. 
            provider.TileUriTemplate = "http://{0}.tile.MyCustomOSMProvider.org/{1}/{2}/{3}.png";

            provider.WebRequest += OnWebRequest;
        }
            // Pass the user-agent HTTP header to the OSM server.
        private void OnWebRequest(object sender, MapWebRequestEventArgs e) {
            e.UserAgent = "XtraMap Getting Started - Connect to OpenStreetMap";
        }
    }
}

Imports System
Imports System.Windows.Forms
Imports DevExpress.XtraEditors
Imports DevExpress.XtraMap

Namespace ConnectToOpenStreet
    Public Partial Class Form1
        Inherits Form

        Public Sub New()
            ' Specify the network security protocol. 
            ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a Map Control.
            Dim map As MapControl = New MapControl()

            ' Specify the map position on the form.           
            map.Dock = DockStyle.Fill

            ' Add the Map Control to the form.
            Me.Controls.Add(map)

            ' Create an image tiles layer and add it to the map.
            Dim tileLayer As ImageLayer = New ImageLayer()
            map.Layers.Add(tileLayer)

            ' Create an Open Street Map data provider.
            Dim provider As OpenStreetMapDataProvider = New OpenStreetMapDataProvider()
            tileLayer.DataProvider = provider

            ' Specify the TileUriTemplate property to connect the Map Control to an OSM server. 
            provider.TileUriTemplate = "http://{0}.tile.MyCustomOSMProvider.org/{1}/{2}/{3}.png"
            provider.WebRequest += AddressOf OnWebRequest
        End Sub
            ' Pass the user-agent HTTP header to the OSM server.
        Private Sub OnWebRequest(ByVal sender As Object, ByVal e As MapWebRequestEventArgs)
            e.UserAgent = "XtraMap Getting Started - Connect to OpenStreetMap"
        End Sub
    End Class
End Namespace