color the states in USA map

[S]

can't make it work. Color the states in USA map for the values of "total" from the database like below

State   total                 Count
AK      1150.00           1
AL      33055.66          18
AR      5327.00            9
AZ      43619.24          43
CA      2021522.70      183

 

xaml & xaml.cs code pasted below -

<telerik:RadMap Name="radMap"
MaxHeight="295"
Center="37.684297,-95.06924"
IsKeyboardNavigationEnabled="False"
MaxZoomLevel="3"
MinZoomLevel="3"
MouseClickMode="None"
MouseDoubleClickMode="None"
MouseDragMode="Drag"
UseDefaultLayout="False"
ZoomLevel="3">
<telerik:RadMap.Provider>
<telerik:EmptyProvider />
</telerik:RadMap.Provider>
<telerik:InformationLayer Name="informationLayer"
FontWeight="Bold"
Foreground="White">
<telerik:InformationLayer.Reader>
<telerik:MapShapeReader ExtendedPropertySet="XCategory,string XCategoryTooltip,decimal ClaimCount,int"
PreviewReadCompleted="MapShapeReader_PreviewReadCompleted"
ReadCompleted="MapShapeReader_ReadCompleted"
Source="{Binding Source={StaticResource DataContext},
Path=MapSource}"
ToolTipFormat="{}{XCategory} - {ClaimCount}" />
</telerik:InformationLayer.Reader>

<telerik:InformationLayer.Colorizer>
<telerik:ColorMeasureScale ExtendedPropertyName="XCategoryTooltip" Mode="Ranges">
<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 MaxValue="50000" MinValue="0" />
<telerik:MapRange MaxValue="100000" MinValue="50000" />
<telerik:MapRange MaxValue="150000" MinValue="100000" />
<telerik:MapRange MaxValue="200000" MinValue="150000" />
<telerik:MapRange MaxValue="250000" MinValue="200000" />
<telerik:MapRange MaxValue="300000" MinValue="250000" />
<telerik:MapRange MaxValue="350000" MinValue="300000" />
</telerik:ColorMeasureScale.RangeCollection>
<telerik:ColorMeasureScale.HighlightFillCollection>
<telerik:MapShapeFill Fill="Green"
Stroke="Red"
StrokeThickness="3" />
<telerik:MapShapeFill Fill="Yellow"
Stroke="Red"
StrokeThickness="3" />
<telerik:MapShapeFill Fill="Orange"
Stroke="Red"
StrokeThickness="3" />
<telerik:MapShapeFill Fill="Brown"
Stroke="Red"
StrokeThickness="3" />
</telerik:ColorMeasureScale.HighlightFillCollection>


</telerik:ColorMeasureScale>
</telerik:InformationLayer.Colorizer>
</telerik:InformationLayer>
</telerik:RadMap>

<telerik:MapLegend Name="legend"
Margin="10,0,5,10"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Background="#3f007f7f"
FontWeight="Bold"
Foreground="White"
Format="{}{0:F2}"
Layer="{Binding ElementName=informationLayer}"
MarkerRadiusX="4"
MarkerRadiusY="4"
MarkerSize="70,10"
Orientation="Vertical">
<telerik:MapLegend.Header>
<TextBlock FontWeight="ExtraBlack" Text="TotalIncurred" />
</telerik:MapLegend.Header>
</telerik:MapLegend>

 

 

 

private void MapShapeReader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)
{
if (eventArgs.Error == null)
{
foreach (FrameworkElement element in eventArgs.Items)
{

MapShape shape = element as MapShape;
if (shape != null)
{
//// setup the property value
this.SetExtendedPropertyFromDatabase(shape);
//this.SetAdditionalData(shape);
}
}
}
}
private void SetExtendedPropertyFromDatabase(IExtendedData shape)
{
////from db
var vm = this.LayoutRoot.DataContext as DashBoard5VM;
if (vm != null)
{
foreach (var item in vm.TotalIncurredbyClaimcounts)
{

string state;
decimal totinc;
int claimcount ;
state = item.XCategory;
totinc = (decimal)item.XCategoryTooltip;
claimcount = item.ClaimCount;
shape.ExtendedData.SetValue("XCategory", state);
shape.ExtendedData.SetValue("XCategoryTooltip", totinc.ToString());
shape.ExtendedData.SetValue("ClaimCount", claimcount);}}}

