Clean up build system and add demos

2012-08-07 14:17:15 +02:00
parent e1e64b0fde
commit 0a4d31417f
12 changed files with 163 additions and 110 deletions
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+    <head>
+        <style type="text/css">
+            .map {
+                width: 400px;
+                height: 400px;
+                border: thin solid;
+            }
+        </style>
+        <title>ol3 side-by-side demo</title>
+    </head>
+    <body>
+        <h1>ol3 side-by-side demo</h1>
+        <table>
+            <tr>
+                <th>DOM</th>
+                <th>WebGL</th>
+            </tr>
+            <tr>
+                <td><div id="domMap" class="map"></div></td>
+                <td><div id="webglMap" class="map"></div></td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <div id="attribution" class="attribution"></div>
+                </td>
+            </tr>
+        </table>
+        <table>
+            <tr>
+                <td>Pan:</td>
+                <td>drag, arrow keys</td>
+            </tr>
+            <tr>
+                <td>Zoom:</td>
+                <td>double-click, shift+double-click, mouse wheel, +/- keys, shift+drag (DOM only)</td>
+            </tr>
+            <tr>
+                <td>Rotate:</td>
+                <td>shift+drag (WebGL only)</td>
+            </tr>
+        </table>
+        <script src="@SRC@" type="text/javascript"></script>
+    </body>
+</html>
@@ -0,0 +1,35 @@
+goog.require('ol.RendererHint');
+goog.require('ol.createMap');
+goog.require('ol.layer.MapQuestOpenAerial');
+goog.require('ol.view.Attribution');
+
+
+var layer = new ol.layer.MapQuestOpenAerial();
+
+var layers = new ol.Collection();
+layers.push(layer);
+
+var domMap = ol.createMap(
+    document.getElementById('domMap'),
+    {'layers': layers},
+    ol.RendererHint.DOM);
+domMap.setCenter(new ol.Coordinate(0, 0));
+domMap.setResolution(layer.getStore().getResolutions()[0]);
+
+var webglMap = ol.createMap(
+    document.getElementById('webglMap'),
+    {},
+    ol.RendererHint.WEBGL);
+webglMap.bindTo('center', domMap);
+webglMap.bindTo('layers', domMap);
+webglMap.bindTo('resolution', domMap);
+webglMap.bindTo('rotation', domMap);
+
+var attributionView = new ol.view.Attribution(domMap);
+document.getElementById('attribution').appendChild(
+    attributionView.getElement());
+
+goog.exportSymbol('layer', layer);
+goog.exportSymbol('layers', layers);
+goog.exportSymbol('domMap', domMap);
+goog.exportSymbol('webglMap', webglMap);
@@ -0,0 +1,9 @@
+{
+
+  "id": "demo-side-by-side",
+
+  "inherits": "../../base.json",
+
+  "inputs": "demos/side-by-side/side-by-side.js"
+
+}