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.
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.
.jpeg?cs-save-lang=1&cs-lang=csharp)
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="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); } } } }