Adding Pushpins to the Map

Bing
 

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.

You can add a Pushpin to the map with the default icon by simply specifying a location as shown in the following example.

XAML
Copy 
<Window x:Class="WPFTestApplication.InsertPushpin"
    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.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>

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.

XAML
Copy 
<Window x:Class="WPFTestApplication.CreatePushpin"
    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.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>

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.

System_CAPS_noteNote

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.

Images showing pushpins added using mouse clicks

Pushpins added to the map by double-clicking.

XAML
Copy 
<Window x:Class="WPFTestApplication.AddPushpinToMap"
    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.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>
C#
VB
Copy 
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

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.

XAML
Copy 
<Window x:Class="WPFTestApplication.AddPushpinToMap"
    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.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>
C#
VB
Copy 
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
Show: