Add two layers demo

2012-08-13 21:32:41 +02:00
parent d9eb9eda60
commit 9b4b35f9eb
4 changed files with 129 additions and 1 deletions
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+    <head>
+        <style type="text/css">
+            .map {
+                width: 400px;
+                height: 400px;
+                border: thin solid;
+            }
+        </style>
+        <title>ol3 two-layers demo</title>
+    </head>
+    <body>
+        <h1>ol3 two-layers demo</h1>
+        <table>
+            <tr>
+                <th>DOM</th>
+                <th>WebGL</th>
+            </tr>
+            <tr>
+                <td><div id="domMap" class="map">Coming soon...</div></td>
+                <td><div id="webglMap" class="map"></div></td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <div id="attribution" class="attribution"></div>
+                </td>
+            </tr>
+        </table>
+        <script src="@SRC@" type="text/javascript"></script>
+    </body>
+</html>
@@ -0,0 +1,57 @@
+goog.require('ol.Coordinate');
+goog.require('ol.RendererHint');
+goog.require('ol.control.Attribution');
+goog.require('ol.createMap');
+goog.require('ol.layer.BingMaps');
+goog.require('ol.layer.TileJSON');
+
+
+/**
+ * @define {boolean} Enable DOM map.
+ * FIXME The DOM renderer doesn't support partially-loaded layers yet
+ * FIXME Remove this define when it does
+ */
+ol.TWO_LAYERS_DEMO_ENABLE_DOM = false;
+
+
+var layer1 = new ol.layer.BingMaps(
+    ol.BingMapsStyle.AERIAL,
+    'AheP841R-MsLErKQChaTba_xDoOCl40-EeTubD9uNhNAyQTePwFY9iVD1_pyqqlE');
+var layer2 = new ol.layer.TileJSON(
+    'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp');
+
+var layers = new ol.Collection([layer1, layer2]);
+
+var webglMap = ol.createMap(
+    document.getElementById('webglMap'),
+    {'layers': new ol.Collection([layer1, layer2])},
+    ol.RendererHint.WEBGL);
+
+goog.events.listen(layer2, goog.events.EventType.LOAD, function() {
+  webglMap.setUserCenter(new ol.Coordinate(-77.93254999999999, 37.9555));
+  webglMap.setResolution(layer2.getStore().getResolutions()[5]);
+});
+
+var domMap;
+if (ol.TWO_LAYERS_DEMO_ENABLE_DOM) {
+  domMap = ol.createMap(
+      document.getElementById('domMap'),
+      {'layers': layers},
+      ol.RendererHint.DOM);
+  domMap.bindTo('center', webglMap);
+  domMap.bindTo('layers', webglMap);
+  domMap.bindTo('resolution', webglMap);
+  domMap.bindTo('rotation', webglMap);
+} else {
+  domMap = null;
+}
+
+var attributionControl = new ol.control.Attribution(webglMap);
+document.getElementById('attribution').appendChild(
+    attributionControl.getElement());
+
+goog.exportSymbol('layer1', layer1);
+goog.exportSymbol('layer2', layer2);
+goog.exportSymbol('layers', layers);
+goog.exportSymbol('domMap', domMap);
+goog.exportSymbol('webglMap', webglMap);
@@ -0,0 +1,9 @@
+{
+
+  "id": "demo-two-layers",
+
+  "inherits": "../../base.json",
+
+  "inputs": "demos/two-layers/two-layers.js"
+
+}