Bing Maps

This example uses OpenLayers v4.0.1. The latest is v.

#### Bing Maps

Example of a Bing Maps layer.

When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set `maxZoom` to `19` in the options passed to `ol.source.BingMaps`.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.layer.Tile
,
- ol.source.BingMaps

Copy Edit
Bing Maps Example of a Bing Maps layer. var styles = [ 'Road', 'Aerial', 'AerialWithLabels', 'collinsBart', 'ordnanceSurvey' ]; var layers = []; var i, ii; for (i = 0, ii = styles.length; i < ii; ++i) { layers.push(new ol.layer.Tile({ visible: false, preload: Infinity, source: new ol.source.BingMaps({ key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here', imagerySet: styles[i] // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 }) })); } var map = new ol.Map({ layers: layers, // Improve user experience by loading tiles while dragging/zooming. Will make // zooming choppy on mobile or slow devices. loadTilesWhileInteracting: true, target: 'map', view: new ol.View({ center: [-6655.5402445057125, 6709968.258934638], zoom: 13 }) }); var select = document.getElementById('layer-select'); function onChange() { var style = select.value; for (var i = 0, ii = layers.length; i < ii; ++i) { layers[i].setVisible(styles[i] === style); } } select.addEventListener('change', onChange); onChange(); <div id="map" class="map"></div> <select id="layer-select"> <option value="Aerial">Aerial</option> <option value="AerialWithLabels" selected>Aerial with labels</option> <option value="Road">Road</option> <option value="collinsBart">Collins Bart</option> <option value="ordnanceSurvey">Ordnance Survey</option> </select>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bing Maps</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
         <div id="map" class="map"></div>
         <select id="layer-select">
           <option value="Aerial">Aerial</option>
           <option value="AerialWithLabels" selected>Aerial with labels</option>
           <option value="Road">Road</option>
           <option value="collinsBart">Collins Bart</option>
           <option value="ordnanceSurvey">Ordnance Survey</option>
         </select>
        <script>
          var styles = [
            'Road',
            'Aerial',
            'AerialWithLabels',
            'collinsBart',
            'ordnanceSurvey'
          ];
          var layers = [];
          var i, ii;
          for (i = 0, ii = styles.length; i < ii; ++i) {
            layers.push(new ol.layer.Tile({
              visible: false,
              preload: Infinity,
              source: new ol.source.BingMaps({
                key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
                imagerySet: styles[i]
                // use maxZoom 19 to see stretched tiles instead of the BingMaps
                // "no photos at this zoom level" tiles
                // maxZoom: 19
              })
            }));
          }
          var map = new ol.Map({
            layers: layers,
            // Improve user experience by loading tiles while dragging/zooming. Will make
            // zooming choppy on mobile or slow devices.
            loadTilesWhileInteracting: true,
            target: 'map',
            view: new ol.View({
              center: [-6655.5402445057125, 6709968.258934638],
              zoom: 13
            })
          });

          var select = document.getElementById('layer-select');
          function onChange() {
            var style = select.value;
            for (var i = 0, ii = layers.length; i < ii; ++i) {
              layers[i].setVisible(styles[i] === style);
            }
          }
          select.addEventListener('change', onChange);
          onChange();
        </script>
      </body>
    </html>