ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Clean up build system and add demos

Browse Source
This commit is contained in:
Tom Payne
2012-08-07 14:17:15 +02:00
parent e1e64b0fde
commit 0a4d31417f
12 changed files with 163 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

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

58
Makefile
View File

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

0
ol-base.json → base.json
View File

9
build/ol3.json Normal file
View File

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

46
demos/side-by-side/index.html.in Normal file
View File

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

35
demos/side-by-side/side-by-side.js Normal file
View File

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

9
demos/side-by-side/side-by-side.json Normal file
View File

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

9
ol-api.json
View File

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

9
ol-skeleton.json
View File

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

24
readme.md
View File

@@ -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.
<http://localhost/~elemoine/ol3/skeleton.html>).
Then, start a simple webserver, for example:
$ 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
your browser and select *List of tests* or *Test runner*.
Run the plovr web server (see above), then open <http://localhost:9810/> 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

26
skeleton.html
View File

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

40
skeleton.js
View File

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