Adding Shapes to the Map
The Bing Maps WPF 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.
Adding a Polygon to a map in XAML
The following example shows how to place a semi-transparent blue triangle with a green outline on the map by using XAML.
<Window x:Class="WPFTestApplication.MainWindow"
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.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" Background="White">
<m:Map CredentialsProvider="<strong>InsertYourBingMapsKey</strong>" Center="47.640,-122.125" ZoomLevel="11">
<m:MapPolygon Fill="Blue" Stroke="Green" StrokeThickness="5"
Locations="47.6424,-122.3219 47.8424,-122.1747 47.5814,-122.1747"
Opacity="0.7"/>
</m:Map>
</Grid>
</Window>
Adding a Polygon using C# and Visual Basic
The following code examples show how to create the same triangle using C# and Visual Basic.
void addNewPolygon()
{
MapPolygon polygon = new MapPolygon();
polygon.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Blue);
polygon.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Green);
polygon.StrokeThickness = 5;
polygon.Opacity = 0.7;
polygon.Locations = new LocationCollection() {
new Location(47.6424,-122.3219),
new Location(47.8424,-122.1747),
new Location(47.5814,-122.1747};
myMap.Children.Add(polygon);
}
Private Sub addNewPolygon()
Dim polygon As New MapPolygon() With _
{ _
.Fill = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Blue), _
.Stroke = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Green), _
.StrokeThickness = 5, _
.Opacity = 0.7, _
.Locations = New LocationCollection() _
}
polygon.Locations.Add(New Location(47.6424,-122.3219))
polygon.Locations.Add(New Location(47.8424,-122.1747))
polygon.Locations.Add(New Location(47.5814,-122.1747))
myMap.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 example demonstrates how to add a blue Z-shaped line to the map by using XAML.
<Window x:Class="WPFTestApplication.MainWindow"
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.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" Background="White">
<m:Map x:Name="myMap" CredentialsProvider="Insert_Your_Bing_Maps_Key" Center="47.740,-122.125" ZoomLevel="11">
<m:MapPolyline Stroke="Blue" StrokeThickness="5"
Locations="47.6424,-122.3219 47.8424,-122.1747 47.5814,-122.1747 47.67856,-122.130994"
Opacity="0.7"/>
</m:Map>
</Grid>
</Window>
The following code examples show how to create the same Z-shaped line using C# and Visual Basic.
void addNewPolyline()
{
MapPolyline polyline = new MapPolyline();
polyline.Stroke = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Blue);
polyline.StrokeThickness = 5;
polyline.Opacity = 0.7;
polyline.Locations = new LocationCollection() {
new Location(47.6424, ,-122.3219),
new Location(47.8424,-122.1747),
new Location(47.67856,-122.130994)};
myMap.Children.Add(polyline);
}
Private Sub addNewPolyline()
Dim polyline As New MapPolyline() With _
{ _
.Stroke = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Blue), _
.StrokeThickness = 5, _
.Opacity = 0.7, _
.Locations = New LocationCollection() _
}
polyline.Locations.Add(New Location(47.6424, ,-122.3219))
polyline.Locations.Add(New Location(47.8424,-122.1747))
polyline.Locations.Add(New Location47.67856,-122.130994))
myMap.Children.Add(polyline)
End Sub
Adding a Custom Polygon
The following example demonstrates how to add a custom polygon to the map.
Defining the points of the custom polygon
Double-click the map to set the vertices of a polygon. Each point you set appears as a small red rectangle. After 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.
Creating the custom polygon
<Window x:Class="WPFTestApplication.MainWindow"
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.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Width="1024" Height="768">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<m:Map x:Name="MapWithPolygon" Grid.RowSpan="2"
Center="37.14814, -119.64424" ZoomLevel="6"
Mode="Road"
CredentialsProvider="Insert_Your_Bing_Maps_Key"
>
<m:MapLayer x:Name="NewPolygonLayer">
<TextBlock x:Name="txtDescription" Margin="5">
Click on the map to create the polygon points
</TextBlock>
<Button x:Name="btnCreatePolygon"
HorizontalAlignment="Left" VerticalAlignment="Top" Tag="false"
Click="btnCreatePolygon_Click" Height="25" Width="100" Margin="310 0 0 0 ">
<TextBlock x:Name="txtButton">Create Polygon</TextBlock>
</Button>
</m:MapLayer>
</m:Map>
</Grid>
</Window>
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Maps.MapControl.WPF;
namespace WPFTestApplication
{
public partial class MainWindow : Window
{
// 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();
public MainWindow()
{
InitializeComponent();
//Set focus to map
MapWithPolygon.Focus();
SetUpNewPolygon();
// Adds location points to the polygon for every single mouse click
MapWithPolygon.MouseDoubleClick += new MouseButtonEventHandler(
MapWithPolygon_MouseDoubleClick);
// Adds the layer that contains the polygon points
NewPolygonLayer.Children.Add(polygonPointLayer);
}
private void SetUpNewPolygon()
{
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;
//Set focus back to the map so that +/- work for zoom in/out
MapWithPolygon.Focus();
}
private void MapWithPolygon_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
// Creates a location for a single polygon point and adds it to
// the polygon's point location list.
Point mousePosition = e.GetPosition(this);
//Convert the mouse coordinates to a location on the map
Location polygonPointLocation = MapWithPolygon.ViewportPointToLocation(
mousePosition);
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);
//Set focus back to the map so that +/- work for zoom in/out
MapWithPolygon.Focus();
}
private void btnCreatePolygon_Click(object sender, RoutedEventArgs e)
{
//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);
SetUpNewPolygon();
}
}
}
}
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Maps.MapControl.WPF;
namespace WPFTestApplication
{
public partial class MainWindow : Window
{
// 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();
public MainWindow()
{
InitializeComponent();
//Set focus to map
MapWithPolygon.Focus();
SetUpNewPolygon();
// Adds location points to the polygon for every single mouse click
MapWithPolygon.MouseDoubleClick += new MouseButtonEventHandler(
MapWithPolygon_MouseDoubleClick);
// Adds the layer that contains the polygon points
NewPolygonLayer.Children.Add(polygonPointLayer);
}
private void SetUpNewPolygon()
{
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;
//Set focus back to the map so that +/- work for zoom in/out
MapWithPolygon.Focus();
}
private void MapWithPolygon_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
// Creates a location for a single polygon point and adds it to
// the polygon's point location list.
Point mousePosition = e.GetPosition(this);
//Convert the mouse coordinates to a location on the map
Location polygonPointLocation = MapWithPolygon.ViewportPointToLocation(
mousePosition);
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);
//Set focus back to the map so that +/- work for zoom in/out
MapWithPolygon.Focus();
}
private void btnCreatePolygon_Click(object sender, RoutedEventArgs e)
{
//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);
SetUpNewPolygon();
}
}
}
}