Hotspot for pushpin image w/info bubble

[Jeff]

I have a radMap that is bound to a collection of data items. I have defined an ItemTemplate that draws some WPF elements on the map, for each item in the collection.

What I want is to draw an push-pin image at the location of the item, and to have, offset a bit, a info bubble - a visible element containing information about the item.

Currently, my template consists of a grid with one cell, and with two items drawn in that cell - an Image, with its source pointing to the Uri for the image file, and a Border, with borders and corner radius set to create the bubble look, and with content elements that display what I need, that I am shifting up and right using <Border.RenderTransform><TranslateTransform>.

The problem - the point of the image is not set to the proper location on the map.  The HotSpot property is being applied to the entire Grid, and not to just the Image.

With the Translate, I'm binding X to half the sum of the ActualHeights of the Border and the Image, and ditto Y using the ActualWidths, using a scaling converter I've written. But translating the Border doesn't change the size of the containing Grid.

And here's the thing - I can't just figure out appropriate HotSpot offsets, because the actual size of the Border bubble is dynamic, changing with its contents.

I think I could, with some work, develop another converter that would return the appropriate HotSpot values, using a multiple binding to the image and the border. But I'm wondering if I'm not missing something simple.

Is there not a way to draw an element in association with my Image, without affecting the layout of the container within which that Image is contained?  Normally, I'd be looking at Adorners, but AIUI they can only be applied in code, and I see no way to hook them to the Images, as they're being drawn on the map.

Is there some simpler way of adding an info button to a push-pin?

<telerik:RadMap>
    <telerik:RadMap.Resources>
        <DataTemplate x:Key="pointTemplate">
            <Grid
                    telerik:MapLayer.Location="{Binding location}"
                    telerik:MapLayer.HotSpot="{Binding imageHotSpot}"
                    Margin="0"
                    >
                <Image
                        x:Name="pointImage"
                        Source="{Binding imageUri}"
                        MouseLeftButtonDown="selectMapPoint"
                        Height="24"
                        Width="24"
                        Margin="0"
                        />

                <!-- We shift the bubble over a bit by half the size of the image -->
                <Border Margin="0">
                    <Border.RenderTransform>
                        <TranslateTransform
                                X="{Binding ElementName=pointImage, Path=ActualWidth, Converter={StaticResource scalingConverter}, ConverterParameter=0.5}"
                                Y="{Binding ElementName=pointImage, Path=ActualHeight, Converter={StaticResource scalingConverter}, ConverterParameter=-0.5}"
                                />
                    </Border.RenderTransform>
                    <!-- And then by half the size of the bubble -->
                    <Border
                            x:Name="bubbleBorder"
                            BorderBrush="Black"
                            BorderThickness="2"
                            CornerRadius="4"
                            Background="White"
                            Padding="2"
                            Margin="0"
                            MouseLeftButtonDown="selectBubble"
                            >
                        <Border.RenderTransform>
                            <TranslateTransform
                                    X="{Binding ElementName=bubbleBorder, Path=ActualWidth, Converter={StaticResource scalingConverter}, ConverterParameter=0.5}"
                                    Y="{Binding ElementName=bubbleBorder, Path=ActualHeight, Converter={StaticResource scalingConverter}, ConverterParameter=-0.5}"
                                    />
                        </Border.RenderTransform>
                        <Label Content="{Binding ticketVM.jobRec.jobid}" />
                    </Border>
                </Border>

            </Grid>
        </DataTemplate>
    </telerik:RadMap.Resources>

    <telerik:InformationLayer
            x:Name="informationLayer"
            ItemsSource="{Binding mapElements}"
            ItemTemplate="{StaticResource pointTemplate}"
            />

</telerik:RadMap>

[Andrey]

Hi Jeff,

Using of the HotSpot is the right way to do the things. It can be applied to any element inside the DataTemplate. I.e. you can configure HotSpot so it will work with Image element instead of entire Grid.

You can find more information in the section "Hot Spot inside a Complex UI" on this page:

http://www.telerik.com/help/wpf/radmap-features-hot-spots.html

You also can find example which demonstrates how to do it here:

http://demos.telerik.com/silverlight/#Map/HotSpot

Greetings,
Andrey Murzov
the Telerik team

[Jeff]

I'd tried adding location and hotspot directly to the image element, and nothing showed up at all.  I'd not noticed the ElementName property.  It's working fine.

Thanks.