Random Heatmap Shapes (zipcodes)

[Sam]

Hi everyone,

I'm wondering if one is required to have predefined shapes (i.e. shape files) when using the heatmap features. I am tasked with creating a heatmap to show the number of insurance policies we have in all of the U.S. zipcodes in which we have policies. I have that data no problem. But to display a zipcode area, it has to be a dynamic shape essentially.

First of all, I have no idea how I'm going to find zipcode shapes. :-)

Anyone have any ideas on either issue? Thanks in advance!


-Sam

[Andrey]

Hello Sam,

You can find that information in Internet. For example, you can get shape files for USA zip codes here:

http://www.census.gov/geo/www/cob/z52000.html#shp

Pay attention, these files contain a lot of polygons with numerous locations (for example, shape file for California contains 2490 polygons). So if you will show all information at once the rendering of the information layer will take significant time.

All the best,

Andrey Murzov

the Telerik team

[Sam]

Hi Andrey,

Thanks. I got that part. I found a KML file on the internet for all the states, but it's like 220mb!! Is it possible to use multiple .shp files?

Also, will I have to blend my data from my database (policy data) into my .kml or .shp files?

[Andrey]

Hi Sam,

Yes, you can use multiple shp-files. You can load them sequentially using the single MapShapeReader instance. Also you can use multiple MapShapeReader instances to load shape-files in the codebehind.

When generating shapes automatically from the various data formats via MapShapeReader, the Extended Data gets automatically extracted from the files and stored inside the ExtendedData property. Also you can specify required properties of ExtendedData for MapShapeReader using the MapShapeReader.ExtendedPropertySet property.
For example you can use name of columns from DBF-file when you read shape-file. And also you can specify additional properties which you can fill later from database or other resources.

In the example code below the NAME property is specified for reading data from DBF, but the PoliciesNumber property (this field name is absent in DBF) is specified for using it to set the value to it for example from database.

<telerik:InformationLayer>
    <telerik:InformationLayer.Reader>
        <telerik:MapShapeReader Source="/SilverlightApplication1;component/Geospatial/post1234.shp"
    DataSource="/SilverlightApplication1;component/Geospatial/post1234.dbf"
    PreviewReadCompleted="reader_PreviewReadCompleted"
    ExtendedPropertySet="NAME,string PoliciesNumber,int"
    ToolTipFormat="{}{NAME} - {PoliciesNumber}"/>
    </telerik:InformationLayer.Reader>
</telerik:InformationLayer>

When the PreviewReadCompleted event occurs then you can set values to the PoliciesNumber property using the ExtendedData.SetValue method. The sample code is below.

private void reader_PreviewReadCompleted(object sender, PreviewReadShapesCompletedEventArgs eventArgs)
{
    foreach (FrameworkElement element in eventArgs.Items)
    {
        MapShape shape = element as MapShape;
        if (shape != null)
        {
            string name = (string)shape.ExtendedData.GetValue("NAME");
            int policiesNumber = this.GetPoliciesNumberFromDB(name);
            shape.ExtendedData.SetValue("PoliciesNumber", policiesNumber);
        }
    }
}

This method is useful when you plan to use your additional data for the tooltip. When you plan to use it for building another control then you should just retrieve your additional data using some property as an identifier (NAME property in example above).

All the best,
Andrey Murzov
the Telerik team

[Sam]

Hi Andrey,

Thanks for the information. Eventually I went with reading my data from a KML file. I got zipcode data from the Census Bureau and put the Placemark section of the KML into our database. Then I pull out the Placemarks for only those zipcodes in which we have policies and then construct a KML file and pass it as a String to KmlReader.Read(). I am able to draw the zipcode polygons. I'm also using ColorMeasureScale.ShapeFillCollection and ColorMeasureScale.RangeCollection to try to colorize the polygons. However, they only come out in one color (see attachment).

I might need a little help here. :-)  Here is a sample of my KML data:

