Preload Tiles

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

#### Preload Tiles

Example of tile preloading.

The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.

Related API documentation:

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

Copy Edit
Preload Tiles Example of tile preloading. var view = new ol.View({ center: [-4808600, -2620936], zoom: 8 }); var map1 = new ol.Map({ layers: [ new ol.layer.Tile({ preload: Infinity, source: new ol.source.BingMaps({ key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here', imagerySet: 'Aerial' }) }) ], target: 'map1', view: view }); var map2 = new ol.Map({ layers: [ new ol.layer.Tile({ preload: 0, // default value source: new ol.source.BingMaps({ key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here', imagerySet: 'AerialWithLabels' }) }) ], target: 'map2', view: view }); <div id="map1" class="map"></div> <div id="map2" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Preload Tiles</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="map1" class="map"></div>
        <div id="map2" class="map"></div>
        <script>
          var view = new ol.View({
            center: [-4808600, -2620936],
            zoom: 8
          });

          var map1 = new ol.Map({
            layers: [
              new ol.layer.Tile({
                preload: Infinity,
                source: new ol.source.BingMaps({
                  key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
                  imagerySet: 'Aerial'
                })
              })
            ],
            target: 'map1',
            view: view
          });

          var map2 = new ol.Map({
            layers: [
              new ol.layer.Tile({
                preload: 0, // default value
                source: new ol.source.BingMaps({
                  key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
                  imagerySet: 'AerialWithLabels'
                })
              })
            ],
            target: 'map2',
            view: view
          });
        </script>
      </body>
    </html>