HeatmapPoint.Value Property

Gets or sets the heatmap point value.

Namespace: DevExpress.Xpf.Map

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

NuGet Package: DevExpress.Wpf.Map

Declaration

C#

public double Value { get; set; }

VB.NET

Public Property Value As Double

Property Value

Type	Description
Double	The heatmap point value.

Remarks

Points with higher values have more saturated colors.

The Map Control uses the following algorithm to color heatmap points. If the Value property is not specified, it is set to 0.4. Pixel weight (value) is calculated for all pixels inside the point radius. The Map Control uses the following formula:

where:

• dx/dy - the distance from the heatmap point center in pixels along the X and Y axes, respectively;
• PointRadius - the HeatmapDensityBasedAlgorithm.PointRadius property value;
• Value - HeatmapPoint.Value (the heatmap point value).

For example, the point radius is 10. The heatmap point’s central pixel has a weight that equals the point value. The weight of the pixel located next to the central pixel (dx = 1, dy = 0) is 0.9*Value, the second pixel from the center (dx = 2, dy = 0) is 0.8*Value, etc.

Central Pixel PointRadius =10; Point Value = 2 Pixel Value = 2	Third pixel from the center PointRadius =10; Point Value = 2 Pixel Value = (1 - 3/10)*2= 1.4

The Map Control summarizes values from different heatmap points for each pixel. Since the point radius is set in pixels, the Map Control reaggregates heatmap points when you zoom in to or zoom out of a map. For this reason, areas with aggregated points can change colors.

In the right image, heatmap points are closer to each other. Pixels between them are included in the point radiuses of two heatmap points. The Map Control calculates values for these pixels and colors them according to these values.

Zoom Level = 5	Zoom Level = 4

The Map Control uses the Colorizer to color pixels based on their values. The colorizer gets colors from the Colors collection to paint pixels with values from the RangeStops collection. Pixels with values between range stops are colored with mixed colors. If you do not specify the colorizer, the Map Control uses the following colorizer code:

C#

ColorCollection colors = new ColorCollection {
  Color.FromArgb(10, 0, 128, 0),
  Color.FromArgb(200, 25, 153, 0),
  Colors.Yellow,
  Colors.Red
};
ChoroplethColorizer colorizer = new ChoroplethColorizer {
  ApproximateColors = true,
  Colors = colors,
  RangeStops = new DoubleCollection(new double[] { 0, 0.1, 0.5, 1 })
}; 

VB.NET

Dim colors As ColorCollection = New ColorCollection From {
  Color.FromArgb(10, 0, 128, 0),
  Color.FromArgb(200, 25, 153, 0),
  Colors.Yellow,
  Colors.Red
}
Dim colorizer As ChoroplethColorizer = New ChoroplethColorizer With {
  .ApproximateColors = True,
  colors,
  .RangeStops = New DoubleCollection(New Double() {0, 0.1, 0.5, 1})
}

Note

When you do not define Colorizer and set the same value for all points (or do not specify point values), the Map Control sets points values to 0.4. This approach allows the default colorizer to work correctly.

When the default colorizer is used, the Map Control displays the legend with a scale from 0 to 1.

Example

This example shows how to use a HeatmapPointStorage object to create a heatmap layer.

• Create an ImageLayer object and add it to the MapControl.Layers collection.
• Assign a HeatmapProvider object to the ImageLayer.DataProvider property.
• Use a HeatmapPointStorage object to initialize the PointSource property.

Markup:

XAML

<dxm:MapControl>
    <dxm:ImageLayer>
        <dxm:HeatmapProvider>
            <dxm:HeatmapProvider.PointSource>
                <dxm:HeatmapPointStorage x:Name="storage"/>
            </dxm:HeatmapProvider.PointSource>
            <dxm:HeatmapProvider.Algorithm>
                <dxm:HeatmapDensityBasedAlgorithm PointRadius="50"/>
            </dxm:HeatmapProvider.Algorithm>
            <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>
        </dxm:HeatmapProvider>
    </dxm:ImageLayer>
</dxm:MapControl>

Code-Behind:

C#

using System.Windows;
using DevExpress.Xpf.Map;
namespace HeatmapPointStorage {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            storage.Points.Add(new HeatmapPoint(new GeoPoint(23.5309, -0.4211), 1));
            storage.Points.Add(new HeatmapPoint(new GeoPoint(32.3248, 21.0537), 0.5));
            storage.Points.Add(new HeatmapPoint(new GeoPoint(14.1503, 16.3626), 1));
            storage.Points.Add(new HeatmapPoint(new GeoPoint(7.2144, 34.2711), 1));
            storage.Points.Add(new HeatmapPoint(new GeoPoint(-4.5456, 10.1143), 0.5));
        }
    }
}

VB.NET

Imports System.Windows
Imports DevExpress.Xpf.Map
Namespace HeatmapPointStorage
    Public Partial Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
            storage.Points.Add(New HeatmapPoint(New GeoPoint(23.5309, -0.4211), 1))
            storage.Points.Add(New HeatmapPoint(New GeoPoint(32.3248, 21.0537), 0.5))
            storage.Points.Add(New HeatmapPoint(New GeoPoint(14.1503, 16.3626), 1))
            storage.Points.Add(New HeatmapPoint(New GeoPoint(7.2144, 34.2711), 1))
            storage.Points.Add(New HeatmapPoint(New GeoPoint(-4.5456, 10.1143), 0.5))
        End Sub
    End Class
End Namespace

You can also create heatmap points in XAML:

XAML

<dxm:HeatmapProvider.PointSource>
    <dxm:HeatmapPointStorage>
        <dxm:HeatmapPointStorage.Points>
            <dxm:HeatmapPoint Value="0.5">
                <dxm:HeatmapPoint.Location>
                    <dxm:GeoPoint Latitude="32.3248" Longitude="21.0537"/>
                </dxm:HeatmapPoint.Location>
            </dxm:HeatmapPoint>
            <!-- Other heatmap points. -->
        </dxm:HeatmapPointStorage.Points>
    </dxm:HeatmapPointStorage>
</dxm:HeatmapProvider.PointSource>