[Martin Ivanov]

Hello,

I will need some time to check your case. I will contact you as soon as I have more information on the matter.

Regards,
Martin
Telerik

[S]

Thanks

[Martin Ivanov]

Hi,

I create a project based on your code snippet and tested it but I wasn't able to find any issues with it. The shape colors are updated according to the underlying data. You can check if the defined MapRanges are suitable for the range of your data and change them if necessary. I attached the test project so you can check it on your side. Can you take a look at it and tell me if I am missing something?

I hope this helps.

Regards,
Martin
Telerik

[S]

Thanks much for taking a look into this Martin. It is not plotting my data on map. It comes up with just one color and tooltip as the last one it read. I am getting the data from database. Please see attached spreadsheet for the data I trying to plot.

------ in SetExtendedPropertyFromDatabase on xaml.cs

foreach (var item in vm.TotalIncurredbyClaimcounts)
{

string state;
decimal totinc;
int claimcount ;
state = item.XCategory;
totinc = (decimal)item.XCategoryTooltip;
claimcount = item.ClaimCount;
shape.ExtendedData.SetValue("XCategory", state);
shape.ExtendedData.SetValue("XCategoryTooltip", totinc.ToString());
shape.ExtendedData.SetValue("ClaimCount", claimcount);

}

 

 ---------------in vm

private ObservableCollection<UVW_TOTALINCURREDBYCLAIMCOUNT> totalincurredbyClaimcounts;
public ObservableCollection<UVW_TOTALINCURREDBYCLAIMCOUNT> TotalIncurredbyClaimcounts
{
get
{
                if (totalincurredbyClaimcounts == null)
                   GetTotalIncurreds();
return totalincurredbyClaimcounts;
}
set
{
totalincurredbyClaimcounts = value;

RaisePropertyChanged("TotalIncurredbyClaimcounts");
}
}

 

 

------------view UVW_TOTALINCURREDBYCLAIMCOUNT has fields XCategory, XCategoryTooltip, ClaimCount

 

 

[S]

Matin, I also changed the ranges as below. Hope you will be able to resolve this for me. Thx

<telerik:ColorMeasureScale.RangeCollection>
<telerik:MapRange MaxValue="10000" MinValue="0" />
<telerik:MapRange MaxValue="20000" MinValue="10001" />
<telerik:MapRange MaxValue="30000" MinValue="20001" />
<telerik:MapRange MaxValue="40000" MinValue="30001" />
<telerik:MapRange MaxValue="50000" MinValue="40001" />
<telerik:MapRange MaxValue="60000" MinValue="50001" />
<telerik:MapRange MaxValue="70000" MinValue="60001" />
<telerik:MapRange MaxValue="80000" MinValue="70001" />
<telerik:MapRange MaxValue="90000" MinValue="80001" />
<telerik:MapRange MaxValue="100000" MinValue="90001" />
</telerik:ColorMeasureScale.RangeCollection>

[Martin Ivanov]

Hello,

I updated my project based on the additional information but everything works as expected. I attached the project so you can test it on your side and see if it can help for resolving your case. However, I noticed that for each shape you are iterating through all your extended data items and reset the shape's ExtendedData. So, in your case each shape has the same XCategory, XCategoryTooltip and ClaimCount which are equal to the values in the last extended data item which you get from the data base. In order to resolve this you should make sure that each shape has different extended data as demonstrated in the attached project.

Regards,
Martin
Telerik

[S]

Hi Martin, Sincerely appreciate all your help. Couple of things not working correctly in your sample project-

1) For every alternate state - shape is null (var shape = eventArgs.Items[i] as MapShape;)

