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
• Related Topics

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

See Also

Reference

Map

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