RadHeatMap on RadMap

[Liam]

Hello,

I am trying to put a RadHeatMap into my RadMap. Is it possible to put a RadHeatMap in an information layer? Is that the best way to do it, or is there a better way? How would I put a RadHeatMap inside of my RadMap so that it moves and zooms as if it were part of the map? I don't want labels or anything fancy on my RadHeatMap. I'm just looking to put a very simple, square, grid-like heat map on my RadMap.

I have MapPinPoints in an information layer already and I would like to be able to tell which "cell" of my RadHeatMap each PinPoint is from. Is there any way to do this?

Thanks in advance,
Liam

[Andrey]

Hello Liam,

The RadMap allows to place any framework element on it using the InformationLayer or the VisualizationLayer. You can take a look at the following documentation topics and online examples:

- VisualizationLayer Introduction

- Data Binding

- Data Binding Example

- InformationLayer Framework Elements

In fact there are 2 visualization engines in the RadMap package.

The old implementation of the map objects' (points and shapes) visualization consists of 3 layers: InformationLayer, DynamicLayer and VirtualizationLayer. This visualization engine, however, lacks certain features and has a few performance issues.

In the Q2 2013 release we've introduced a new visualization engine in the RadMap. It has been designed from scratch to have better performance. The new visualization engine replaces all 3 layers with the new VisualizationLayer. The major goals of the new engine are:

1. Improve the performance of the data visualization.
2. Allow reading map shapes from different sources (KML, ESRI, and SQL Geospatial) in the background thread.
3. Integrating clustering and items virtualization into the core. This simplifies the usage of both features.
4. Ability to attach/detach almost any input event available for the FrameworkElement to the map shape visualization.
5. Support of items selection in the engine core.

Having this information in mind, I would recommend using the new engine (and its VisualizationLayer) instead of old one (or the InformationLayer).

Regards,
Andrey Murzov
Telerik

[Liam]

Thanks for the quick response and good advice.

I'm trying to add a visualization layer to my code but it doesn't appear to be working. I've posted a redacted version of my code below. The code that I'm using to add the visualization layer is directly from the first link you posted. I have included Telerik.Windows.Controls, Telerik.Windows.Controls.DataVisualization, and Telerik.Windows.Data. The version of all of these is 2013.3.1204.45.

01.<Window x:Class="ProjName.MainWindow"
02.                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
05.
06.                Title="MainWindow" Height="720" Width="1280" WindowStartupLocation="CenterScreen">
07.
08.
09.    <Window.Resources>
10.        <DataTemplate x:Key="NodeTemplate">
11.             ...
12.        </DataTemplate>
13.    </Window.Resources>
14.
15.
16.    <Grid>
17.        <!--Create Map w/ Provider=OpenStreetMap & InfoLayer for adding nodes to-->
18.        <telerik:RadMap x:Name="map"  MapMouseClick="MapMouseDown">
19.            <telerik:RadMap.Providers>
20.                <telerik:OpenStreetMapProvider/>
21.            </telerik:RadMap.Providers>
22.            <telerik:InformationLayer x:Name="informationLayer" ItemTemplate="{StaticResource NodeTemplate}"/>
23.
24.            <!-- Example code from link #1: -->
25.            <telerik:VisualizationLayer x:Name="visualizationLayer">
26.                <Ellipse x:Name="Ellipse"
27.                 telerik:MapLayer.Location="42.6957539183824, 23.3327663758679"
28.                 Width="20"
29.                 Height="20"
30.                 Stroke="Red"
31.                 StrokeThickness="3"
32.                 Fill="Transparent" />
33.            </telerik:VisualizationLayer>
34.
35.        </telerik:RadMap>
36.
37.        ...
38.    </Grid>
39.</Window>

When I try to build this code it tells me:
The name "VisualizationLayer" does not exist in the namespace "http://schemas.telerik.com/2008/xaml/presentation".

Can you see anything in particular that I am doing wrong?   

I'm not sure if it is relevant but I am able to add a VirtualizationLayer, DynamicLayer, and InformationLayer. The only one it doesn't let me add is the VisualizationLayer.

Thanks,
Liam

[Andrey]

Hi Liam,

Unfortunately we can't tell for sure what might be going wrong in your application using only the code snippet you sent us. However, it might be that there are mismatched version in your application - can you please make sure again that all Telerik assemblies match the same version and that it is a new one - for instance 2013.3.1204.

If that doesn't help, you can send us a small sample reproducing the issue and we will gladly take a closer look at it.

Regards,
Andrey Murzov
Telerik

[Liam]

Andrey,

Thank you. I was able to fix that problem. I am now able to add a visualization layer to my RadMap. I am going to attempt to add a RadHeatMap to this visualization layer using the information you provided your first post.

If I run into any more problems, I will let you know.

Thanks again,
Liam

[Liam]

Hello again,

