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.

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

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

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

    }
}


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

    }
}

Show: