Adding Tile Overlays to the Map

This documentation is no longer available on MSDN, however it is available as a CHM download.

This topic describes how to add image overlays from existing tile sources using the Bing Maps Silverlight Control. It does not describe how to create your own overlays using tools such as MapCruncher. In order to add a tile overlay to a location on your map, you need to:

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

  2. Define the area of coverage where the tile source is valid.

  3. Create a tile map layer (MapTileLayer) in which to add the tile source.

The following example retrieves image data from the specified tile source, and displays images from the tile source that fall within the specified LocationRect. The LocationRectTileSource object defines the bounding rectangle as well as the valid zoom levels for the tile overlays. Tile overlays that fall outside the bounding rectangle or zoom range do not show up on the map.

After you define the valid coverage area for the tile overlays, add the tile source to a MapTileLayer. The map tile layer is then added to a MapLayer and the tile overlay shows up on the map. This particular example retrieves a terrain overlay for the specified area on the map.

Ee681902.73b9498d-80f2-4036-be24-0f3906da1451(en-us,MSDN.10).jpg

The terrain tile overlay added to the map

<UserControl x:Class="SilverlightTest1.TileOverlay"
    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;assembly=Microsoft.Maps.MapControl"
    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="your key" Mode="Road" Center="48.03,-122.4" ZoomLevel="10" 
               Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1" />
    </Grid>
</UserControl>
	
using System.Windows;
using System.Windows.Controls;
using Microsoft.Maps.MapControl;

namespace SilverlightTest1
{
    public partial class TileOverlay : UserControl
    {
        MapTileLayer tileLayer;
        private double tileOpacity = 1.0;

        public TileOverlay()
        {    
            InitializeComponent();
        }

        private void AddTerrainTileOverlay()
        {
            // The bounding rectangle that the tile overlay can be placed within.
            LocationRect boundingRect = new LocationRect(
                new Location(48.06282, -122.43773),
                new Location(47.999973, -122.37490));
            
            // Creates a new map layer to add the tile overlay to.
            tileLayer = new MapTileLayer();
            
            // The source of the overlay.
            LocationRectTileSource tileSource = new LocationRectTileSource();
            tileSource.UriFormat = "http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png";
            // The zoom range that the tile overlay is visibile within
            tileSource.ZoomRange = new Range<double>(10,18);
            // The bounding rectangle area that the tile overaly is valid in.
            tileSource.BoundingRectangle = boundingRect;
            
            
            // Adds the tile overlay to the map layer
            tileLayer.TileSources.Add(tileSource);
            
            // Adds 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)
        {
            // Adds 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
            {
                AddTerrainTileOverlay();
            }
        }

        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);
            }
        }

    }
}
	
Show: