The requested page is not available for the requested platform. You are viewing the content for Default platform.

Lesson 2 - Create a Vector Map

  • 4 min to read

This is the second tutorial of the Map Control Getting Started series. It will guide you through the process of creating a map application with vector items loaded from an external Vector Format Files.

This tutorial consists of the following steps.

Step 1. Add a Map Control

To add a Map control to the application, Run MS Visual Studio 2017, create a new Universal | Blank App (Windows Universal) project and add the MapControl component to your project as you did in Lesson 1.

After this, your XAML should look as follows. If it does not, you can overwrite your code with:

<Page xmlns:Map="using:DevExpress.UI.Xaml.Map" 
    x:Class="MapLesson2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MapLesson2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Map:MapControl/>
    </Grid>
</Page>

Step 2. Load Shapes from a Shapefile

Shape data can be stored in numerous existing data formats. The Map control supports loading data from Shapefile and KML file formats. For this lesson, we can use one of the Shapefiles that are shipped with the DevExpress Map Control's demo. By default, these files are installed in the following folder.

C:\Users\Public\Documents\DevExpress Demos 18.2\Universal App ControlsFeatureDemo\CS\FeatureDemo\MapDemo\Data\Shapefiles\

To load data from a Shapefile, do the following.

After performing these steps, your XAML should look like this.

<Page xmlns:Map="using:DevExpress.UI.Xaml.Map" 
    x:Class="MapControl_Lesson2.MainPage"
    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="using:MapControl_Lesson2"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Map:MapControl>
            <Map:VectorFileLayer ToolTipPattern="{}{NAME}: ${GDP_MD_EST}M">
                <Map:ShapefileReader>
                    <Map:MapPackageFileSource FileName="Countries.shp"/>
                </Map:ShapefileReader>
            </Map:VectorFileLayer>
        </Map:MapControl>
    </Grid>
</Page>

Step 3. Colorize Shapes

Loaded country shapes can be colorized to represent, for example, a political or statistical map. To colorize data, do the following.

If you run the application now, it should look as follows.

lesson2-11-colorized-data

Right now, it is hard to determine which color belongs to which value range. To solve this problem, add a color legend.

Step 4. Add a Color Legend

Do this as follows:.

Result

The application code should look as follows.

<Page xmlns:Map="using:DevExpress.UI.Xaml.Map"
      x:Class="MapLesson2.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <Map:MapControl Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Map:MapControl.NavigationPanelOptions>
                <Map:NavigationPanelOptions ShowCoordinates="False"/>
            </Map:MapControl.NavigationPanelOptions>
            <Map:MapControl.Colorizer>
                <Map:ChoroplethColorizer RangeStops="0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 1500000">
                    <Map:ChoroplethColorizer.Colors>
                        <Color>#FFFF5A19</Color>
                        <Color>#FFE5E335</Color>
                        <Color>#FF6EC95C</Color>
                    </Map:ChoroplethColorizer.Colors>
                    <Map:ChoroplethColorizer.Legend>
                        <Map:ColorScaleLegend Header="GDP by Countries"
                                              Description="In US dollars"
                                              RangeStopsFormat="0,B"
                                              MinWidth="540"/>
                    </Map:ChoroplethColorizer.Legend>
                    <Map:ChoroplethColorizer.ValueProvider>
                        <Map:ShapeAttributeValueProvider AttributeName="GDP_MD_EST"/>
                    </Map:ChoroplethColorizer.ValueProvider>
                </Map:ChoroplethColorizer>
            </Map:MapControl.Colorizer>
            <Map:VectorFileLayer
                ToolTipPattern="{}{NAME}: ${GDP_MD_EST:0,B}">
                <Map:ShapefileReader>
                    <Map:ShapefileReader.FileSource>
                        <Map:MapPackageFileSource FileName="Assets\Countries.shp"/>
                    </Map:ShapefileReader.FileSource>
                </Map:ShapefileReader>
            </Map:VectorFileLayer>
        </Map:MapControl>
    </Grid>
</Page>

Run application to see the result.

lesson2-result

See Also