HotSpot doesn't work if used in a DataTemplate

5 posts, 0 answers
  1. Brian
    Brian avatar
    5 posts
    Member since:
    Nov 2011

    Posted 21 Nov 2011 Link to this post

    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: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>
  2. Brian
    Brian avatar
    5 posts
    Member since:
    Nov 2011

    Posted 21 Nov 2011 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 23 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Brian
    Brian avatar
    5 posts
    Member since:
    Nov 2011

    Posted 23 Nov 2011 Link to this post

    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>
  6. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 28 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
UI for WPF is Visual Studio 2017 Ready