Colorizer
- 5 minutes to read
This document introduces the Map Colorizer, lists colorizer types, and explains how to create a colorizer and customize its settings in a map control.
The document consists of the following sections.
#Overview
The Colorizer is used to automatically choose colors for map shapes based on shape data. This feature can be applied to the following MapShape class descendants that utilize the MapShape.Fill property:
For example, it is possible to use the map colorizer to create GDP, population or political maps.
Before using this feature, you will need to perform the following actions.
1) Specify how the map control will obtain the map shapes to color.
This can be done in the following two ways:
- Add the shapes manually to the map VectorLayer via the VectorLayer.Items property.
- Use the datasource or the Vector Formats (a KML file or Shapefile) from which map shapes are obtained.
For example, shapes are loaded from shapefile into the Map Control, using the following XAML:
<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="XpfMapApplication.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<dxm:MapControl>
<dxm:VectorLayer>
<dxm:VectorLayer.ShapeLoader>
<dxm:ShapefileLoader FileUri="INSERT_FILE_URI"/>
</dxm:VectorLayer.ShapeLoader>
</dxm:VectorLayer>
</dxm:MapControl>
</Grid>
</UserControl>
Note that you need to specify a path to the Shapefile using the ShapefileLoader.FileUri property.
For more details on how to load a Shapefile, see the Lesson 3 - Load Shapes Data from a Shapefile tutorial.
Choose which colorizer type should be used in your application.
Currently, the following colorizer types are supported:
-
Represents the Choropleth colorizer, which shows statistical data over predefined regions (such as counties or states) by coloring or shading these regions.
-
Represents the Graph colorizer, which paints shapes that have a common border using different colors according to the Graph Coloring approach. For instance, the Graph colorizer can be used to create a political map.
NOTE
Shapes loaded from a NML file can only be colored by the Graph
To add the colorizer to the map control, assign one of the MapColorizer class descendants to the MapControl.Colorizer property of the Map control.
After you select a colorizer type, you can customize the map colorizer settings. The sections below describe how this can be done.
#Choropleth Colorizer
To customize the choropleth colorizer, perform the following steps:
- Specify range stops (data splits in ranges) for the colorizer using the ChoroplethColorizer.RangeStops property.
The following XAML shows how this can be done.
<!-- -->
<dxm:MapControl>
<dxm:MapControl.Colorizer>
<dxm:ChoroplethColorizer
RangeStops="0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 15000000">
</dxm:ChoroplethColorizer>
</dxm:MapControl.Colorizer>
<!-- -->
</dxm:MapControl>
<!-- -->
Specify a set of colors in the ColorCollection object, which is accessed via the MapColorizer.Colors property.
The colorizer automatically associates each color with the specified data range to colorize map shapes.
If you specify more ranges than colors, the colorizer will blend colors from the collection so, that the count of colors is equals to the count of range stops.
- Choose the value range distribution type you would like to use in the choropleth colorizer. The colorizer supports three types: ExponentialRangeDistribution, LinearRangeDistribution and LogarithmicRangeDistribution. To apply one of the range distribution types, use the ChoroplethColorizer.RangeDistribution property. By default, the linear range distribution is used.
To access information associated with a shape, specify the desired vector items attribute. For this, create a ShapeAttributeValueProvider object, set its attribute name (ShapeAttributeValueProvider.AttributeName) and assign it to the ChoroplethColorizer.ValueProvider property.
After performing these steps, your XAML may appear as follows:
<!-- -->
<dxm:MapControl>
<dxm:MapControl.Colorizer>
<dxm:ChoroplethColorizer RangeStops="0 3000 10000 18000 28000 44000 82000 185000 1000000 2500000 15000000">
<dxm:ChoroplethColorizer.RangeDistribution>
<dxm:ExponentialRangeDistribution/>
</dxm:ChoroplethColorizer.RangeDistribution>
<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.ValueProvider>
<dxm:ShapeAttributeValueProvider AttributeName="GDP_MD_EST" />
</dxm:ChoroplethColorizer.ValueProvider>
</dxm:ChoroplethColorizer>
</dxm:MapControl.Colorizer>
<dxm:MapControl.Layers>
<dxm:VectorLayer>
<dxm:VectorLayer.ShapeLoader>
<dxm:ShapefileLoader FileUri="/SLApplication;component/Data/Countries.shp"/>
</dxm:VectorLayer.ShapeLoader>
</dxm:VectorLayer>
</dxm:MapControl.Layers>
</dxm:MapControl>
<!-- -->
Note that when the map control obtains data from a Shapefile, the vector item attributes are generated automatically. Thus, you can select which attribute should be used in your application.
If you wish to color manually loaded vector items, create an attribute. To do this:
- Create a MapItemAttribute object using the MapItem.Attributes property;
- Specify the attribute name, type, and value in the corresponding properties (MapItemAttribute.Name, MapItemAttribute.Type and MapItemAttribute.Value).
Also it is possible to add a color based legend to a map. To learn how to do this, refer to Getting Started Lesson 3.
The image below shows the choropleth colorizer with a color scale legend that colors map contours based on GDP data from the Shapefile.
Example
To learn more about how to colorize map contours loaded from a Shapefile, see the following example.
#Graph Colorizer
To colorize map contours, specify a set of colors via the MapColorizer.Colors property.
As a result, the map contours may appear as follows:
Example
This example shows how to use the graph colorizer.