HeatMap

This sample demonstrates creating an ESRI.ArcGIS.Client.Toolkit.DataSources HeatMapLayer draped over an ArcGISTiledMapServiceLayer. A 'heat map' is a color image (ranging from blue to red to yellow) that demonstrates the spatial intensity of a set of points (HeatMapPoints). Use the slider to change the intensity of the heat map. The intensity defines the size of cells in a matrix used to calculate density. An intensity of 1 shows all of the HeatMapPoints individually. The HeatMapPoints are randomly generated across map surface.

XAML

<UserControl x:Class="ArcGISWPFSDK.HeatMapLayerSimple"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    <Grid x:Name="LayoutRoot" >
        <Grid.Resources>
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.184"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
        </Grid.Resources>

        <esri:Map x:Name="MyMap" WrapAround="True">
            <esri:ArcGISTiledMapServiceLayer ID="ShadedReliefLayer" MinimumResolution="40000"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer" />
            <esri:HeatMapLayer ID="RandomHeatMapLayer" Opacity=".75" Intensity="20" />
        </esri:Map>

        <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" >
            <Rectangle Fill="{StaticResource PanelGradient}" Stroke="Gray"  RadiusX="10" RadiusY="10" Margin="0,0,0,5">
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Rectangle Fill="#FFFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,15" />
            <StackPanel Margin="5" Orientation="Vertical" HorizontalAlignment="Center">
                <TextBlock x:Name="ResponseTextBlock" Text="Use the slider to change the intensity of the heat map.  The intensity defines the size of cells in a matrix used to calculate density." 
                       Width="200" TextAlignment="Left" Margin="30,20,20,5" TextWrapping="Wrap" Foreground="Black"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,0,5,20">
                    <TextBlock Text="1" FontSize="10" FontWeight="Bold" Margin="5" Foreground="Black"/>
                    <Slider x:Name="MyIntensitySlider" Width="150" Height="18" Minimum="1" Maximum="100"
          Value="{Binding ElementName=MyMap, Path=Layers[RandomHeatMapLayer].Intensity, Mode=TwoWay}" />
                    <TextBlock Text="100" FontSize="10" FontWeight="Bold" Margin="5" Foreground="Black"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>

C#

using System;
using System.Windows.Controls;
using ESRI.ArcGIS.Client.Toolkit.DataSources;

namespace ArcGISWPFSDK
{
    public partial class HeatMapLayerSimple : UserControl
    {
        public HeatMapLayerSimple()
        {
            InitializeComponent();
            MyMap.Layers.LayersInitialized += Layers_LayersInitialized;
        }


        void Layers_LayersInitialized(object sender, EventArgs args)
        {
            //Add 1000 random points to the heat map layer
            //Replace this with "real" data points that you want to display
            //in the heat map.
            HeatMapLayer layer = MyMap.Layers["RandomHeatMapLayer"] as HeatMapLayer;

            Random rand = new Random();
            for (int i = 0; i < 1000; i++)
            {
                double x = rand.NextDouble() * MyMap.Extent.Width - MyMap.Extent.Width / 2;
                double y = rand.NextDouble() * MyMap.Extent.Height - MyMap.Extent.Height / 2;
                layer.HeatMapPoints.Add(new ESRI.ArcGIS.Client.Geometry.MapPoint(x, y));
            }
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client.Toolkit.DataSources

Namespace ArcGISWPFSDK

    Partial Public Class HeatMapLayerSimple
        Inherits UserControl
        Public Sub New()
            InitializeComponent()
            AddHandler MyMap.Layers.LayersInitialized, AddressOf Layers_LayersInitialized
        End Sub


        Private Sub Layers_LayersInitialized(sender As Object, args As EventArgs)
            'Add 1000 random points to the heat map layer
            'Replace this with "real" data points that you want to display
            'in the heat map.
            Dim layer As HeatMapLayer = TryCast(MyMap.Layers("RandomHeatMapLayer"), HeatMapLayer)

            Dim rand As New Random()
            For i As Integer = 0 To 999
                Dim x As Double = rand.NextDouble() * MyMap.Extent.Width - MyMap.Extent.Width / 2
                Dim y As Double = rand.NextDouble() * MyMap.Extent.Height - MyMap.Extent.Height / 2
                layer.HeatMapPoints.Add(New ESRI.ArcGIS.Client.Geometry.MapPoint(x, y))
            Next
        End Sub
    End Class
End Namespace