Colorizer
The Colorizer feature of the InformationLayer allows you to colorize the MapShape objects inside it on the basis of a condition. This allows you to create maps that display shapes for each country with fill color depending on the population of the country.
In order to allow you to color the shapes depending on a condition, the InformationLayer class exposes the Colorizer property, which is of type ColorMeasureScale. This section will explain the usage of this object and its main features:
Using the ColorMeasureScale object
To use the ColorMeasureScale object in a layer, just set the Colorizer property of the respective layer to a new instance of it. Here is an example:
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale />
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
Extended Data Property
The ColorMeasureScale object colors the MapShape objects inside a layer on the basis of a value. This value should be specified through the Extended Data for the MapShape object.
The Extended Data represents a set of properties and their respective values.
In order to specify the desired property from the Extended Data, you have to use the ExtendedPropertyName property of the ColorMeasureScale object.
The property specified through the ExtendedPropertyName should be of type double.
Here is an example, in which the MapShapes get colored depending on the value of their area:
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM" />
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
Mode
The ColorMeasureScale splits the values passed through its ExtendedPropertyName property and associates a fill color and highlight color for each one. It can automatically create ranges in two ways. For that purpose you have to use the Mode property of the ColorMeasureScale object. It can have the following values:
Auto
Count - specifies that the data will get split into N equally sized ranges. The N is equal to the value of the TickMarkCount property of the ColorMeasureScale.
Step - specifies that the data will get split in ranges with step between them equal to X. The X is equal to the value of the TickMarkStep property of the ColorMeasureScale object.
Ranges - specifies that the filling of the ranges will be calculated automatically by the ColorMeasureScale colorizer.
RangesPredefinedColors - specifies that the ColorMeasureScale colorizer will use filling settings which are set in the MapRange definition.
When using the InformationLayer object together with a MapShapeReader object, the latter one automatically pass information about the Min and Max Values of the ColorMeasureScale. In this case you have to only use the Mode and one of the two additional properties. When you are using manually generated shapes, you have to create the ranges manually. To learn more read the Ranges section in this topic.
Here is an example of a ColorMeasureScale with 7 ranges:
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM"
Mode="Count"
TickMarkCount="7">
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
When you are using the Count mode you can extend the ColorMeasureScale with the ability to specify the value ranges distribution. For the purpose the RangeDistribution property is provided. You can choose between:
ExponentialRangeDistribution - creates exponential range distribution
LogarithmicRangeDistribution - creates logarithmic range distribution
The following example shows how to use the ColorMeasureScale with Ranges mode:
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="Population" MinValue="0" MaxValue="40000000" Mode="Ranges" TickMarkStep="5000000">
<telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:MapShapeFill Fill="#FFFAB935" Stroke="White" StrokeThickness="2" />
<telerik:MapShapeFill Fill="#FFC9441C" Stroke="White" StrokeThickness="2" />
</telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:ColorMeasureScale.RangeCollection>
<telerik:MapRange MinValue="0"
MaxValue="1000000" />
<telerik:MapRange MinValue="1000000"
MaxValue="5000000" />
<telerik:MapRange MinValue="5000000"
MaxValue="10000000" />
<telerik:MapRange MinValue="10000000"
MaxValue="15000000" />
<telerik:MapRange MinValue="15000000"
MaxValue="20000000" />
<telerik:MapRange MinValue="20000000"
MaxValue="25000000" />
<telerik:MapRange MinValue="25000000"
MaxValue="30000000" />
<telerik:MapRange MinValue="35000000"
MaxValue="40000000" />
</telerik:ColorMeasureScale.RangeCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
And the following demonstrates the ColorMeasureScale with RangesPredefinedColors mode:
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="Population" MinValue="0" MaxValue="40000000" Mode="RangesPredefinedColors" TickMarkStep="5000000">
<telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:MapShapeFill Fill="#FFFAB935" Stroke="White" StrokeThickness="2" />
<telerik:MapShapeFill Fill="#FFC9441C" Stroke="White" StrokeThickness="2" />
</telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:ColorMeasureScale.RangeCollection>
<telerik:MapRange MinValue="0" MaxValue="1000000">
<telerik:MapRange.ShapeFill>
<telerik:MapShapeFill Fill="Red" />
</telerik:MapRange.ShapeFill>
</telerik:MapRange>
</telerik:ColorMeasureScale.RangeCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
Colors
The ColorMeasureScale can apply a different color to each range it creates. You are able to specify the desired set of colors not only for the normal fill of the shapes, but for the highlighted one too. This is done by using the ShapeFillCollection and HighlightFillCollection properties. They are collections of MapShapeFill objects.
If you are creating the ranges manually, you can pass the MapShapeFill object directly to the MapRange object. To learn more read the Ranges section.
To learn more about the MapShapeFill object read here.
Add the desired colors inside the collections and they will be applied in their respective order.
The first color will get applied to the lowest layer.
In case you have more ranges than colors, after reaching the last color in the collection, the others will get reused starting from the beginning. For example if you want to have the same highlight color for all of the ranges, you just define one entry in the HighlightFillCollection property.
Here is an example:
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM"
Mode="Auto"
TickMarkCount="7">
<telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:MapShapeFill Fill="#FFF0D9"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFE4BA"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFDBA3"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFD28D"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFBF5C"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFAF33"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#E2942D"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:ColorMeasureScale.HighlightFillCollection>
<telerik:MapShapeFill Fill="Orange"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.HighlightFillCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
With the approach shown above any 2 shapes (even if they are neighbours) may be colored equally. To avoid this you should use the GraphColorizer
Ranges
The ranges for the ColorMeasureScale can be defined in several different ways. The first one is by only using the Mode and the TickMarkCount or TickMarkStep property. This approach is applicable when using the InformationLayer object together with a MapShapeReader object. Here is an example:
To learn more about the Mode property read the Mode section.
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM"
Mode="Count"
TickMarkCount="7">
<telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:MapShapeFill Fill="#FFF0D9"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFE4BA"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFDBA3"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFD28D"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFBF5C"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFAF33"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#E2942D"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:ColorMeasureScale.HighlightFillCollection>
<telerik:MapShapeFill Fill="Orange"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.HighlightFillCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
Another approach that extends the previous one is to handle the PrepareCompleted event of the ColorMeasureScale object in addition. This will allow you to modify the collection containing the ranges after the ColorMeasureScale object has been prepared. In the event handler you can modify the Min and Max Values of the existing ranges. Here is an example:
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM"
Mode="Count"
TickMarkCount="7" PrepareCompleted="ColorMeasureScale_PrepareCompleted">
<telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:MapShapeFill Fill="#FFF0D9"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFE4BA"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFDBA3"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFD28D"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFBF5C"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFAF33"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#E2942D"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:ColorMeasureScale.HighlightFillCollection>
<telerik:MapShapeFill Fill="Orange"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.HighlightFillCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
private void ColorMeasureScale_PrepareCompleted( object sender, Telerik.Windows.Controls.Map.ShapeColorizerEventArgs e )
{
ColorMeasureScale scale = sender as ColorMeasureScale;
if ( scale != null )
{
//this lines of code modify the second last item and remove the last item.
scale.RangeCollection[ scale.RangeCollection.Count - 2 ].MaxValue = scale.RangeCollection.Last().MaxValue;
scale.RangeCollection.Remove( scale.RangeCollection.Last() );
}
}
Private Sub ColorMeasureScale_PrepareCompleted(ByVal sender As Object, ByVal e As Telerik.Windows.Controls.Map.ShapeColorizerEventArgs)
Dim scale As ColorMeasureScale = TryCast(sender, ColorMeasureScale)
If scale IsNot Nothing Then
'this lines of code modify the second last item and remove the last item.'
scale.RangeCollection(scale.RangeCollection.Count - 2).MaxValue = scale.RangeCollection.Last().MaxValue
scale.RangeCollection.Remove(scale.RangeCollection.Last())
End If
End Sub
The next approach is to manually define the Min and Max Values of the ColorMeasureScale object and to use the Mode property together with the TickMarkCount or TickMarkStep property. This approach is useful, when having InformationLayer that displays manually generated shapes.
Note that setting the Min and Max Values will make the ColorMeasureScale behave as if it works with MapShapeReader. This means that you can still use the HightlightFillCollection and ShapeFillCollection properties.
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM"
Mode="Count"
TickMarkCount="7"
MinValue="371.72"
MaxValue="16911282.0">
<telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:MapShapeFill Fill="#FFF0D9"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFE4BA"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFDBA3"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFD28D"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFBF5C"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#FFAF33"
Stroke="#B1946D"
StrokeThickness="1" />
<telerik:MapShapeFill Fill="#E2942D"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.ShapeFillCollection>
<telerik:ColorMeasureScale.HighlightFillCollection>
<telerik:MapShapeFill Fill="Orange"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:ColorMeasureScale.HighlightFillCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>
In addition to the previous approach you can again use the PrepareCompleted event. Additionally with the Min and Max Values defined you can directly define the desired ranges at design-time via the RangeCollection property of the ColorMeasureScale object. In this case you shouldn't use the HighlightFillCollection and ShapeFillCollection properties, as they are used only when the ranges are automatically generated. You have to specify the desired colors via the HighlightFill and ShapeFill properties of the MapRange object. Here is an example.
<telerik:RadMap x:Name="radMap"
Width="600"
Height="480">
<telerik:InformationLayer x:Name="informationLayer">
<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="SQKM"
Mode="Auto"
MinValue="371.2"
MaxValue="16911282">
<telerik:ColorMeasureScale.RangeCollection>
<telerik:MapRange MinValue="371.2"
MaxValue="8000000">
<telerik:MapRange.ShapeFill>
<telerik:MapShapeFill Fill="#FFF0D9"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:MapRange.ShapeFill>
<telerik:MapRange.HighlightFill>
<telerik:MapShapeFill Fill="Orange"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:MapRange.HighlightFill>
</telerik:MapRange>
<telerik:MapRange MinValue="8000000"
MaxValue="16911282">
<telerik:MapRange.ShapeFill>
<telerik:MapShapeFill Fill="#E2942D"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:MapRange.ShapeFill>
<telerik:MapRange.HighlightFill>
<telerik:MapShapeFill Fill="Orange"
Stroke="#B1946D"
StrokeThickness="1" />
</telerik:MapRange.HighlightFill>
</telerik:MapRange>
</telerik:ColorMeasureScale.RangeCollection>
</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>