Lesson 1 - Load Image Tiles to a Map

• Dec 18, 2023
• 4 minutes to read

This step-by-step tutorial describes how to connect a map to the Bing Maps imagery service and load image tiles. It also shows how to configure main map settings like the center point and zoom level.

Step 1. Add a Map Control

• Run Microsoft Visual Studio (VS 2022 is used in this tutorial).

• Create a new WPF Application project.

• Add the MapControl component to your project.

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

  

  This action adds the DevExpress.Wpf.Map NuGet package if you add the MapControl to a .NET Core Application.

  If you add the MapControl to a .NET Framework Application, the following libraries are added:

  • DevExpress.Xpf.Map.v24.1
  • DevExpress.Map.v24.1.Core
  • DevExpress.Data.v24.1

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

  

• Specify the MapControl.CenterPoint property to focus the map on a specified point. For example, set the CenterPoint property to 45, 18 to show Europe in the center of the map.

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

After this the markup looks as follows:

XAML

<Window ...
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map">
    <Grid>
        <dxm:MapControl CenterPoint="45,18" ZoomLevel="4"/>
    </Grid>
</Window>

If you wish to add a map at runtime, refer to the following page: How to: Add a Map Control at Runtime.

Step 2. Connect to an Imagery Service

The Map Control can load raster and vector tiles from different sources. To show tiles, the Map Control uses image layers. Follow the steps below to display image tiles from Bing Maps service:

• Invoke the Map Control’s smart tag menu or Quick Actions and select the Connect to Bing Maps action.

  

  This action adds an ImageLayer to the MapControl.Layers collection and assigns a BingMapDataProvider to the ImageLayer.DataProvider property.

  The resulting markup looks as follows:

  XAML

  <dxm:MapControl CenterPoint="45,18" ZoomLevel="4">
      <dxm:ImageLayer>
          <dxm:BingMapDataProvider Kind="Area" BingKey="INSERT_BING_MAPS_KEY"/>
      </dxm:ImageLayer>
  </dxm:MapControl>
  

  Note: Since the Layers and DataProvider properties are XAML content properties, you can omit the corresponding <Layers> and <DataProvider> tags in the markup.

• Specify the BingMapDataProvider.BingKey property to use Bing Maps services. For more information, see the following help topic: How to: Get a Bing Maps Key.

• Define the BingMapDataProvider.Kind property to change the theme that applies to image tiles. For example, set it to RoadLight.

  XAML

  <dxm:BingMapDataProvider Kind="RoadLight"/>
  

Step 3. Add a Mini Map

Add a mini map to show an additional miniature map with a smaller zoom level at the top-right corner of the map. To add the mini map, follow the steps below:

• Initialize the MapControl.MiniMap property with a MiniMap object.

• Similar to regular image layers, you can load tiles from different sources to the mini map. To do this, add a MiniMapImageTilesLayer to the MiniMap.Layers collection. Then, set the mini map’s DataProvider property to a BingMapDataProvider object. Define the BingMapDataProvider’s BingKey and Kind as you did in the Step 2.

  Note: Since the Layers and DataProvider properties are XAML content properties, you can omit the corresponding <Layers> and <DataProvider> tags in the markup.

• The Map Control supports different modes that specify how the mini map behaves when you navigate within it. This tutorial shows how to enable Fixed behavior. In this mode, the mini map’s zoom level and a center point are fixed.

• Set the MiniMap.Alignment property to TopRight to specify the mini map’s position.

XAML

<dxm:MapControl.MiniMap>
    <dxm:MiniMap Alignment="TopRight">
        <dxm:MiniMap.Behavior>
            <dxm:FixedMiniMapBehavior CenterPoint="45, 18" ZoomLevel="1"/>
        </dxm:MiniMap.Behavior>
        <dxm:MiniMapImageTilesLayer>
            <dxm:BingMapDataProvider Kind="RoadLight" BingKey="INSERT_BING_MAPS_KEY" />
        </dxm:MiniMapImageTilesLayer>
    </dxm:MiniMap>
</dxm:MapControl.MiniMap>

Results

The code snippet below shows the resulting map:

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:GettingStartedLesson1"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map" 
        x:Class="GettingStartedLesson1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="360" Width="640">
    <Grid>
        <dxm:MapControl CenterPoint="45,18" ZoomLevel="4">
            <dxm:MapControl.MiniMap>
                <dxm:MiniMap Alignment="TopRight">
                    <dxm:MiniMap.Behavior>
                        <dxm:FixedMiniMapBehavior CenterPoint="45, 18" 
                                                  ZoomLevel="1"/>
                    </dxm:MiniMap.Behavior>
                    <dxm:MiniMapImageTilesLayer>
                        <dxm:BingMapDataProvider Kind="RoadLight" 
                                                 BingKey="INSERT_BING_MAPS_KEY" />
                    </dxm:MiniMapImageTilesLayer>
                </dxm:MiniMap>
            </dxm:MapControl.MiniMap>
            <dxm:ImageLayer>
                <dxm:BingMapDataProvider Kind="RoadLight" 
                                         BingKey="INSERT_BING_MAPS_KEY"/>
            </dxm:ImageLayer>
        </dxm:MapControl>
    </Grid>
</Window>

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e3606/map-for-wpf-load-image-tiles-to-a-map.

Run the application to see the resulting map:

Next Steps

Lesson 2 - Load a Vector Cartesian Map

This tutorial explains how to show vector shapes in the Cartesian coordinate system.

GIS Data

This topic lists GIS services that allow you to receive information related to map locations.

Generate Vector Items Automatically

This topic explains how to show map vector shapes over the map. For example, you can use this approach to show map pushpins over the geographical map created in this tutorial.