The Virtual Earth Silverlight Map Control

Create a new Silverlight project in Visual Studio 2008 and add a reference to >Microsoft.VirtualEarth.MapControl.dll which can now be found in C:\Program Files\Microsoft Virtual Earth Silverlight Map Control\CTP\Libraries.

We modify MainPage.xaml and MainPage.xaml.cs files to implement the control. We add the namespace reference to the xaml file. The xaml file looks as below after adding the namespace.

<UserControl x:Class="VirtualEarth.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:m="clr-namespace:Microsoft.VirtualEarth.MapControl;
                      assembly=Microsoft.VirtualEarth.MapControl">
    <Grid x:Name="LayoutRoot" Background="White">
    </Grid>
</UserControl>

Adding Map element will create a working map with the Virtual Earth Map Contrl with in built functions such as panning and zooming. The screen shot of working sample is given below.

Add one children to the Map of type MapLayer. This will act as a pushpin on the map. The xaml code looks as below 

 <m:Map x:Name="fullmap" Mode ="Aerial">
  <m:Map.Children>
    <m:MapLayer x:Name="PushPin">
    </m:MapLayer>
  </m:Map.Children>
</m:Map>

You can even change the map mode in the code behind as 

fullmap.Mode = new AerialMode();

Add the following namespaces in the code behind.

using System.Windows.Media.Imaging;
using Microsoft.VirtualEarth.MapControl;

To add a basic pushpin,use the following code into your project on the MainPage.xaml.cs file. Make sure you have a small image in your project that you can use in place of ksokoban.png used below as the image for the pushpin. Using XAML to render the pushpin on the map enables developers to build animations and effects into the pushpin above and beyond what is possible with JavaScript and CSS.

   private void Addpin(double latitude, double longitude, double size)
        {
            // creates the pushpin image
            Image img = new Image();
            img.Source = new BitmapImage(new Uri("ksokoban.png", UriKind.Relative));
            img.Width = size;
            img.Height = size;

            // set Map position before adding to Map Control
            img.SetValue(MapLayer.MapPositionProperty, new Location(latitude, longitude));
            img.SetValue(MapLayer.MapPositionMethodProperty, PositionMethod.Center);

            (fullmap.FindName("PushPin") as MapLayer).AddChild(img);

        }

The final screen shot with pushpin is as below. Also added a scaling transform to enlarge the size of the pushpin on mouse over.

Full Xaml code is as below. 

 <UserControl x:Class="VirtualEarth.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:m="clr-namespace:Microsoft.VirtualEarth.MapControl;
             assembly=Microsoft.VirtualEarth.MapControl"
    Width="700" Height="600">
    <Grid x:Name="LayoutRoot" Background="White">
        <m:Map x:Name="fullmap" Mode="Aerial">
            <m:Map.Children>
                <m:MapLayer x:Name="PushPin">
                </m:MapLayer>
            </m:Map.Children>
        </m:Map>
    </Grid>
</UserControl>

code behind code is below.

using System;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.VirtualEarth.MapControl;

namespace VirtualEarth
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            // hard-coded latitude, longitude and image size
            Addpin(25.5, 77, 64);

        }
        private void Addpin(double latitude, double longitude, double size)
        {
            // creates the pushpin image
            Image img = new Image();
            img.Source = new BitmapImage(new Uri("ksokoban.png", UriKind.Relative));
            img.Width = size;
            img.Height = size;

            img.MouseEnter += new MouseEventHandler(img_MouseEnter);
            img.MouseLeave += new MouseEventHandler(img_MouseLeave);

            // set Map position before adding to Map Control
            img.SetValue(MapLayer.MapPositionProperty, new Location(latitude, longitude));
            img.SetValue(MapLayer.MapPositionMethodProperty, PositionMethod.Center);

            (fullmap.FindName("PushPin") as MapLayer).AddChild(img);
        }
        void img_MouseLeave(object sender, MouseEventArgs e)
        {
            Image img = (Image)sender;
            // remove transform when mouse leaves image
            // thus back to normal size
            img.RenderTransform = null;
        }
        void img_MouseEnter(object sender, MouseEventArgs e)
        {
            Image img = (Image)sender;

            // scaling will shrink (less than 1) or enlarge 
            // (greater than 1) source element
            ScaleTransform st = new ScaleTransform();
            st.ScaleX = 1.4;
            st.ScaleY = 1.4;

            // set center of scaling to center of image
            st.CenterX = img.Height / 2;
            st.CenterY = img.Height / 2;

            img.RenderTransform = st;
        }
    }
}

Reference Articles