Adding Shapes to the Map

This documentation is no longer available on MSDN, however it is available as a CHM download.

The Bing Maps Silverlight Control can display polygons and polylines on top of the map. The MapPolygon class accepts a list of points that define its shape and location on the map. The MapPolyline class also accepts a list of points which define its nodes and their location on the map. In addition, you can create your own shape class derived from MapShapeBase.

Adding a MapPolygon requires that you build a LocationCollection containing the location of the vertices of the polygon. Each Location in the collection contains a latitude and longitude pair that define a point on the map. You can also specify properties such as the Fill color, the Stroke or border color, and the Opacity of the polygon.

The following code demonstrates how to add a square to the map.

C#
VB
Copy 


Private Sub addNewPolygon()
	Dim polygon As New MapPolygon() With _
	{ _
	  .Fill = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Red), _
	  .Stroke = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Yellow), _
	  .StrokeThickness = 5, _
	  .Opacity = 0.7, _
	  .Locations = New LocationCollection() _
	}
	polygon.Locations.Add(New Location(20, -20))
	polygon.Locations.Add(New Location(20, 20))
	polygon.Locations.Add(New Location(-20, 20))
	polygon.Locations.Add(New Location(-20, -20))

	TestMap.Children.Add(polygon)
End Sub

Adding a MapPolyline requires that you build a LocationCollection containing the nodes of the polyline. Each Location in the collection contains a latitude and longitude pair that define a point on the map, and represent the corners of the line. You can define properties such as the Stroke or line color, the StrokeThickness of the line, and the Opacity of the polyline.

The following code demonstrates how to add a Z-shaped line to the map.

C#
VB
Copy 


Private Sub addNewPolyline()
	Dim polyline As New MapPolyline() With _
	{ _
	  .Stroke = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.White), _
	  .StrokeThickness = 5, _
	  .Opacity = 0.7, _
	  .Locations = New LocationCollection() _
	}
	polyline.Locations.Add(New Location(10, -10))
	polyline.Locations.Add(New Location(10, 10))
	polyline.Locations.Add(New Location(-10, -10))
	polyline.Locations.Add(New Location(-10, 10))

	TestMap.Children.Add(polyline)
End Sub

The following example demonstrates how to add a custom polygon to the map. When the example first loads, click the Add New Polygon button. The button text changes to Create and now you can click on the map to set the vertices of a polygon. Each point you set appears as a small red rectangle.

Ee681899.759334bf-2bc1-45d6-82ca-34a1ea142448(en-us,MSDN.10).jpg

Defining the points of the custom polygon

Once all the points are created, click the Create button to add the polygon to the map. The red point rectangles are removed and a blue polygon is created. The button text changes back to Add New Polygon.

Ee681899.78cec447-6dd8-4aa6-8ed9-97eef072cd53(en-us,MSDN.10).jpg

Creating the custom polygon

XAML
Copy 
<UserControl x:Class="SilverlightTest1.AddNewPolygon"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    Width="1024" Height="768">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button x:Name="btnCreatePolygon" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" Tag="false"
                Click="btnCreatePolygon_Click">
            <TextBlock x:Name="txtButton">Add New Polygon</TextBlock>
        </Button>
            <TextBlock x:Name="txtDescription" Visibility="Collapsed" Margin="50,0,0,0">
                Click on the map to create the polygon points, then click Create.</TextBlock>
        <m:Map x:Name="MapWithPolygon" CredentialsProvider="your key" Mode="Road" Grid.Column="0" Grid.Row="1">
                <m:MapLayer x:Name="NewPolygonLayer">
                </m:MapLayer>
        </m:Map>
    </Grid>
</UserControl>
C#
VB
Copy 


Imports System.Windows.Shapes
Imports System.Windows.Media
Imports Microsoft.Maps.MapControl


	Partial Public Class AddNewPolygon
		Inherits UserControl
		' The user defined polygon to add to the map.
		Private newPolygon As MapPolygon = Nothing
		' The map layer containing the polygon points defined by the user.
		Private polygonPointLayer As New MapLayer()
		' Determines whether the map is accepting user polygon points
		' through single mouse clicks.
		Private inCreatePolygonMode As Boolean = False

		Public Sub New()
			InitializeComponent()

		End Sub

		' Adds location points to the polygon for every single mouse click
		Private Sub MapWithPolygon_MouseClick(ByVal sender As Object, ByVal e As MapMouseEventArgs) _
		    Handles MapWithPolygon.MouseClick

			'If the map is accepting polygon points, create a point.
			If inCreatePolygonMode Then
				' Creates a location for a single polygon point and adds it to
				' the polygon's point location list.
				Dim polygonPointLocation = MapWithPolygon.ViewportPointToLocation(e.ViewportPoint)
				newPolygon.Locations.Add(polygonPointLocation)

				' A visual representation of a polygon point.
				Dim r As New Rectangle() With _
				{ _
				  .Fill = New SolidColorBrush(Colors.Red), _
				  .Stroke = New SolidColorBrush(Colors.Yellow), _
				  .StrokeThickness = 1, _
				  .Width = 8, _
				  .Height = 8 _
				}

				' Adds a small square where the user clicked, to mark the polygon point.
				polygonPointLayer.AddChild(r, polygonPointLocation)
			End If
		End Sub

		Private Sub btnCreatePolygon_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
			' Toggles ON the CreatePolygonMode flag.
			If CType(sender, Button).Tag = "false" Then
				CType(sender, Button).Tag = "true"
				inCreatePolygonMode = True

				txtButton.Text = "Create"
				txtDescription.Visibility = Visibility.Visible

				' Clears any objects added to the polygon layer.
				If NewPolygonLayer.Children.Count > 0 Then
					NewPolygonLayer.Children.Clear()
				End If

				' Adds the layer that contains the polygon points
				NewPolygonLayer.Children.Add(polygonPointLayer)

				' Defines the polygon fill details
				newPolygon = New MapPolygon() With _
				{ _
				  .Locations = New LocationCollection(), _
				  .Fill = New SolidColorBrush(Colors.Blue), _
				  .Stroke = New SolidColorBrush(Colors.Green), _
				  .StrokeThickness = 3, _
				  .Opacity = 0.8 _
				}
			'Toggle OFF the CreatePolygonMode flag.
			Else
				CType(sender, Button).Tag = "false"
				inCreatePolygonMode = False

				txtButton.Text = "Add New Polygon"
				txtDescription.Visibility = Visibility.Collapsed

				'If there are two or more points, add the polygon layer to the map
				If newPolygon.Locations.Count >= 2 Then
					' Removes the polygon points layer.
					polygonPointLayer.Children.Clear()

					' Adds the filled polygon layer to the map.
					NewPolygonLayer.Children.Add(newPolygon)
				End If
			End If
		End Sub
	End Class
Show: