Using the Bing Maps Aerial layer in PTV’s developer components

First of all: thanks to Frank Gailfuss (Logistics Components Desktop Development) for this superb blog post!

What is Bing Maps and what is the Bing Maps Aerial layer?

Bing Maps is a web mapping service provided as a part of the Microsoft’s Bing suite. Most likely you will have come across Bing Maps using http://www.bing.com/maps/, which in fact is just one of the faces of Microsoft’s Bing Maps Platform. Technically, Microsoft’s map consists of several layers, similar to PTV’s map, with one of them displaying aerial imagery – and this is the Bing Maps Aerial layer:

Fig. 1: Bing Maps’ aerial view, http://www.bing.com/maps/

Bing Maps deconstructed – The world at a fixed exponential scale

What you see on http://www.bing.com/maps/ is very similar to PTV AJAX Maps. Each map shown consists  of several map tiles – small images, 256×256 pixels in size. Those tiles are a requested from Microsoft’s back-end servers using AJAX technology. The tiles are then stitched together in the browser using plain JavaScript code and DOM manipulations.

Fig. 2.1: A single Bing Maps tile (quadkey 120203233331301) Fig. 2.2: … and the same tile taken from Google Maps (x=17149, y=11252 and z=15)



Bing Maps tiles are requested using a fixed addressing system which kind of subsets OGC’s WMTS standard and is often referred to as the Google / Bing Maps tiling scheme. On the top level, level 0, one tile is used to cover the whole world. Each subordinate level then divides superordinate tiles into four new pieces, thus generating 4 tiles on level 1, 16 tiles on level 2 and so on. A tile is addressed using a row index, a column index and a zoom level, commonly described as a tile’s xyz-coordinate or – in Microsoft’s case – represented through the tile’s unique quadkey:

Fig. 3: Bing Maps tiling scheme


With a widely used maximum of 21 fixed zoom levels, the number of addressable tiles sums up to 1.466.015.503.701 tiles in total. Those tiles – assuming an average image size of 15k per tile – theoretically consume more than 20 Petabytes of storage space. Among others, this is one reason why PTV’s AJAX Map relies on fast, immediate map rendering at its core, keeping the map itself on a transferable vector basis.

Integrating the Bing Maps Aerial layer

All popular consumer web mapping services – not only Bing but also Google, OSM or any of its derivatives – use the tiling scheme outlined above. At a first glance, with e.g. PTV AJAX Maps offering a flexible layer model and being capable of being put into the Google / Bing maps tiling scheme, it is technically quite easy to integrate additional those web mapping services as additional layers into our map. At a second glance, the services terms of use and licensing conditions make things difficult. This is where our made-to-measure APIs come into play.

Using PTV AJAX Maps? We have a surprise for you!

You’ve probably tracked our blog and know about PTV AJAX Maps 2.9.1, which was released just a month ago. This release contains a dedicated layer for adding the Bing Maps Aerial imagery to our map. Provided with a valid key, only a few lines of code are necessary to add the layer to the map. Here’s the important part of the map initialization:

 ...
// must use Google / Bing tiling system
com.ptvag.webcomponent.map.CoordUtil.useGoogleZoomLevels(); 

var container = document.getElementById("mapContainer");
var map = new com.ptvag.webcomponent.map.Map(container); 

// configure and insert Bing Maps Arial 
map.addBingAerialLayer("<imagine your bing maps key here>", 
function(success) {  
   if (success) {
    map.getLayer("toolbar").switchToHybridView();  
   } else {
    alert("Couldn't initialize Bing layer. Is your API key correct?");
  }});
...

And what about the other developer components?

Our desktop components, the PTV WPF Map Control as well as the rendering engine provided by PTV Mapserver, are capable of integrating the Bing Maps Aerial imagery similar to PTV AJAX Maps. The forthcoming release 5.7 of PTV Mapserver (read about the online presentation) includes a layer that can work around the fix zoom level restrictions of Bing Maps and is capable of integrating the Bing Maps Aerial imagery just by configuration – no code, no application modification necessary. Here’s the important part of the layer’s configuration file:

... 
[RemoteLayers]
Layer1=Bing Maps Aerials 
... 
[Bing Maps Aerials]
ApiKey=<imagine your bing maps key here>
...


With PTV xServer add-on AJAX Maps, PTV WPF Map Control and PTV Mapserver our client and desktop components are ready to display the Bing Maps Aerial imagery, and it is the client where the mash-up usually should be implemented. To support applications at the very base, that use other technologies, the existing Bing Maps prototype in the PTV xServers will probably be made available as well.

Further reading

More information about the commonly used tiling system can be found here:

We’ve also mentioned OGC’s WMTS standard above, more information about this can be found here:

 

By Martina Beck

Martina Beck has been working for PTV since 2000. As certified computer scientist she was originally responsible for providing customers with technical support and she later moved on to the Product Management division. Since 2011 she has been working for PTV as an online marketing manager in international marketing with an emphasis on social media (et al. Facebook, Twitter, Google+, YouTube). The PTV Developer Blog is the PTV Developer Components' lead channel. The posts on important topics and trends originate from close cooperation with developers, the product management and other experts.