Adding Tile Overlays to the Map

 

This topic describes how to add image overlays from existing tile sources using the Bing Maps WPF Control. It does not describe how to create your own overlays.

Adding a Road Tile Source to an Aerial Map

The following example shows how to specify a tile source with Bing Maps road imagery that overlays a Bing Maps aerial map. The opacity is set to 50% so that the aerial imagery is visible through the road tile layer. The following images show the aerial map with and without the road tile overlay.

To add a tile overlay, you need to:

1. Create a map tile layer (MapTileLayer).

2. Specify the tile source (TileSource) of the overlay.

3. Add the tile source to the map tile layer.

4. Add the map tile layer to the map.

The following XAML, C# and VB code adds and removes the road tile layer using buttons defined in the XAML. Make sure to replace the placeholder text with your Bing Maps Key.

<Window x:Class="WPFTestApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF" 
        Title="MainWindow" Width="1024" Height="768">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="btnAddTileLayer" Click="btnAddTileLayer_Click" 
                HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0">
            <TextBlock x:Name="txtButton">Add Tile Layer</TextBlock>
        </Button>
        <Button x:Name="btnRemoveTileLayer" Click="btnRemoveTileLayer_Click"
                HorizontalAlignment="Left" Grid.Column="1" Grid.Row="0">
            <TextBlock x:Name="txtButton2">Remove Tile Layer</TextBlock>
        </Button>
        <m:Map x:Name="MapTileOverlay" CredentialsProvider="INSERT_YOUR_BING_MAPS_KEY" Mode="Aerial" Center="48.03,-122.4" ZoomLevel="10" 
               Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1" />
    </Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Maps.MapControl.WPF;

namespace WPFTestApplication
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public partial class MainWindow : Window
    {
        MapTileLayer tileLayer;
        private double tileOpacity = 0.50;

        public  MainWindow()
        {    
            InitializeComponent();
        }

        private void AddTileOverlay()
        {

            // Create a new map layer to add the tile overlay to.
            tileLayer = new MapTileLayer();

            // The source of the overlay.
            TileSource tileSource = new TileSource();
            tileSource.UriFormat = "{UriScheme}://ecn.t0.tiles.virtualearth.net/tiles/r{quadkey}.jpeg?g=129&mkt=en-us&shading=hill&stl=H";

            // Add the tile overlay to the map layer
            tileLayer.TileSource=tileSource;

            // Add the map layer to the map
            if (!MapTileOverlay.Children.Contains(tileLayer))
            {
                MapTileOverlay.Children.Add(tileLayer);
            }
            tileLayer.Opacity = tileOpacity;
        }

        private void btnAddTileLayer_Click(object sender, RoutedEventArgs e)
        {
            // Add the tile overlay on the map, if it doesn't already exist.
            if (tileLayer != null)
            {
                if (!MapTileOverlay.Children.Contains(tileLayer))
                {
                    MapTileOverlay.Children.Add(tileLayer);
                }
            }
            else
            {
                AddTileOverlay();
            }
        }

        private void btnRemoveTileLayer_Click(object sender, RoutedEventArgs e)
        {
            // Removes the tile overlay if it has been added to the map.
            if (MapTileOverlay.Children.Contains(tileLayer))
            {
                MapTileOverlay.Children.Remove(tileLayer);
            }
        }

    }

}

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports Microsoft.Maps.MapControl.WPF

Namespace WPFTestApplication
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>

    Partial Public Class MainWindow
        Inherits Window
        Private tileLayer As MapTileLayer
        Private tileOpacity As Double = 0.5

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub AddTileOverlay()

            ' Creates a new map layer to add the tile overlay to.
            tileLayer = New MapTileLayer()

            ' The source of the overlay.
            Dim tileSource As New TileSource()
            tileSource.UriFormat = "{UriScheme}://ecn.t0.tiles.virtualearth.net/tiles/r{quadkey}.jpeg?g=129&mkt=en-us&shading=hill&stl=H"

            ' Adds the tile overlay to the map layer
            tileLayer.TileSource = tileSource

            ' Adds the map layer to the map
            If Not MapTileOverlay.Children.Contains(tileLayer) Then
                MapTileOverlay.Children.Add(tileLayer)
            End If
            tileLayer.Opacity = tileOpacity
        End Sub

        Private Sub btnAddTileLayer_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' Adds the tile overlay on the map, if it doesn't already exist.
            If tileLayer IsNot Nothing Then
                If Not MapTileOverlay.Children.Contains(tileLayer) Then
                    MapTileOverlay.Children.Add(tileLayer)
                End If
            Else
                AddTileOverlay()
            End If
        End Sub

        Private Sub btnRemoveTileLayer_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' Removes the tile overlay if it has been added to the map.
            If MapTileOverlay.Children.Contains(tileLayer) Then
                MapTileOverlay.Children.Remove(tileLayer)
            End If
        End Sub

    End Class

End Namespace

See Also

MapTileLayer
LocationRect