so it doesn't go inside the loop to setvalues for those. Hence they show up blue on map.

2) The tooltips not showing correctly on map. for example CA it shows CT-data, AZ shows AR, CO shows FL.

If these two problems are fixed I should have what I am trying to achieve. Thx

 

[S]

Martin,

not sure how to fix it but I notice that -

eventArgs.Items[0] is {Telerik.Windows.Controls.Map.MapPolygon}

whereas

eventArgs.Items[1] is {Telerik.Windows.Controls.Map.MapPinPoint}

[Martin Ivanov]

Hi S,

Each alternate item in the Items collection is of type MapPinPoint because this is how the shape file is structured. Each MapPolygon object has a corresponding MapPinPoint which draws the polygon's label. In this case the US state's name. You need to set the extended data only on the polygon shape and this is why in the project from my last reply I am getting only those items from the collection.

var polygons = eventArgs.Items.OfType<MapPolygon>();

About the wrong tooltips. This is because the order in which shapes are provided differs from the order in the DummyDataProvider.Data collection. In order to resolve this you will need to order both collections by the tooltip's value and then set the ExtendedData of the shapes.

I hope this information is useful.

Regards,
Martin
Telerik

[S]

Martin, It is plotting only alternate states on map. why does the 2nd state comes in as mappoint instead of map polygon? It hits setvalue for 1st, 3rd, 5th & so on only. why doesn't it go to setvalue for 2nd, 4th, 6th & so on?

Please uncomment your legend you will see all the states in blue didn't get plotted on map.

[S]

I already ordered collections correctly for tooltip. But I still need help to resolve above issue.

[Martin Ivanov]

Hi S,

The shape file with the United States of America contains two types of shapes - polygon and pin point. The polygon shapes (MapPolygon) represents the area of the state. The pin point shapes (MapPinPoint) represent labels that contain the names of the states. The shapes in the file are ordered in the following manner:

• 1.State area as a polygon shape
• 2.State label as a pin point shape
• 3.State area as a polygon shape
• 4.State label as a pin point shape
• 5.....
• 6... etc.

This is why every alternate item in the collection is a MapPinPoint object. In order to get only the polygon shapes without the pin point labels you can use get all elements from the collection which are of type MapPolygon.

var polygons = eventArgs.Items.OfType<MapPolygon>();

Regards,
Martin
Telerik

[S]

Hi Martin, Got involved with other priority work. Coming back to this again now. Could you please show me how to do this. shape is null for every alternate item & it doesn't go inside the loop to setvalue. It goes inside the loop (if shape!=null && I<extendeddatacount) for 1st, misses 2nd state, goes  in for 3rd state & so on. Please let me know asap.

 

 

[S]

Hi, Only 3 of my states get plotted correctly. my data is coming in as same order as defined in xml. why is placemark.name not matching my order. how do I control this?

private void MapShapeReader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)
{
if (eventArgs.Error == null)
{
var vm = this.LayoutRoot.DataContext as DashBoard5VM;
var polygons = eventArgs.Items.OfType<MapPolygon>();
//var extendedDataCount = this.model.DataItems.Count;
var extendedDataCount = vm.TotalIncurredbyClaimcounts.Count;
//for (int i = 0; i < eventArgs.Items.Count(); i++)
for (int i = 0; i < polygons.Count(); i++)
{
//if (eventArgs.Items[i].GetType().FullName == "Telerik.Windows.Controls.Map.MapPolygon")
//{
var shape = eventArgs.Items[i] as MapShape;
//var shape = eventArgs.Items[i] as MapPolygon;
if (shape != null && i < extendedDataCount)
{
//var extendedData = this.model.DataItems[i];
var extendedData = vm.TotalIncurredbyClaimcounts[i];
if (shape.ExtendedData.GetValue("Placemark.Name").ToString() == extendedData.XCategory.Trim().ToString())
{
shape.ExtendedData.SetValue("XCategory", extendedData.XCategory.Trim());
shape.ExtendedData.SetValue("XCategoryTooltip", extendedData.XCategoryTooltip.ToString());
shape.ExtendedData.SetValue("ClaimCount", extendedData.ClaimCount);
//shape.ExtendedData.SetValue("Placemark.Name", extendedData.XCategory.Trim());
}
}
//}
}
}
}

