HeatmapProvider Class

Allows you to draw a heatmap on the Map Control surface.

Assembly: DevExpress.Xpf.Map.v20.2.dll

NuGet Packages: DevExpress.WindowsDesktop.Wpf.Map, DevExpress.Wpf.Map

Declaration

C#
VB.NET

public class HeatmapProvider :
    FullRequestedImageDataProvider,
    IHeatImageContextProvider,
    IFullRequestedContextProvider,
    IUnitConverterProvider,
    IWeakEventListener,
    ILegendDataProvider

Public Class HeatmapProvider
    Inherits FullRequestedImageDataProvider
    Implements IHeatImageContextProvider,
               IFullRequestedContextProvider,
               IUnitConverterProvider,
               IWeakEventListener,
               ILegendDataProvider

Remarks

The following image shows a sample heatmap:

Run Demo: Heat Map

Follow the steps below to create a heatmap:

Begin with an ImageLayer object and add it to the MapControl.Layers collection.
Assign a HeatmapProvider object to the ImageLayer.DataProvider property.
Initialize the PointSource property to configure a source of heatmap points. Each heatmap point can be defined by its geo location and weight value (optional).

Use a HeatmapDataSourceAdapter object to generate points from a data source.

Alternatively, you can use a HeatmapPointStorage to plot a heatmap based on points created in code.

Specify an algorithm the Map Control should use to create a heatmap. Set the Algorithm property to a HeatmapDensityBasedAlgorithm object. At this time, this is the only available algorithm and it builds heatmaps based on point density. Additional algorithms will be implemented in future versions of this product.

Markup:

XAML

<Window.DataContext>
  <local:EarthquakesData/>
</Window.DataContext>
<Grid>
    <dxm:MapControl>
        <dxm:ImageLayer Name="heatmapLayer" Opacity="0.75">
            <dxm:HeatmapProvider>
                <dxm:HeatmapProvider.PointSource>
                    <dxm:HeatmapDataSourceAdapter DataSource="{Binding Path=DataItems}">
                        <dxm:HeatmapDataSourceAdapter.Mappings>
                            <dxm:HeatmapPointMappingInfo XCoordinate="Longitude" 
                                                        YCoordinate="Latitude"/>
                        </dxm:HeatmapDataSourceAdapter.Mappings>
                    </dxm:HeatmapDataSourceAdapter>
                </dxm:HeatmapProvider.PointSource>
                <dxm:HeatmapProvider.Algorithm>
                    <dxm:HeatmapDensityBasedAlgorithm PointRadius="10"/>
                </dxm:HeatmapProvider.Algorithm>
            </dxm:HeatmapProvider>
        </dxm:ImageLayer>
    </dxm:MapControl>
</Grid>

Code-Behind:

C#
VB.NET

using System;
using System.Collections.Generic;
using System.IO;
using System.Windows;
using System.Xml.Serialization;
namespace Heatmap {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class EarthquakeViewModel {
        [XmlElement("glat")]
        public double Latitude { get; set; }
        [XmlElement("glon")]
        public double Longitude { get; set; }
    }
    [XmlRoot("Data")]
    public class EarthquakesData {
        static EarthquakesData instance;
        public static List<EarthquakeViewModel> DataItems {
            get { return Instance.Items; }
        }
        public static EarthquakesData Instance {
            get { return instance ?? (instance = CreateInstance()); }
        }
        static EarthquakesData CreateInstance() {
            XmlSerializer serializer = new XmlSerializer(typeof(EarthquakesData));
            Stream documentStream = LoadStreamFromResources("/Data/Earthquakes.xml");
            return (EarthquakesData)serializer.Deserialize(documentStream);
        }
        [XmlElement("Row")]
        public List<EarthquakeViewModel> Items { get; set; }
        public static Stream LoadStreamFromResources(string fileName) {
            try {
                Uri uri = new Uri(fileName, UriKind.RelativeOrAbsolute);
                return Application.GetResourceStream(uri).Stream;
            }
            catch {
                return null;
            }
        }
    }
}

Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Windows
Imports System.Xml.Serialization
Namespace Heatmap
    Public Partial Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class EarthquakeViewModel
        <XmlElement("glat")>
        Public Property Latitude As Double
        <XmlElement("glon")>
        Public Property Longitude As Double
    End Class
    <XmlRoot("Data")>
    Public Class EarthquakesData
        Shared instance As EarthquakesData
        Public Shared ReadOnly Property DataItems As List(Of EarthquakeViewModel)
            Get
                Return Instance.Items
            End Get
        End Property
        Public Shared ReadOnly Property Instance As EarthquakesData
            Get
                Return If(instance, (CSharpImpl.__Assign(instance, CreateInstance())))
            End Get
        End Property
        Private Shared Function CreateInstance() As EarthquakesData
            Dim serializer As XmlSerializer = New XmlSerializer(GetType(EarthquakesData))
            Dim documentStream As Stream = LoadStreamFromResources("/Data/Earthquakes.xml")
            Return CType(serializer.Deserialize(documentStream), EarthquakesData)
        End Function
        <XmlElement("Row")>
        Public Property Items As List(Of EarthquakeViewModel)
        Public Shared Function LoadStreamFromResources(ByVal fileName As String) As Stream
            Try
                Dim uri As Uri = New Uri(fileName, UriKind.RelativeOrAbsolute)
                Return Application.GetResourceStream(uri).Stream
            Catch
                Return Nothing
            End Try
        End Function
        Private Class CSharpImpl
            Shared Function __Assign(Of T)(ByRef target As T, value As T) As T
                target = value
                Return value
            End Function
        End Class
    End Class
