using XAML Map Control to add a heatmap layer on a map based on OpenStreetMap from C# VS2013 WPF

Question

I am trying to use XAML MAP control (https://xamlmapcontrol.codeplex.com/) to add a heatmap layer on a map based on OpenStreetMap from C# VS2013 WPF.

I have added the heatmap image to the map by setting north, south, east and west latitude/longitude in MainWindow.xaml.

But, I need the locations in the heatmap to be shown in the correct locations with same latitude and longitude in the map as they are created from the input file not just pasting the image to the map.

Example, the given input is :

   Logitude,    latitude,    value
       -77.85      42.96      9798

There are 0.5 million locations in the input file.

I would like to show the locations in the map as heatmap points. In the above example, the point is located at New York State. I would like to show it on a map with some colors that are assigned according to the value in a legend specified beforehand.

Also, because 0.5 million points are shown on a map may not be a good view when zoom level is large e.g. 15. So, I hope that when I zoom in the map, the heatmap points can be merged to one point at different aggregated geo-level.

For example, if there 5000 points in one zip code area, at zoom level > 12, I only show one point in one zip code area at the zip-code centroid or just make the zipcode area to be colored as a polygon with only one color.

When zoom level at 8 < level < 12, I only need to show county level points in the pattern same as above.

When zoom level at 3 < level < 5, I only need to show state level points in the pattern same as above.

When zoom level at level < 3, I only need to show U.S. country level points in the pattern same as above.

Any help would be appreciated.

Answer 1

You may use a derived MapImageLayer and override its UpdateImage to create a heatmap bitmap on the fly. This would of course only be a sensible approach, if creating the bitmap doesn't take too much time.

public class HeatmapImage : MapImageLayer
{
    protected override void UpdateImage(
        double west, double east, double south, double north, int width, int height)
    {
        BitmapSource bitmap = ... // create heatmap here
        UpdateImage(west, east, south, north, bitmap);
    }
}

You would then simply add the HeatmapImage to the map, and you're done:

<map:Map TileLayer="{x:Static map:TileLayer.OpenStreetMapTileLayer}">
    <local:HeatmapImage />
</map:Map>

Note that the map image in the bitmap would have to be created using the Web Mercator projection.

---

EDIT: To give you an idea how a MapImage works, take a look at the following XAML snippet from the sample application in XAML Map Control. It displays an image with the given lat/lon bounds as an overlay in the map control. The actual image is a aerial image tile copied from Google Maps:

<map:MapImage South="53.54031" North="53.74871" West="8.08594" East="8.43750"
              Source="10_535_330.jpg"/>