Add two layers demo
This commit is contained in:
Tom Payne
32
Makefile
32
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
|
||||
|
||||
32
demos/two-layers/index.html.in
Normal file
32
demos/two-layers/index.html.in
Normal file
@@ -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>
|
||||
57
demos/two-layers/two-layers.js
Normal file
57
demos/two-layers/two-layers.js
Normal file
@@ -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);
|
||||
9
demos/two-layers/two-layers.json
Normal file
9
demos/two-layers/two-layers.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
|
||||
"id": "demo-two-layers",
|
||||
|
||||
"inherits": "../../base.json",
|
||||
|
||||
"inputs": "demos/two-layers/two-layers.js"
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user