Adding Media to the Map

Article
08/01/2016

The Bing Maps WPF Control can display scalable or non-scalable images and videos. Though you can add any System.Windows.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, myMap when you click the “Add Image” button in the following example.

<Window x:Class="WPFTestApplication.ShowImage"
    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"
    Width="1024" Height="768">

    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <m:Map x:Name="myMap"
               Grid.Row="0" Grid.RowSpan="2"
               Center="37.1481402218342,-119.644248783588"
               ZoomLevel="6"
               CredentialsProvider="<strong>InsertBingMapsKey</strong>" 
               />
         <Button Click="addImageToMap" Opacity="0.8" Width="300" Height="40" Grid.Row="1" >
            <TextBlock>Show Image</TextBlock>
        </Button>      
    </Grid>

</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Maps.MapControl.WPF;
using Microsoft.Maps.MapControl.WPF.Design;

namespace WPFTestApplication
{
    public partial class ShowImage : Window
    {
        LocationConverter locConverter = new LocationConverter();

        public ShowImage()
        {
            InitializeComponent();
            //Set focus on the map
            myMap.Focus();
        }


        private void addImageToMap(object sender, RoutedEventArgs e)
        {
            MapLayer imageLayer = new MapLayer();


            Image image = new Image();
            image.Height = 150;
            //Define the URI location of the image
            BitmapImage myBitmapImage = new BitmapImage();
            myBitmapImage.BeginInit();
            myBitmapImage.UriSource = new Uri("http://upload.wikimedia.org/wikipedia/commons/d/d4/Golden_Gate_Bridge10.JPG");
            // To save significant application memory, set the DecodePixelWidth or  
            // DecodePixelHeight of the BitmapImage value of the image source to the desired 
            // height or width of the rendered image. If you don't do this, the application will 
            // cache the image as though it were rendered as its normal size rather then just 
            // the size that is displayed.
            // Note: In order to preserve aspect ratio, set DecodePixelWidth
            // or DecodePixelHeight but not both.
            //Define the image display properties
            myBitmapImage.DecodePixelHeight = 150;
            myBitmapImage.EndInit();
            image.Source = myBitmapImage;
            image.Opacity = 0.6;
            image.Stretch = System.Windows.Media.Stretch.None;

            //The map location to place the image at
            Location location = new Location() { Latitude = 37.8197222222222, Longitude = -122.478611111111 };
            //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
            myMap.Children.Add(imageLayer);
        }

    }
}

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Globalization
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports Microsoft.Maps.MapControl.WPF
Imports Microsoft.Maps.MapControl.WPF.Design

Namespace WPFTestApplication
Partial Public Class SwitchMapViews
Inherits Window
Private locConverter As New LocationConverter()

Public Sub New()
InitializeComponent()
//Set focus on map
myMap.Focus()
End Sub


Private Sub addImageToMap(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim imageLayer As New MapLayer()


Dim image As New Image()
image.Height = 150
'Define the URI location of the image
Dim myBitmapImage As New BitmapImage()
myBitmapImage.BeginInit()
myBitmapImage.UriSource = New Uri("http://upload.wikimedia.org/wikipedia/commons/d/d4/Golden_Gate_Bridge10.JPG")
' To save significant application memory, set the DecodePixelWidth or  
' DecodePixelHeight of the BitmapImage value of the image source to the desired 
' height or width of the rendered image. If you don't do this, the application will 
' cache the image as though it were rendered as its normal size rather then just 
' the size that is displayed.
' Note: In order to preserve aspect ratio, set DecodePixelWidth
' or DecodePixelHeight but not both.
'Define the image display properties
myBitmapImage.DecodePixelHeight = 150
myBitmapImage.EndInit()
image.Source = myBitmapImage
image.Opacity = 0.6
image.Stretch = System.Windows.Media.Stretch.None

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

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

End Class
End Namespace

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 System.Windows.Controls.MediaElement.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:

<Window x:Class="WPFTestApplication.ShowVideo"
    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"
    Width="1024" Height="768">

    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <m:Map x:Name="myMap"
               Grid.Row="0" Grid.RowSpan="2"
               Center="37.1481402218342,-119.644248783588"
               ZoomLevel="6"
               CredentialsProvider="InsertBingMapsKey" 
               />
         <Button Click="addVideoToMap" Opacity="0.8" Width="300" Height="40" Grid.Row="1" >
            <TextBlock>Show Video</TextBlock>
        </Button>      
    </Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Globalization;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Maps.MapControl.WPF;
using Microsoft.Maps.MapControl.WPF.Design;

namespace WPFTestApplication
{
    public partial class ShowVideo : Window
    {
        LocationConverter locConverter = new LocationConverter();

        public ShowVideo()
        {
            InitializeComponent();
            //Set focus on the map
            myMap.Focus();
        }


        private void addVideoToMap(object sender, RoutedEventArgs e)
        {

            MapLayer videoLayer = 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 image at
            Location location = new Location() { Latitude = 37.8197222222222, Longitude = -122.478611111111 };
            //Center the image around the location specified
            PositionOrigin position = PositionOrigin.Center;

            //Add the image to the defined map layer
            videoLayer.AddChild(video, location, position);
            //Add the image layer to the map
            myMap.Children.Add(videoLayer);
        }

    }
}

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Globalization
Imports System.Windows.Media
Imports Microsoft.Maps.MapControl.WPF
Imports Microsoft.Maps.MapControl.WPF.Design

Namespace WPFTestApplication
Partial Public Class SwitchMapViews
Inherits Window
Private locConverter As New LocationConverter()

Public Sub New()
InitializeComponent()
//Set focus on map
myMap.Focus()

End Sub


Private Sub addVideoToMap(ByVal sender As Object, ByVal e As RoutedEventArgs)

Dim videoLayer 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 image at
Dim location As New Location() With {.Latitude = 37.8197222222222, .Longitude = -122.478611111111}
'Center the image around the location specified
Dim position As PositionOrigin = PositionOrigin.Center

'Add the image to the defined map layer
videoLayer.AddChild(video, location, position)
'Add the image layer to the map
myMap.Children.Add(videoLayer)
End Sub

End Class
End Namespace

Share via

Adding Media to the Map

Adding Image Media to the Map

Adding Video Media to the Map

Additional resources