diff --git a/Makefile b/Makefile index 000889bc29..7d8934de3d 100644 --- a/Makefile +++ b/Makefile @@ -28,7 +28,7 @@ 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/api1 demos/proj4js demos/side-by-side +demos: demos/api1 demos/proj4js demos/side-by-side demos/two-layers .PHONY: demos/api1 demos/api1: \ @@ -84,6 +84,36 @@ demos/side-by-side/simple-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \ @echo $@ "uncompressed:" $$(wc -c <$@) bytes @echo $@ " compressed:" $$(gzip -9 -c <$@ | wc -c) bytes +.PHONY: demos/two-layers +demos/two-layers: \ + demos/two-layers/advanced-optimizations.html \ + demos/two-layers/advanced-optimizations.js \ + demos/two-layers/debug.html \ + demos/two-layers/simple-optimizations.html \ + demos/two-layers/simple-optimizations.js + +demos/two-layers/advanced-optimizations.html: demos/two-layers/index.html.in + sed -e 's|@SRC@|advanced-optimizations.js|' $< > $@ + +demos/two-layers/advanced-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \ + demos/two-layers/two-layers.json demos/two-layers/two-layers.js + java -jar $(PLOVR_JAR) build demos/two-layers/two-layers.json >$@ + @echo $@ "uncompressed:" $$(wc -c <$@) bytes + @echo $@ " compressed:" $$(gzip -9 -c <$@ | wc -c) bytes + +demos/two-layers/debug.html: demos/two-layers/index.html.in + sed -e 's|@SRC@|http://localhost:9810/compile?id=demo-two-layers|' $< > $@ + +demos/two-layers/simple-optimizations.html: demos/two-layers/index.html.in + sed -e 's|@SRC@|simple-optimizations.js|' $< > $@ + +# FIXME invoke plovr directly, rather than assuming that the server is running +demos/two-layers/simple-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \ + demos/two-layers/two-layers.json demos/two-layers/two-layers.js + curl 'http://localhost:9810/compile?id=demo-two-layers&mode=SIMPLE' > $@ + @echo $@ "uncompressed:" $$(wc -c <$@) bytes + @echo $@ " compressed:" $$(gzip -9 -c <$@ | wc -c) bytes + .PHONY: serve serve: $(PLOVR_JAR) java -jar $(PLOVR_JAR) serve build/ol3.json build/ol3-api.json demos/*/*.json diff --git a/demos/two-layers/index.html.in b/demos/two-layers/index.html.in new file mode 100644 index 0000000000..96c1c5922b --- /dev/null +++ b/demos/two-layers/index.html.in @@ -0,0 +1,32 @@ + + + + + ol3 two-layers demo + + +

ol3 two-layers demo

+ + + + + + + + + + + + +
DOMWebGL
Coming soon...
+
+
+ + + diff --git a/demos/two-layers/two-layers.js b/demos/two-layers/two-layers.js new file mode 100644 index 0000000000..844d456a97 --- /dev/null +++ b/demos/two-layers/two-layers.js @@ -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); diff --git a/demos/two-layers/two-layers.json b/demos/two-layers/two-layers.json new file mode 100644 index 0000000000..722701e841 --- /dev/null +++ b/demos/two-layers/two-layers.json @@ -0,0 +1,9 @@ +{ + + "id": "demo-two-layers", + + "inherits": "../../base.json", + + "inputs": "demos/two-layers/two-layers.js" + +}