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.

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.

Adding a Rectangle to a location in Map

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">
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            <!--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}"/>
            <!--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" />
  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
    //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
  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();

See Also



Other Resources

Maps and navigation for Windows Phone 8

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

How to display route and directions on a map in Windows Phone 8