Lesson 1 - Connect to the Images Provider

• Aug 03, 2020
• 5 minutes to read

This is the first tutorial of the WPF Map Control Getting Started series. It will guide you through the process of creating a simple map application that connects to the Bing Maps data provider.

This tutorial consists of the following steps.

• Step 1. Add a Map Control
• Step 2. Connect to an Images Provider
• Step 3. Customize the Images Provider
• Step 4. Adding a Mini Map
• Result

Step 1. Add a Map Control

In this step, we will perform the common actions that are required when you add a Map control to your application.

• Run MS Visual Studio 2012, 2013, 2015 or 2017.

  Note

  In this lesson, Visual Studio 2013 is used.

• Create a new WPF Application project.

• Add the MapControl component to your project.

  To do this, locate the MapControl item in a Visual Studio toolbox on the DX.18.2: Data & Analytics tab and drop it onto the main window.

  

• Right-click the MapControl object and choose the Layout | Reset All option in the context menu. This will stretch the Map control to fill the whole window.

  

• Sometimes, you may need to show a specific area on a map. To do this, set the required value to the MapControl.CenterPoint property.

  For example, set the MapControl.CenterPoint property value to 45,18 to place Europe in the center of the map.

  

• To specify the current zoom level for all map layers, use the MapControl.ZoomLevel property (e.g., set its value to 4).

  

• After this, your XAML may look like the following. If it doesn’t, you can overwrite your code with:

  XAML

  <Window xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"  
          x:Class="Wpf_MapControl_Lesson1.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525">
      <Grid>
          <dxm:MapControl Name="mapControl1" CenterPoint="45,18" ZoomLevel="4"/>
      </Grid>
  </Window>
  

Note

There are alternative ways to add a WPF Map Control to the project. For more information refer to:

• How to: Add a Map Control via XAML;
• How to: Add a Map Control via Code;
• How to: Connect to Bing Maps via Instant Layout Assistant.

Now, you have a Map control added to our application. Continue and connect this control to the Bing Maps data provider.

Step 2. Connect to Images Provider

The Map control can display multiple layers to draw images or vector elements. To load images from a specific image tiles provider, use the ImageLayer object.

In this lesson, the Bing Maps image tiles provider is used.

Note

Also, it is possible to use the OpenStreetMap image tiles provider (to learn more, refer to the How to: Load Image Tiles from OpenStreetMap topic) or load image tiles from another source (refer to the How to: Load Image Tiles from Another Source topic).

• Locate the MapControl.Layers property in a Properties window and click the ellipsis button to invoke the Layers collection editor.

  

• In the invoked LayerBase Collection Editor, choose the ImageLayer type and click Add.

  

• For the newly created layer, choose the ImageLayer.DataProvider property and set it to BingMapDataProvider.

  

Now your current XAML should look like this.

XAML

<Window xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"  
        x:Class="Wpf_MapControl_Lesson1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxm:MapControl CenterPoint="45,18" ZoomLevel="4" >
            <dxm:ImageLayer>
                <dxm:ImageLayer.DataProvider>
                    <dxm:BingMapDataProvider/>
                </dxm:ImageLayer.DataProvider>
            </dxm:ImageLayer>
        </dxm:MapControl>
    </Grid>
</Window>

Note

• There are alternative ways of connecting to Bing Maps. For more information refer to:

  • How to: Load Image Tiles from Bing Maps;
  • How to: Connect to Bing Maps Using a Smart Tag;
  • How to: Connect to Bing Maps via Instant Layout Assistant.

• If you run the application right now, you will get the following window with an error message on it.

  The specified Bing Maps key is invalid. To create a developer account, refer to https://www.microsoft.com/en-us/maps/create-a-bing-maps-key

  To learn more about how to avoid this error, please refer to the following tutorial: How to: Get a Bing Maps Key.

Step 3. Customize the Images Provider

The BingMapDataProvider object should be configured before use. To perform configuration, do the following.

• To use map images in a Bing Maps format, you need to specify your valid Bing Maps key using the BingMapDataProvider.BingKey property.

  

• The BingMapDataProvider can show map images of three kinds: BingMapKind.Area, BingMapKind.Road and BingMapKind.Hybrid (by default). To change the current map kind, modify the BingMapDataProvider.Kind property value (or leave the Hybrid value).

  

  Then, click OK to close the window and apply changes.

  In this step, your XAML should look like this.

  XAML

  <Window xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"  
          x:Class="Wpf_MapControl_Lesson1.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525">
      <Grid>
          <dxm:MapControl CenterPoint="45,18" ZoomLevel="4" >
              <dxm:ImageLayer>
                  <dxm:ImageLayer.DataProvider>
                      <dxm:BingMapDataProvider BingKey="YOUR KEY HERE"/>
                  </dxm:ImageLayer.DataProvider>
              </dxm:ImageLayer>
          </dxm:MapControl>
      </Grid>
  </Window>
  

Step 4. Adding a Mini Map

Sometimes, you may need to show a mini map. Do the following to do so.

• Locate the MapControl.MiniMap property and click the New button.

  

• Specify alignment of the mini map. To do this, set the MiniMap.Alignment property value to MiniMapAlignment.TopRight.

  

• Configure behavior of the mini map. To do this, assign FixedMiniMapBehavior to the MiniMap.Behavior property. Set its FixedMiniMapBehavior.CenterPoint and FixedMiniMapBehavior.ZoomLevel as shown below.

  

• Add and configure the MiniMapImageTilesLayer object to the MiniMap.Layers collection, as the ImageLayer was previously added to the map layers collection (the second step of this lesson)

  

Now the Map application is ready. This is its XAML.

XAML

<Window xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"  
        x:Class="Wpf_MapControl_Lesson1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <dxm:MapControl CenterPoint="45,18" ZoomLevel="4" >
            <dxm:MapControl.MiniMap>
                <dxm:MiniMap Alignment="TopRight">
                    <dxm:MiniMap.Behavior>
                        <dxm:FixedMiniMapBehavior CenterPoint="45, 18"/>
                    </dxm:MiniMap.Behavior>
                    <dxm:MiniMapImageTilesLayer>
                        <dxm:BingMapDataProvider BingKey="YOUR BING KEY"/>
                    </dxm:MiniMapImageTilesLayer>
                </dxm:MiniMap>
            </dxm:MapControl.MiniMap>
            <dxm:ImageLayer>
                <dxm:ImageLayer.DataProvider>
                    <dxm:BingMapDataProvider BingKey="YOUR BING KEY"/>
                </dxm:ImageLayer.DataProvider>
            </dxm:ImageLayer>
        </dxm:MapControl>
    </Grid>
</Window>

Result

Run the application and see the result.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3606.