Adding Media to the Map

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

The Bing Maps Silverlight Control can display scalable or non-scalable images and videos using Silverlight. Though you can add any UIElement directly to the map, it is best to contain them in a MapLayer that is on top of the map. This provides better control over the elements that are added to the map. If you have multiple images or videos to display, you may need multiple map layers. For example, if you have a background image added to your map and you want video to be shown over top of it, you can add an image to the first map layer and a video to the second layer.

Adding Image Media to the Map

To display images on your map, you must add an Image object (a class in the System.Windows.Controls namespace) to a MapLayer. The Source property defines the type of image that you want to display (ImageSource). For example, you can add a BitmapImage to the map, TestMap (assumed to be defined in the XAML design code), with the following code:

public void addImageToMap()
{
    MapLayer imageLayer = new MapLayer();

    Image image = new Image();
    //Define the URI location of the image
    image.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("myimage.png", UriKind.Relative));
    //Define the image display properties
    image.Opacity = 0.8;
    image.Stretch = System.Windows.Media.Stretch.None;
    //The map location to place the image at
    Location location = new Location() { Latitude = -45, Longitude = 122 };
    //Center the image around the location specified
    PositionOrigin position = PositionOrigin.Center;

    //Add the image to the defined map layer
    imageLayer.AddChild(image, location, position);
    //Add the image layer to the map
    TestMap.Children.Add(imageLayer);
}
    

Public Sub addImageToMap()
    Dim imageLayer As New MapLayer()

    Dim image As New Image()
    'Define the URI location of the image
    image.Source = New System.Windows.Media.Imaging.BitmapImage(New Uri("myimage.png", UriKind.Relative))
    'Define the image display properties
    image.Opacity = 0.8
    image.Stretch = System.Windows.Media.Stretch.None
    'The map location to place the image at
    Dim location As New Location() With {.Latitude = -45, .Longitude = 122}
    'Center the image around the location specified
    Dim position = PositionOrigin.Center

    'Add the image to the defined map layer
    imageLayer.AddChild(image, location, position)
    'Add the image layer to the map
    TestMap.Children.Add(imageLayer)
End Sub
    
 

Adding Pushpins

A common task is to add pushpins that mark certain locations on the map. You can use the method described earlier to add a pushpin as an image to the map, but it is better to use the Pushpin class instead. The Example section of this topic contains code to add pushpins to the map using the Pushpin class.

Adding Video Media to the Map

To display video feeds on your map, you must add a MediaElement object (a class in the System.Windows.Controls namespace) to a MapLayer. The Source property defines the URI location of the video feed. For example, you can add a MediaElement to the map, MyMap (assumed to be defined in the XAML design code), with the following code:

public void addVideoToMap()
{
    MapLayer imageLayer = new MapLayer();

    MediaElement video = new MediaElement();
    //Define the URI location of the video
    video.Source = new Uri(@"https://mschnlnine.vo.llnwd.net/d1/ch9/9/2/9/9/1/4/TCS2NBCOlympics_ch9.wmv",
            UriKind.RelativeOrAbsolute);
    //Define the video display properties
    video.Opacity = 0.8;
    video.Width = 250;
    video.Height = 200;

    //The map location to place the video at
    Location location = new Location() { Latitude=-45, Longitude=122 };
    //Center the video around the location specified
    PositionOrigin position = PositionOrigin.Center;

    //Add the video to the defined map layer
    imageLayer.AddChild(video, location, position);
    //Add the video layer to the map
    TestMap.Children.Add(imageLayer);
}
    

Public Sub addVideoToMap()
    Dim imageLayer As New MapLayer()

    Dim video As New MediaElement()
    'Define the URI location of the video
    video.Source = New Uri("https://mschnlnine.vo.llnwd.net/d1/ch9/9/2/9/9/1/4/TCS2NBCOlympics_ch9.wmv", _
                           UriKind.RelativeOrAbsolute)
    'Define the video display properties
    video.Opacity = 0.8
    video.Width = 250
    video.Height = 200

    'The map location to place the video at
    Dim location As New Location() With {.Latitude=-45, .Longitude=122}
    'Center the video around the location specified
    Dim position = PositionOrigin.Center

    'Add the video to the defined map layer
    imageLayer.AddChild(video, location, position)
    'Add the video layer to the map
    TestMap.Children.Add(imageLayer)
End Sub
    
 

Example

The following example demonstrates adding images to the map through a mouse double-click event. A MapLayer is added to the map, and one or more pushpin images are added to the layer when you double-click on the map. The point of the pushpin image is aligned with the mouse pointer so that it correctly represents the map location that was clicked. An image can be aligned relative to the mouse pointer using one of the PositionOrigin values.

Note

The default double-click mouse behavior of the map is to zoom in one level towards the clicked on map location. Setting the Handled property of the MapMouseEventArgs parameter disables the default behavior.

Pushpins added to the map by double-clicking.

<UserControl x:Class="SilverlightTest1.AddImageToMap"
    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;assembly=Microsoft.Maps.MapControl"
    Width="1024" Height="768">
    <Grid x:Name="LayoutRoot" Background="White">
        <m:Map x:Name="MapWithPushpins" CredentialsProvider="your key" Mode="AerialWithLabels"
               MouseDoubleClick="MapWithPushpins_MouseDoubleClick"
               Grid.Column="0" Grid.Row="1" />
    </Grid>
</UserControl>
    

using System;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Maps.MapControl;

namespace SilverlightTest1
{
    public partial class AddImageToMap : UserControl
    {

        public AddImageToMap()
        {
            InitializeComponent();

            // Changes the initial zoom level of the map.
            MapWithPushpins.ZoomLevel = 3;

        }

        private void MapWithPushpins_MouseDoubleClick(object sender, MapMouseEventArgs e)
        {
            // Disables the default mouse double-click action.
            e.Handled = true;

            // The location to place the pushpin at on the map.
            Location pinLocation = MapWithPushpins.ViewportPointToLocation(e.ViewportPoint);
            
             // The pushpin to add to the map.
            Pushpin pin = new Pushpin();
            pin.Location = pinLocation;
            
            // Adds the pushpin to the map.
            MapWithPushpins.Children.Add(pin);
 
        }
    }
}
    

Imports System
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports Microsoft.Maps.MapControl


    Partial Public Class AddImageToMap
        Inherits UserControl

        Public Sub New()
            InitializeComponent()

            ' Changes the initial zoom level of the map.
            MapWithPushpins.ZoomLevel = 3

        End Sub

        Private Sub MapWithPushpins_MouseDoubleClick(ByVal sender As Object, ByVal e As MapMouseEventArgs)
            ' Disables the default mouse double-click action.
            e.Handled = True

            ' The location to place the pushpin at on the map.
            Dim pinLocation = MapWithPushpins.ViewportPointToLocation(e.ViewportPoint)

             ' The pushpin to add to the map.
            Dim pin As New Pushpin() With {.Location = pinLocation}

            ' Adds the pushpin to the map.
            MapWithPushpins.Children.Add(pin)

        End Sub
    End Class