Ahoy! – Silverlight Virtual Earth MapControl

Posted by Vaughan on Mar 29, 2009 in Silverlight | 3 comments

What does a developer do when exploring the possibilities of the new Silverlight MapControl.  Create a pirate map of course!

Yarr!  So how do you get the paper look and feel on the map?  It’s a simple, and doesn’t require any C#, you can do it purely via the XAML.

<grid x:name="LayoutRoot" background="#FF000000">
      <img x:name="Paper" source="images/ye_atlas.jpg" />
      <m:map x:name="MainMap" opacity="0.5" />
</grid>

Yes, that’s how easy it is.  The aged paper look doesn’t zoom, I played around with having the paper scroll and zoom with the map, and it gave me a headache.  One of those times when you spend an hour or so finding that your cool idea wasn’t as cool as you thought.  When you zoom in, what does it look like?

But what is missing from the map?  Treasure of course!  YARRR!  Pushpin marks the spot!  So add a few custom pushpins, a bezier path later, and the map shows you the way.  How do you add a pushpin?  The best way is to create a layer to put all your pushpins, that way you can hide/show them all together quite easily.  So your XAML becomes…

<Grid x:Name="LayoutRoot" Background="#FF000000">
    <Image x:Name="Paper" Source="images/ye_atlas.jpg" />
    <m:Map x:Name="MainMap" Opacity="0.5" >
        <m:Map.Children>
        <m:MapLayer x:Name="PushpinLayer"/>
        </m:Map.Children>
    </m:Map>
</Grid>

… and by adding the following function which takes the position, the pixel size to resize your image/pushpin icon, and the title text of the pushpin …

private void AddPushpin(double latitude, double longitude, double size, string title)
{
    // Grab our map layer
    MapLayer ml = MainMap.FindName("PushpinLayer") as MapLayer;

    // Create the title for the pushpin
    TextBlock t = new TextBlock();
    t.Text = title;
    t.SetValue(MapLayer.MapPositionProperty,
                    new Location(latitude, longitude));
    t.SetValue(MapLayer.MapPositionMethodProperty,
                    PositionMethod.Center);

    // ... and the Pushpin image
    Image img = new Image();
    img.Width = size;
    img.Height = size;
    img.Source = new BitmapImage(new Uri("images/skull.png",
                                                UriKind.Relative));
    img.SetValue(MapLayer.MapPositionProperty,
                        new Location(latitude, longitude));
    img.SetValue(MapLayer.MapPositionMethodProperty,
                        PositionMethod.TopCenter);
    ml.AddChild(img);
    ml.AddChild(t);
}

Note the use of the PositionMethod to have the bottom of the title aligned with the top center of the image.  Having this makes life so easy when plotting pushpins on a map around a particular coordinate.

Call AddPushpin in your public Page() constructor, and play around with adding pushpins.  Lots of fun to play around with.  Then by simply adding a bezier path method (which I’m still not happy with yet) and vary the pushpins and voila, there be treasure! YARR!

If only the sailors of yesteryear had zoomable pannable treasure maps!  Features to come are some pirate ships that float around in the water… and I’d love to add a little mini-canon fight, but time is of the essence.

So why is this exciting?  Well, aside from our privateering friends out there, what it does open up is a great way to communicate hiking trails, cycling tracks, walks.  Feed in a heap of map data and you can overlay anything!  Add a custom map data source and you can really start to expand the possibilities.