O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – creating a Bing Maps layer

Bing Maps tiles can be viewed using the official Bing Maps API, but they can also be used through an API that gives direct access to their tiles. This is what we will see now:

  1. Go to the Microsoft Mapping API register website at http://www.bingmapsportal.com to get an official key.
  2. Let's set up the source object now. We need to not only specify the style property but also the key. Contrary to the previous examples, a tile access control is done and works through an account associated with a key to use in your code:
      var sourceBingMaps = new ol.source.BingMaps({ 
        key: 'AibU6zHqoTPYDuNRtHPMJq557poKb9AVTIJ0NWWnNZf8LfoRRwoigHTQ0Frrsr5m',
        imagerySet: 'Road',
      });
  3. Now, create the first ol.layer.Tile layer:
     var bingMapsRoad ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required