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?
3 Answers, 1 is accepted
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: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
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?
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
>