From 5077413c349f74b2a127d801e5a8ed956e57aa2b Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 27 Mar 2013 14:17:38 +0100 Subject: [PATCH] Add preload example --- examples/preload.html | 58 +++++++++++++++++++++++++++++++++++++++++++ examples/preload.js | 40 +++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 examples/preload.html create mode 100644 examples/preload.js 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);