Ordnance Survey maps in Bing Maps Silverlight control

The latest incarnation of Bing Maps (the web version) has the option of showing certain levels using Ordnance Survey mapping. This was of interest to me, because I’ve spent the last year working on prototypes of mapping applications using the Ordnance Survey 25k layer (the classic Rambling maps). Here’s an example.

They’ve also just released the Silverlight Map Component (which has been in CTP since March) as a V1.0 release. I’ve played quite a bit with the CTP, so I was interested to see how much it had changed. Turns out, not so much. My own OS map layer needed only a handful of changes, almost all around their (sensible) decision to remove the MapViewSpecification object (which made animating the map difficult, so it was good to see it go). But I also wanted to see if the Silverlight component could use the OS maps.

It doesn’t support them out of the box – the only modes offered are the standard RoadMode, and the two Aerial modes (with or without labels) so it’s necessary to roll your own.

The easiest way to put different tiles on the map is to create a custom TileLayer. All you really need to know, then, is how to construct the URL for the tiles you want.

Where do you find the tiles?

A little snooping is required. I fired up a browser, and a copy of Fiddler to watch the requests it was sending. For the OS map tiles, here’s what a typical URL looks like:

http://ecn.t3.tiles.virtualearth.net/tiles/r031313112303.png?g=41&productSet=mmOS

This is a fairly typical tile Url. The long number in the name of the image is something called a QuadKey – a way to encode x, y and zoom values in a single value. Here’s a good explanation. Luckily, the map control supplies a QuadKey object to do all the work.

To create a custom tile layer, here’s the code I used:


public class OsTileSource : TileSource
 {
 public override Uri GetUri(int x, int y, int zoomLevel)
 {
 QuadKey key = new QuadKey(x, y, zoomLevel);
 // http://ecn.t3.tiles.virtualearth.net/tiles/r031313112303.png?g=41&productSet=mmOS

 if (zoomLevel < 12)
 {
 return new Uri("http://ecn.t2.tiles.virtualearth.net/tiles/r" + key.Key + ".png?g=373&mkt=en-gb&shading=hill", UriKind.Absolute);
 }
 else
 {
 return new Uri("http://ecn.t2.tiles.virtualearth.net/tiles/r" + key.Key + ".png?g=41&productSet=mmOS", UriKind.Absolute);
 }
 }
 }

You’ll notice that I had to do something different with lower zoom levels. The OS maps only exist above level 12, so below that, I use the normal road tiles.

To use this in the map, here’s what you do:


// Mercator mode means no underlying tiles
 map.Mode = new MercatorMode();
 MapTileLayer layer = new MapTileLayer();
 layer.TileSources.Add(new OsTileSource());
 map.Children.Add(layer);

And it all works fine.

Of course, this is probably breaking the Bing Maps terms, but only slightly, since the same maps are available in the Ajax component. I’m sure they’ll turn up officially in the Silverlight component at some point.

Here’s a live example.

One final thought. It’s interesting that the Bing tiles are not the exact map tiles that the OS use. You can tell that by looking at the slightly lower zoom levels – the OS grid lines are not perpendicular. This is because the maps are originally projected onto the OS Grid Projection (which is ideal for a country the size of the UK), while Bing maps uses a Mercator projection (which is easier to manage for a world map). So for the Bing maps, the OS tiles have to be ‘crunched’ to project them onto the Mercator projection, hence the non-perpendicular grid lines.

The OS OpenSpace service provides an uncrunched set of map tiles, although it looks like they miss out the really nice 25k layer, so it would probably be possible to use those tiles, but you’d have to do more work, because those tiles are in the OS Grid Projection, which isn’t compatible with the Mercator projection.

How much more work? That’s a subject for another post. I’ve done exactly that as part of my BBC prototypes, so I have a Bing Maps component working in OSGB coordinates, using uncrunched 25K imagery (see this previous post talking about the problems of hosting map tiles) but the project isn’t yet available for public consumption. However, I’m hoping to give a presentation on the subject at the first Bing Maps UK user group meeting in January, so do come along if you’re interested.

P.S. I did this code in Visual Studio 2010 Beta 2, and the Map component works, live, in the VS designer. As I typed values into the Xaml for the Center and ZoomLevel, the map animated smoothly to that location. Very cool indeed.

Advertisements

16 comments

  1. Hi Jim,

    This is a good walkthrough. I’m a user of the classic Bing maps with custom layers. I’d like to hear your thoughts on classic vs silverlight plus find out some details about the bing maps uk user group. Thanks.

    1. I don’t have a huge amount of experience using the classic bing maps, but in general, what Silverlight gives you is the ability to handle far greater data sets, and for doing far richer types of visualisations. Also, the experience of zooming in Silverlight is smoother, making the maps better to use, because you can more easily keep track of where you are as you zoom in and out.

      There’s more details about the Bing Maps user group here:

      http://bingmapsuk.ning.com/events/event/show?id=4218636%3AEvent%3A201&xg_source=msg_invite_event

    1. Feel free – it’s using the official OS tiles, which are available as part of the Bing Ajax set, so it’s not really using anything that isn’t already available.

  2. Hello Jim,

    As a self confessed ‘map nut’ I’d like to thank you for publishing your Silverlight map gadget here. It really is a great little tool for the likes of me, and is a bookmark I return to again and again. Just one quick question if I may…

    I wonder if you’re aware that on the Bing Ajax OS tile-set, the far east coast of Scotland is not represented from just north of Aberdeen to just north of Berwick (and east of a north/south line just east of Dundee). Zoom levels at 12 and above in this area remain in the simple road map style. I’ve checked, and as one might imagine this is also the case when using Bing maps in the conventional way from the Bing maps search engine. Do you know the reason for this? Six months or so ago I assumed it was work in progress, and the complete set was imminent, but now it looks like an omission of some description (whether inadvertent or by design) is apparent. Living as I do very close to the missing area I’d be most appreciative of any light you could shed on this anomaly given your association with the Bing map project.

    Regards,
    Paul Hudson

    1. How odd. It does look like an oversight. I’m definitely requesting them, but the service is returning plain map tiles. I suppose it’s vaguely possible that there’s some licensing reason – the OS licensing can often be byzantine – but it’s just as likely to be a cock-up.

      Annoying, though. I know that OS tiles exist – I have the 25K layer tiles as a deep zoom image myself, but I don’t have permission from the OS to publically host it.

      1. Thanks for taking the time to have a look Jim… I’d appreciate a shout if by chance you come across the definitive reason.

        Cheers,
        Paul

    1. Not directly on this demo, but if you built your own Silverlight application based on the code, it’s pretty easy to overlay any graphical elements you like. The map component takes care of keeping them all synced to location, you just have to place them with the appropriate lat/long coordinates.

  3. Hello again Jim, hope you’re still periodically monitoring activity here.

    The other day I noticed this great little app has had its credentials invalidated somehow and it makes it clear on the map display in a BIG way… I’m assuming it’s by some restructuring by Microsoft and Bing? As a resource I visit almost weekly, I’m hoping it’s not a lost cause… what do you think?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s