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:

• XAML

<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> 

First of all we’ll need two Information layers – one for the polyline and the other one for the points that we will use for the shape manipulation.

• XAML

<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> 

Now we will create a sample polyline and add it to the first information layer. Note that it is better to do this after the map provider has been initialized in order to prevent your items from appearing in the upper left corner before the map is initialized and loaded:

• C#
• VB.NET

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); 
} 

' 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:

• C#
• VB.NET

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.

• C#
• VB.NET

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