Select Map Shapes
RadMap provides a rich set of geocoordinate-enabled shapes that can be defined and displayed onto the map surface. There are scenarios, however, where you would like to do more than just position a shape onto the map. This help topic will demonstrate how to manipulate each individual segment of line/polyline/polygon shape based on mouse input from the user. For example we will select (highlight) a Line segment of the Polyline and set a green color for it. The Polyline itself will be colored blue and on click it will become red. All these customizations will be made through styles:
<Style x:Key="defaultLineStyle" TargetType="telerik:MapShape">
<Setter Property="StrokeThickness" Value="3" />
<Setter Property="Stroke" Value="Transparent" />
</Style>
<Style x:Key="selectedLineStyle" TargetType="telerik:MapShape">
<Setter Property="StrokeThickness" Value="3" />
<Setter Property="Stroke" Value="Green" />
</Style>
<Style x:Key="defaultPolylineStyle" TargetType="telerik:MapShape">
<Setter Property="StrokeThickness" Value="3" />
<Setter Property="Stroke" Value="Blue" />
</Style>
<Style x:Key="selectedPolylineStyle" TargetType="telerik:MapShape">
<Setter Property="StrokeThickness" Value="3" />
<Setter Property="Stroke" Value="Red" />
</Style>
<telerik:RadMap x:Name="radMap"
InitializeCompleted="radMap_InitializeCompleted"
Center="40,-100"
ZoomLevel="4">
<telerik:RadMap.Provider>
<telerik:OpenStreetMapProvider />
</telerik:RadMap.Provider>
<telerik:InformationLayer x:Name="polylineLayer" />
<telerik:InformationLayer x:Name="lineLayer" />
</telerik:RadMap>
private bool initialized;
// selected segment and polyline
private MapLine selectedLine;
private MapPolyline selectedPolyline;
public MainPage()
{
InitializeComponent();
}
private void radMap_InitializeCompleted(object sender, EventArgs e)
{
if (!initialized)
{
initialized = true;
this.BuildPolyline();
}
}
private void BuildPolyline()
{
LocationCollection points = new LocationCollection();
points.Add(new Location(40, -100));
points.Add(new Location(41, -101));
points.Add(new Location(40, -102));
points.Add(new Location(43, -103));
points.Add(new Location(45, -97));
MapPolyline polyline = new MapPolyline();
polyline.Points = points;
this.SetDefaultStyle(polyline);
this.polylineLayer.Items.Add(polyline);
this.BuildLines(polyline);
}
Private initialized As Boolean
' selected segment and polyline '
Private selectedLine As MapLine
Private selectedPolyline As MapPolyline
Public Sub New()
InitializeComponent()
End Sub
Private Sub radMap_InitializeCompleted(ByVal sender As Object, ByVal e As EventArgs)
If Not initialized Then
initialized = True
Me.BuildPolyline()
End If
End Sub
Private Sub BuildPolyline()
Dim points As New LocationCollection()
points.Add(New Location(40, -100))
points.Add(New Location(41, -101))
points.Add(New Location(40, -102))
points.Add(New Location(43, -103))
points.Add(New Location(45, -97))
Dim polyline As New MapPolyline()
polyline.Points = points
Me.SetDefaultStyle(polyline)
Me.polylineLayer.Items.Add(polyline)
Me.BuildLines(polyline)
End Sub
And now to the essential part of our scenario. Add a Line over each segment of the polyline. This is easy since the polyline itself was created from a set of predefined points(locations). To be able to change the appearance of the polyline or its segments on click we’ll attach a MouseLeftButtonDown event on the line:
private void BuildLines(MapPolyline polyline)
{
for (int i = 0; i < polyline.Points.Count - 1; i++)
{
Location point1 = polyline.Points[i];
Location point2 = polyline.Points[i + 1];
MapLine line = new MapLine()
{
Point1 = point1,
Point2 = point2
};
this.SetDefaultStyle(line);
line.MouseLeftButtonDown += new MouseButtonEventHandler(line_MouseLeftButtonDown);
line.Tag = polyline;
this.lineLayer.Items.Add(line);
}
}
private void line_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MapLine line = sender as MapLine;
if (line != null)
{
if (this.selectedLine != null)
{
this.SetDefaultStyle(this.selectedLine);
}
if (this.selectedPolyline != null)
{
this.SetDefaultStyle(this.selectedPolyline);
}
this.selectedLine = line;
this.selectedPolyline = line.Tag as MapPolyline;
this.SetSelectedStyle(this.selectedLine);
this.SetSelectedStyle(this.selectedPolyline);
}
}
Private Sub BuildLines(ByVal polyline As MapPolyline)
For i As Integer = 0 To polyline.Points.Count - 2
Dim point1 As Location = polyline.Points(i)
Dim point2 As Location = polyline.Points(i + 1)
Dim line As New MapLine() With {.Point1 = point1, .Point2 = point2}
Me.SetDefaultStyle(line)
AddHandler line.MouseLeftButtonDown, AddressOf line_MouseLeftButtonDown
line.Tag = polyline
Me.lineLayer.Items.Add(line)
Next i
End Sub
Private Sub line_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
Dim line As MapLine = TryCast(sender, MapLine)
If line IsNot Nothing Then
If Me.selectedLine IsNot Nothing Then
Me.SetDefaultStyle(Me.selectedLine)
End If
If Me.selectedPolyline IsNot Nothing Then
Me.SetDefaultStyle(Me.selectedPolyline)
End If
Me.selectedLine = line
Me.selectedPolyline = TryCast(line.Tag, MapPolyline)
Me.SetSelectedStyle(Me.selectedLine)
Me.SetSelectedStyle(Me.selectedPolyline)
End If
End Sub
In event's body you check whether the selected shape is line or the whole polyline and apply the style for it.
private void SetDefaultStyle(MapShape shape)
{
if (shape is MapLine)
{
shape.Style = this.Resources["defaultLineStyle"] as Style;
}
else
{
shape.Style = this.Resources["defaultPolylineStyle"] as Style;
}
}
private void SetSelectedStyle(MapShape shape)
{
if (shape is MapLine)
{
shape.Style = this.Resources["selectedLineStyle"] as Style;
}
else
{
shape.Style = this.Resources["selectedPolylineStyle"] as Style;
}
}
Private Sub SetDefaultStyle(ByVal shape As MapShape)
If TypeOf shape Is MapLine Then
shape.Style = TryCast(Me.Resources("defaultLineStyle"), Style)
Else
shape.Style = TryCast(Me.Resources("defaultPolylineStyle"), Style)
End If
End Sub
Private Sub SetSelectedStyle(ByVal shape As MapShape)
If TypeOf shape Is MapLine Then
shape.Style = TryCast(Me.Resources("selectedLineStyle"), Style)
Else
shape.Style = TryCast(Me.Resources("selectedPolylineStyle"), Style)
End If
End Sub