Overlaying Local Live maps with your own map-data

Recently the Virtual Earth team  released a new version of their API . One of the new features allowed to overlay the maps with tiles from your own tile-server. The tile-server can be added using a few lines of javascript like this:

var tileSourceSpec = new VETileSourceSpecification();
tileSourceSpec.ID = "POPDENS" ;
tileSourceSpec.GetTilePath = GetTilePath;
tileSourceSpec.NumServers = 1;
tileSourceSpec.MinZoom = 1;
tileSourceSpec.MaxZoom = 16;
var tileLayer = new VELayerSpecification(VELayerType.VETileSource,"POPDENS", "POPDENS");

This will add a new tile layer named "POPDENS" to the virtual earth map, and make it slightly transparent. The GetTilePath parameter refers to the JavaScript method that creates the request-url to the server. Ex:

function GetTilePath (tileContext)  {
  if (tileContext != null && tileContext != "undefined" ) {
    return "VEmap.ashx?WIDTH=256&HEIGHT=256&X=" + tileContext.XPos + "&Y=" + tileContext.YPos + "&ZoomLevel=" + tileContext.ZoomLevel;

The X, Y and ZoomLevel parameters in this querystring are unfortunately not simple coordinates, but are the row/column of the tile at the current zoom level. Rob Blackwell has earlier posted an article on how to convert these to longitude/latitude values.

The next step is to create the tile-server. I used SharpMap for this. SharpMap's on-the-fly transformation capability is needed to transform the data to the Mercator projection that Virtual Earth uses, but any map-renderer that can project data could be used. You could also create a javascript that makes the GetTilePath method return a WMS request instead and then use any of the many WMS servers available.

The basic trick is to use Rob Blackwell's methods for calculating the longitude/latitude of each tile's corners, transform these coordinates to the Mercator projection and render the resulting extent.

You can view a small demo of a Population Density map overlaying the Virtual Earth map here: http://showcase.sharpgis.net/ve/
...or you can download the full source: VirtualEarth.zip (389,09 KB)
You can easily add your own data by editing the CreateMap method in \App_Code\Map.cs


Add comment