Adding Media to the Map
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="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"
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="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"
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(@"http://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("http://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