3.3. Proprietary Raster Layers

In previous sections, we displayed layers based on a standards compliant WMS and a custom tile cache. Online mapping (or at least the tiled map client) was largely popularized by the availability of proprietary map tile services. OpenLayers provides layer types that work with these proprietary services through their APIs.

In this section, we’ll build on the example developed in the previous section by adding a layer using tiles from Bing.

To see how OpenLayers 3 and Google Maps can be integrated check out: http://openlayers.org/en/master/examples/google-map.html.

3.3.1. Bing!

Let’s add a Bing layer.

Tasks

  1. In your map.html file, find where the OSM source is configured and change it into an ol.source.BingMaps

    source: new ol.source.BingMaps({
  imagerySet: 'Road',
  key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
})

    Note

    The Bing tiles API requires that you register for an API key to use with your mapping application. The example here uses an API key that you should not use in production. To use the Bing layer in production, register for an API key at https://www.bingmapsportal.com/.

  2. Save your changes and reload map.html in your browser: http://localhost:3000/map.html

../_images/proprietary1.png

A map with tiles from a Bing Maps source.

3.3.1.1. Complete Working Example

Your revised map.html file should look something like this:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/ol.css" type="text/css">
    <style>
      #map {
        height: 256px;
        width: 512px;
      }
      .ol-attribution a {
        color: black;
      }
    </style>
    <script src="/loader.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.BingMaps({
              imagerySet: 'Road',
              key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
            })
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-93.27, 44.98]),
          zoom: 9
        })
      });
    </script>
  </body>
</html>