<kml xmlns="http://earth.google.com/kml/2.0">
   <Document>
      <name>zipcodes</name>
      <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">$[ZIP/displayName]: </font></b> <font color="#000000">$[ZIP]</font></p><p><b><font color="#000000">$[POLICIES/displayName]: </font></b> <font color="#000000">$[POLICIES]</font></p></body>]]></text>
       </BalloonStyle>
    </Style>
    <Placemark xmlns="http://earth.google.com/kml/2.0">
        <name>07857</name>
    <description><b>AREA:</b> <i>0.00037</i><br /> <b>PERIMETER:</b> <i>0.14707</i><br /> <b>ZCTA:</b>
                                <i>07857</i><br /> <b>LSAD:</b> <i>Z5</i><br /> <b>LSAD_TRANS:</b> <i>5-Digit ZCTA</i>
                               <br />
        </description>
           <Polygon>
              <outerBoundaryIs>
                 <LinearRing>
            <coordinates>-74.684106999999997,40.910099000000002 -74.686306000000002,40.908397999999998
                                              -74.690106,40.902698 -74.687918999999994,40.901110000000003
                                              -74.687386000000004,40.896323000000002 -74.694106000000005,40.895997999999999
                                              -74.694305999999997,40.894998 -74.690905999999998,40.893698
                                              -74.681206000000003,40.891198000000003 -74.680806000000004,40.891098
                                              -74.694705999999996,40.890098000000002 -74.704599000000002,40.890779000000002
                                              -74.713609000000005,40.892170999999998 -74.714806999999993,40.891897999999998
                                              -74.714806999999993,40.893998000000003 -74.716920000000002,40.904791000000003
                                              -74.718964,40.907198999999999 -74.721480999999997,40.908458000000003
                                              -74.720912999999996,40.909173000000003 -74.717281999999997,40.910843
                                              -74.712801999999996,40.908101000000002 -74.712171999999995,40.904437999999999
                                              -74.713588,40.903058 -74.714406999999994,40.902498 -74.713907000000006,40.900297999999999
                                              -74.711707000000004,40.899197999999998 -74.704807000000002,40.901698000000003
                                              -74.696005999999997,40.906497999999999 -74.694906000000003,40.906298
                                              -74.692806000000004,40.904798 -74.692760000000007,40.904772 -74.691406,40.903998
                                              -74.688906000000003,40.905197999999999 -74.688006,40.908797999999997
                                              -74.684106999999997,40.910099000000002
                    </coordinates>
             </LinearRing>
             </outerBoundaryIs>
          </Polygon>
         <Style>
            <LineStyle>
           <color>ff0000ff</color>
        </LineStyle>
            <PolyStyle>
               <fill>0</fill>
            </PolyStyle>
         </Style>
    <styleUrl>#defaultStyle</styleUrl>
        <ExtendedData>
           <Data name="ZIP">
          <displayName><![CDATA[Zip Code]]></displayName>
          <value><![CDATA[07857]]></value>
        </Data>
            <Data name="POLICIES">
           <displayName><![CDATA[Policy Count]]></displayName>
           <value><![CDATA[5]]></value>
        </Data>
     </ExtendedData>
      </Placemark>
   </Document>
</kml>

For my RadMap XAML, I have:

<telerik:RadMap Name="PolicyHeatMap" Width="1200" Height="600" ZoomLevel="6" Center="40.73, -73.98" Loaded="big_Loaded" SizeChanged="big_SizeChanged">
                <telerik:InformationLayer x:Name="xInfoLayer">
                    <telerik:InformationLayer.Colorizer>
                        <telerik:ColorMeasureScale ExtendedPropertyName="POLICIES"
                                                   Mode="Ranges">
                            <telerik:ColorMeasureScale.ShapeFillCollection>
                                <telerik:MapShapeFill Fill="White" Stroke="White" StrokeThickness="2" />
                                <telerik:MapShapeFill Fill="Red" Stroke="White" StrokeThickness="2" />
                            </telerik:ColorMeasureScale.ShapeFillCollection>
                            <telerik:ColorMeasureScale.RangeCollection>
                                <telerik:MapRange MinValue="0"    MaxValue="10" />
                                <telerik:MapRange MinValue="10"   MaxValue="30" />
                                <telerik:MapRange MinValue="30"   MaxValue="50" />
                                <telerik:MapRange MinValue="50"   MaxValue="100" />
                                <telerik:MapRange MinValue="100"  MaxValue="150" />
                                <telerik:MapRange MinValue="150"  MaxValue="300" />
                                <telerik:MapRange MinValue="300"  MaxValue="500" />
                                <telerik:MapRange MinValue="500"  MaxValue="1000" />
                                <telerik:MapRange MinValue="1000" MaxValue="2000" />
                            </telerik:ColorMeasureScale.RangeCollection>
                        </telerik:ColorMeasureScale>
                    </telerik:InformationLayer.Colorizer>
                </telerik:InformationLayer>
            </telerik:RadMap>

In my MainPage.xaml.cs:

