Heat Map Normal Distribution Color Measure Scale?

3 posts, 1 answers
  1. Michael
    Michael avatar
    8 posts
    Member since:
    Apr 2011

    Posted 19 May 2011 Link to this post

    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?
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 24 May 2011 Link to this post

    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"
        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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Michael
    Michael avatar
    8 posts
    Member since:
    Apr 2011

    Posted 09 Jun 2011 Link to this post

    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.
Back to Top