Clean up build system and add demos

.gitignore

@@ -1,13 +1,15 @@
 /apidoc_config/Data/
 /bin/plovr*.jar
 /build/OpenLayers.js
+/build/ol3.js
+/build/ol3-compiled.js
+/demos/*/*.html
+/demos/*/advanced-optimizations.js
+/demos/*/whitespace-only.js
 /doc/apidocs/
 /examples/example-list.js
 /examples/example-list.xml
 /jsdoc/
-/ol.js
-/ol-api.js
-/ol-skeleton.js
 /tools/*.pyc
 /tools/closure-compiler.jar
 /webgl-debug.js

Makefile

@@ -1,35 +1,65 @@
 PLOVR_JAR=bin/plovr-4b3caf2b7d84.jar
 SRC = $(shell find externs src/ol -name \*.js)
+TARGETS = $(shell find demos -name advanced-optimizations.js -o -name whitespace-only.js)
 comma := ,
 empty :=
 space := $(empty) $(empty)
 
 .PHONY: all
-all: build webgl-debug.js
+all: build demos webgl-debug.js
 
 .PHONY: build
-build: ol-api.js ol-skeleton.js
+build: build/ol3-compiled.js
 
-ol-api.js: $(PLOVR_JAR) $(SRC) ol-base.json ol-api.json ol.js
+build/ol3-compiled.js: $(PLOVR_JAR) $(SRC) base.json \
-	java -jar $(PLOVR_JAR) build $(basename $@).json >$@
+	build/ol3.json build/ol3.js
+	java -jar $(PLOVR_JAR) build build/ol3.json >$@
 	@echo $@ "uncompressed:" $$(wc -c <$@) bytes
 	@echo $@ "  compressed:" $$(gzip -9 -c <$@ | wc -c) bytes
 
-ol-skeleton.js: $(PLOVR_JAR) $(SRC) ol-base.json ol-skeleton.json skeleton.js
+build/ol3.js: $(SRC)
-	java -jar $(PLOVR_JAR) build $(basename $@).json >$@
+	( echo "goog.require('goog.dom');" ; find src/ol -name \*.js | xargs grep -rh ^goog.provide | sort | uniq | sed -e 's/provide/require/g' ) > $@
+
+.PHONY: demos
+demos: demos/side-by-side
+
+.PHONY: demos/side-by-side
+demos/side-by-side: \
+	demos/side-by-side/advanced-optimizations.html \
+	demos/side-by-side/advanced-optimizations.js \
+	demos/side-by-side/debug.html \
+	demos/side-by-side/whitespace-only.html \
+	demos/side-by-side/whitespace-only.js
+
+demos/side-by-side/advanced-optimizations.html: demos/side-by-side/index.html.in
+	sed -e 's|@SRC@|advanced-optimizations.js|' $< > $@
+
+demos/side-by-side/advanced-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \
+	demos/side-by-side/side-by-side.json demos/side-by-side/side-by-side.js
+	java -jar $(PLOVR_JAR) build demos/side-by-side/side-by-side.json >$@
+	@echo $@ "uncompressed:" $$(wc -c <$@) bytes
+	@echo $@ "  compressed:" $$(gzip -9 -c <$@ | wc -c) bytes
+
+demos/side-by-side/debug.html: demos/side-by-side/index.html.in
+	sed -e 's|@SRC@|http://localhost:9810/compile?id=demo-side-by-side|' $< > $@
+
+demos/side-by-side/whitespace-only.html: demos/side-by-side/index.html.in
+	sed -e 's|@SRC@|whitespace-only.js|' $< > $@
+
+# FIXME invoke plovr directly, rather than assuming that the server is running
+demos/side-by-side/whitespace-only.js: $(PLOVR_JAR) $(SRC) base.json \
+	demos/side-by-side/side-by-side.json demos/side-by-side/side-by-side.js
+	curl 'http://localhost:9810/compile?id=demo-side-by-side&mode=WHITESPACE' > $@
 	@echo $@ "uncompressed:" $$(wc -c <$@) bytes
 	@echo $@ "  compressed:" $$(gzip -9 -c <$@ | wc -c) bytes
 
 .PHONY: serve
 serve: $(PLOVR_JAR)
-	java -jar $(PLOVR_JAR) serve ol-api.json ol-skeleton.json
+	java -jar $(PLOVR_JAR) serve build/ol3.json demos/*/*.json
-
-ol.js: $(SRC)
-	( find src/ol -name \*.js | xargs grep -rh ^goog.provide | sort | uniq | sed -e 's/provide/require/g' ) > $@
 
 .PHONY: lint
 lint:
-	gjslint --strict --limited_doc_files=$(subst $(space),$(comma),$(shell find externs -name \*.js)) $(SRC) skeleton.js
+	gjslint --strict --limited_doc_files=$(subst $(space),$(comma),$(shell find externs -name \*.js)) $(SRC) $(filter-out $(TARGETS),$(shell find demos -name \*.js))
 
 webgl-debug.js:
 	curl https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/debug/webgl-debug.js > $@
