[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Collapse]Map Control
   [Collapse]Getting Started
     Lesson 1 - Connect to the Images Provider
     Lesson 2 - Load a Vector Cartesian Map
     Lesson 3 - Add Analytical Data to a Geographical Map
    Layers
   [Expand]Coordinate Systems
   [Expand]Map Image Data
   [Expand]GIS Data
   [Expand]Vector Data
   [Expand]Visual Elements
   [Expand]End-User Interaction
   [Expand]Examples
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 1 - Connect to the Images Provider

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.

Expanded 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.19.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:

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.

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

Note

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

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

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

Expanded See Also

Is this topic helpful?​​​​​​​