Adding Pushpins to the Map
A common task is to add pushpins that mark certain locations on the map. The recommended way to add a pushpin is by using the Pushpin class. You can also add a pushpin as an image. For more information about adding an image to the map, see Adding Media to the Map.
Adding a Pushpin to the Map
You can add a Pushpin to the map with the default icon by simply specifying a location as shown in the following example.
<Window x:Class="WPFTestApplication.InsertPushpin"
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="INSERT_YOUR_BING_MAPS_KEY"
Center="47.620574,-122.34942" ZoomLevel="12">
<m:Pushpin Location="47.620574,-122.34942"/>
</m:Map>
</Grid>
</Window>
Adding a Custom Pushpin
If you do not want to use the default pushpin icon, you can use your own image or create a shape. For examples of adding images or shapes to a map, see Adding Media to the Map and Adding Shapes to the Map
The following example shows how to create a Path element inside a Canvas to create a custom pushpin shape.
<Window x:Class="WPFTestApplication.CreatePushpin"
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="INSERT_YOUR_BING_MAPS_KEY" Center="47.620574,-122.34942" ZoomLevel="14" >
<Canvas Width="50" Height="80"
m:MapLayer.Position="47.620574,-122.34942"
m:MapLayer.PositionOrigin="BottomCenter" Opacity="0.7">
<Path Data="M 0,0 L 50,0 50,50 25,80 0,50 0,0" Fill="Red" Stroke="Wheat" StrokeThickness="2" />
<TextBlock FontSize="10" Foreground="White" Margin="5" TextAlignment="Center">
Space <LineBreak />
Needle <LineBreak />
</TextBlock>
</Canvas>
</m:Map>
</Grid>
</Window>
Adding Pushpins using the Mouse
The following example shows how to add pushpins to the map through a mouse double-click event. A MapLayer is added to the map, and one or more pushpin images are added to the layer when you double-click on the map. The point of the pushpin image is aligned with the mouse pointer so that it correctly represents the map location that was clicked. An image can be aligned relative to the mouse pointer using one of the PositionOrigin values.
Note
The default double-click mouse behavior of the map is to zoom in one level towards the clicked on map location. Setting the Handled property of the Microsoft.Maps.MapControl.WPF.MapMouseEventArgs parameter disables the default behavior.
Pushpins added to the map by double-clicking.
<Window x:Class="WPFTestApplication.AddPushpinToMap"
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"
Center="37.1481402218342,-119.644248783588"
ZoomLevel="6"
MouseDoubleClick="MapWithPushpins_MouseDoubleClick"
CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY"
/>
</Grid>
</Window>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Maps.MapControl.WPF;
using Microsoft.Maps.MapControl.WPF.Design;
namespace WPFTestApplication
{
public partial class AddPushpinToMap : Window
{
LocationConverter locConverter = new LocationConverter();
public AddPushpinToMap()
{
InitializeComponent();
//Set focus on mapl
myMap.Focus();
}
private void MapWithPushpins_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
// Disables the default mouse double-click action.
e.Handled = true;
// Determin the location to place the pushpin at on the map.
//Get the mouse click coordinates
Point mousePosition = e.GetPosition(this);
//Convert the mouse coordinates to a locatoin on the map
Location pinLocation = myMap.ViewportPointToLocation(mousePosition);
// The pushpin to add to the map.
Pushpin pin = new Pushpin();
pin.Location = pinLocation;
// Adds the pushpin to the map.
myMap.Children.Add(pin);
}
}
}
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Globalization
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports Microsoft.Maps.MapControl.WPF
Imports Microsoft.Maps.MapControl.WPF.Design
Namespace WPFTestApplication
Partial Public Class AddPushpinToMap
Inherits Window
Private locConverter As New LocationConverter()
Public Sub New()
InitializeComponent()
' Set focus on map
myMap.Focus()
End Sub
Private Sub MapWithPushpins_MouseDoubleClick(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
' Disables the default mouse double-click action.
e.Handled = True
' Determin the location to place the pushpin at on the map.
'Get the mouse click coordinates
Dim mousePosition As Point = e.GetPosition(Me)
'Convert the mouse coordinates to a locatoin on the map
Dim pinLocation As Location = myMap.ViewportPointToLocation(mousePosition)
' The pushpin to add to the map.
Dim pin As New Pushpin()
pin.Location = pinLocation
' Adds the pushpin to the map.
myMap.Children.Add(pin)
End Sub
End Class
End Namespace
Adding Pushpins using Touch
The following example adds pushpins to the maps by touching the map. Pushpin images are added to the map when at the location of a touch down event. A MapLayer is added to the map, and one or more pushpin images are added to the layer when you touch the map.
<Window x:Class="WPFTestApplication.AddPushpinToMap"
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"
Center="37.1481402218342,-119.644248783588"
ZoomLevel="6"
TouchDown="MapWithPushpins_TouchDown"
CredentialsProvider="InsertYourBingMapsKey"
/>
</Grid>
</Window>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Maps.MapControl.WPF;
using Microsoft.Maps.MapControl.WPF.Design;
namespace WPFTestApplication
{
public partial class AddPushpinToMap : Window
{
LocationConverter locConverter = new LocationConverter();
public AddPushpinToMap()
{
InitializeComponent();
myMap.Focus();
}
private void MapWithPushpins_TouchDown(object sender, TouchEventArgs e)
{
// Disables the default touch down behavior.
e.Handled = true;
// Determine the location to place the pushpin at on the map.
//Get the touch down coordinates
TouchPoint touchPosition = e.GetTouchPoint(this);
//Convert the mouse coordinates to a location on the map
Location pinLocation = myMap.ViewportPointToLocation(touchPosition.Position);
// The pushpin to add to the map.
Pushpin pin = new Pushpin();
pin.Location = pinLocation;
// Adds the pushpin to the map.
myMap.Children.Add(pin);
}
}
}
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Globalization
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports Microsoft.Maps.MapControl.WPF
Imports Microsoft.Maps.MapControl.WPF.Design
Namespace WPFTestApplication
Partial Public Class AddPushpinToMap
Inherits Window
Private locConverter As New LocationConverter()
Public Sub New()
InitializeComponent()
myMap.Focus()
End Sub
Private Sub MapWithPushpins_TouchDown(ByVal sender As Object, ByVal e As TouchEventArgs)
' Disables the default touch down behavior.
e.Handled = True
' Determine the location to place the pushpin at on the map.
'Get the touch down coordinates
Dim touchPosition As TouchPoint = e.GetTouchPoint(Me)
'Convert the mouse coordinates to a location on the map
Dim pinLocation As Location = myMap.ViewportPointToLocation(touchPosition.Position)
' The pushpin to add to the map.
Dim pin As New Pushpin()
pin.Location = pinLocation
' Adds the pushpin to the map.
myMap.Children.Add(pin)
End Sub
End Class
End Namespace