I'm continuing this thread rather than starting a new one for the same topic. I finally got around to attempting to implement this and I've run into some problems. I used the simple example posted on the RadHeatMap documentation page to create a heat map. I was able to put it inside of my RadMap's VisualizationLayer by setting the location of it on my MapLayer. The problem is that only the row headers are displayed on the left-hand side. I can't seem to get the entire heat map to show (see attached image). Additionally, the heat map doesn't seem to scale with the map itself. It keeps it's original size regardless of the level of zoom.

I've posted the entirety of my mini-test project below. (The TempInfo class is the same as is posted in the documentation page.)

MainWindow.xaml:

<Window x:Class="HeatMapTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" WindowState="Maximized">
    <Grid>
        <telerik:RadMap>
            <telerik:RadMap.Providers>
                <telerik:OpenStreetMapProvider/>
            </telerik:RadMap.Providers>

            <telerik:VisualizationLayer x:Name="visualLayer">
                <telerik:RadHeatMap x:Name="heatMap" ShowToolTips="True" Height="300" CellBorderColor="DarkGray" CellBorderThickness="3" BorderBrush="Black" BorderThickness="5">
                    <telerik:RadHeatMap.DescriptionContent>
                        <TextBlock Text="My Description" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </telerik:RadHeatMap.DescriptionContent>
                    <telerik:RadHeatMap.Definition>
                        <telerik:CategoricalDefinition ItemsSource="{Binding}"
                                    RowGroupMemberPath="Year"
                                    ColumnGroupMemberPath="Month"
                                    ValuePath="Temperature"/>
                    </telerik:RadHeatMap.Definition>
                </telerik:RadHeatMap>
            </telerik:VisualizationLayer>

        </telerik:RadMap>
    </Grid>
</Window>

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        //Source: http://www.telerik.com/help/wpf/radheatmap-populating-with-data.html
        DateTime date = new DateTime(2010, 1, 1);

        var infos = new List<TempInfo>()
        {
            new TempInfo() { Year = date, Month = "Apr", Temperature = 17, Rain = 8.8},
            new TempInfo() { Year = date, Month = "May", Temperature = 20, Rain = 6.25},

            new TempInfo() { Year = date.AddYears(1), Month = "Jan", Temperature = 5, Rain=10.3},
            new TempInfo() { Year = date.AddYears(1), Month = "Feb", Temperature = 13, Rain = 9.8},
            new TempInfo() { Year = date.AddYears(1), Month = "Mar", Temperature = 21, Rain = 9.6},

            new TempInfo() { Year = date.AddYears(2), Month = "Jan", Temperature = 14, Rain = 11.5},
            new TempInfo() { Year = date.AddYears(2), Month = "Feb", Temperature = 19, Rain = 7.5},
            new TempInfo() { Year = date.AddYears(2), Month = "Mar", Temperature = 17, Rain = 10.1},
        };

        MapLayer.SetLocation(heatMap, new Location(85, -180));
        this.heatMap.Definition.ItemsSource = infos;
    }
}

I don't see any issues in my code and the entire heat map displays perfectly when it is not inside a visualization layer. Please let me know if you see something I am doing wrong or if you have any suggestions on how I could better use RadHeatMap to meet my needs.

Thanks for your continued assistance,
Liam

[Andrey]

Hi Liam,

You should specify the Width property of the RadHeatMap when you show it inside VisualizationLayer of RadMap. The VisualizationLayer does not scale a framework element automatically. You can use the BaseZoomLevel, MinScale and MaxScale properties of MapLayer to make the RadHeatMap scalable. For more information I would recommend you to take a look at the following documentation topic:
Rad Map Visualization Layer Introduction


Regards,
Andrey Murzov
Telerik

 

 

[Liam]

Thanks Andrey. I am now able to see the entire heat map. The problem that I'm having now is that it is hard using only BaseZoomLevel, MinScale, and MaxScale to position the heat map so it covers a very specific, constant geographic area.

The RectangleData (or any <Shape>Data class) has width and height measured in degrees. This allows for very precise placement and sizing (regardless of zoom) of these elements. This is essentially what I am trying to accomplish with my RadHeatMap. Do you have any suggestions for the best way to go about this?

I saw that there is a GeographicalSize property of MapLayer that I think would be much more accurate and allow me more control over the dimensions and placement of my heat map. It isn't mentioned in any examples that I've found so is there any chance you could briefly explain how to use it? I understand that you pass it a Location but I'm confused about what that location is. Is it the location of the opposite corner or is it the dimensions in degrees of the element or is it something else entirely?

I sincerely thank you for your continued assistance,
Liam

[Andrey]

Hello Liam,

The MapLayer.GeographicalSize is designed for internal usage only. So, you can't use it to show RadHeatMap within the specific geographic area.

Also it seems you shouldn't use the RadHeatMap for this task. The RadMap contains built-in Colorizer feature. You can use the RectangleData (or any <Shape>Data class) to specify the regions you should colorize. The map shapes contains the ExtendedData property. It allows to specify the value you should use to define a color of the region.
I have attached an example.
I hope it helps.

Also I would recommend you to take a look at the Land Area of the World example.

Regards,
Andrey Murzov
Telerik