[Martin Ivanov]

Hi,

Each alternate item (2nd, 4th, etc.) is null because it is of type MapPinPoint and we try to cast it to MapShape. The code provided in my last project expects that we will work only with the MapShape objects. This is why I cast the items to MapShape only.

About the placemark.name, I am afraid that without your implementation and any xml I won't be able to tell you why the order doesn't match.

Regards,
Martin
Telerik

[S]

I resolved it with this code. Thanks! Will contact you if have any more challenges regarding this issue after testing.

private void MapShapeReader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)
{
if (eventArgs.Error == null)
{
var vm = this.LayoutRoot.DataContext as MyVM;
ObservableCollection<UVW_TOTALINCURRED> extendedDataset = this.model.DataItems;
for (int i = 0; i < eventArgs.Items.Count(); i++)
{
var shape = eventArgs.Items[i] as MapShape;
if (shape != null && i < eventArgs.Items.Count())
{
var found = extendedDataset.Where(c => c.XCategory.ToString() == shape.ExtendedData.GetValue("Placemark.Name").ToString()).FirstOrDefault();
if (found != null)
{
shape.ExtendedData.SetValue("XCategory", found.XCategory.Trim());
shape.ExtendedData.SetValue("XCategoryTooltip", found.XCategoryTooltip.ToString());
shape.ExtendedData.SetValue("Count", found.Count);
}
}
}
}
}

[S]

Hi Martin, Let me know how cam I show Claimcount on the map instead of the state abbreviations it is showing currently.

[S]

to add label - added <telerik:InformationLayer x:Name="labelLayer" />

//add new label MapShapeReader_PreviewReadCompleted
TextBlock label = new TextBlock();
string clmcount = (string)shape.ExtendedData.GetValue("ClaimCount").ToString();
label.Text = clmcount;
label.FontSize = 8;
double centerLat = shape.GeographicalBounds.Center.Latitude;
double centerLong = shape.GeographicalBounds.Center.Longitude;
Location location = new Location(centerLat, centerLong);
MapLayer.SetLocation(label, location);
MapLayer.SetHotSpot(label, hotSpot);
this.labelLayer.Items.Add(label);

 

[S]

In the same project how can I make the range (telerik:ColorMeasureScale.RangeCollection) dynamic depending on the sum(claimcount). I see a all green map when claimcount values are low.

[Martin Ivanov]

Hi,

You can take a look at the Colorizer help article. Basically, you can use the ExtendedPropertyName to determine the property on which the coloring should be based. I also recommend you to explore the map colorizer SDK examples.

Regards,
Martin
Telerik by Progress

[S]

To accomplish dynamic range - why can't I bind TickMarkStep? it gives Silverlight 4004 error.

<telerik:ColorMeasureScale ExtendedPropertyName="XCategoryTooltip" Mode="Step" MinValue="{Binding MinTotinc}" MaxValue="{Binding MaxTotinc}" TickMarkStep="{Binding TickStep}">

[Martin Ivanov]

Hello,

I couldn't reproduce the error. But keep in mind that the data context of the map is not propagated to the colorizer object. In order to bind a property of the colorizer to the view model you will need to explicitly pass the data context. For example:

<telerik:ColorMeasureScale TickMarkStep="{Binding Source={StaticResource theDataContextObjectDefinedInTheResources}, Path=TickStep}">

Regards,
Martin
Telerik by Progress

[S]

Hi, I need to do similar heatmap for UK (counties instead of states). Where can I find UK xml just like the USASimplified.xml?

[Evgenia]

Hello,

