Tuesday, 12 May 2009

Draw on Silverlight Virtual Earth Map Control

There are a couple of different projects where I'd like to enable 'drawing' on a map (including RaceReplay.net) - this is a basic first-cut of drawing within the Microsoft VE Map Control.

Each click on the map will start/continue a line. The MouseLeave event is wired to start a 'new' line. Navigating the map (dragging/double-click zoom) also causes points to be drawn - obviously this needs some work...

The two files required to build it are Page.xaml and Page.xaml.cs, the key pieces of code being
private void VEMap_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
Map m = (Map)sender;
Location l = m.ViewportPointToLocation(e.GetPosition(m));
if (polyline == null)
private void CreateNewPolyline(Location startPoint)
polyline = new MapPolyline();
polyline.Stroke = new SolidColorBrush(Colors.Red);
polyline.StrokeThickness = 2;
var lc = new LocationCollection();
polyline.Locations = lc;
Simple, eh?

p.s. these are plain old straight lines - at the 'continent' level you might expect them to curve as though on a great-circle; I'm not too worried about implementing that right now since the target usage of my drawing is at a much "smaller scale"... however Geoquery2008 does draw great circle lines correctly...


  1. Hey Craig, I've been building full point, linestring and polygon drawing and editing tools. Plan is to make it all open source under the DeepEarth project. Ping me if you want the code earlier to play with - john at soulsolutions.com.au

  2. I really like this a lot. Any idea how I can put this directly onto a deepzoom sub-image? I dont want to use virtual earth. Thanks.

  3. Sorry Marthinus, I haven't seen any similar code for DeepZoom. In this instance the MapPolyline class takes care of sync'ing up the line with the underlying image (zoom/pan/etc).

    To do the same thing with DeepZoom I think you have to draw 'regular' Polylines and then manage their Transforms manually - it *is* possible though, since deepearth.codeplex.com does it (even though it is a mapping tool, it is actually DeepZoom underneath) so you could check out that code.