Adding Tile Overlays to the Map

Bing
 

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.

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.

Image of aerial map with and without 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.

XAML
Copy 
<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>
C#
VB
Copy 
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
Show: