Lesson 3 - Add Analytical Data to a Geographical Map

  • 6 minutes to read

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.

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.

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 20.1\Components\Data folder.

    Lesson2_IncludeInProject

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

    BuildActionToResource

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 property to sochi2014.xml.

    MapControl_XmlDataProvider_Source

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

<Window.Resources>
    <XmlDataProvider x:Key="dataProvider" Source="sochi2014.xml"/>
</Window.Resources>

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.

<dxm:VectorLayer ToolTipPattern="{}{Name} &amp;#13;&amp;#10;Gold: %V0%&amp;#13;&amp;#10;Silver: %V1%&amp;#13;&amp;#10;Bronze: %V2%&amp;#13;&amp;#10;Total: %V%">
    <dxm:PieChartDataAdapter DataSource="{Binding Source={StaticResource dataSource}}" 
                             DataMember="Table1"
                             ItemIdDataMember="Country" 
                             ItemMinSize="20" 
                             ItemMaxSize="60">
        <dxm:PieChartDataAdapter.AttributeMappings>
            <dxm:MapItemAttributeMapping Member="Name" 
                                         Name="Name"/>
        </dxm:PieChartDataAdapter.AttributeMappings>
        <dxm:PieChartDataAdapter.MeasureRules>
            <dxm:MeasureRules RangeStops="1 10 20 30 40"/>
        </dxm:PieChartDataAdapter.MeasureRules>
        <dxm:PieChartDataAdapter.Mappings>
            <dxm:MapPieMappingInfo 
                Longitude="CapitalLon" 
                Latitude="CapitalLat" 
                SegmentValue="Quantity" 
                SegmentId="MedalClass"/>
        </dxm:PieChartDataAdapter.Mappings>
    </dxm:PieChartDataAdapter>
</dxm:VectorLayer>

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.

<dxm:VectorLayer>
    <!-- DataAdapter is here-->
    <dxm:VectorLayer.Colorizer>
        <dxm:KeyColorColorizer>
            <dxm:KeyColorColorizer.ItemKeyProvider>
                <dxm:IdItemKeyProvider/>
            </dxm:KeyColorColorizer.ItemKeyProvider>
            <dxm:KeyColorColorizer.Colors>
                <Color>#FFFFCF62</Color>
                <Color>#FFA9B5BC</Color>
                <Color>#FFE99876</Color>
            </dxm:KeyColorColorizer.Colors>
            <dxm:KeyColorColorizer.Keys>
                <dxm:ColorizerKeyItem Name="Gold">
                    <dxm:ColorizerKeyItem.Key>
                        <sys:Int32>1</sys:Int32>
                    </dxm:ColorizerKeyItem.Key>
                </dxm:ColorizerKeyItem>
                <dxm:ColorizerKeyItem Name="Silver">
                    <dxm:ColorizerKeyItem.Key>
                        <sys:Int32>2</sys:Int32>
                    </dxm:ColorizerKeyItem.Key>
                </dxm:ColorizerKeyItem>
                <dxm:ColorizerKeyItem Name="Bronze">
                    <dxm:ColorizerKeyItem.Key>
                        <sys:Int32>3</sys:Int32>
                     </dxm:ColorizerKeyItem.Key>
                 </dxm:ColorizerKeyItem>
            </dxm:KeyColorColorizer.Keys>
        </dxm:KeyColorColorizer>
    </dxm:VectorLayer.Colorizer>
</dxm:VectorLayer>

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

MapControl_Layer_LoadedData

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

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.

    MapControl_Legends_Add

  • Set the MapLegendBase.Header property to Medal Clount.

    MapControl_Legend_Header

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

    Lesson2_LegendLayer_Binding

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

    MapControl_Legend_LayerBinding

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

    Lesson3_MapControl_ColorListLayer

The XAML below shows how this can be done.

<dxm:MapControl CenterPoint="40,10" ZoomLevel="2" ToolTipEnabled="True">
<dxm:MapControl.Legends>
    <dxm:SizeLegend Header="Medal Count" Layer="{Binding ElementName=vectorLayer, Mode=OneWay}"/>
    <dxm:ColorListLegend Header="Medal Class" Layer="{Binding ElementName=vectorLayer, Mode=OneWay}"/>        
</dxm:MapControl.Legends>
<!-- -->
<dxm:VectorLayer x:Name="vectorLayer">
    <!-- -->
</dxm:VectorLayer>

Result

The full XAML should look like follows.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map" 
        x:Class="Wpf_MapControl_Lesson3.MainWindow"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <XmlDataProvider x:Key="dataProvider" Source="sochi2014.xml" XPath="/NewDataSet"/>
    </Window.Resources>

    <Grid>
        <dxm:MapControl CenterPoint="40,10" ZoomLevel="2" ToolTipEnabled="True">
            <!--region #Legends-->
            <dxm:MapControl.Legends>
                <dxm:SizeLegend Header="Medal Count" Layer="{Binding ElementName=vectorLayer}"/>
                <dxm:ColorListLegend Header="Medal Class" Layer="{Binding ElementName=vectorLayer}"/>
            </dxm:MapControl.Legends>
            <!--endregion #Legends-->
            <dxm:ImageTilesLayer>
                <dxm:ImageTilesLayer.DataProvider>
                    <dxm:BingMapDataProvider BingKey="YOUR BING KEY"/>
                </dxm:ImageTilesLayer.DataProvider>
            </dxm:ImageTilesLayer>
            <dxm:VectorLayer x:Name="vectorLayer" 
                             ToolTipPattern="{}{Name} &#13;&#10;Gold: %V0%&#13;&#10;Silver: %V1%&#13;&#10;Bronze: %V2%&#13;&#10;Total: %V%">
                <!--region #PieGeneration-->
                <dxm:VectorLayer.Data>
                    <dxm:PieChartDataAdapter DataSource="{Binding Source={StaticResource dataProvider}, XPath=Table1}" 
                                             ItemIdDataMember="Country" ItemMinSize="20" ItemMaxSize="60">
                        <dxm:PieChartDataAdapter.MeasureRules>
                            <dxm:MeasureRules RangeStops="1 10 20 30 40"/>
                        </dxm:PieChartDataAdapter.MeasureRules>
                        <dxm:PieChartDataAdapter.AttributeMappings>
                            <dxm:MapItemAttributeMapping Member="Name" Name="Name"/>
                        </dxm:PieChartDataAdapter.AttributeMappings>
                        <dxm:PieChartDataAdapter.Mappings>
                            <dxm:MapPieMappingInfo Latitude="CapitalLat" Longitude="CapitalLon" 
                                                   SegmentId="MedalClass" SegmentValue="Quantity"/>
                        </dxm:PieChartDataAdapter.Mappings>
                    </dxm:PieChartDataAdapter>
                </dxm:VectorLayer.Data>
                <!--endregion #PieGeneration-->
                <!--region #ColorizerAdding-->
                <dxm:VectorLayer.Colorizer>
                    <dxm:KeyColorColorizer>
                        <dxm:KeyColorColorizer.ItemKeyProvider>
                            <dxm:IdItemKeyProvider/>
                        </dxm:KeyColorColorizer.ItemKeyProvider>
                        <dxm:KeyColorColorizer.Colors>
                            <Color>#FFFFCF62</Color>
                            <Color>#FFA9B5BC</Color>
                            <Color>#FFE99876</Color>
                        </dxm:KeyColorColorizer.Colors>
                        <dxm:KeyColorColorizer.Keys>
                            <dxm:ColorizerKeyItem Name="Gold">
                                <dxm:ColorizerKeyItem.Key>
                                    <sys:Int32>1</sys:Int32>
                                </dxm:ColorizerKeyItem.Key>
                            </dxm:ColorizerKeyItem>
                            <dxm:ColorizerKeyItem Name="Silver">
                                <dxm:ColorizerKeyItem.Key>
                                    <sys:Int32>2</sys:Int32>
                                </dxm:ColorizerKeyItem.Key>
                            </dxm:ColorizerKeyItem>
                            <dxm:ColorizerKeyItem Name="Bronze">
                                <dxm:ColorizerKeyItem.Key>
                                    <sys:Int32>3</sys:Int32>
                                </dxm:ColorizerKeyItem.Key>
                            </dxm:ColorizerKeyItem>
                        </dxm:KeyColorColorizer.Keys>
                    </dxm:KeyColorColorizer>
                    <!--endregion #ColorizerAdding-->
                </dxm:VectorLayer.Colorizer>
            </dxm:VectorLayer>
        </dxm:MapControl>
    </Grid>
</Window>

Run the application to see the result.

MapBindingResult

See Also