HotSpot doesn't work if used in a DataTemplate

[Brian]

I'm trying to display polygons, polylines and ellipses on the map using a template selector.  The ellipse data template is defined to hotspot to center the ellipse at the MapLayer.Location, but this is getting ignored and the location is still applied to the top-left of the ellipse.

The only way I can get a HotSpot to work on an ellipse is to add the control directly to an information layer and not use a template.  Is there any reason the HotSpot shouldn't work in a templated item?

public class ViewModel
{
    public List<Location> Locations { get { return new List<Location>() {new Location(0, 0)}; } }
}

<Window x:Class="TelerikMapTest.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"
        xmlns:TelerikMapTest="clr-namespace:TelerikMapTest"
        Title="MainWindow" Height="350" Width="525">

    <Window.DataContext>
        <TelerikMapTest:ViewModel />
    </Window.DataContext>

    <Window.Resources>
        <DataTemplate x:Key="template">
            <telerik:MapEllipse Width="1000" Height="1000"
                        Fill="Blue" Opacity="0.6"
                        telerik:MapLayer.Location="{Binding}">
                <telerik:MapLayer.HotSpot>
                    <telerik:HotSpot X="0.5" Y="0.5"
                              XUnits="Fraction" YUnits="Fraction" />
                </telerik:MapLayer.HotSpot>
            </telerik:MapEllipse>
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <telerik:RadMap>
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>

            <telerik:InformationLayer ItemsSource="{Binding Locations}"
                            ItemTemplate="{StaticResource template}" />
            <telerik:InformationLayer>
                <telerik:MapEllipse Width="1000" Height="1000"
                            Fill="Yellow" Opacity="0.6"
                            telerik:MapLayer.Location="0,0">
                    <telerik:MapLayer.HotSpot>
                        <telerik:HotSpot X="0.5" Y="0.5"
                                  XUnits="Fraction" YUnits="Fraction" />
                    </telerik:MapLayer.HotSpot>
                </telerik:MapEllipse>
            </telerik:InformationLayer>
        </telerik:RadMap>
    </Grid>
</Window>

[Brian]

Strangely enough, if I change the MapEllipse to a normal Ellipse, the HotSpot works in both cases.  So I guess this is just a problem with MapEllipse using a HotSpot in a template.

[Andrey]

Hi Brian,

The HotSpot feature can't be used for map shapes elements like MapEllipse, MapPolyline and etc. In fact the hotspot does not work also when you add the MapEllipse directly to an information layer.
When you want centering the ellipse at the MapLayer.Location then you can use MapPath with MapEllipseGeometry instead of MapEllipse. The MapEllipseGeometry is positioned using its center location like to the Silverlight standard for the EllipseGeometry.
The sample code is below.

<DataTemplate x:Key="template">
    <telerik:MapPath Fill="Blue" Opacity="0.6">
        <telerik:MapPath.Data>
            <telerik:MapEllipseGeometry Center="{Binding}"
                            RadiusX="500" RadiusY="500" />
        </telerik:MapPath.Data>
    </telerik:MapPath>
</DataTemplate>

Best wishes,
Andrey Murzov
the Telerik team

[Brian]

I tried using databound MapEllipseGeometries and it does not work as suggested.  If I specify hard coded Center and RadiusX and Y properties, then the geometry shows up, but it defeats the purpose of using DataTemplates.

The attached screenshot was generated with the following code using the view model posted before.  Note that the yellow MapEllipse has a hotspot that centers the ellipse as desired.  The red MapEllipse in a data template does not use the hot spot, as you mentioned.  Of all the MapEllipseGeometries, only the one with the hard-coded Center is displayed.

The location in the View Model is set to (30,100).

<telerik:RadMap>
    <telerik:RadMap.Provider>
        <telerik:OpenStreetMapProvider />
    </telerik:RadMap.Provider>

    <telerik:InformationLayer ItemsSource="{Binding Locations}">
        <telerik:InformationLayer.ItemTemplate>
            <DataTemplate>
                <Ellipse Width="150" Height="150"
                        Stroke="Blue" StrokeThickness="2" Opacity="0.6"
                        telerik:MapLayer.Location="{Binding}">
                    <telerik:MapLayer.HotSpot>
                        <telerik:HotSpot X="0.5" Y="0.5" XUnits="Fraction" YUnits="Fraction" />
                    </telerik:MapLayer.HotSpot>
                </Ellipse>
            </DataTemplate>
        </telerik:InformationLayer.ItemTemplate>
    </telerik:InformationLayer>

    <telerik:InformationLayer>
        <telerik:MapEllipse Width="5000" Height="5000"
                            Fill="Yellow" Opacity="0.6"
                            telerik:MapLayer.Location="{Binding Locations[0]}">
            <telerik:MapLayer.HotSpot>
                <telerik:HotSpot X="0.5" Y="0.5" XUnits="Fraction" YUnits="Fraction" />
            </telerik:MapLayer.HotSpot>
        </telerik:MapEllipse>

        <telerik:MapPath Stroke="Green" StrokeThickness="2">
            <telerik:MapPath.Data>
                <telerik:MapEllipseGeometry Center="{Binding Locations[0]}" RadiusX="750" RadiusY="500" />
            </telerik:MapPath.Data>
        </telerik:MapPath>

        <telerik:MapPath Stroke="Green" StrokeThickness="2">
            <telerik:MapPath.Data>
                <telerik:MapEllipseGeometry Center="30,100" RadiusX="500" RadiusY="750" />
            </telerik:MapPath.Data>
        </telerik:MapPath>

    </telerik:InformationLayer>

    <telerik:InformationLayer ItemsSource="{Binding Locations}">
        <telerik:InformationLayer.ItemTemplate>
            <DataTemplate>
                <telerik:MapEllipse Width="2500" Height="2500"
                            Stroke="Red" StrokeThickness="2" Opacity="0.6"
                            telerik:MapLayer.Location="{Binding}">
                    <telerik:MapLayer.HotSpot>
                        <telerik:HotSpot X="0.5" Y="0.5" XUnits="Fraction" YUnits="Fraction" />
                    </telerik:MapLayer.HotSpot>
                </telerik:MapEllipse>
            </DataTemplate>
        </telerik:InformationLayer.ItemTemplate>
    </telerik:InformationLayer>

    <telerik:InformationLayer ItemsSource="{Binding Locations}">
        <telerik:InformationLayer.ItemTemplate>
            <DataTemplate>
                <telerik:MapPath Stroke="Black" StrokeThickness="2">
                    <telerik:MapPath.Data>
                        <telerik:MapEllipseGeometry Center="{Binding}" RadiusX="1000" RadiusY="3000" />
                    </telerik:MapPath.Data>
                </telerik:MapPath>
            </DataTemplate>
        </telerik:InformationLayer.ItemTemplate>
    </telerik:InformationLayer>
</telerik:RadMap>

[Andrey]

Hi Brian,

By design it is not supposed to use HotSpot with map shape objects (including MapEllipse). So you can't use it and rely on it when you use MapEllipse control.

Unfortunately in fact the WPF version of the map control does not allow to use the MapEllipseGeometry in a data template. The data binding to its properties does not work.
We have created a PITS issue to fix this problem. You can track it using the following link:
http://www.telerik.com/support/pits.aspx#/public/silverlight/8597

Best wishes,
Andrey Murzov
the Telerik team