How to: Add a Map Control at Runtime

• Jul 14, 2021
• 2 minutes to read

This example demonstrates how to add a MapControl to a WPF application and connect the map to the BingMapDataProvider at runtime.

1. Run Microsoft Visual Studio 2012, 2013, 2015, 2017 or 2019.

2. Create a new WPF Application project or open an existing one.

3. Open the Solution Explorer, right-click References and choose Add Reference….

   Add references to the following assemblies in the Extensions tab:

   • DevExpress.Xpf.Map.v21.2
   • DevExpress.Map.v21.2.Core
   • DevExpress.Data.v21.2

   

   Click OK.

4. Handle the Window’s Loaded event as follows:

   C#

   using System.Windows;
   using DevExpress.Xpf.Map;
   
   
   namespace DXMap_Runtime {
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : Window {
           public MainWindow() {
               InitializeComponent();
           }
   
           private void Window_Loaded(object sender, RoutedEventArgs e) {
               // Create a map control and add it to the window.
               MapControl map = new MapControl();
               this.Content = map;
   
               // Create a layer.
               ImageLayer layer = new ImageLayer() {
                   DataProvider = new BingMapDataProvider() {
                       BingKey = "Insert your Bing Maps key here.",
                       Kind = BingMapKind.Road
                   }
               };
               map.Layers.Add(layer);
               map.ZoomLevel = 4;
               map.CenterPoint = new GeoPoint(40, -100);
           }
       }
   }
   

   VB.NET

   Imports System.Windows
   Imports DevExpress.Xpf.Map
   
   Namespace DXMap_Runtime
   
       Partial Public Class MainWindow
           Inherits Window
   
           Public Sub New()
               InitializeComponent()
           End Sub
   
           Private Sub Window_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
               ' Create a map control and add it to the window.
               Dim map As New MapControl()
               Me.Content = map
   
               ' Create a layer.
               Dim layer As New ImageLayer() With {
                   .DataProvider = New BingMapDataProvider() With {
                       .BingKey = "Insert your Bing Maps key here.",
                       .Kind = BingMapKind.Road
                   }
               }
               map.Layers.Add(layer)
               map.ZoomLevel = 4
               map.CenterPoint = New GeoPoint(40, -100)
           End Sub
   
       End Class
   End Namespace
   

   The example above uses the following entities:

   Class	Description
   MapControl	A Map Control to display raster and vector maps. Supports both popular map services (Bing Maps and OpenStreetMap) and custom map data servers inside your corporate network.
   ImageLayer	Displays map images obtained from the map image data provider.
   BingMapDataProvider	The class that loads map images from the Bing Maps data provider.

5. Run the project to see the result.

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e3610/how-to-programmatically-add-a-map-control-at-runtime.