[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
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [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
   [Expand]Coordinate Systems
   [Expand]Map Image Data
   [Expand]GIS Data
   [Expand]Vector Data
   [Expand]Visual Elements
   [Expand]End-User Interaction
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [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
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[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 2 - Load a Vector Cartesian Map

This is the second tutorial in the Getting Started series for the Map control. It will guide you through the process of creating a simple map application that draws vector data using Cartesian coordinates.

The DevExpress WPF MapControl supports displaying both Geographical and Cartesian maps. The Geographical maps usually show geospatial data using geographical coordinates (latitude and longitude), while Cartesian maps use X and Y coordinates to draw building plans or any other Cartesian data.

This tutorial consists of the following steps.

Expanded Step 1. Add a Map Control

  • Run Microsoft Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Create a new WPF Application project and add the MapControl component to it. (See the first step in Lesson 1 to learn how to do this).

After these steps, the XAML should look as follows. If it does not, you can override your code with the following.

Expanded Step 2. Customize the Map Control

Follow these steps below to prepare the Map control to draw a Cartesian map and customize control settings.

After this, the XAML should look as follows.

Expanded Step 3. Load Vector Data

Shape data can be stored in numerous existing data formats. The Map control supports loading data from Shapefile and KML file formats. To load data from a Shapefile, do the following.

For this lesson, we can use one of the Shapefiles shipped with the WPF Map Control demo. By default, these files are installed in the following folder.

C:\Users\Public\Documents\DevExpress Demos 19.2\Components\Components\Data\Hotels\

After you perform these steps, your XAML should look like following.

Run the application. It should look like following.

When you look at the map, rooms of the one type can't be easily distinguished from rooms of another type. Colorize different room types using different colors. Use the Colorizers to solve this.

Expanded Step 4. Customize a Colorizer

To get this done, do the following.

As a result, the XAML should look like following.

Run the application. It should look like following.

Now different types of rooms have different colors, but despite displaying this information, you cannot determine the type of the room it is. Let us add a legend to solve this.

Expanded Step 5. Customize a Legend

To add a legend to the Map control, do the following.

  • Locate the MapControl.Legends property in the Properties window, and click the ellipsis button to invoke Legends Editor. Choose the ColorListLegend from a drop-down list and click the Add button.

  • Set the MapLegendBase.Header property value to Room Type.

  • Bind the ItemsLayerLegend.Layer property to the vector layer. For this click the property marker and select the Create Data Binding... item.

    In the invoked the Create Data Binding dialog select the previously added vector layer and click OK.

The application is completed.

Expanded Result

The complete code of the application is represented below.

Run the application to see the result.

Expanded See Also

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