OpenLayers Blog

All the maps that are fit to blog

Bing Tiles for OpenLayers

December 18th, 2010 by ahocevar · 18 Comments

As of today, OpenLayers has a new layer type: OpenLayers.Layer.Bing. “Why that” you may ask, “there is OpenLayers.Layer.VirtualEarth already”. So why is this new layer type so special? It is the first time that we access tiles from a commercial service directly. Others (e.g. Google Maps) do not provide direct access to their tiles, but Microsoft does through the Bing Maps Web Services. We from the OpenLayers community appreciate this a lot, because it has several advantages over accessing commercial tile services through their JavaScript APIs:

  • No need to include extra JavaScript in your application
  • Better integration with OpenLayers, because things like dragging, transition effects or tile buffer are directly controlled by OpenLayers
  • Better performance because tiles are accessed as image resources, and not through an external JavaScript API

Recent experience with the Google Maps v3 API has shown that using external APIs in OpenLayers can be error prone:

With direct tile access, Bing Maps is now the best choice of commercial map tiles for OpenLayers. And the usage is simple:

  1. Get an API key at http://bingmapsportal.com/. This API key is not bound to an application url or domain.
  2. Create a map with an OpenLayers.Layer.Bing instance, configured with the API key. Below is a minimal example.
var apiKey = "your api key here";

var map = new OpenLayers.Map( 'map');

// Bing's Road imagerySet
var road = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Road"
});
// Bing's Aerial imagerySet
var aerial = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Aerial"
});
// Bing's AerialWithLabels imagerySet
var hybrid = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "AerialWithLabels",
    name: "Bing Aerial With Labels"
});

map.addLayers([road, aerial, hybrid]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();

OpenLayers.Layer.Bing uses the Bing Maps REST Services to retrieve metadata that is required to access the tiles. The “type” config option for OpenLayers.Layer.Bing can be any of Bing’s imagerySets, except for those with Bird’s Eye imagery.

Credits

The idea to create this layer type was born during a “NYC work week” hosted by OpenGeo, when Tim Schaub and I discussed problems with the Google layers in OpenLayers that collegues from OpenPlans had made us aware of. Unfortunately we were too busy to implement it during that week, but I created a patch for it the following weekend. Thanks to Justin Deolivera from GeoServer for providing Sierra Nevada Pale Ale and the UFC stream from Montreal, which gave this coding task a recreational setting. Yesterday the patch was reviewed and made even more solid by Tim. Now it is available in OpenLayers trunk, and will be shipping with the next OpenLayers release.

Tags: Features · Future

18 responses so far ↓

  • 1 chrelad // Dec 18, 2010 at 9:30 pm

    This is great; thanks for posting!

  • 2 AJ // Dec 20, 2010 at 1:01 pm

    it’s not working for me, saying that openlayers.layer.bing is not a constructor. I am using the http://www.openlayers.org/api/OpenLayers.js file
    thanks

  • 3 Bryan // Dec 20, 2010 at 5:18 pm

    Does this conform with the terms of use here: http://www.microsoft.com/maps/product/terms.html?

    Specifically, bullet 7 under Restrictions on your use:

    “integrate the Bing Maps Platform or any of its content with any other mapping platform”

  • 4 ahocevar // Dec 20, 2010 at 6:04 pm

    @AJ: use http://openlayers.org/dev/OpenLayers.js instead.

    @Bryan: I am no legal expert, and the terms of use do not clarify the term “mapping platform”. But OpenLayers does not integrate the Bing Maps Platform nor any of its content. It uses the Bing Maps REST Services according to the Terms Of Use to display tiles. There were similar concerns among JOSM users when JOSM started using Bing tiles this way – you may want to read this thread to learn more.

  • 5 JB // Dec 20, 2010 at 6:18 pm

    Thanks for all your work on this.

    I am having issues overlaying another WMS layer on the new Bing Layer. When the page loads the WMS overlay is shifted to the right of where it should be. When I zoom out it is realigned to its normal position. This worked with the previous Virtual Earth layer.

  • 6 ahocevar // Dec 21, 2010 at 10:58 am

    JB: Your issue should be fixed with http://trac.osgeo.org/openlayers/ticket/2987

  • 7 JB // Dec 21, 2010 at 12:13 pm

    Thanks for the fix.

    I may of found one other thing. When using a zoom box to zoom in the map zooms in shifted to the right.

  • 8 AJ // Dec 23, 2010 at 10:17 am

    @ahocevar many thanks – silly mistake. For the Bing maps, the BING logo and terms of use line is not stuck to the bottom of the map, is there anyway I can control where to put this?
    thanks

  • 9 ahocevar // Dec 23, 2010 at 11:04 am

    @AJ: Use the .olControlAttribution css selector to position the attribution inside the map, or configure your OpenLayers.Control.Attribution with a dom element if you want the attribution outside the map. But always be sure to display the attribution, because the Terms of Use require you to do so.

  • 10 AJ // Dec 23, 2010 at 2:13 pm

    @ahocevar many thanks -that did it. I am new to Openlayers, so sorry for the silly questions. Is there a reference where I can find all the controls and what css class they are all using?

  • 11 ahocevar // Dec 23, 2010 at 2:43 pm

    @AJ: the OpenLayers API documentation is here: http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers-js.html, and the css selectors correspond to the class names. So e.g. OpenLayers.Control.Attribution becomes olControlAttribution. For controls that have an active and an inactive state, append Active and Inactive to the selector string.

  • 12 Andrew Christensen // Mar 17, 2011 at 11:53 am

    I just tried this and I am getting an error that “this.map.getExtent is null”. Any ideas? I am using the latest dev js.

  • 13 Roger // Apr 14, 2011 at 6:46 pm

    Cool feature, though it has some issues in MSIE ironically. It leaves some tiles blank right in the center of the back ground. Scrolling them off screen and then back on will cause them to load, but they don’t by default. Tested in ie7, but maybe happens in others.

  • 14 Samuel Smith // Apr 15, 2011 at 1:08 pm

    Slick … Has the potential to save us a lot of overhead on the client figuring out our quadkey collection and getting the tiles.

    But … For those of with our own Virtual Server appliances (OK, who’s got server envy?) are there any plans to configure the class to specify custom raster layers I’m have available on the server?

  • 15 Innovative map comparisons – Census change in 15 cities « Spatiality // Aug 1, 2011 at 10:15 am

    [...] population counts, and change the underlying basemap from a street view to an aerial image (via OpenLayers use of Microsoft’s Bing maps tiles), while also changing the transparency of the thematic Census [...]

  • 16 Michael // Feb 16, 2012 at 12:40 pm

    Hi Guys,
    How come when I visualize a place using bing maps its very clear, but when I put an api in my application it becomes abit cloudy

  • 17 Manuel // Sep 6, 2012 at 4:53 pm

    hi guys, I’m trying to add WMS layers on top of the Bing base layer.. but the images from the wms servers won’t load (I get pink rectangles)
    if I select the Default ‘basic’ wms Map as a base layer the overlayers that weren’t loading start loading right away… anyone got a clue?

  • 18 Getting started – Processing Bing Aerial Images for OpenStreetMap | Christoffer Holmstedt // Mar 6, 2013 at 6:00 am

    [...] OpenLayers Blog – Bing Tiles for OpenLayers (reasoning about why Bing Tiles are good) [...]

Leave a Comment