End Namespace

The XML file that is used as a data source has the following structure:

Show the structure

```xml
<?xml version="1.0"?>
<Data>
  <xs:schema id="Data" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
    <xs:element name="Data" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
      <xs:complexType>
        <xs:choice minOccurs="0" maxOccurs="unbounded">
          <xs:element name="Row">
            <xs:complexType>
              <xs:sequence>
                <xs:element name="glat" type="xs:double" minOccurs="0" />
                <xs:element name="glon" type="xs:double" minOccurs="0" />
              </xs:sequence>
            </xs:complexType>
          </xs:element>
        </xs:choice>
      </xs:complexType>
    </xs:element>
  </xs:schema>
  <Row>
    <glat>36.475</glat>
    <glon>70.14</glon>
  </Row>
  <!--...-->
</Data>
```

To show a layer with a geographical map under the heatmap overlay, add an image layer and use one of image tile providers (for example, BingMapDataProvider) to set the layer’s ImageLayer.DataProvider property.

Configure the Color Scheme

You can use ChoroplethColorizer to change the predefined color scheme used to draw a heatmap. If heatmap points’ Value parameters are not specified, the control will color the heatmap based on point density alone. In this case, use values within the [0,1] range to set the color range boundaries (the ChoroplethColorizer.RangeStops property).

XAML

<dxm:HeatmapProvider.Colorizer>
    <dxm:ChoroplethColorizer RangeStops="0.1, 0.2, 0.7, 1.0"
                             ApproximateColors="True">
        <dxm:ChoroplethColorizer.Colors>
            <Color A="50"  R="128"  G="255"  B="0"/>
            <Color A="255" R="255"  G="255"  B="0"/>
            <Color A="255" R="234"  G="72"   B="58"/>
            <Color A="255" R="162"  G="36"   B="25"/>
        </dxm:ChoroplethColorizer.Colors>
    </dxm:ChoroplethColorizer>
</dxm:HeatmapProvider.Colorizer>

ChoroplethColorizer - Represents the Choropleth-like colorizer.
ChoroplethColorizer.RangeStops - Gets or sets range stops for the choropleth colorizer.
MapColorizer.Colors - Gets or sets the collection of colors with which to colorize map shapes.
ChoroplethColorizer.ApproximateColors - Gets or sets a value specifying whether to apply an approximation algorithm to colors in a colorizer.
HeatmapProvider.Colorizer- Gets or sets the Choropleth colorizer used to paint the heatmap.

Tip

The following help topic describes the algorithm used to color heatmap points: HeatmapPoint.Value.

Add a Legend

Use the code below to add a legend with a gradient scale.

XAML

<dxm:MapControl.Legends>
  <dxm:ColorScaleLegend Layer="{Binding ElementName=heatmapLayer}"
                        EnableGradientScale="True" 
                        Header="Seismic Density">
  </dxm:ColorScaleLegend>
</dxm:MapControl.Legends>

ColorScaleLegend - A color legend represented as a color scale.
MapLegendBase.Header - Gets or sets the header of the map legend.
ColorScaleLegend.EnableGradientScale - Gets or sets whether a gradient applies across a legend‘s color items.
ItemsLayerLegend.Layer - Specifies the layer from which the legend obtains data to display.
MapControl.Legends - Returns a collection of legends stored by the map control.