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:
Create a map tile layer (MapTileLayer).
Specify the tile source (TileSource) of the overlay.
Add the tile source to the map tile layer.
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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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