Bring your own Tile Provider to Virtual Earth, OpenStreetMap

The Virtual Earth JavaScript control has supported tile overlays for some time. A tile layer is set of 256px square images matching the Mercator projection of Virtual Earth. Tile layers are usually layered on top of Virtual Earth, the control supports transparency and an opacity of the entire layer. With the latest release of Version 6.2 of the control you can now disable the base tile layers allowing for greater performance when your tiles are all you need. Lets look at what is required to load OpenStreetMap tiles into Virtual Earth.

OpenStreetMap is a free editable map of the whole world. It is made by people like you. OpenStreetMap allows you to view, edit and use geographical data in a collaborative way from anywhere on Earth. OpenStreetMap's hosting is kindly supported by the UCL VR Centre and bytemark.

I am very impressed with how far OSM has come in the last year and highly recommend it as an open project (unlike another major online mapping company that wants you to contribute but then own the data themselves). So lets look at just how simple it is to get OSM into Virtual Earth.

See the working page here: http://www.soulsolutions.com.au/examples/osm/ (View source for the full code sample)

The first thing we need to do for this example is to disable some of the core Virtual Earth functionality we don’t need here.

var map = null;
        function loadmap() {
        map = new VEMap('myMap');
        map.onLoadMap = onloadmap;
        map.SetDashboardSize(VEDashboardSize.Tiny);
        var mapOptions = new VEMapOptions();
        mapOptions.LoadBaseTiles = false;
        mapOptions.EnableBirdseye = false;
        mapOptions.EnableDashboardLabels = false;
        map.LoadMap(new VELatLong(-27.47, 153.03), 16, VEMapStyle.Hybrid, false, VEMapMode.Mode2D, true, 0, mapOptions);
        map.HideScalebar();
        }

We change to the tiny dashboard, and pass into the LoadMap() method the optional final parameter of VEMapOptions. In Version 6.2 this includes the ability to disable the base VE tiles using LoadBaseTiles = false and you can also disable Birdseye as I do here. I set the initial view of the map over Brisbane, Australia and hide the scalebar. These operations are not mandatory, in your application you may want to keep some of these features.

Next we subscribed to the onLoadMap event before we called VELoadMap. This event fires once the map has loaded, a perfect time to add our new tile layer.

function onloadmap() {
        var bounds = [new VELatLongRectangle(new VELatLong(90, -180), new VELatLong(-90, 180))];
        var tileSourceSpec = new VETileSourceSpecification("OSM", "", 1, bounds, 1, 18, getTilePath, 1.0, 100);
        map.AddTileLayer(tileSourceSpec, true);
        }

To add a tile layer to Virtual Earth you have two options, either create your tiles in the same naming convention as Virtual Earth or use your own convention. We add the tile layer to VE using the VEMap.AddTileLayer method passing in a Tile spec and whether we want the layer immediately visible. The Tile spec, VETileSourceSpecification, has a bunch of properties for you to set:

Most of these are straight forward but the two we will look at are TileSource and getTilePath. The TileSource is when you have a tile set that follows the conventions from Virtual Earth. You supply a URL with some special tokens to be replaced:

function getTilePath(tileContext) {
        return "http://tile.openstreetmap.org/" + tileContext.ZoomLevel + "/" + tileContext.XPos + "/" + tileContext.YPos + ".png";
        }