Overlaying Custom Map Content

Framework elements can be displayed within the Map control using map layers. Map layers allow you to control the location of the layer using GeoCoordinates and the z-index of layer content. You can add shapes, controls, and media such as images and even video to the map using map layers. Observe the following example:

Click here to view code image

<m:Map x:Name="map"
    ...>
    <m:Map.Layers>
        <m:MapLayer>
            <m:MapOverlay x:Name="currentLocationOverlay"
                PositionOrigin="0.5,0.5">
                <Ellipse Width="10" Height="10" Fill="Red" />
            </m:MapOverlay>
        </m:MapLayer>
    </m:Map.Layers>
</m:Map>

A red circle is placed on the map using a MapOverlay.

The MapOverlay object contains a GeoCoordinate property that allows you to position the content of the overlay anywhere on the map. Although the GeoCoordinate property is a DependencyProperty, it is not bindable in XAML.

To change the position of a MapOverlay according to a viewmodel property, create the binding in code, as demonstrated in the following excerpt from the MapView.xaml.cs class:

Click here to view code image

public MapView()
{
    ...
    MapLayer mapLayer = map.Layers.First();
    MapOverlay mapOverlay = mapLayer.First();
    mapOverlay.GeoCoordinate = viewModel.Location;

    /* Binding the Location property does not work in XAML.
     * We create the binding in code. */
    Binding binding = new Binding("Location") {Source = viewModel};
    BindingOperations.SetBinding(
        mapOverlay, MapOverlay.GeoCoordinateProperty, binding);

    AddMapShapes();
}

LINQ is used to retrieve the first MapLayer object, and then its first MapOverlay object. The location of the overlay is initialized to the viewmodel’s Location property and then the binding is applied.

To add content to a map programmatically, see the following excerpt:

Click here to view code image

Rectangle rectangle = new Rectangle
    {
        Fill = new SolidColorBrush(Colors.Blue),
        Height = 10,
        Width = 10
    };

MapLayer mapLayer = new MapLayer();
MapOverlay mapOverlay = new MapOverlay
    {
        Content = rectangle,
        GeoCoordinate = new GeoCoordinate(47.5302, 8.5804)
    };

mapLayer.Add(mapOverlay);
map.Layers.Add(mapLayer);

A rectangle is placed in a MapOverlay, which is then placed in a MapLayer, and then into the Map. The rectangle can be seen in Figure 18.1.