Export (0) Print
Expand All

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.

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


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


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"
    Width="1024" Height="768">
    <Grid x:Name="LayoutRoot" Background="White">
            <RowDefinition Height="35" />
            <RowDefinition Height="*" />
        <Button x:Name="btnCreatePolygon" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" Tag="false"
            <TextBlock x:Name="txtButton">Add New Polygon</TextBlock>
            <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">
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()

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

        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(

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

                // Adds the layer that contains the polygon points

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

                    // Adds the filled polygon layer to the map.
© 2015 Microsoft