Please mind that we don't ship such data (it is out of our support scope to provide it). However you can fairly easy get such data online. For example this website provides free shapefiles including one with United Kingdom counties.

Regards,
Evgenia
Telerik by Progress

[S]

I am having a hard time finding or converting a UK file in the format of the usasimplified.xml that I am using for USA heatmap. coverted .shp to .json then .json to .xml but it still is not in the same format. My UsaSimplified xml has info for each state as below. do I have to write my own in this format for UK postcodes? what if I have to do the same for another country in future? Is this the best solution I have to do heatmaps with silverlight?

Any help is greatly appreciated.

 

<?xml version="1.0" encoding="utf-8"?>
<Document>
<Style id="defaultStyle">
<LineStyle>
<color>ffffffff</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<color>99ff6600</color>
<outline>1</outline>
<fill>1</fill>
</PolyStyle>
<BalloonStyle>
<bgColor>FFFFFFFF</bgColor>
<text>
<![CDATA[ <body bgcolor="#000000" width="100%">
<p><b><font color="#000000">$[PERIMETER/displayName]:</font></b> <font color="#000000">$[PERIMETER]</font></p>
<p><b><font color="#000000">$[DAYADM/displayName]:</font></b> <font color="#000000">$[DAYADM]</font></p>
<p><b><font color="#000000">$[ORDERADM/displayName]:</font></b> <font color="#000000">$[ORDERADM]</font></p>
<p><b><font color="#000000">$[MONTHADM/displayName]:</font></b> <font color="#000000">$[MONTHADM]</font></p>
<p><b><font color="#000000">$[AREA/displayName]:</font></b> <font color="#000000">$[AREA]</font></p>
<p><b><font color="#000000">$[STATE/displayName]:</font></b> <font color="#000000">$[STATE]</font></p>
<p><b><font color="#000000">$[YEARADM/displayName]:</font></b> <font color="#000000">$[YEARADM]</font></p>
<p><b><font color="#000000">$[STATEFIPS/displayName]:</font></b> <font color="#000000">$[STATEFIPS]</font></p>
<p align="center"><font size='14' face='arial' color="#0099FF">Powered by GeoCommons</font></p>
</body>
]]>
</text>
</BalloonStyle>
</Style>
<!-- Alabama -->
<Placemark>
<styleUrl>#defaultStyle</styleUrl>
<name>AL</name>
<ExtendedData>
<Data name='PERIMETER'>
<displayName><![CDATA[Perimeter]]></displayName>
<value><![CDATA[0.053]]></value>
</Data>
<Data name='DAYADM'>
<displayName><![CDATA[Day Admitted]]></displayName>
<value><![CDATA[14.0]]></value>
</Data>
<Data name='ORDERADM'>
<displayName><![CDATA[Order Admitted]]></displayName>
<value><![CDATA[22]]></value>
</Data>
<Data name='MONTHADM'>
<displayName><![CDATA[Month Admitted]]></displayName>
<value><![CDATA[December]]></value>
</Data>
<Data name='AREA'>
<displayName><![CDATA[Area]]></displayName>
<value><![CDATA[0.0]]></value>
</Data>
<Data name='STATE'>
<displayName><![CDATA[State Name]]></displayName>
<value><![CDATA[Alabama]]></value>
</Data>
<Data name='YEARADM'>
<displayName><![CDATA[Year Admitted]]></displayName>
<value><![CDATA[1819.0]]></value>
</Data>
<Data name='STATEFIPS'>
<displayName><![CDATA[Day Admitted]]></displayName>
<value><![CDATA[01]]></value>
</Data>
<Data name='Population'>
<displayName><![CDATA[Population]]></displayName>
<value><![CDATA[4661900]]></value>
</Data>
</ExtendedData>
<MultiGeometry>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-88.2094786210672,35.0013134660482 -85.6202717092223,34.9816437332644 -85.1658052181062,32.8091172445736 -84.970699712686,32.469695358701 -85.0150043479083,32.3315087982654 -84.898439231099,32.268169234499 -85.0483086669966,32.1484071649142 -85.0727701151545,32.1367869629695 -85.0764450745022,31.9975700130653 -85.0972315633124,31.9307817698282 -85.152241111048,31.8784767194524 -85.1216930114704,31.6806390820951 -85.0569218529675,31.5261468961831 -85.1119314007031,31.2251851941496 -85.098494830588,31.1578410202746 -84.9995006131598,31.0024872223946 -87.604128050829,31.0083440232026 -87.642026069102,30.8674351436793 -87.5259203222112,30.7410270770845 -87.3927030458577,30.6586220947593 -87.4477125935932,30.5171999488475 -87.3850326538086,30.4299297332764 -87.5433541349709,30.2986137114529 -87.792022142553,30.2283975991674 -88.0311259959974,30.2242656763893 -88.1937166163395,30.3275116282067 -88.3180506201306,30.3811565699236 -88.3563072366817,30.4017814052431 -88.3945638532327,30.3894070265668 -88.4806412404727,31.9076997719654 -88.1038458825497,34.8937883403464 -88.1391704473549,34.9082739124502 -88.1980447220303,34.9999565130454</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
<Point>
<coordinates>-88.1827583312988,32.6125068664551</coordinates>
</Point>
</MultiGeometry>
</Placemark>

