Using Bing Maps Silverlight Offline

Recently on the forums there have been some requests on how to get the Bing Maps Silverlight control to work offline. As luck would have it I happen to have a demo that needed to work offline as there was no guarantee that there would be internet when the demo was going to be presented. After some research and digging around in the code base I figured out a solution.

Anyone who has tries to load a map when not connected to the internet will likely see no map tiles and an error message in the middle of there map like the screen shot below.

When your offline the map control can’t request tiles so it makes sense that there is no visible map. There are a few different solutions to this:

1) Create a local tile server and add it as a tile layer to the map.
2) Stretch a scalable image of the world over the map
3) Render raw data on the map such as polygons without any background.

To implement the first approach you will need to have a bunch of map tiles. These can be created using Map Cruncher. You can then create a virtual directory in IIS on your computer and host the tiles there. Then you can add this as a tile layer. I find this to work well for my offline VPC demos.

The second approach is a bit buggy when zooming in but works fine for high level maps.

The third approach works well when you don’t need imagery, just data. For example drawing the country boundaries as polygons works as a great map.

The error message that appears is a bit of a pain as it’s in the middle of the map and there is no simple way to remove or hide this message. There is however a rather creative way to get rid of it. We can create a wrapper for the map control, which gives us access to the protected properties of the map and then remove the message from the map. After a lot of digging and stepping through code I found the following wrapper to work well:

using Microsoft.Maps.MapControl; namespace BingMapsOffline {     public partial class OfflineMap : Map     {         public OfflineMap()             : base()         {             base.LoadingError += (s, e) =>             {                 base.RootLayer.Children.RemoveAt(5);             };         }     } }

 

Basically what this code does is wait for a loading error to occur and then removes a child from the base RootLayer at position 5. Makes perfect sense…. This is a hacky solution and will likely break in the future but works in a pinch. I recommend only using this for demo purposes.

A working example can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/BingMapsOffline.zip The example uses the method of overlaying a stretchable image over the map as that makes for a much smaller download. Here is a screen shot of the example: