Showing Balloon on MapPinPoint Click

4 posts, 0 answers
  1. c_bit
    c_bit avatar
    4 posts
    Member since:
    Oct 2010

    Posted 08 Oct 2010 Link to this post

    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?

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 13 Oct 2010 Link to this post

    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: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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. c_bit
    c_bit avatar
    4 posts
    Member since:
    Oct 2010

    Posted 13 Oct 2010 Link to this post

    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?

  5. c_bit
    c_bit avatar
    4 posts
    Member since:
    Oct 2010

    Posted 14 Oct 2010 Link to this post

    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>

Back to Top