Adding Media to the Map
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.
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:
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.
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:
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="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"> <m:Map x:Name="MapWithPushpins" CredentialsProvider="your key" Mode="AerialWithLabels" MouseDoubleClick="MapWithPushpins_MouseDoubleClick" Grid.Column="0" Grid.Row="1" /> </Grid> </UserControl>
Note: