VE Silverlight Control – Pushpins, Infoboxes, and Best Map View

The Virtual Earth/Bing Silverlight control CTP release was announced at MIX09. Since this control is still in CTP there are a lot of desired functionalities that have not made it in yet. Currently polygon and polyline shapes are built into the control but pushpins are not. This was by design as it is pretty easy to create your own user control on the map to be used as a pushpin. Not all of the functionalities that are in the AJAX control made have been added to the CTP control. In particular the ability to get the best map view for an array of points, or a common infobox class. This article will show how to create a basic pushpin, create an infobox and how to implement the best map view functionality that I put together here: http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!943.entry

Basic Pushpin

To create a basic pushpin we will add in the more common properties of the pushpin object that’s in the AJAX control such as, title, description, and LatLong. We will also have properties to specify the pushpin image source, a reference to the map, and an offset that will be used to offset the position of the infobox from the center of the pushpin. to get started we will create our pushpin xaml. A MouseLeftButtonDown event will be added to the pushpin. This event will be used to display the infobox.

<UserControl x:Class="VESilverlightMap.Pushpin"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="25" Height="25">     <Grid HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">         <Image Width="250" Stretch="Uniform" x:Name="PinImage" MouseLeftButtonDown="PinClicked"></Image>     </Grid> </UserControl>

 

For the Pushpin class we will have to create the properties that we want the user to be able to set. The following is used to define the properties of the pushpin class.

private Map _map; private Location _latlong; private string _title; private string _description; private int _offset = 0; public Map MapInstance {     get { return _map; }     set { _map = value; } } public ImageSource ImageSource {     get { return PinImage.Source; }     set { PinImage.Source = value; } } public Location LatLong {     get { return _latlong; }     set { _latlong = value; } } public string Title {     get {return _title;}     set { _title = value; } } public string Description {     get { return _description; }     set { _description = value; } } public int Offset {     get { return _offset; }     set { _offset = value; } }

 

The PinClicked methoded that gets fired when a user clicks on a pushpin is used to populate the infobox information. There are several ways for the infobox to be created. To reduce the number of user control instances that are created a single infobox can be used and it’s contents updated depending on which pushpin you clicked on. This will make a significant performance difference when there are a lot of pushpins on the map. The PinClicked method will set the infobox title and discription properties and will make it visible. The infobox Position, PositionMethod, and PositionOffset properties will also be set. The PinClicked method looks like this:

private void PinClicked(object sender, MouseEventArgs e) {     //Ensure there is content to be displayed before modifying the infobox control     if (!String.IsNullOrEmpty(_title) || !String.IsNullOrEmpty(_description))     {         Border infobox = (Border)_map.FindName("Infobox");         TextBlock infoboxTitle = (TextBlock)_map.FindName("InfoboxTitle");         TextBlock infoboxContent = (TextBlock)_map.FindName("InfoboxDescription");         infoboxTitle.Text = _title;         infoboxContent.Text = _description;         infobox.Visibility = Visibility.Visible;         PositionMethod position = VESilverlightTools.GetInfoboxPositionMethod(_latlong, _map);         Point offset = VESilverlightTools.GetInfoboxOffset(_latlong, _map, _offset);         MapLayer.SetMapPosition(infobox, _latlong);         MapLayer.SetMapPositionMethod(infobox, position);         MapLayer.SetMapPositionOffset(infobox, offset);     } }

Now that we have our Pushpin UserControl made we can now have to create a method to add these pushpins to the map. In the Page.xaml.cs file we can add the following method to add a pushpin to the map:

public void AddPushpin(Location latlong, string title, string description, MapLayer layer) {     Pushpin pushpin = new Pushpin     {         ImageSource = new BitmapImage(new Uri("pin.png", UriKind.Relative)),         MapInstance = map,         LatLong = latlong,         Title = title,         Description = description,         Offset = 15     };     layer.AddChild(pushpin, latlong, PositionMethod.Center); }

For simplicity one icon is used for all pushpins. This can be easily modified so that you can use a different icon for each pushpin. Also, I’ve hard coded in an offset value of 15. This value is used to offset the position of the infobox a certain number of pixels away from the center of the pin.

Now that we have a way to add our pushpins to the map the following can be used to add your pushpins:

MapLayer pinLayer = new MapLayer(); pinLayer = (MapLayer)map.FindName("PinLayer"); AddPushpin(new Location(43.647038, -79.3952), “My Title”, “My Description”, pinLayer);

Note that you will need to add a MapLayer to the Page.xaml file like so:

<!–Pushpin Layer–> <MapControl:MapLayer x:Name="PinLayer"> </MapControl:MapLayer>

 

Infobox control

Adding an infobox to the map is similar to adding a pushpin to the map. However, simply displaying an infobox on the map is not enough, ideally  we will have logic that will know what direction to display the infobox relative to the pushpin and where it is on the map. The infobox should be displayed towards the middle of the map so that there will be less of a chance of the infobox being displayed off the page. Also, as mentioned above having one infobox and updating it’s properties is will lead to better performance than creating a separate infobox user control for each pushpin. Additionally we will want to add the infobox to a map layer that is above the pushpin layer so that the infobox will be displayed above the pushpins. To get start the following xaml will be added to the map:

<!–Common Infobox–> <MapControl:MapLayer>     <Border x:Name="Infobox" MinHeight="100" MaxHeight="200" Width="300"             MapControl:MapLayer.MapPosition="0,0"             Background="Black"             Opacity="0.9"             BorderBrush="White"             BorderThickness="2"             CornerRadius="5"             Visibility="Collapsed">         <StackPanel>             <Grid>                 <Button Click="CloseInfobox_Click" Tag="Close" Margin="5" Background="Black" HorizontalAlignment="Right" VerticalAlignment="Top">                     <TextBlock>X</TextBlock>                 </Button>                 <TextBlock x:Name="InfoboxTitle" Foreground="#1cff1c" FontSize="12" Padding="5" Width="280" TextWrapping="Wrap" Grid.Row="0" HorizontalAlignment="Left" />             </Grid>             <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MaxHeight="150">                                   <TextBlock x:Name="InfoboxDescription" Foreground="#1cff1c" FontSize="10" Padding="5" Width="265" TextWrapping="Wrap" Height="Auto" Grid.Row="1" />                                            </ScrollViewer>                                    </StackPanel>     </Border> </MapControl:MapLayer>

 

This xaml that is used to create the infobox description area is set up so that if the content causes the infobox to grow to it’s max height of 200 pixels a verticle scrollbar appears. The infobox has an close button that calls a method called CloseInfobox when clicked. This method collapses the infobox so that it is no longer displayed. Here is the code for the CloseInfobox method.

Border infobox = new Border(); infobox = (Border)map.FindName("Infobox"); private void CloseInfobox_Click(object sender, RoutedEventArgs e) {     infobox.Visibility = Visibility.Collapsed; }

 

We now need to create the tools needed to retrieve the infobox position method, and position offset properties. These properties are dependant on where the pushpin is on the viewable map when the user clicked it. To determine the position method we first want to figure out which quadrant of the map the pushpin is in so that we can display the infobox in the opposite direction. The following methods can be used to determine the position method that should be used:

public static PositionMethod GetInfoboxPositionMethod(Location location, Map map) {     Point pinPoint = map.LocationToViewportPoint(location);     return GetInfoboxPositionMethod(pinPoint, map); } public static PositionMethod GetInfoboxPositionMethod(Point anchor, Map map) {     int quadKey = 0;     //Calculate which quadrant the anchor falls in.     if (anchor.X > map.Width / 2)     {         quadKey++;     }     if (anchor.Y > map.Height / 2)     {         quadKey += 2;     }     PositionMethod position = PositionMethod.None;     switch (quadKey)     {         case 0:             position = PositionMethod.TopLeft;             break;         case 1:             position = PositionMethod.TopRight;             break;         case 2:             position = PositionMethod.BottomLeft;             break;         case 3:             position = PositionMethod.BottomRight;             break;     }     return position; }

To calculate the infobox offset we also need to know which quadrant of the map the pushpin falls in so that the offset will be away from that quadrant. The following method can be used to determine the infobox offset:

public static Point GetInfoboxOffset(Location location, Map map, int offsetFactor) {     Point pinPoint = map.LocationToViewportPoint(location);     return GetInfoboxOffset(pinPoint, map, offsetFactor); } public static Point GetInfoboxOffset(Point anchor, Map map, int offsetFactor) {     Point offset = new Point(0, 0);     int quadKey = 0;     if (anchor.X > map.Width / 2)     {         quadKey++;     }     if (anchor.Y > map.Height / 2)     {         quadKey += 2;     }     switch (quadKey)     {         case 0:             offset = new Point(offsetFactor, 0);             break;         case 1:             offset = new Point(-1 * offsetFactor, 0);             break;         case 2:             offset = new Point(offsetFactor, -1 * offsetFactor);             break;         case 3:             offset = new Point(-1 * offsetFactor, -1 * offsetFactor);             break;     }     return offset; }

The pushpin user control will now be able to use these methods to position the infobox on the map. Note that these methods require the map to have a width and height property.

Best Map view

I have written a couple methods over the years that calculate the best map view for an array of coordinates. The most recent one creates a MapViewSpecification that can be used with the Silverlight control (http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!943.entry). Using this method is pretty straight forward. The following is an example of how to use this method to position the map accordingly:

IList<Location> locations = new List<Location>(); locations.Add(new Location(43.647038, -79.3952)); locations.Add(new Location(43.478527, -80.549013)); locations.Add(new Location(51.501238, -0.0233687)); locations.Add(new Location(25.271141, 55.329089)); locations.Add(new Location(42.362158, -71.083124)); locations.Add(new Location(40.76083, -73.9797)); locations.Add(new Location(40.714774, -74.005803)); MapViewSpecification mapView = GeospatialTools.BestMapView(locations, map.Width, map.Height, 10); map.SetView(mapView.Center, mapView.ZoomLevel);

 

Conclusion

Using the techniques described in this article you should be able to easily create pushpins with infoboxes and also be able to determine the best MapViewSpecification for those pushpins.

Source code that uses these methods can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/VESilverlightMap%7C_PushpinsInfobox.zip

This sample code also has a MiniMap that Earthware describes how to make in his blog here: http://www.earthware.co.uk/blog/index.php/2009/03/virtual-earth-silverlight-minimap-tutorial/