</Document>

[Dinko | Tech Support Engineer]

Hi,

We are looking into this right now and will let you know once we have more information.

Regards,
Dinko
Telerik by Progress

[Martin Ivanov]

Hello,

I am afraid that, as Evgenia mentioned in her last reply, we do not  provider shape files or file converters. I suggest you to take a look at the following websites and try to find or convert the shape file which you are looking for. StatSilk, geofabrik, diva-gis. Most shape files which you can find on the internet are using the .shp extension. However, the UsaSimplified shape file is in KML format (.xml extension) and if you want to use the same format for other files you will need to search or create KML files.

As a side note, all shape files used in the RadMap examples are created or downloaded specifically for the demos. They are not shipped with the control. The map gives only the tool to read shape files, but how they will be get/created is up to the user of the control.

Regards,
Martin
Telerik by Progress

[S]

I am using attached(downloaded) kml file for UK postcodes. It works perfectly fine on my machine but it doesn't work on server for some reason. Any ideas?  Let me know how to send you the kml
If I can convert this to .xml file just like my USASimplified.xml. It will work but unable to find a tool to do that. Pl help!
protected const string ShapeRelativeUriFormatKML = "DataSources/Geospatial/{0}.kml";
this._mapSource = new Uri(string.Format(ShapeRelativeUriFormatKML, "UKSimplified"), UriKind.Relative);

[Martin Ivanov]

Hi,

Note that KML is an XML but using a specific tags and attributes. The UsaSimplified.xml is actually in KML format but it is saved under the .XML extension. The UkSimplified.kml file is in the exactly same format as UsaSimplified.xml. However, the data saved in the files is different. The USA shape file contains more information as labels and fill colors for the polygons. In order to add similar information in the UK file you will need to do it manually or find a shape file with more information.

About the issue on your server, what doesn't work? Is it an error or missing shapes? I am afraid that I cannot assist you here because I don't know how your server and RadMap are set up. However, you can subscribe for the PreviewReadShapeDataCompleted event of the shape reader and check the event arguments' Error property. In the most cases it contains information why the data is not loaded.

As a side note, here is the code that I used with your shape file. As I can see it is displayed properly. 

<telerik:RadMap>
    <telerik:RadMap.Provider>
        <telerik:OpenStreetMapProvider />
    </telerik:RadMap.Provider>
    <telerik:VisualizationLayer>
        <telerik:VisualizationLayer.Reader>
            <telerik:AsyncKmlReader Source="WpfApplication3;component/UKSimplified.kml"/>
        </telerik:VisualizationLayer.Reader>
    </telerik:VisualizationLayer>
</telerik:RadMap>

Regards,
Martin
Telerik by Progress