Lesson 3 - Load Shapes Data from a Shapefile
- 3 minutes to read
This is the third tutorial of the Silverlight Map Control Getting Started series. It will guide you through the process of creating a map application with a shape loaded from an external Shapefile.
This tutorial consists of the following steps.
#Step 1. Add a Map Control
To add a Map control to the application, perform the following steps.
- Run MS Visual Studio 2010, 2012 or 2013.
- Create a new Silverlight Application project.
- Add the MapControl component to your project as you did in Lesson 1.
After this, your XAML may look like following. If it does not, you can overwrite your code with:
<UserControl
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:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
x:Class="XpfMapLesson3.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<dxm:MapControl/>
</Grid>
</UserControl>
#Step 2. Load Shapes from Shapefile
Shape data can be stored in numerous 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 that are shipped with the Silverlight Map Control demo. By default, these files are installed in the following folder.
C:\Users\Public\Documents\DevExpress Demos 14.2\Components\Silverlight\CS\MapDemo\Data\Shapefiles\Maps\
Copy Countries.shp and Countries.dbf files to the ShapeData subdirectory of your project and include these files into your solution.
For both files, set the Build Action property to Resource.
Add a VectorLayer object to the MapControl.Layers collection of the Map control.
For the added VectorLayer object, assign an ShapefileLoader object to the VectorLayer.ShapeLoader property.
For the ShapefileLoader object, set the ShapefileLoader.FileUri property value to "XpfMapLesson3;component/ShapeData/Countries.shp".
Then, click OK to close the window and apply changes.
After performing these steps, your XAML should look like this.
<UserControl
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:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
x:Class="XpfMapLesson3.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<dxm:MapControl>
<dxm:VectorLayer SelectedFill="{x:Null}">
<dxm:VectorLayer.ShapeLoader>
<dxm:ShapefileLoader FileUri="ShapeData/Countries.shp"/>
</dxm:VectorLayer.ShapeLoader>
</dxm:VectorLayer>
</dxm:MapControl>
</Grid>
</UserControl>
#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.
Create a ChoroplethColorizer object and assign it to MapControl.Colorizer property.
Set the ChoroplethColorizer.RangeStops property value to "0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 15000000".
Specify a color collection for the colorizer. To do this, insert the following XAML to the colorizer definition.
<!-- --> <dxm:ChoroplethColorizer> <dxm:ChoroplethColorizer.Colors> <Color>#5F8B95</Color> <Color>#799689</Color> <Color>#A2A875</Color> <Color>#CEBB5F</Color> <Color>#F2CB4E</Color> <Color>#F1C149</Color> <Color>#E5A84D</Color> <Color>#D6864E</Color> <Color>#C56450</Color> <Color>#BA4D51</Color> </dxm:ChoroplethColorizer.Colors> <!-- -->Specify the ChoroplethColorizer.ValueProvider property. To do this, create a ShapeAttributeValueProvider object, set "GDP_MD_EST" to ShapeAttributeValueProvider.AttributeName and then assign this object to the ValueProvider property. The following XAML shows how to do this.
<!-- --> <dxm:ChoroplethColorizer> <dxm:ChoroplethColorizer.ValueProvider> <dxm:ShapeAttributeValueProvider AttributeName="GDP_MD_EST"/> </dxm:ChoroplethColorizer.ValueProvider> <!-- -->Add a ColorScaleLegend to the colorizer.
Then, configure its properties as follows.
Now, the XAML should look like the following.
<UserControl
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:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
x:Class="XpfMapLesson3.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<dxm:MapControl>
<dxm:MapControl.Colorizer>
<dxm:ChoroplethColorizer>
<dxm:ChoroplethColorizer.RangeStops>
0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 1.5E+08
</dxm:ChoroplethColorizer.RangeStops>
<dxm:ChoroplethColorizer.ValueProvider>
<dxm:ShapeAttributeValueProvider AttributeName="GDP_MD_EST"/>
</dxm:ChoroplethColorizer.ValueProvider>
<dxm:ChoroplethColorizer.Colors>
<Color>#5F8B95</Color>
<Color>#799689</Color>
<Color>#A2A875</Color>
<Color>#CEBB5F</Color>
<Color>#F2CB4E</Color>
<Color>#F1C149</Color>
<Color>#E5A84D</Color>
<Color>#D6864E</Color>
<Color>#C56450</Color>
<Color>#BA4D51</Color>
</dxm:ChoroplethColorizer.Colors>
<dxm:ChoroplethColorizer.Legend>
<dxm:ColorScaleLegend Header="GDP by Countries" Description="In US dollars"
RangeStopsFormat="0,B"/>
</dxm:ChoroplethColorizer.Legend>
</dxm:ChoroplethColorizer>
</dxm:MapControl.Colorizer>
<dxm:VectorLayer SelectedFill="{x:Null}">
<dxm:VectorLayer.ShapeLoader>
<dxm:ShapefileLoader FileUri="XpfMapLesson3;component/ShapeData/Countries.shp"/>
</dxm:VectorLayer.ShapeLoader>
</dxm:VectorLayer>
</dxm:MapControl>
</Grid>
</UserControl>
#Result
Run the application and view the result.