String _kmlData = String.Empty;

        public MainPage()
        {
            InitializeComponent();
            this.PolicyHeatMap.Provider = new BingMapProvider(MapMode.Aerial, true, App.bingMapAppID);
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            xmapbusyind.IsBusy = true;
            PolicyDataServiceClient poldata = new PolicyDataServiceClient();
            poldata.GetZipcodeKMLDataCompleted += new EventHandler<GetZipcodeKMLDataCompletedEventArgs>(poldata_GetZipcodeKMLDataCompleted);
            poldata.GetZipcodeKMLDataAsync();
        }

        void poldata_GetZipcodeKMLDataCompleted(object sender, GetZipcodeKMLDataCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                throw new Exception("Error in obtaining KML data");
            }


            _kmlData = e.Result;
            List<FrameworkElement> list = KmlReader.Read(_kmlData);
            xInfoLayer.ItemsSource = list;
            xmapbusyind.IsBusy = false;
        }

So I believe that I am populating the ItemsSource properly as per this screencast (http://tv.telerik.com/watch/silverlight/using-kml-data-with-radmap).

Anyone ever do anything like this?

-Sam

[Andrey]

Hello Sam,

Unfortunately I'm not able to reproduce the problem you've mentioned. I've created test application using your XAML, C# code and KML and test it using different values of the "POLICIES" extended property in KML. All things wok just fine. Polygon was colorized by right color. Maybe number of the policies is always in the first range in your case.

We would like to help you if you could provide us with small solution which we could use to reproduce the problem.

Regards,

Andrey Murzov

the Telerik team

[Sam]

Hi Andrey,

I managed to fix it. I don't know how it was working for you, but for me it wasn't working. For the extended data, I had:

<ExtendedData>
    <Data name="ZIP">
        <displayName><![CDATA[Zip Code]]></displayName>
        <value><![CDATA[07857]]></value>
    </Data>
    <Data name="POLICIES">
        <displayName><![CDATA[Policy Count]]></displayName>
        <value><![CDATA[5]]></value>
    </Data>
</ExtendedData>

Somehow, the CDATA stuff was corrupting the data. I stripped it like so:

<ExtendedData>
    <Data name="ZIP">
        <displayName>Zip Code</displayName>
        <value>07857</value>
    </Data>
    <Data name="POLICIES">
        <displayName>Policy Count</displayName>
        <value>5</value>
    </Data>
</ExtendedData>

Then the colorization started to work!!

Now....once the colorization started to work, then the underlying map suddenly disappeared (see attached). I really would like to have the colorized tiles on top of Bing Maps. Before colorizing, the empty tiles appeared. Just after colorization did it disappear. :-(   In my MainPage.xaml.cs, I initialize the map provider properly:

public MainPage()
 {
     InitializeComponent();
     this.PolicyHeatMap.Provider = new BingMapProvider(MapMode.Aerial, true, App.bingMapAppID);
     this.Loaded += new RoutedEventHandler(MainPage_Loaded);
 }

So this shouldn't be happening. Any ideas? If you need to, I can send you my project.

[Andrey]

Hello Sam,

Unfortunately it is very complicated and it is hard to reproduce the problem without your solution, but using just the code snippet you sent. Could you, please, send us a sample solution which reproduces it?

Kind regards,
Andrey Murzov
the Telerik team

[Sam]

Hi Andrey,

I've actually tried to open a support ticket, but I'm having issues with the form. Perhaps you can help me with that? My solution is 15MB, so I can't upload it to the forums.

I am having some issues with your website. I am trying to enter a support ticket. But when I go to the page to do so (http://www.telerik.com/account/support-tickets/contact-support-team.aspx?odid=906959&pid=571), I can enter information in for everything else but the body of the message.

 

I am also having issues with the online documentation for Silverlight. I suspect the problem also exists for your other products. There are JavaScript errors on the page that doesn’t allow it to display properly.

-Sam

[Evgenia]

Hi Sam,

You have already been contacted by one of my colleagues. I'm copying the answer here which helped in your situation for anyone else that may encounter this forum post:

The most probable reason is due to some firewall/proxy which is blocking certain scripts. Can you please check with your sys admin whether you have such policy applied?

Regards,
Evgenia
the Telerik team

[Sam]

Hi Evgenia,

Yes, we had such a policy in place apparently. We "whitelisted" telerik.com and all was well. Thanks.

[Sam]

I'm about to mark this as the answer. Here is the response from Andrey from my support ticket which helped the map reappear:

"Also there is a known problem when map tiles don't appear. It occurs when a Silverlight project is assigned as startup instead of Web project. So, please check that your Web project is marked as startup project in your solution."