Virtual Earth Silverlight Map Control CTP – How to Create Simple Pushpins
The Virtual Earth Silverlight Map Control CTP supports several different ways to position content on the map. Some of these ways are to:
- Position a fixed-size element at a Location on the Map, which will act like a pushpin.
- Position an element in a scalable manner on the Map by mapping it to a Location Rectangle bounding area on the Map so it will scale with the Earth surface as you zoom in and out.
- Position an element at a fixed screen pixel coordinate over the Map such that it exists over the Map.
There currently is not a pushpin class built into the Virtual Earth Silverlight Map Control. The reason is Silverlight already has a UIElement class which is a basic UI primitive. So, the Silverlight Map control provides the capability to position UIElements in the Latitude/Longitude space. To create a pushpin, you can put any UIElement on the Map and use the MapLayer.MapPosition attached property to position it at a Latitude and Longitude.
The Map has a Children property where you can insert child elements on the Map. In the sample code below, an Image is inserted as a child of the Map. The MapLayer.MapPosition attached property sets the Latitude and Longitude of the element over the Statue of Liberty. Since the pushpin image we are using in this sample has its anchor point on the bottom left, we can use the MapLayer.MapPositionMethod attached property to anchor the bottom left part of the UIElement to the Location. Note: You can also specify other anchor positions such as TopLeft, Center, etc. For example, if you want the center of the image to point to the Latitude/Longitude specified, then use “Center”. There is also a MapLayer.MapPositionOffset attached property you can use to specify an exact offset in pixels to anchor a point on your UIElement to the Latitude/Longitude more precisely if you need to do so.
For example, here’s XAML code to put the simple pushpin image on the Map and make the bottom left part of the image point to the Location:
<m:Map Mode="Road" Center="40.689205,-74.044526" ZoomLevel="17">
<m:Map.Children>
<Image Source="http://krkinnan.members.winisp.net/i/pin1.png" m:MapLayer.MapPosition="40.689205,-74.044526" m:MapLayer.MapPositionMethod="BottomLeft" Width="35" Height="35"/>
</m:Map.Children>
</m:Map>
Virtual Earth Silverlight Map Control CTP – Simple Pushpin Sample
You can also add the pushpin to the Map using C# in the code behind file – for example:
//Create the pushpin image UIElement
Image image = new Image();
image.Source = new BitmapImage(new Uri("http://krkinnan.members.winisp.net/i/pin1.png", UriKind.Absolute));
image.Width = 35;
image.Height = 35;
//Add the pushpin to the Map
MyMap.Children.Add(image);
//Position the pushpin using the attached properties
MapLayer.SetMapPosition(image, new Location(40.689205, -74.044526));
MapLayer.SetMapPositionMethod(image, PositionMethod.BottomLeft);
Notice in this sample, the pushpin image will stay fixed width and height as you zoom in and out and stay at the Latitude/Longitude specified as you move the Map. You can position any Silverlight UIElement the same way using the MapLayer.MapPosition property. So, your pushpins don’t have to be images - they can be complex Silverlight objects. You can also attach Silverlight events to your UIElement to create advanced effects.
For more details install the Virtual Earth Silverlight Map Control CTP SDK or see the interactive SDK online.
In a future post I will show you how to position elements in a scalable manner so they scale as the Map zooms in and out.
(Note: This post is also available on the Virtual Earth Platform Team Blog)
