Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to add UIElements to a Map control in Windows Phone 8

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

In this topic we describe how to add UIElements such as images, shapes, and controls on a map in Windows Phone 8.

Icon to indicate an SDK sample

For a sample that demonstrates some of the tasks described in this topic, download the Simple Map control sample.

For useful extensions to the Maps API, including a Pushpin, download the Windows Phone Toolkit.

This topic contains the following sections.

In this section, we add a Grid element that contains a Rectangle and a Polygon to a Map.

To add a Rectangle to a location in Map

  1. In Visual Studio, create a new Windows Phone 8 project named MapsApplication.

  2. In MainPage.xaml, replace the grid named LayoutRoot with the following code. It creates a Map control named MyMap. For more information about adding a Map control, see How to add a Map control to a page in Windows Phone 8.

    
    <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="MapOverlay" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" ZoomLevel="10" />
            </Grid>
        </Grid>
    
  3. In MainPage.xaml.cs, add the following using directives.

    
    using Microsoft.Phone.Maps.Controls;
    using System.Device.Location;
    
  4. In the MainPage() constructor add the following code to create a Grid element that contains a Rectangle and a Polygon.

    
    //Creating a Grid element.
    
    Grid MyGrid = new Grid();
    MyGrid.RowDefinitions.Add(new RowDefinition());
    MyGrid.RowDefinitions.Add(new RowDefinition());
    MyGrid.Background = new SolidColorBrush(Colors.Transparent);
    
    //Creating a Rectangle
    Rectangle MyRectangle = new Rectangle();
    MyRectangle.Fill = new SolidColorBrush(Colors.Black);
    MyRectangle.Height = 20;
    MyRectangle.Width = 20;
    MyRectangle.SetValue(Grid.RowProperty, 0);
    MyRectangle.SetValue(Grid.ColumnProperty, 0);
    
    //Adding the Rectangle to the Grid
    MyGrid.Children.Add(MyRectangle);
    
    //Creating a Polygon
    Polygon MyPolygon = new Polygon();
    MyPolygon.Points.Add(new Point(2,0));
    MyPolygon.Points.Add(new Point(22,0));
    MyPolygon.Points.Add(new Point(2,40));
    MyPolygon.Stroke = new SolidColorBrush(Colors.Black);
    MyPolygon.Fill = new SolidColorBrush(Colors.Black);
    MyPolygon.SetValue(Grid.RowProperty, 1);
    MyPolygon.SetValue(Grid.ColumnProperty, 0);
    
    //Adding the Polygon to the Grid
    MyGrid.Children.Add(MyPolygon);
    
    
    
  5. In the MainPage() constructor, create a MapOverlay and add the Grid element to MapOverlay.

    
    //Creating a MapOverlay and adding the Grid to it.
    MapOverlay MyOverlay = new MapOverlay();
    MyOverlay.Content = MyGrid;
    
    
    
  6. Set the GeoCoordinate property of MyOverlay to place the grid element on the specified geocoordinate location on the map.

    MyOverlay.GeoCoordinate = new GeoCoordinate(47.6097, -122.3331);
    
    
  7. Set the PositionOrigin property of MyOverlay to specify the position on the rectangle to anchor to the map.

    MyOverlay.PositionOrigin = new Point(0,0.5);
    
    
  8. Create a MapLayer called MyLayer and add MyOverlay to it.

    
    //Creating a MapLayer and adding the MapOverlay to it
    MapLayer MyLayer = new MapLayer();
    MyLayer.Add(MyOverlay);
    MyMap.Layers.Add(MyLayer);
    
    

Show: