diff --git a/.gitignore b/.gitignore index 40484dfbec..a5f7db3bdb 100644 --- a/.gitignore +++ b/.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 diff --git a/Makefile b/Makefile index 0db51b0d31..726daeb3bd 100644 --- a/Makefile +++ b/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 - java -jar $(PLOVR_JAR) build $(basename $@).json >$@ +build/ol3-compiled.js: $(PLOVR_JAR) $(SRC) base.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 - java -jar $(PLOVR_JAR) build $(basename $@).json >$@ +build/ol3.js: $(SRC) + ( 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 - -ol.js: $(SRC) - ( find src/ol -name \*.js | xargs grep -rh ^goog.provide | sort | uniq | sed -e 's/provide/require/g' ) > $@ + java -jar $(PLOVR_JAR) serve build/ol3.json demos/*/*.json .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 ol-api.js - rm -f ol-skeleton.js + rm -f build/all.js + rm -f build/ol3.js + rm -f demos/*/compiled.js reallyclean: clean rm -f $(PLOVR_JAR) diff --git a/ol-base.json b/base.json similarity index 100% rename from ol-base.json rename to base.json diff --git a/build/ol3.json b/build/ol3.json new file mode 100644 index 0000000000..1a392513a3 --- /dev/null +++ b/build/ol3.json @@ -0,0 +1,9 @@ +{ + + "id": "ol3", + + "inherits": "../base.json", + + "inputs": "build/ol3.js" + +} diff --git a/demos/side-by-side/index.html.in b/demos/side-by-side/index.html.in new file mode 100644 index 0000000000..51827ccecd --- /dev/null +++ b/demos/side-by-side/index.html.in @@ -0,0 +1,46 @@ + + + + + ol3 side-by-side demo + + +

ol3 side-by-side demo

+ + + + + + + + + + + + +
DOMWebGL
+
+
+ + + + + + + + + + + + + +
Pan:drag, arrow keys
Zoom:double-click, shift+double-click, mouse wheel, +/- keys, shift+drag (DOM only)
Rotate:shift+drag (WebGL only)
+ + + diff --git a/demos/side-by-side/side-by-side.js b/demos/side-by-side/side-by-side.js new file mode 100644 index 0000000000..3d670e8b76 --- /dev/null +++ b/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); diff --git a/demos/side-by-side/side-by-side.json b/demos/side-by-side/side-by-side.json new file mode 100644 index 0000000000..9b14a6766a --- /dev/null +++ b/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" + +} diff --git a/ol-api.json b/ol-api.json deleted file mode 100644 index 86b6ef73cc..0000000000 --- a/ol-api.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - - "id": "ol-api", - - "inherits": "ol-base.json", - - "inputs": "ol.js" - -} diff --git a/ol-skeleton.json b/ol-skeleton.json deleted file mode 100644 index dcee805a21..0000000000 --- a/ol-skeleton.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - - "id": "ol-skeleton", - - "inherits": "ol-base.json", - - "inputs": "skeleton.js" - -} diff --git a/readme.md b/readme.md index 42a1db78d7..1895d719de 100644 --- a/readme.md +++ b/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: + + $ python -mSimpleHTTPServer + +Explore the `demos/` directory through this server, for example . You can turn off compilation by appending `?mode=RAW` to the URL, for example . + +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 in -your browser and select *List of tests* or *Test runner*. +Run the plovr web server (see above), then open in your browser and select *List of tests* or *Test runner*. ## Run the linter -First, install the [Closure -Linter](https://developers.google.com/closure/utilities/docs/linter_howto). -Then: +First, install the [Closure Linter](https://developers.google.com/closure/utilities/docs/linter_howto). Then: $ make lint diff --git a/skeleton.html b/skeleton.html deleted file mode 100644 index 6098f362ed..0000000000 --- a/skeleton.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - -
-
- - - diff --git a/skeleton.js b/skeleton.js deleted file mode 100644 index 153437b658..0000000000 --- a/skeleton.js +++ /dev/null @@ -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);