Share via

How to display pushpins, shapes, and controls on a map

  • Article

Display info about points of interest on a map by adding pushpins, images, shapes, and XAML controls to the map displayed in the MapControl.

The MapControl and the classes described in this topic belong to the Windows.UI.Xaml.Controls.Maps namespace.

Important  

Your app has to be authenticated before it can use many features of the Map control and map services. For more info, see How to authenticate your Maps app.

 

Showing pushpins, images, and geospatial shapes on the map

Display pushpins, images, and shapes on the MapControl by adding them to its MapElements collection.

  • Display an image such as a pushpin with optional text by using the MapIcon class. Accept the default image or provide a custom image by using the Image property.
  • Define and display a MapPolygon or a MapPolyline.

Tip  You can't bind to the MapElements collection declaratively in your XAML markup.

 

The following image displays the default image for a MapIcon with no value specified for the Title property, with a short title, with a long title, and with a very long title.

The following example shows a map of the city of Seattle and adds a MapIcon with the default image and an optional title to indicate the location of the Space Needle. This code requires a using statement for the Windows.UI.Xaml.Controls.Maps namespace.

        private void AddMapIcon()
        {
            MapIcon MapIcon1 = new MapIcon();
            MapIcon1.Location = new Geopoint(new BasicGeoposition() { Latitude = 47.620,
                Longitude = -122.349 });
            MapIcon1.NormalizedAnchorPoint = new Point(0.5, 1.0);
            MapIcon1.Title = "Space Needle";
            MapControl1.MapElements.Add(MapIcon1);
        }

void MainPage::AddMapIcon()
{
       BasicGeoposition seattleBG = { 47.604, -122.329 };
       auto gp = ref new Geopoint(seattleBG);

       auto mapIcon1 = ref new MapIcon();
       mapIcon1->Title = L"Space Needle";
       mapIcon1->Location = gp;
       mapIcon1->NormalizedAnchorPoint = Point(0.5, 1.0);
       mapIcon1->ZIndex = 2;
       this->MapControl1->MapElements->Append(mapIcon1);
}

This example displays the following map.

The following line of code displays the MapIcon with a custom image saved in the Assets folder of the project. The Image property of the MapIcon expects a value of type IRandomAccessStreamReference. This type requires a using statement for the Windows.Storage.Streams namespace.

    MapIcon1.Image =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/customicon.png"));

Keep the following considerations in mind when adding markers to a map by using the MapIcon class.

  • The MapIcon is not guaranteed to be shown. It may be hidden when it obscures other elements or labels on the map.
  • The optional Title of the MapIcon is not guaranteed to be shown. If you don't see the text, zoom out by decreasing the value of the ZoomLevel property of the MapControl.
  • When you display a MapIcon image that points to a specific location on the map - for example, a pushpin or an arrow - consider setting the value of the NormalizedAnchorPoint property to the approximate location of the pointer on the image. If you leave the value of NormalizedAnchorPoint at its default value of (0, 0), which represents the upper left corner of the image, changes in the ZoomLevel of the map may leave the image pointing to a different location.

Getting info about elements on the map

Get info about elements on the map by calling the following method of the MapControl.

  • Call the FindMapElementsAtOffset method to get the elements on the map located at the specified point in the viewport of the Map control.

Showing XAML controls and shapes on the map

Display XAML user interface elements such as a Button, a HyperlinkButton, or a TextBlock by adding them as Children of the MapControl. You can also add them to the MapItemsControl, or bind the MapItemsControl to a collection of items.

Position a XAML element on the map by providing values for the two attached properties of the MapControl.

The following examples show some of the methods you can use to display XAML objects on the map. As with other XAML elements that display content, Children is the default content property of the MapControl and does not have to be specified explicitly in XAML markup.

  • Display two XAML controls as implicit children of the MapControl.

    <maps:MapControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{Binding SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{Binding BellevueLocation}"/>
</maps:MapControl>

  • Display two XAML controls contained within a MapItemsControl.

    <maps:MapControl>
  <maps:MapItemsControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{Binding SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{Binding BellevueLocation}"/>
  </maps:MapItemsControl>
</maps:MapControl>

  • Display a collection of XAML elements bound to a MapItemsControl.

    <maps:MapControl x:Name="MapControl" MapTapped="MapTapped" MapDoubleTapped="MapTapped" MapHolding="MapTapped">
  <maps:MapItemsControl ItemsSource="{Binding StateOverlays}">
    <maps:MapItemsControl.ItemTemplate>
      <DataTemplate>
        <StackPanel Background="Black" Tapped="Overlay_Tapped">
          <TextBlock maps:MapControl.Location="{Binding Location}" Text="{Binding Name}" maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
        </StackPanel>
      </DataTemplate>
    </maps:MapItemsControl.ItemTemplate>
  </maps:MapItemsControl>
</maps:MapControl>

  • Display a XAML shape (in this example, an ellipse) on the map.

    Windows.UI.Xaml.Shapes.Ellipse fence = new Windows.UI.Xaml.Shapes.Ellipse();
…
MapControl.Children.Add(fence);
MapControl.SetLocation(fence, point);
MapControl.SetNormalizedAnchorPoint(fence, new Point(0.5, 0.5));

How to display maps in the Map control

How to get locations and addresses

How to authenticate a Maps app