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.

image

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:

image

Advertisements

7 thoughts on “Using Bing Maps Silverlight Offline

    • There is no Bing Maps WPF control. You can look at wrapping the Silverlight control with WPF, I’ve heard of someone doing that. Otherwise you could put the AJAX map in a web browser control and then inject javascript to control the map.

  1. Irealised i was enormously satisfied to reveal this web-site.I need – thank you by using part of your within your profit about this amazing impute to assist you!! I perhaps reaping virtually every game smidgen of trace of the usb ports and i also take part individual book-marked on to entering real bushy-tailed properties your site blog post.

  2. Hi Ricky!
    Your post it’s very interesting but I have a question for you (sorry for my poor english);
    as you say in 1), i provide an offline maptile server but when my application goes offline, it seems that the silverlight control still try to connect to microsoft maptile server, slowing down dramatically the loading of the offline tiles. There is something that i can do to bypass this problem?
    thanks a lot

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