diff --git a/examples/preload.html b/examples/preload.html new file mode 100644 index 0000000000..58b421320c --- /dev/null +++ b/examples/preload.html @@ -0,0 +1,58 @@ + + + + + + + + + + Preload example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ +
+

Preload example

+

Example of tile preloading. Low resolution tiles for the map are preloaded, the map on the right does not use any preloading. Try zooming out and panning to see the difference.

+
+

See the preload.js source to see how this is done.

+
+
preload, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/preload.js b/examples/preload.js new file mode 100644 index 0000000000..945c670b16 --- /dev/null +++ b/examples/preload.js @@ -0,0 +1,40 @@ +goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.BingMaps'); + + +var map1 = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + preload: true, + source: new ol.source.BingMaps({ + key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R', + style: 'Aerial' + }) + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map1', + view: new ol.View2D({ + center: new ol.Coordinate(-4808600, -2620936), + zoom: 8 + }) +}); + +var map2 = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + preload: false, + source: new ol.source.BingMaps({ + key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R', + style: 'AerialWithLabels' + }) + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map2' +}); +map2.bindTo('view', map1);