[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]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 3 - Add Analytical Data to a Geographical Map

The Map control can visualize data bound to geographical coordinates from various data sources (a database, an XML file, a list of records, etc.). This tutorial describes how to visualize chart data stored in an external XML file. The XML data source contains Olympic Games medals information.

The map control can visualize data from various data sources (a database, a list of records, etc.). In this example, you will use an external XML file.

To bind the map control to an XML data source, follow the instructions below.

Expanded Step 1. Add a Map Control

First, drop a MapControl onto the main form and connect the map to Bing Maps, as you did in Lesson 1. Then, modify its properties as follows.

Expanded Step 2. Configure a Data Source

In this step, the XML data will be added to the application. The map control will use this as the data source.

To add an XML data file to the project, do the following:

  • Copy the shipped with demos sochi2014.xml file to the Data subdirectory of the project and include this XML file into it.

    Note

    By default the required file is stored in the C:\Users\Public\Documents\DevExpress Demos 18.2\Components\Data folder.

  • Add the XML file to the WPF application resources.

    To do this, click the XML file in the Solution Explorer and in the Properties window, set the Build Action property to Resource.

The XML file was added to the application. Now a XML Data Provider should be added to the application to use an XML file as the data source.

  • Add a XmlDataProvider object to a collection of the window's static resources and set its x:Key property to dataSource.
  • Set the provider's Source propertys to sochi2014.xml.

Currently, the data source is ready to use. The following XAML demonstrates the Resources attribute of Window.

Expanded Step 3. Customize a Vector Layer

In this step, a VectorLayer object will be added to represent analytical data. To do this, do the following.

Now, the vector layer XAML should look as follows.

Expanded Step 4. Customize a Colorizer

In this step a colorizer will be customized. To do this, do the following.

The colorizer's XAML is below.

If the application is launched now, it should look like this.

Let us add color and size legends to the application to explain the colors and sizes of the pie charts.

Expanded Step 5. Adding Legends

To add legends to the application, do the following.

  • Locate the MapControl.Legends property in the Properties window and click the ellipsis button. In the invoked Legends Editor, choose SizeLegend and click the Add button.

  • Set the MapLegendBase.Header property to Medal Clount.

  • Bind the vector layer to the ItemsLayerLegend.Layer property. To do this, click the property marker and in the invoked list select Create Data Binding....

    In the invoked editor, select the layer and click OK.

  • Repeat the three previous steps to add a ColorListLegend with the Medal Class header.

The XAML below shows how this can be done.

Expanded Result

The full XAML should look like follows.

Run the application to see the result.

Expanded See Also

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