Namespace: Microsoft.Maps.SpatialToolbox.Bing

Supported Frameworks: Windows Store, WPF, WP8, WP8.1

Heat maps, also known as density maps, are a type of overlay on a map used to represent data using different colors. Heat maps are often used to show the data hot spots on a map. The data used in these overlays usually takes one of two forms:

  • Color coded polygons or polylines - In this form, the polygons and polylines are based on some metric related to those shapes. Creating this type of heat map is fairly easy as you simply need to assign a color to the shape when adding it to the map.
  • Point based data - This form uses point-based data where the colors of the heat map are based on the density of the data points on the map. Creating these types of heat maps is a bit more complex.

If you are working in JavaScript there is a client-side heat map module available in the Bing Maps V7 Modules project, which can be used in Windows Store apps. Using this module is fairly easy and only takes a few lines of code to setup.

The HeatMapLayer class creates point based density heat maps hat can easily support 50,000 data points but has been tested with 500,000 data points and found to have decent performance. Here is a screenshot of the type of heat map that this class generates:

The HeatMapLayer class provides a number of properties which can be used to customize how the heat map is rendered. Here is a list of the different properties available:

Name Type Description
HeatGradient GradientStopCollection A color gradient used to colorize the heat map.
Intensity double Intensity of the heat map. A value between 0 and 1.
Locations LocationCollection Collection of locations to plot on the heat map.
ParentMap Map A reference to the parent Bing Maps control.
Radius double Radius of data point in meters.
EnableHardEdge bool Gives all values the same opacity to create a hard edge on each data point. When set to false (default) the data points will use a fading opacity towards the edges.

The heat map will not render until the ParentMap property is assigned. All the properties with the exception of this one support data binding. If you decided to add a heat map to your map using XAML you will need to set the ParentMap property in your code behind. Here is an example of how to add a heat map to a Windows Store app map using XAML.

<Page
x:Class="HeatMapTestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HeatMapTestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:m="using:Bing.Maps"
xmlns:hm="using:Bing.Maps.HeatMaps>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<m:Map Name="MyMap" Credentials="YOUR_BING_MAPS_KEY">
<m:Map.Children>
<hm:HeatMapLayer Name="layer" Radius="2500"/>
</m:Map.Children>
</m:Map>
</Grid>
</Page>

You can then set the ParentMap property using the following code. You also can data bind the Location property, but for simplicity in this example I have just set it from code.
C#
using Bing.Maps;
using Microsoft.Maps.SpatialToolbox;
using Microsoft.Maps.SpatialToolbox.Bing;
using System;
using Windows.UI.Xaml.Controls;

namespace HeatMapTestApp
{
public sealed partial class MainPage : Page
{
private LocationCollection locs;

public MainPage()
{
this.InitializeComponent();

this.Loaded += (s, e) =>
{
locs = new LocationCollection();

//Add location data to collection…

layer.ParentMap = MyMap;
layer.Locations = locs;
};
}
}
}

Visual Basic
Imports Bing.Maps

Public NotInheritable Class MainPage
Inherits Page

Private layer As HeatMapLayer
Private locs As LocationCollection

Public Sub New()
InitializeComponent()

AddHandler MyMap.Loaded, Sub()
locs = New LocationCollection()

'Add location data to collection…

layer.ParentMap = MyMap
layer.Locations = locs
End Sub
End Sub
End Class

Alternatively, you can create the heat map completely from code and add it as a child of the map. The following is an example of how to add a HeatMapLayer to Bing Maps using code.

C#
using Bing.Maps;
using Microsoft.Maps.SpatialToolbox;
using Microsoft.Maps.SpatialToolbox.Bing;
using System;
using Windows.UI.Xaml.Controls;

namespace HeatMapTestApp
{
public sealed partial class MainPage : Page
{
private HeatMapLayer layer;
private LocationCollection locs;

public MainPage()
{
this.InitializeComponent();

this.Loaded += (s, e) =>
{
locs = new LocationCollection();

//Add location data to collection…

layer = new HeatMapLayer()
{
ParentMap = MyMap,
Locations = locs,
Radius = 2500
};

MyMap.Children.Add(layer);
};
}
}
}

Visual Basic
Imports Bing.Maps
Imports Microsoft.Maps.SpatialToolbox
Imports Microsoft.Maps.SpatialToolbox.Bing

Public NotInheritable Class MainPage
Inherits Page

Private layer As HeatMapLayer
Private locs As LocationCollection

Public Sub New()
InitializeComponent()

AddHandler MyMap.Loaded, Sub()
locs = New LocationCollection()

'Add location data to collection…

layer = New HeatMapLayer()
layer.ParentMap = MyMap
layer.Locations = locs
layer.Radius = 2500

MyMap.Children.Add(layer)
End Sub
End Sub
End Class

Here is a screenshot of the Windows Store sample Heat Map test app.

Last edited Aug 12, 2014 at 2:52 PM by rbrundritt, version 1