Adding Pushpins to the Map

Article
08/01/2016

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="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>

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="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>

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.

Images showing pushpins added using mouse clicks

Pushpins added to the map by double-clicking.

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

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="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>

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

Share via

Adding Pushpins to the Map

Adding a Pushpin to the Map

Adding a Custom Pushpin

Adding Pushpins using the Mouse

Adding Pushpins using Touch

Additional resources