[Solved] Showing Balloon on MapPinPoint Click

[c_bit]

Can someone provide some direction on how to to show a balloon based on a MapPinPoint click? The samples show how to add a MapPinPoint to the radMap through the InformationLayer and how to handle the map click event (which I can't figure out how to position the rectangle over my pinpoint icon), but not a pin click event (which for some reason it doesn't exist).

Should the events (e.g.: Click) be handled (and/or balloons be displayed) from the controls used for the MapPinPoint?

[Andrey]

Hello Carlos,

The MapPinPoint is a FrameworkElement with own control template. The FrameworkElement have not "Click" event. They have MouseLeftButtonDown, MouseLeftButtonUp, MouseRightButtonDown, and MouseRightButtonUp events. You can handle these events and position shomething else over the map. For example:

<UserControl x:Class="Telerik.RadMap.Silverlight.Q1.MainPage"
         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:geodata="clr-namespace:GeographicalData"
         Height="600" Width="800">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
            Center="37.7847107699891, -122.421295514088"
            ZoomLevel="18">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer Name="informationLayer">
                <telerik:MapPinPoint Name="mapPinPoint"
                         telerik:MapLayer.Location="37.7850372183918, -122.421150674801"
                         Text="MapPinPoint"
                         Background="White"
                         MouseLeftButtonDown="MapPinPoint_MouseLeftButtonDown" />
            </telerik:InformationLayer>
        </telerik:RadMap>
    </Grid>
</UserControl>

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void MapPinPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        MapPinPoint pinPoint = sender as MapPinPoint;
        if (pinPoint != null)
        {
            // Get location of the pin point.
            Location location = MapLayer.GetLocation(pinPoint);

            // Create new text and show it at the location of the pin point.
            TextBlock text = new TextBlock()
            {
                Foreground = new SolidColorBrush(Colors.Red),
                Text = "Location: " + location.ToString()
            };

            MapLayer.SetLocation(text, location);
            this.informationLayer.Items.Add(text);
        }
    }
}

Regards,
Andrey Murzov
the Telerik team

[c_bit]

Hi,

Thanks for the response. Since the initial post, I was able to figure the click/mouse down-up events. However, it seems that the ideal solution for showing a balloon (hover or click) is through a styled ToolTip, is this correct?

[c_bit]

Here's what I ended up with. Hopefully it will help the next person.

MapPinPoint Events:

01.private void MapPinPoint_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
02.{
03.    var pinPoint = (MapPinPoint)sender;
04.    var toolTipContent = pinPoint.DataContext.ToString();
05.    ShowToolTip(pinPoint, toolTipContent);
06.}
07.private void MapPinPoint_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
08.{
09.    var pinPoint = (MapPinPoint)sender;
10.    HideToolTip(pinPoint);
11.}

The ToolTip code (borrowed and modified from another post in the forums):

01.#region ToolTip
02.private static void ShowToolTip(FrameworkElement element, string tooltipContent)
03.{
04.    if (!string.IsNullOrEmpty(tooltipContent))
05.    {
06.        var tooltip = ToolTipService.GetToolTip(element) as ToolTip;
07.        if (tooltip == null)
08.        {
09.            tooltip = GetToolTip(element);
10.            ToolTipService.SetToolTip(element, tooltip);
11.
12.        }
13.
14.        if (tooltip != null)
15.        {
16.            if ((tooltip.Content as string) != tooltipContent)
17.            {
18.                tooltip.Content = tooltipContent;
19.            }
20.            tooltip.IsOpen = true;
21.        }
22.    }
23.    else
24.    {
25.        HideToolTip(element);
26.    }
27.}
28.private static ToolTip GetToolTip(FrameworkElement element)
29.{
30.    var t = new ToolTip();
31.    t.PlacementTarget = element;
32.    t.Placement = PlacementMode.Top;
33.    t.VerticalOffset = 10;
34.    //t.HorizontalOffset = -40;
35.    return t;
36.}
37.private static void HideToolTip(FrameworkElement element)
38.{
39.    var tooltip = ToolTipService.GetToolTip(element) as ToolTip;
40.    if (tooltip != null)
41.    {
42.        tooltip.IsOpen = false;
43.    }
44.}
45.#endregion

The ToolTip Style:

01.<Style TargetType="ToolTip">
02.    <Setter Property="Template">
03.        <Setter.Value>
04.            <ControlTemplate TargetType="ToolTip">
05.                <Grid Height="160" Width="216">
06.                    <Path x:Name="BalloonPath" Data="M20.499998,0.5 L367.5,0.5 C378.54568,0.49999714 387.5,9.4543018 387.5,20.499996 L387.5,178.74783 C387.5,189.79353 378.54568,198.74783 367.5,198.74783 L168.79182,198.74783 L85.176926,316.95276 L114.17278,198.74783 L20.499998,198.74783 C9.4543047,198.74783 0.5,189.79353 0.5,178.74783 L0.5,20.499996 C0.5,9.4543018 9.4543047,0.49999714 20.499998,0.5 z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" HorizontalAlignment="Left" RenderTransformOrigin="0.22,0.996" d:LayoutOverrides="Height"/>
07.                    <ContentPresenter Margin="12,12,12,72" Content="{TemplateBinding Content}"/>
08.                </Grid>
09.            </ControlTemplate>
10.        </Setter.Value>
11.    </Setter>
12.</Style>