Skip to main content

Colorizers

  • 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 MapShapeBase.Fill property:

For example, you can use the map colorizer to create GDP, population or political maps.

ColorizerMap

Before using this feature, you will need to perform the following steps.

1) Specify the map control’s vector data.

For this, assign a MapDataAdapterBase class descendant object to the VectorLayer.Data property.

For example, let us use the ShapefileDataAdapter and specify a path to the Shapefile at design time. To do this, do the following.

  • Click the MapControl’s smart tag to invoke its Tasks list.
  • In the Tasks list, click the Load Shapes from Shapefile link.

    ClickMapControlTasks

This automatically generates the following XAML:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map" 
        x:Class="WpfApplication3.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <dxm:MapControl>
            <dxm:VectorLayer>
                <dxm:ShapeFileDataAdapter FileUri="INSERT_FILE_URI"/>
            </dxm:VectorLayer>
        </dxm:MapControl>

    </Grid>
</Window>

2) Choose which colorizer type should be used in your application.

Currently, the following colorizer types are supported:

  • ChoroplethColorizer

    Represents the Choropleth colorizer, which shows statistical data over predefined regions (such as counties or states) by coloring or shading these regions.

  • GraphColorizer

    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.

  • KeyColorColorizer

    Represents the Key-Color colorizer, which paints shapes according to their keys. The Key-Color colorizer can be used to add statistical information to a map.

Note

Shapes that have been obtained from a KML file can only be colored by the Graph Colorizer.

To add the colorizer to the map control, assign one of the MapColorizer class descendants to the VectorLayer.Colorizer property of the appropriate vector layer.

MapControl_VectorLayer_AddColorizer

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:

The following XAML shows how this can be done.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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>
    </Grid>
</Window>
<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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="/WpfApplication1;component/Data/Countries.shp"/>
                    </dxm:VectorLayer.ShapeLoader>
                </dxm:VectorLayer>
            </dxm:MapControl.Layers>
        </dxm:MapControl>
    </Grid>
</Window>

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 an application uses manually generated map items, specify that the attributes of these items use the choropleth colorizer.

The image below shows the choropleth colorizer with a color scale legend that colors map contours based on GDP data from the Shapefile.

ChoroplethColorizerResult

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.

GraphColorizerCustomization

As a result, the map contours may appear as follows:

GraphColorizerResult

Example

This example shows how to use the graph colorizer.

Key-Color Colorizer

To colorize Map shapes using a key-color colorizer, do the following.

As a result, the map shapes appear as follows.

MapBindingResult

To learn more about how to colorize map items using a key-color colorizer, refer to How to: Colorize Map Items Using the Key Color Colorizer.

See Also