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 Polygon

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.

void addNewPolygon()
{
    MapPolygon polygon = new MapPolygon();
    polygon.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Red);
    polygon.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Yellow);
    polygon.StrokeThickness = 5;
    polygon.Opacity = 0.7;
    polygon.Locations = new LocationCollection() { 
        new Location(20, -20), 
        new Location(20, 20), 
        new Location(-20, 20), 
        new Location(-20, -20) };

    TestMap.Children.Add(polygon);
}
    

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 Polyline

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.

void addNewPolyline()
{
    MapPolyline polyline = new MapPolyline();
    polyline.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.White);
    polyline.StrokeThickness = 5;
    polyline.Opacity = 0.7;
    polyline.Locations = new LocationCollection() { 
        new Location(10, -10), 
        new Location(10, 10), 
        new Location(-10, -10), 
        new Location(-10, 10) };

    TestMap.Children.Add(polyline);
}
    

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
    
 

Example

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.

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.

Creating the custom polygon

<UserControl x:Class="SilverlightTest1.AddNewPolygon"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://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>
    

using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Controls;
using Microsoft.Maps.MapControl;

namespace SilverlightTest1
{
    public partial class AddNewPolygon : UserControl
    {
        // The user defined polygon to add to the map.
        MapPolygon newPolygon = null;
        // The map layer containing the polygon points defined by the user.
        MapLayer polygonPointLayer = new MapLayer();
        // Determines whether the map is accepting user polygon points
        // through single mouse clicks.
        bool inCreatePolygonMode = false;

        public AddNewPolygon()
        {
            InitializeComponent();

            // Adds location points to the polygon for every single mouse click
            MapWithPolygon.MouseClick += new EventHandler<MapMouseEventArgs>(
                MapWithPolygon_MouseClick);
        }

        private void MapWithPolygon_MouseClick(object sender, MapMouseEventArgs e)
        {
            //If the map is accepting polygon points, create a point.
            if (inCreatePolygonMode)
            {
                // Creates a location for a single polygon point and adds it to
                // the polygon's point location list.
                Location polygonPointLocation = MapWithPolygon.ViewportPointToLocation(
                    e.ViewportPoint);
                newPolygon.Locations.Add(polygonPointLocation);

                // A visual representation of a polygon point.
                Rectangle r = new Rectangle();
                r.Fill = new SolidColorBrush(Colors.Red);
                r.Stroke = new SolidColorBrush(Colors.Yellow);
                r.StrokeThickness = 1;
                r.Width = 8;
                r.Height = 8;

                // Adds a small square where the user clicked, to mark the polygon point.
                polygonPointLayer.AddChild(r, polygonPointLocation);
            }
        }

        private void btnCreatePolygon_Click(object sender, RoutedEventArgs e)
        {
            // Toggles ON the CreatePolygonMode flag.
            if (((Button)sender).Tag.ToString() == "false")
            {
                ((Button)sender).Tag = "true";
                inCreatePolygonMode = true;

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

                // Clears any objects added to the polygon layer.
                if(NewPolygonLayer.Children.Count > 0)
                    NewPolygonLayer.Children.Clear();

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

                newPolygon = new MapPolygon();
                // Defines the polygon fill details
                newPolygon.Locations = new LocationCollection();
                newPolygon.Fill = new SolidColorBrush(Colors.Blue);
                newPolygon.Stroke = new SolidColorBrush(Colors.Green);
                newPolygon.StrokeThickness = 3;
                newPolygon.Opacity = 0.8;   
            }
            //Toggle OFF the CreatePolygonMode flag.
            else
            {
                ((Button)sender).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)
                {
                    // Removes the polygon points layer.
                    polygonPointLayer.Children.Clear();

                    // Adds the filled polygon layer to the map.
                    NewPolygonLayer.Children.Add(newPolygon);
                }
            }
        }
    }
}
    

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

    
 

See Also

Reference

MapPolygon
MapShapeBase
MapPolyline