Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Adding Media to the Map

Bing

The Bing Maps WPF Control can display scalable or non-scalable images and videos. 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, 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);
        }

    }
}

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:

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

    }
}
Show:
© 2015 Microsoft