Lesson 1 - Connect to the Images Provider

  • 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

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, 2017 or 2019.

    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.20.1: Data & Analytics tab and drop it onto the main window.

    lesson1-01-add-map-control

  • 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.

    lesson1-02-reset-layout

  • 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.

    MapControl_CenterPoint

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

    MapControl_ZoomLevel

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

    <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:

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).

Now your current XAML should look like this.

<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

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.

    MapControl_BingMapsDataProvider_BingKey

  • 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).

    lesson1-05-area-kind

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

    In this step, your XAML should look like this.

    <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.

Now the Map application is ready. This is its 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.

lesson1-result

TIP

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

See Also