Add preload example

2013-03-27 14:17:38 +01:00
parent 494d61250e
commit 5077413c34
2 changed files with 98 additions and 0 deletions
--- a/examples/preload.html
+++ b/examples/preload.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="examples.css" type="text/css">
+    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Preload example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span6">
+          <div id="map1" class="map"></div>
+        </div>
+        <div class="span6">
+          <div id="map2" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Preload example</h4>
+          <p id="shortdesc">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.</p>
+          <div id="docs">
+            <p>See the <a href="simple.js" target="_blank">preload.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">preload, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=preload" type="text/javascript"></script>
+    <script src="social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/examples/preload.js
+++ 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);