@@ -38,9 +68,9 @@ $(PLOVR_JAR):
 	curl http://plovr.googlecode.com/files/$(notdir $@) > $@
 
 clean:
-	rm -f ol.js
+	rm -f build/all.js
-	rm -f ol-api.js
+	rm -f build/ol3.js
-	rm -f ol-skeleton.js
+	rm -f demos/*/compiled.js
 
 reallyclean: clean
 	rm -f $(PLOVR_JAR)

build/ol3.json

@@ -0,0 +1,9 @@
+{
+
+  "id": "ol3",
+
+  "inherits": "../base.json",
+
+  "inputs": "build/ol3.js"
+
+}

demos/side-by-side/index.html.in

@@ -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>

demos/side-by-side/side-by-side.js

@@ -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);

demos/side-by-side/side-by-side.json

@@ -0,0 +1,9 @@
+{
+
+  "id": "demo-side-by-side",
+
+  "inherits": "../../base.json",
+
+  "inputs": "demos/side-by-side/side-by-side.js"
+
+}

ol-api.json

@@ -1,9 +0,0 @@
-{
-
-  "id": "ol-api",
-
-  "inherits": "ol-base.json",
-
-  "inputs": "ol.js"
-
-}

ol-skeleton.json

@@ -1,9 +0,0 @@
-{
-
-  "id": "ol-skeleton",
-
-  "inherits": "ol-base.json",
-
-  "inputs": "skeleton.js"
-
-}

readme.md

@@ -6,24 +6,30 @@ Run make:
 
     $ make
 
-## Run the example
+## Run the examples
 
-Run the [plovr](http://plovr.com/) web server with:
+Run make (as above), then explore the `demos/` directory with your web browser.
+
+## Run the examples in debug mode
+
+Run the [Plovr](http://plovr.com/) web server with:
 
     $ make serve
 
-Then open skeleton.html in the browser (e.g.
+Then, start a simple webserver, for example:
-<http://localhost/~elemoine/ol3/skeleton.html>).
+
+    $ python -mSimpleHTTPServer
+
+Explore the `demos/` directory through this server, for example <http://localhost:8000/demos/side-by-side/debug.html>. You can turn off compilation by appending `?mode=RAW` to the URL, for example <http://localhost:8000/demos/side-by-side/debug.html?mode=RAW>.
+
+Note that appending `?mode=RAW` doesn't work with `file://` URLs, which is why you need to access the `demos/` directory though a web server.
 
 ## Run tests
 
-Run the plovr web server (see above), then open <http://localhost:9810/> in
+Run the plovr web server (see above), then open <http://localhost:9810/> in your browser and select *List of tests* or *Test runner*.
-your browser and select *List of tests* or *Test runner*.
 
 ## Run the linter
 
-First, install the [Closure
+First, install the [Closure Linter](https://developers.google.com/closure/utilities/docs/linter_howto).  Then:
-Linter](https://developers.google.com/closure/utilities/docs/linter_howto).
-Then:
 
     $ make lint

skeleton.html

@@ -1,26 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <style type="text/css">
-            .map {
-                width: 400px;
-                height: 400px;
-                border: thin solid;
-                position: absolute;
-            }
-            #map1 {
-                left: 5px;
-                top: 5px;
-            }
-            #map2 {
-                left: 450px;
-                top: 5px;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="map1" class="map"></div>
-        <div id="map2" class="map"></div>
-        <script src="http://localhost:9810/compile?id=ol-skeleton&mode=RAW" type="text/javascript"></script>
-    </body>
-</html>

skeleton.js

@@ -1,40 +0,0 @@
-goog.require('goog.debug.Console');
-goog.require('goog.object');
-goog.require('ol.Coordinate');
-goog.require('ol.RendererHint');
-goog.require('ol.createMap');
-goog.require('ol.layer.OpenStreetMap');
-
-goog.debug.Console.autoInstall();
-goog.debug.Console.instance.setCapturing(true);
-
-var twoMaps = true;
-
-var target;
-var map, map1, map2;
-var layer;
-
-target = /** @type {!HTMLDivElement} */ document.getElementById('map1');
-map = map1 = ol.createMap(target, undefined, ol.RendererHint.DOM);
-layer = new ol.layer.OpenStreetMap({
-  'opacity': 0.9
-});
-map.getLayers().push(layer);
-
-var resolutions = layer.getStore().getResolutions();
-map1.setCenter(new ol.Coordinate(0, 0));
-map1.setResolution(resolutions[0]);
-
-if (twoMaps) {
-  target = /** @type {!HTMLDivElement} */ document.getElementById('map2');
-  map2 = ol.createMap(target, undefined, ol.RendererHint.WEBGL);
-  map2.bindTo('center', map1);
-  map2.bindTo('layers', map1);
-  map2.bindTo('resolution', map1);
-  map2.bindTo('rotation', map1);
-}
-
-goog.exportSymbol('layer', layer);
-goog.exportSymbol('map', map);
-goog.exportSymbol('map1', map1);
-goog.exportSymbol('map2', map2);