Heat Map Normal Distribution Color Measure Scale?

[Michael]

We are in the process of implementing your Heat Map Control and are running into a little bit of a problem.  

The problem we have is something I noticed when playing around with the Heat Map Example supplied.  First off I noticed that your Heat Map example is labeled World Population, yet the Heat Map scale is based on square footage.  Once I changed the ExtendedPropertyName on the ColorMeasureScale of the control I realized why it doesn't show based on population.

If you changed the "SQKM" to "POP_CNTRY" then you only have TWO countries that will get colored in.

We are running into a similar problem with our Heat Map and would really like to know if there is some way to turn the scale to be percentage based versus just a normal stepping.   Because the first step contains all but 1 of our items because the steps have to be so large to get to that last item in 8 ticks.  

One choice, I assume, would be to add more ticks, say up to 15, and that should give us enough separation to actually have some other shapes colored.  The problem is that legend will clutter up our map by taking up the entire bottom part.

Surely others have ran across this problem, has there been any easy implementations?

[Andrey]

Hello Michael,

We are planning to add two new modes for the ColorMeasureScale in Q2 2011 release.
The modes will be the following:
- Ranges
  Color Scale mode where you can specify map ranges manually, but range color is set automatically
- RangesPredefinedColors
  Color Scale mode where you can specify map ranges manually (including range color)

This feature allows you to create custom ranges with their own MinValue and MinValue properties.

Currently the ColorMeasureScale allows you to do it after the processing of shapes only. For example you can use the ReadCompleted event for reassigning min / max properties of ranges.
Also if you need to use other criterion which is not contained in dbf file but can be calculated, then you can calculate it using the PreviewReadCompleted event. You can use the ExtendedPropertySet property of the MapShapeReader to specify necessary properties of ExtendedData for shapes you will use (including calculated fields).
The sample code is below.

<UserControl x:Class="WorldPopulation.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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
               Width="600"
               Height="480"
               UseDefaultLayout="False">
            <telerik:RadMap.Provider>
                <telerik:EmptyProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer x:Name="informationLayer">
                <telerik:InformationLayer.Reader>
                    <telerik:MapShapeReader ExtendedPropertySet="POP_CNTRY,double Percentage,double"
                                            PreviewReadCompleted="MapShapeReader_PreviewReadCompleted"
                                            ReadCompleted="MapShapeReader_ReadCompleted"
                                            DataSource="world.dbf" Source="world.shp"/>
                </telerik:InformationLayer.Reader>
                <telerik:InformationLayer.Colorizer>
                    <telerik:ColorMeasureScale ExtendedPropertyName="Percentage"
                                               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>
        <telerik:MapLegend x:Name="mapLegend"
                   Layer="{Binding ElementName=informationLayer}"
                   Header="Population (in percent):"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Right"
                   Format="{}{0:F2}"
                   MarkerSize="40,20"
                   MarkerSpacing="0"
                   LabelLayout="Between"
                   LabelLocation="BottomRight"
                   Margin="0,0,10,10">
        </telerik:MapLegend>
    </Grid>
</UserControl>

 

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls.Map;

namespace WorldPopulation
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void MapShapeReader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)
        {
            double commonPopulation = 0;
            foreach (MapShape shape in eventArgs.Items)
            {
                double population = (double)shape.ExtendedData.GetValue("POP_CNTRY");
                commonPopulation += population;
            }

            foreach (MapShape shape in eventArgs.Items)
            {
                double population = (double)shape.ExtendedData.GetValue("POP_CNTRY");
                population = 100d * population / commonPopulation;

                shape.ExtendedData.SetValue("Percentage", population);
            }
        }

        private void MapShapeReader_ReadCompleted(object sender, ReadShapesCompletedEventArgs eventArgs)
        {
            var colorizer = this.informationLayer.Colorizer as ColorMeasureScale;

            var range = colorizer.RangeCollection[0];
            range.MinValue = 0;
            range.MaxValue = 0.5;

            range = colorizer.RangeCollection[1];
            range.MinValue = 0.5;
            range.MaxValue = 1;

            range = colorizer.RangeCollection[2];
            range.MinValue = 1;
            range.MaxValue = 2;

            range = colorizer.RangeCollection[3];
            range.MinValue = 2;
            range.MaxValue = 5;

            range = colorizer.RangeCollection[4];
            range.MinValue = 5;
            range.MaxValue = 10;

            range = colorizer.RangeCollection[5];
            range.MinValue = 10;
            range.MaxValue = 20;

            range = colorizer.RangeCollection[6];
            range.MinValue = 20;
        }
    }
}

Greetings,
Andrey Murzov
the Telerik team

[Michael]

Thanks, using some math and a lot of conditional logic I was able to find something that worked for our situation to get the heat map legend more to our scale using your example.