Merge pull request #3658 from openlayers/release-v3.5.0

Release v3.5.0.

.editorconfig

@@ -0,0 +1,19 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
+indent_size = 4

.gitignore

@@ -1,7 +1,5 @@
 *.pyc
 /build/
-/examples/*.html.png
-/examples/example-list.js
-/examples/example-list.xml
 /node_modules/
 /dist/
+/coverage/

.jshintrc

@@ -1,4 +1,5 @@
 {
-	"-W030": true,
-	"-W083": true
+  "-W030": true,
+  "-W083": true,
+  "-W069": true
 }

.npmignore

@@ -1,5 +1,2 @@
 *.pyc
 /build/
-/examples/*.html.png
-/examples/example-list.js
-/examples/example-list.xml

.travis.yml

@@ -1,8 +1,16 @@
+env:
+  - DISPLAY=:99.0
+
 before_install:
   - "sudo pip install -r requirements.txt"
   - "npm install -g npm && npm install"
 
 before_script:
   - "rm src/ol/renderer/webgl/*shader.js"
+  - "sh -e /etc/init.d/xvfb start"
 
-script: "./build.py ci"
+script: "make ci"
+
+after_success:
+  - "make test-coverage"
+  - "cat coverage/lcov.info | ./node_modules/.bin/coveralls"

AUTHORS.md

@@ -1,58 +0,0 @@
-OpenLayers contributors:
-
-* Antoine Abt
-* Mike Adair
-* Jeff Adams
-* Seb Benthall
-* Bruno Binet
-* Stéphane Brunner
-* Howard Butler
-* Bertil Chaupis
-* John Cole
-* Tim Coulter
-* Robert Coup
-* Jeff Dege
-* Roald de Wit
-* Schuyler Erle
-* Christian López Espínola
-* John Frank
-* Sean Gilles
-* Pierre Giraud
-* Ivan Grcic
-* Andreas Hocevar
-* Marc Jansen
-* Ian Johnson
-* Frédéric Junod
-* Eric Lemoine
-* Philip Lindsay
-* Martijn van Oosterhout
-* David Overstrom
-* Tom Payne
-* Corey Puffault
-* Peter William Robins
-* Gregers Rygg
-* Tim Schaub
-* Christopher Schmidt
-* Tobias Schwinger
-* Cameron Shorter
-* Pedro Simonetti
-* Paul Spencer
-* Paul Smith
-* Glen Stampoultzis
-* James Stembridge
-* Erik Uzureau
-* Bart van den Eijnden
-* Ivan Willig
-* Thomas Wood
-* Bill Woodall
-* Steve Woodbridge
-* David Zwarg
-
-Some portions of OpenLayers are used under the Apache 2.0 license, available
-in doc/licenses/APACHE-2.0.txt.
-
-Some portions of OpenLayers are used under the MIT license, availabie in
-doc/licenses/MIT-LICENSE.txt.
-
-Some portions of OpenLayers are Copyright 2001 Robert Penner, and are used
-under the BSD license, available in doc/licenses/BSD-LICENSE.txt

CONTRIBUTING.md

@@ -2,6 +2,23 @@
 
 Thanks for your interest in contributing to OpenLayers 3.
 
+## Asking Questions
+
+Please ask questions about using the library on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3).
+
+When you want to get involved and discuss new features or changes, please use [the mailing list](https://groups.google.com/forum/#!forum/ol3-dev).
+
+
+## Submitting Bug Reports
+
+Please use the [GitHub issue tracker](https://github.com/openlayers/ol3/issues). Before creating a new issue, do a quick search to see if the problem has been reported already.
+
+
+## Getting Familiar with the Code in the Repository
+
+Look for `readme.md` files! Several directories contain a `readme.md` file that explains the contents of the directory and how to work with them.
+
+
 ## Contributing Code
 
 Our preferred means of receiving contributions is through [pull requests](https://help.github.com/articles/using-pull-requests). Make sure
@@ -25,7 +42,7 @@ You will obviously start by
 
 ### Travis CI
 
-The Travis CI hook is enabled on the Github repository. This means every pull request 
+The Travis CI hook is enabled on the Github repository. This means every pull request
 is run through a full test suite to ensure it compiles and passes the tests. Failing
 pull requests will not be merged.
 
@@ -41,16 +58,17 @@ as described below.
 
 The minimum requirements are:
 
+* GNU Make
 * Git
-* [Node.js](http://nodejs.org/) 
+* [Node.js](http://nodejs.org/) (0.10.x or higher)
 * Python 2.6 or 2.7 with a couple of extra modules (see below)
 * Java 7 (JRE and JDK)
 
-The executables `git`, `java`, `jar`, and `python` should be in your `PATH`.
+The executables `git`, `node`, `python` and `java` should be in your `PATH`.
 
 You can check your configuration by running:
 
-    $ ./build.py checkdeps
+    $ make check-deps
 
 To install the Node.js dependencies run
 
@@ -65,24 +83,22 @@ or
 
 depending on your OS and Python installation.
 
+(You can also install the Python modules in a Python virtual environment if you want to.)
+
 ## Working with the build tool
 
-As an ol3 developer you will need to use the `build.py` Python script. This is
-the script to use to run the linter, the compiler, the tests, etc.  Windows users
-can use `build.cmd` which is a thin wrapper around `build.py`.
+As an ol3 developer you will use `make` to run build targets defined in the
+`Makefile` located at the root of the repository. The `Makefile` includes
+targets for running the linter, the compiler, the tests, etc.
 
-The `build.py` script is equivalent to a Makefile. It is actually based on
-[pake](https://github.com/twpayne/pake/), which is a simple implementation of
-`make` in Python.
+The usage of `make` is as follows:
 
-The usage of the script is:
+    $ make <target>
 
-    $ ./build.py <target>
-    
 where `<target>` is the name of the build target you want to execute. For
 example:
 
-    $ ./build.py test
+    $ make test
 
 The main build targets are `serve`, `lint`, `build`, `test`, and `check`. The
 latter is a meta-target that basically runs `lint`, `build`, and `test`.
@@ -99,7 +115,7 @@ and have therefore no chance of being merged into `master`.
 
 To run the `check` target:
 
-    $ ./build.py check
+    $ make check
 
 If you want to run the full suite of integration tests, see "Running the integration
 tests" below.
@@ -108,31 +124,31 @@ tests" below.
 
 To run the examples you first need to start the dev server:
 
-    $ ./build.py serve
+    $ make serve
 
-Then, just point your browser <http://localhost:3000/examples> in your browser. For example <http://localhost:3000/examples/side-by-side.html>.
+Then, just point your browser <http://localhost:3000/build/examples> in your browser. For example <http://localhost:3000/build/examples/side-by-side.html>.
 
 Run examples against the `ol.js` standalone build:
 
-The examples can also be run against the `ol.js` standalone lib, just like the examples
-[hosted](http://openlayers.github.com/ol3/master/examples/) on GitHub. Start by
-executing the `host-examples` build target:
+The examples can also be run against the `ol.js` standalone build, just like
+the examples [hosted](http://openlayers.org/en/master/examples/) on GitHub.
+Start by executing the `host-examples` build target:
 
-    $ ./build.py host-examples
+    $ make host-examples
 
-After running `host-examples` you can now open the examples index page in the browser, for example: <http://localhost/~elemoine/ol3/build/hosted/master/examples/>. (This assumes that the `hosted` directory is a web directory, served by Apache for example.)
+After running `host-examples` you can now open the examples index page in the browser: <http://localhost:3000/build/hosted/master/examples/>. (This assumes that you still have the dev server running.)
 
 Append `?mode=raw` to make the example work in full debug mode. In raw mode the OpenLayers and Closure Library scripts are loaded individually by the Closure Library's `base.js` script (which the example page loads and executes before any other script).
 
 ## Running tests
 
-To run the tests in a browser start the dev server (`./build.py serve`) and open <http://localhost:3000/test/index.html> in the browser.
+To run the tests in a browser start the dev server (`make serve`) and open <http://localhost:3000/test/index.html> in the browser.
 
 To run the tests on the console (headless testing with PhantomJS) use the `test` target:
 
-    $ ./build.py test
+    $ make test
 
-See also the test-specific [README](../blob/master/test/README.md).
+See also the test-specific [README](../master/test/README.md).
 
 ## Running the integration tests
 
@@ -144,7 +160,7 @@ displayed in the pull request.
 
 To run the full suite of integration tests use the `ci` target:
 
-    $ ./build.py ci
+    $ make ci
 
 Running the full suite of integration tests currently takes 5-10 minutes.
 
@@ -157,13 +173,8 @@ Adding functionality often implies adding one or several examples. This
 section provides explanations related to adding examples.
 
 The examples are located in the `examples` directory. Adding a new example
-implies creating two files in this directory, an `.html` file and a `.js` file.
-See `examples/simple.html` and `examples/simple.js` for instance.
-
-The `.html` file needs to include a script tag with
-`loader.js?id=<example_name>` as its `src`. For example, if the two files for
-the example are `myexample.js` and `myexample.html` then the script tag's `src`
-should be set to `myexample`.
+implies creating two or three files in this directory, an `.html` file, a `.js`
+file, and, optionally, a `.css` file.
 
 You can use `simple.js` and `simple.html` as templates for new examples.
 
@@ -201,7 +212,7 @@ Your pull request must:
 
 It is strongly recommended that you run
 
-    $ ./build.py check
+    $ make check
 
 before every commit.  This will catch many problems quickly, and it is much
 faster than waiting for the Travis CI integration tests to run.
@@ -221,9 +232,9 @@ Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml).
 This is checked using the [Closure
 Linter](https://developers.google.com/closure/utilities/) in strict mode.  You
 can run the linter locally on your machine before committing using the `lint`
-target to `build.py`:
+target:
 
-    $ ./build.py lint
+    $ make lint
 
 In addition to fixing problems identified by the linter, please also follow the
 style of the existing OpenLayers 3 code, which includes:
@@ -239,6 +250,22 @@ style of the existing OpenLayers 3 code, which includes:
 
  * Do not use assignments inside expressions.
 
+ * Avoid the use of `goog.array.clone` with arrays (use slice instead).
+
+ * Use `array.length = 0` instead of `goog.array.clear`.
+
+ * Use bracket notation instead of `goog.object.set` and `goog.object.get` (with
+   two arguments).
+
+ * Use uppercase for `@const` variables.
+
+### Configure your editor
+
+If possible, configure your editor to follow the coding conventions of the
+library.  A `.editorconfig` file is included at the root of the repository that
+can be used to configure whitespace and charset handling in your editor.  See
+that file for a description of the conventions.  The [EditorConfig](
+http://editorconfig.org/#download) site links to plugins for various editors.
 
 ### Pass the integration tests run automatically by the Travis CI system
 
@@ -246,7 +273,7 @@ The integration tests contain a number of automated checks to ensure that the
 code follows the OpenLayers 3 style and does not break tests or examples.  You
 can run the integration tests locally using the `ci` target:
 
-    $ ./build.py ci
+    $ make ci
 
 
 ### Address a single issue or add a single item of functionality

LICENSE.md

@@ -1,5 +1,4 @@
-Copyright 2005-2014 OpenLayers Contributors. All rights reserved. See
-AUTHORS.md for full list.
+Copyright 2005-2015 OpenLayers Contributors. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,
 are permitted provided that the following conditions are met:

Makefile

@@ -0,0 +1,322 @@
+OS := $(shell uname)
+BRANCH := $(shell git rev-parse --abbrev-ref HEAD)
+
+SRC_GLSL := $(shell find src -type f -name '*.glsl')
+SRC_SHADER_JS := $(patsubst %.glsl,%shader.js,$(SRC_GLSL))
+SRC_JS := $(filter-out $(SRC_SHADER_JS),$(shell find src -name '*.js'))
+SRC_JSDOC = $(shell find src -type f -name '*.jsdoc')
+
+SPEC_JS := $(shell find test/spec -type f -name '*.js')
+SPEC_RENDERING_JS := $(shell find test_rendering/spec -name '*.js')
+
+EXAMPLES := $(shell find examples -type f)
+EXAMPLES_HTML := $(filter-out examples/index.html,$(shell find examples -maxdepth 1 -type f -name '*.html'))
+EXAMPLES_JS := $(patsubst %.html,%.js,$(EXAMPLES_HTML))
+
+BUILD_EXAMPLES := $(subst examples,build/examples,$(EXAMPLES)) build/examples/index.js
+
+BUILD_HOSTED := build/hosted/$(BRANCH)
+BUILD_HOSTED_EXAMPLES := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES))
+BUILD_HOSTED_EXAMPLES_JS := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES_JS))
+
+CHECK_EXAMPLE_TIMESTAMPS = $(patsubst examples/%.html,build/timestamps/check-%-timestamp,$(EXAMPLES_HTML))
+
+TASKS_JS := $(shell find tasks -name '*.js')
+
+CLOSURE_LIB = $(shell node -e 'process.stdout.write(require("closure-util").getLibraryPath())')
+
+ifeq ($(OS),Darwin)
+	STAT_COMPRESSED = stat -f '  compressed: %z bytes'
+	STAT_UNCOMPRESSED = stat -f 'uncompressed: %z bytes'
+else
+	STAT_COMPRESSED = stat -c '  compressed: %s bytes'
+	STAT_UNCOMPRESSED = stat -c 'uncompressed: %s bytes'
+endif
+
+.PHONY: default
+default: help
+
+.PHONY: help
+help:
+	@echo
+	@echo "The most common targets are:"
+	@echo
+	@echo "- install                 Install node dependencies"
+	@echo "- serve                   Start dev server for running examples and tests"
+	@echo "- test                    Run unit tests in the console"
+	@echo "- check                   Perform a number of checks on the code"
+	@echo "- clean                   Remove generated files"
+	@echo "- help                    Display this help message"
+	@echo
+	@echo "Other less frequently used targets are:"
+	@echo
+	@echo "- build                   Build ol.js, ol-debug.js, ol.js.map and ol.css"
+	@echo "- lint                    Check the code with the linter"
+	@echo "- ci                      Run the full continuous integration process"
+	@echo "- apidoc                  Build the API documentation using JSDoc"
+	@echo "- cleanall                Remove all the build artefacts"
+	@echo "- check-deps              Check if the required dependencies are installed"
+	@echo
+
+.PHONY: apidoc
+apidoc: build/timestamps/jsdoc-$(BRANCH)-timestamp
+
+.PHONY: build
+build: build/ol.css build/ol.js build/ol-debug.js build/ol.js.map
+
+.PHONY: check
+check: lint build/ol.js test
+
+.PHONY: check-examples
+check-examples: $(CHECK_EXAMPLE_TIMESTAMPS)
+
+.PHONY: check-deps
+check-deps: EXECUTABLES = git node python java
+check-deps:
+	@for exe in $(EXECUTABLES) ;\
+	do \
+	    which $${exe} > /dev/null && \
+		echo "Program $${exe} OK" || \
+		echo "Program $${exe} MISSING!" ;\
+	done ;\
+
+.PHONY: ci
+ci: lint build test test-rendering compile-examples check-examples apidoc
+
+.PHONY: compile-examples
+compile-examples: build/compiled-examples/all.combined.js
+
+.PHONY: clean
+clean:
+	rm -f build/timestamps/gjslint-timestamp
+	rm -f build/timestamps/jshint-timestamp
+	rm -f build/timestamps/check-*-timestamp
+	rm -f build/ol.css
+	rm -f build/ol.js
+	rm -f build/ol.js.map
+	rm -f build/ol-debug.js
+	rm -f build/test_requires.js
+	rm -f build/test_rendering_requires.js
+	rm -rf build/examples
+	rm -rf build/compiled-examples
+	rm -rf $(BUILD_HOSTED)
+
+.PHONY: cleanall
+cleanall:
+	rm -rf build
+
+.PHONY: css
+css: build/ol.css
+
+.PHONY: examples
+examples: $(BUILD_EXAMPLES)
+
+.PHONY: install
+install: build/timestamps/node-modules-timestamp
+
+.PHONY: lint
+lint: build/timestamps/gjslint-timestamp build/timestamps/jshint-timestamp \
+      build/timestamps/check-requires-timestamp \
+      build/timestamps/check-whitespace-timestamp
+
+.PHONY: npm-install
+npm-install: build/timestamps/node-modules-timestamp
+
+.PHONY: shaders
+shaders: $(SRC_SHADER_JS)
+
+.PHONY: serve
+serve: build/test_requires.js build/test_rendering_requires.js
+	node tasks/serve.js
+
+.PHONY: test
+test: build/timestamps/node-modules-timestamp build/test_requires.js
+	node tasks/test.js
+
+.PHONY: test-coverage
+test-coverage: build/timestamps/node-modules-timestamp
+	node tasks/test-coverage.js
+
+.PHONY: test-rendering
+test-rendering: build/timestamps/node-modules-timestamp \
+                build/test_rendering_requires.js
+	@rm -rf build/slimerjs-profile
+	@mkdir -p build/slimerjs-profile
+	@cp -r test_rendering/slimerjs-profile/* build/slimerjs-profile/
+	node tasks/test-rendering.js
+
+.PHONY: host-examples
+host-examples: $(BUILD_HOSTED_EXAMPLES) \
+               $(BUILD_HOSTED)/build/ol.js \
+               $(BUILD_HOSTED)/build/ol-debug.js \
+               $(BUILD_HOSTED)/css/ol.css \
+               $(BUILD_HOSTED)/examples/loader.js \
+               $(BUILD_HOSTED)/examples/index.js \
+               $(BUILD_HOSTED)/build/ol-deps.js
+
+.PHONY: host-libraries
+host-libraries: build/timestamps/node-modules-timestamp
+	@rm -rf $(BUILD_HOSTED)/closure-library
+	@mkdir -p $(BUILD_HOSTED)/closure-library
+	@cp -r $(CLOSURE_LIB)/* $(BUILD_HOSTED)/closure-library/
+	@rm -rf $(BUILD_HOSTED)/ol/ol
+	@mkdir -p $(BUILD_HOSTED)/ol/ol
+	@cp -r src/ol/* $(BUILD_HOSTED)/ol/ol/
+	@rm -rf $(BUILD_HOSTED)/ol.ext
+	@mkdir -p $(BUILD_HOSTED)/ol.ext
+	@cp -r build/ol.ext/* $(BUILD_HOSTED)/ol.ext/
+
+$(BUILD_EXAMPLES): $(EXAMPLES)
+	@mkdir -p $(@D)
+	@node tasks/build-examples.js
+
+build/timestamps/check-%-timestamp: $(BUILD_HOSTED)/examples/%.html \
+                                    $(BUILD_HOSTED)/examples/%.js \
+                                    $(filter $(BUILD_HOSTED)/examples/resources/%,$(BUILD_HOSTED_EXAMPLES)) \
+                                    $(filter $(BUILD_HOSTED)/examples/data/%,$(BUILD_HOSTED_EXAMPLES)) \
+                                    $(BUILD_HOSTED)/examples/loader.js \
+                                    $(BUILD_HOSTED)/build/ol.js \
+                                    $(BUILD_HOSTED)/css/ol.css
+	@mkdir -p $(@D)
+	./node_modules/.bin/phantomjs --ssl-protocol=any --ignore-ssl-errors=true bin/check-example.js $(addsuffix ?mode=advanced, $<)
+	@touch $@
+
+build/timestamps/check-requires-timestamp: $(SRC_JS) $(EXAMPLES_JS) \
+                                           $(SRC_SHADER_JS) $(SPEC_JS) \
+                                           $(SPEC_RENDERING JS)
+	@mkdir -p $(@D)
+	@python bin/check-requires.py $(CLOSURE_LIB) $^
+	@touch $@
+
+build/timestamps/check-whitespace-timestamp: $(SRC_JS) $(EXAMPLES_JS) \
+                                             $(SPEC_JS) $(SPEC_RENDERING JS) \
+                                             $(SRC_JSDOC)
+	@mkdir -p $(@D)
+	@python bin/check-whitespace.py $^
+	@touch $@
+
+build/compiled-examples/all.js: $(EXAMPLES_JS)
+	@mkdir -p $(@D)
+	@python bin/combine-examples.py $^ > $@
+
+build/compiled-examples/all.combined.js: config/examples-all.json build/compiled-examples/all.js \
+                                         $(SRC_JS) $(SRC_SHADER_JS) \
+                                         build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	node tasks/build.js $< $@
+
+build/compiled-examples/%.json: config/example.json build/examples/%.js \
+                                build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	@sed -e 's|{{id}}|$*|' $< > $@
+
+build/compiled-examples/%.combined.js: build/compiled-examples/%.json \
+                                       $(SRC_JS) $(SRC_SHADER_JS) \
+                                       build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	node tasks/build.js $< $@
+
+build/timestamps/jsdoc-$(BRANCH)-timestamp: config/jsdoc/api/index.md \
+                                            config/jsdoc/api/conf.json $(SRC_JS) \
+                                            $(SRC_SHADER_JS) \
+                                            $(shell find config/jsdoc/api/template -type f) \
+                                            build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	@rm -rf $(BUILD_HOSTED)/apidoc
+	./node_modules/.bin/jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -d $(BUILD_HOSTED)/apidoc
+	@touch $@
+
+build/timestamps/gjslint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
+                                    $(EXAMPLES_JS)
+	@mkdir -p $(@D)
+	@echo "Running gjslint..."
+	@gjslint --jslint_error=all --custom_jsdoc_tags=event,fires,function,classdesc,api,observable --strict $?
+	@touch $@
+
+$(BUILD_HOSTED_EXAMPLES_JS): $(BUILD_HOSTED)/examples/%.js: build/examples/%.js
+	@mkdir -p $(@D)
+	@python bin/split-example.py $< $(@D)
+
+$(BUILD_HOSTED)/examples/loader.js: bin/loader_hosted_examples.js
+	@mkdir -p $(@D)
+	@cp $< $@
+
+$(BUILD_HOSTED)/examples/%: build/examples/%
+	@mkdir -p $(@D)
+	@cp $< $@
+
+$(BUILD_HOSTED)/build/ol.js: build/ol.js
+	@mkdir -p $(@D)
+	@cp $< $@
+
+$(BUILD_HOSTED)/build/ol-debug.js: build/ol-debug.js
+	@mkdir -p $(@D)
+	@cp $< $@
+
+$(BUILD_HOSTED)/css/ol.css: build/ol.css
+	@mkdir -p $(@D)
+	@cp $< $@
+
+$(BUILD_HOSTED)/build/ol-deps.js: host-libraries
+	@mkdir -p $(@D)
+	@python $(CLOSURE_LIB)/closure/bin/build/depswriter.py \
+           --root_with_prefix "src ../../../ol" \
+           --root_with_prefix "build/ol.ext ../../../ol.ext" \
+           --root $(BUILD_HOSTED)/closure-library/closure/goog \
+           --root_with_prefix "$(BUILD_HOSTED)/closure-library/third_party ../../third_party" \
+           --output_file $@
+
+build/timestamps/jshint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
+                                   $(TASKS_JS) $(EXAMPLES_JS) \
+                                   examples/resources/common.js \
+                                   build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	@echo "Running jshint..."
+	@./node_modules/.bin/jshint --verbose $?
+	@touch $@
+
+build/timestamps/node-modules-timestamp: package.json
+	@mkdir -p $(@D)
+	npm install
+	@touch $@
+
+build/ol.css: css/ol.css build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	@echo "Running cleancss..."
+	@./node_modules/.bin/cleancss $< > $@
+
+build/ol.js: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) \
+             build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	node tasks/build.js $< $@
+	@$(STAT_UNCOMPRESSED) $@
+	@cp $@ /tmp/
+	@gzip /tmp/ol.js
+	@$(STAT_COMPRESSED) /tmp/ol.js.gz
+	@rm /tmp/ol.js.gz
+
+build/ol.js.map: config/ol.json $(SRC_JS) $(SRC_SHADER_JS) \
+                 build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	node tasks/build.js $< $@
+
+build/ol-debug.js: config/ol-debug.json $(SRC_JS) $(SRC_SHADER_JS) \
+                   build/timestamps/node-modules-timestamp
+	@mkdir -p $(@D)
+	node tasks/build.js $< $@
+	@$(STAT_UNCOMPRESSED) $@
+	@cp $@ /tmp/
+	@gzip /tmp/ol-debug.js
+	@$(STAT_COMPRESSED) /tmp/ol-debug.js.gz
+	@rm /tmp/ol-debug.js.gz
+
+build/test_requires.js: $(SPEC_JS) $(SRC_JS)
+	@mkdir -p $(@D)
+	@node tasks/generate-requires.js $^ > $@
+
+build/test_rendering_requires.js: $(SPEC_RENDERING_JS)
+	@mkdir -p $(@D)
+	@node tasks/generate-requires.js $^ > $@
+
+%shader.js: %.glsl src/ol/webgl/shader.mustache bin/pyglslunit.py
+	@python bin/pyglslunit.py --input $< --template src/ol/webgl/shader.mustache --output $@

README.md

@@ -1,11 +1,30 @@
 # OpenLayers 3
 
-[![Travis CI Status](https://secure.travis-ci.org/openlayers/ol3.png)](http://travis-ci.org/#!/openlayers/ol3)
+[![Travis CI Status](https://secure.travis-ci.org/openlayers/ol3.svg)](http://travis-ci.org/#!/openlayers/ol3)
+[![Coverage Status](https://coveralls.io/repos/openlayers/ol3/badge.svg?branch=master)](https://coveralls.io/r/openlayers/ol3?branch=master)
 
-Welcome to [OpenLayers 3](http://openlayers.org/)!
+[OpenLayers 3](http://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web.
 
-Check out the [hosted examples](http://openlayers.org/en/master/examples/), the [workshop](http://openlayers.org/ol3-workshop/) or poke around the evolving [API docs](http://openlayers.org/en/master/apidoc/).
+## Getting Started
 
-Please don't ask questions in the github issue tracker but use [the mailing list](https://groups.google.com/forum/#!forum/ol3-dev) instead.
+- Download the [latest release](https://github.com/openlayers/ol3/releases/tag/v3.4.0)
+- Install with npm: `npm install openlayers`
+- Clone the repo: `git clone git@github.com:openlayers/ol3.git`
+
+## Documentation
+
+Check out the [hosted examples](http://openlayers.org/en/master/examples/), the [workshop](http://openlayers.org/ol3-workshop/) or [API docs](http://openlayers.org/en/master/apidoc/).
+
+## Bugs
+
+Please use the [GitHub issue tracker](https://github.com/openlayers/ol3/issues) for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.
+
+## Contributing
 
 Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in getting involved.
+
+## Community
+
+- Need help? Find it on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3)
+- Follow [@openlayers](https://twitter.com/openlayers) on Twitter
+- Discuss with openlayers users on IRC in `#openlayers` at `chat.freenode`

bin/check-requires.py

@@ -0,0 +1,193 @@
+import os
+import logging
+import re
+import sys
+
+logging.basicConfig(format='%(asctime)s %(name)s: %(message)s',
+                    level=logging.INFO)
+
+logger = logging.getLogger('check-requires')
+
+
+class Node(object):
+
+    def __init__(self):
+        self.present = False
+        self.children = {}
+
+    def _build_re(self, key):
+        if key == '*':
+            assert len(self.children) == 0
+            # We want to match `.doIt` but not `.SomeClass` or `.more.stuff`
+            return '(?=\\.[a-z]\\w*\\b(?!\\.))'
+        elif len(self.children) == 1:
+            child_key, child = next(self.children.iteritems())
+            child_re = child._build_re(child_key)
+            if child_key != '*':
+                child_re = '\\.' + child_re
+            if self.present:
+                return key + '(' + child_re + ')?'
+            else:
+                return key + child_re
+        elif self.children:
+            children_re = '(?:' + '|'.join(
+                ('\\.' if k != '*' else '') + self.children[k]._build_re(k)
+                for k in sorted(self.children.keys())) + ')'
+            if self.present:
+                return key + children_re + '?'
+            else:
+                return key + children_re
+        else:
+            assert self.present
+            return key
+
+    def build_re(self, key):
+        return re.compile('\\b' + self._build_re(key) + '\\b')
+
+
+def ifind(*paths):
+    """ifind is an iterative version of os.walk, yielding all walked paths and
+    normalizing paths to use forward slashes."""
+    for path in paths:
+        for dirpath, dirnames, names in os.walk(path):
+            for name in names:
+                if os.sep == '/':
+                    yield os.path.join(dirpath, name)
+                else:
+                    yield '/'.join(dirpath.split(os.sep) + [name])
+
+
+def _strip_comments(lines):
+    # FIXME this is a horribe hack, we should use a proper JavaScript parser
+    # here
+    in_multiline_comment = False
+    lineno = 0
+    for line in lines:
+        lineno += 1
+        if in_multiline_comment:
+            index = line.find('*/')
+            if index != -1:
+                in_multiline_comment = False
+                line = line[index + 2:]
+        if not in_multiline_comment:
+            line = re.sub(r'//[^\n]*', '', line)
+            line = re.sub(r'/\*.*?\*/', '', line)
+            index = line.find('/*')
+            if index != -1:
+                yield lineno, line[:index]
+                in_multiline_comment = True
+            else:
+                yield lineno, line
+
+
+def check_requires(closure_lib, *filenames):
+    unused_count = 0
+    all_provides = set()
+
+    for filename in ifind(closure_lib):
+        if filename.endswith('.js'):
+            if not re.match(r'.*/closure/goog/', filename):
+                continue
+            # Skip goog.i18n because it contains so many modules that it causes
+            # the generated regular expression to exceed Python's limits
+            if re.match(r'.*/closure/goog/i18n/', filename):
+                continue
+            for line in open(filename, 'rU'):
+                m = re.match(r'goog.provide\(\'(.*)\'\);', line)
+                if m:
+                    all_provides.add(m.group(1))
+
+    for filename in sorted(filenames):
+        require_linenos = {}
+        uses = set()
+        lines = open(filename, 'rU').readlines()
+        for lineno, line in _strip_comments(lines):
+            m = re.match(r'goog.provide\(\'(.*)\'\);', line)
+            if m:
+                all_provides.add(m.group(1))
+                continue
+            m = re.match(r'goog.require\(\'(.*)\'\);', line)
+            if m:
+                require_linenos[m.group(1)] = lineno
+                continue
+        ignore_linenos = require_linenos.values()
+        for lineno, line in enumerate(lines):
+            if lineno in ignore_linenos:
+                continue
+            for require in require_linenos.iterkeys():
+                if require in line:
+                    uses.add(require)
+        for require in sorted(set(require_linenos.keys()) - uses):
+            logger.info('%s:%d: unused goog.require: %r' % (
+                filename, require_linenos[require], require))
+            unused_count += 1
+
+    all_provides.discard('ol')
+    all_provides.discard('ol.MapProperty')
+
+    root = Node()
+    for provide in all_provides:
+        node = root
+        for component in provide.split('.'):
+            if component not in node.children:
+                node.children[component] = Node()
+            node = node.children[component]
+        if component[0].islower():
+            # We've arrived at a namespace provide like `ol.foo`.
+            # In this case, we want to match uses like `ol.foo.doIt()` but
+            # not match things like `new ol.foo.SomeClass()`.
+            # For this purpose, we use the special wildcard key for the child.
+            node.children['*'] = Node()
+        else:
+            node.present = True
+    provide_res = [child.build_re(key)
+                   for key, child in root.children.iteritems()]
+    missing_count = 0
+    for filename in sorted(filenames):
+        provides = set()
+        requires = set()
+        uses = set()
+        uses_linenos = {}
+        for lineno, line in _strip_comments(open(filename, 'rU')):
+            m = re.match(r'goog.provide\(\'(.*)\'\);', line)
+            if m:
+                provides.add(m.group(1))
+                continue
+            m = re.match(r'goog.require\(\'(.*)\'\);', line)
+            if m:
+                requires.add(m.group(1))
+                continue
+            while True:
+                for provide_re in provide_res:
+                    m = provide_re.search(line)
+                    if m:
+                        uses.add(m.group())
+                        uses_linenos[m.group()] = lineno
+                        line = line[:m.start()] + line[m.end():]
+                        break
+                else:
+                    break
+        if filename == 'src/ol/renderer/layerrenderer.js':
+            uses.discard('ol.renderer.Map')
+        m = re.match(
+            r'src/ol/renderer/(\w+)/\1(\w*)layerrenderer\.js\Z', filename)
+        if m:
+            uses.discard('ol.renderer.Map')
+            uses.discard('ol.renderer.%s.Map' % (m.group(1),))
+        missing_requires = uses - requires - provides
+        if missing_requires:
+            for missing_require in sorted(missing_requires):
+                logger.info("%s:%d missing goog.require('%s')" %
+                            (filename, uses_linenos[missing_require],
+                             missing_require))
+                missing_count += 1
+
+    return (unused_count, missing_count)
+
+
+if __name__ == "__main__":
+    unused_count, missing_count = check_requires(*sys.argv[1:])
+    if unused_count > 0 or missing_count > 0:
+        logger.error('%d unused goog.requires, %d missing goog.requires' %
+                     (unused_count, missing_count))
+        sys.exit(1)

bin/check-whitespace.py

@@ -0,0 +1,46 @@
+import logging
+import re
+import sys
+
+logging.basicConfig(format='%(asctime)s %(name)s: %(message)s',
+                    level=logging.INFO)
+
+logger = logging.getLogger('check-whitespace')
+
+CR_RE = re.compile(r'\r')
+LEADING_WHITESPACE_RE = re.compile(r'\s+')
+TRAILING_WHITESPACE_RE = re.compile(r'\s+\n\Z')
+NO_NEWLINE_RE = re.compile(r'[^\n]\Z')
+ALL_WHITESPACE_RE = re.compile(r'\s+\Z')
+
+
+def check_whitespace(*filenames):
+    errors = 0
+    for filename in sorted(filenames):
+        whitespace = False
+        for lineno, line in enumerate(open(filename, 'rU')):
+            if lineno == 0 and LEADING_WHITESPACE_RE.match(line):
+                logger.info('%s:%d: leading whitespace', filename, lineno + 1)
+                errors += 1
+            if CR_RE.search(line):
+                logger.info('%s:%d: carriage return character in line',
+                            filename, lineno + 1)
+                errors += 1
+            if TRAILING_WHITESPACE_RE.search(line):
+                logger.info('%s:%d: trailing whitespace', filename, lineno + 1)
+                errors += 1
+            if NO_NEWLINE_RE.search(line):
+                logger.info('%s:%d: no newline at end of file', filename,
+                            lineno + 1)
+                errors += 1
+            whitespace = ALL_WHITESPACE_RE.match(line)
+        if whitespace:
+            logger.info('%s: trailing whitespace at end of file', filename)
+            errors += 1
+    return errors
+
+if __name__ == "__main__":
+    errors = check_whitespace(*sys.argv[1:])
+    if errors > 0:
+        logger.error('%d whitespace errors' % (errors,))
+        sys.exit(1)

bin/example-screenshot.js

@@ -140,7 +140,7 @@
 
   console.log('Capturing ' + lenHtmlFiles + ' example screenshots.');
 
-  // The main interval function that is executed regularily and renders a
+  // The main interval function that is executed regularly and renders a
   // page to a file
   var interval = setInterval(function() {
     if (!loadInProgress && pageindex < lenHtmlFiles) {

bin/exampleparser.py

@@ -1,269 +0,0 @@
-#!/usr/bin/env python
-
-import sys
-import os
-import re
-import time
-from xml.dom.minidom import Document
-
-try:
-    import xml.etree.ElementTree as ElementTree
-except ImportError:
-    try:
-        import cElementTree as ElementTree  # NOQA
-    except ImportError:
-        try:
-            import elementtree.ElementTree as ElementTree # NOQA
-        except ImportError:
-            import lxml.etree as ElementTree  # NOQA
-
-missing_deps = False
-try:
-    import json
-except ImportError:
-    try:
-        import simplejson as json  # NOQA
-    except ImportError, E:
-        missing_deps = E
-
-try:
-    from BeautifulSoup import BeautifulSoup
-except ImportError, E:
-    missing_deps = E
-
-feedName = "example-list.xml"
-feedPath = "http://openlayers.github.io/ol3/master/examples/"
-
-
-def getListOfExamples(relPath):
-    """
-    returns list of .html filenames within a given path - excludes
-    index.html
-    """
-    examples = os.listdir(relPath)
-    examples = [example for example in examples if
-                example.endswith('.html') and example != "index.html"]
-    return examples
-
-
-def getExampleHtml(path):
-    """
-    returns html of a specific example
-    """
-    print '.',
-    f = open(path)
-    html = f.read()
-    f.close()
-    return html
-
-
-def extractById(soup, tagId, value=None):
-    """
-    returns full contents of a particular tag id
-    """
-    beautifulTag = soup.find(id=tagId)
-    if beautifulTag:
-        if beautifulTag.contents:
-            value = str(beautifulTag.renderContents()).strip()
-            value = value.replace('\t', '')
-            value = value.replace('\n', '')
-    return value
-
-
-def getRelatedClasses(html):
-    """
-    parses the html, and returns a list of all OpenLayers Classes
-    used within (ie what parts of OL the javascript uses).
-    """
-    rawstr = r'''(?P<class>ol\..*?)\('''
-    return re.findall(rawstr, html)
-
-
-def parseHtml(html, ids):
-    """
-    returns dictionary of items of interest
-    """
-    soup = BeautifulSoup(html)
-    d = {}
-    for tagId in ids:
-        d[tagId] = extractById(soup, tagId)
-    #classes should eventually be parsed from docs - not automatically created.
-    classes = getRelatedClasses(html)
-    d['classes'] = classes
-    return d
-
-
-def getGitInfo(exampleDir, exampleName):
-    orig = os.getcwd()
-    os.chdir(exampleDir)
-    h = os.popen("git log -n 1 --pretty=format:'%an|%ai' " + exampleName)
-    os.chdir(orig)
-    log = h.read()
-    h.close()
-    d = {}
-    if log:
-        parts = log.split("|")
-        d["author"] = parts[0]
-        # compensate for spaces in git log time
-        td = parts[1].split(" ")
-        td.insert(1, "T")
-        d["date"] = "".join(td)
-    else:
-        d["author"] = ""
-        d["date"] = ""
-    return d
-
-
-def createFeed(examples):
-    doc = Document()
-    atomuri = "http://www.w3.org/2005/Atom"
-    feed = doc.createElementNS(atomuri, "feed")
-    feed.setAttribute("xmlns", atomuri)
-    title = doc.createElementNS(atomuri, "title")
-    title.appendChild(doc.createTextNode("OpenLayers Examples"))
-    feed.appendChild(title)
-    link = doc.createElementNS(atomuri, "link")
-    link.setAttribute("rel", "self")
-    link.setAttribute("href", feedPath + feedName)
-
-    modtime = time.strftime("%Y-%m-%dT%I:%M:%SZ", time.gmtime())
-    id = doc.createElementNS(atomuri, "id")
-    id.appendChild(doc.createTextNode(
-        "%s%s#%s" % (feedPath, feedName, modtime)))
-    feed.appendChild(id)
-
-    updated = doc.createElementNS(atomuri, "updated")
-    updated.appendChild(doc.createTextNode(modtime))
-    feed.appendChild(updated)
-
-    examples.sort(key=lambda x: x["modified"])
-    for example in sorted(examples, key=lambda x: x["modified"], reverse=True):
-        entry = doc.createElementNS(atomuri, "entry")
-
-        title = doc.createElementNS(atomuri, "title")
-        title.appendChild(doc.createTextNode(example["title"] or
-                                             example["example"]))
-        entry.appendChild(title)
-
-        tags = doc.createElementNS(atomuri, "tags")
-        tags.appendChild(doc.createTextNode(example["tags"] or
-                                            example["example"]))
-        entry.appendChild(tags)
-
-        link = doc.createElementNS(atomuri, "link")
-        link.setAttribute("href", "%s%s" % (feedPath, example["example"]))
-        entry.appendChild(link)
-
-        summary = doc.createElementNS(atomuri, "summary")
-        summary.appendChild(doc.createTextNode(example["shortdesc"] or
-                                               example["example"]))
-        entry.appendChild(summary)
-
-        updated = doc.createElementNS(atomuri, "updated")
-        updated.appendChild(doc.createTextNode(example["modified"]))
-        entry.appendChild(updated)
-
-        author = doc.createElementNS(atomuri, "author")
-        name = doc.createElementNS(atomuri, "name")
-        name.appendChild(doc.createTextNode(example["author"]))
-        author.appendChild(name)
-        entry.appendChild(author)
-
-        id = doc.createElementNS(atomuri, "id")
-        id.appendChild(doc.createTextNode("%s%s#%s" % (feedPath,
-                                                       example["example"],
-                                                       example["modified"])))
-        entry.appendChild(id)
-
-        feed.appendChild(entry)
-
-    doc.appendChild(feed)
-    return doc
-
-
-def wordIndex(examples):
-    """
-    Create an inverted index based on words in title and shortdesc.  Keys are
-    lower cased words.  Values are dictionaries with example index keys and
-    count values.
-    """
-    index = {}
-    unword = re.compile("\\W+")
-    keys = ["shortdesc", "title", "tags"]
-    for i in range(len(examples)):
-        for key in keys:
-            text = examples[i][key]
-            if text:
-                words = unword.split(text)
-                for word in words:
-                    if word:
-                        word = word.lower()
-                        if word in index:
-                            if i in index[word]:
-                                index[word][i] += 1
-                            else:
-                                index[word][i] = 1
-                        else:
-                            index[word] = {i: 1}
-    return index
-
-if __name__ == "__main__":
-
-    if missing_deps:
-        print """This script requires json or simplejson and BeautifulSoup.
-You don't have them. \n(%s)""" % E
-        sys.exit()
-
-    if len(sys.argv) == 3:
-        inExampleDir = sys.argv[1]
-        outExampleDir = sys.argv[2]
-    else:
-        inExampleDir = "../examples"
-        outExampleDir = "../examples"
-
-    outFile = open(os.path.join(outExampleDir, "example-list.js"), "w")
-
-    print 'Reading examples from %s and writing out to %s' % (inExampleDir,
-                                                              outFile.name)
-
-    exampleList = []
-    docIds = ['title', 'shortdesc', 'tags']
-
-    examples = getListOfExamples(inExampleDir)
-
-    modtime = time.strftime("%Y-%m-%dT%I:%M:%SZ", time.gmtime())
-
-    for example in examples:
-        path = os.path.join(inExampleDir, example)
-        html = getExampleHtml(path)
-        tagvalues = parseHtml(html, docIds)
-        tagvalues['example'] = example
-        # add in author/date info
-        d = getGitInfo(inExampleDir, example)
-        tagvalues["author"] = d["author"] or "anonymous"
-        tagvalues["modified"] = d["date"] or modtime
-        tagvalues['link'] = example
-
-        exampleList.append(tagvalues)
-
-    print
-
-    exampleList.sort(key=lambda x: x['example'].lower())
-
-    index = wordIndex(exampleList)
-
-    json = json.dumps({"examples": exampleList, "index": index})
-    # Give the json a global variable we can use in our js.
-    # This should be replaced or made optional.
-    json = 'var info=' + json + ';'
-    outFile.write(json)
-    outFile.close()
-
-    outFeedPath = os.path.join(outExampleDir, feedName)
-    print "writing feed to %s " % outFeedPath
-    atom = open(outFeedPath, 'w')
-    doc = createFeed(exampleList)
-    atom.write(doc.toxml())
-    atom.close()
-
-    print 'complete'

bin/loader_hosted_examples.js

@@ -6,8 +6,8 @@
  * loads Closure Library's base.js, ol-deps.js, the example's "goog.require"
  * script, and the example's script in "development" mode.
  *
- * The ol.js and ol-deps.js scripts are built by OL3's build.py script.
- * They are located in the ../build/ directory, relative to this script.
+ * The ol.js and ol-deps.js scripts are built using ol3's Makefile. They are
+ * located in the ../build/ directory, relative to this script.
  *
  * The script must be named loader.js.
  *

bin/split-example.py

@@ -0,0 +1,39 @@
+import os
+import re
+import sys
+
+
+def split_example_file(example, dst_dir):
+    lines = open(example, 'rU').readlines()
+
+    target_lines = []
+    target_require_lines = []
+
+    found_requires = False
+    found_code = False
+    for line in lines:
+        m = re.match(r'goog.require\(\'(.*)\'\);', line)
+        if m:
+            found_requires = True
+            target_require_lines.append(line)
+        elif found_requires:
+            if found_code or line not in ('\n', '\r\n'):
+                found_code = True
+                target_lines.append(line)
+
+    target = open(
+        os.path.join(dst_dir, os.path.basename(example)), 'wb')
+    target_require = open(
+        os.path.join(dst_dir, os.path.basename(example)
+          .replace('.js', '-require.js')),
+        'wb')
+
+    target.writelines(target_lines)
+    target.close()
+
+    target_require.writelines(target_require_lines)
+    target_require.close()
+
+
+if __name__ == '__main__':
+    split_example_file(*sys.argv[1:])

build.cmd

@@ -1,2 +0,0 @@
-@echo off
-%SystemDrive%\Python27\python.exe build.py %*

build.py

@@ -1,801 +0,0 @@
-#!/usr/bin/env python
-
-from cStringIO import StringIO
-import glob
-import gzip
-import json
-import multiprocessing
-import os
-import re
-import shutil
-import sys
-
-from pake import Target
-from pake import ifind, main, output, rule, target, variables, virtual, which
-from Queue import Queue
-from threading import Thread
-
-
-class ThreadPool:
-    """A basic pool of worker threads"""
-    class Worker(Thread):
-        def __init__(self, tasks):
-            Thread.__init__(self)
-            self.tasks = tasks
-            self.daemon = True # threads will be killed on exit
-            self.start()
-
-        def run(self):
-            while True:
-                # block until a task is ready to be done
-                function, args, kargs = self.tasks.get()
-                try:
-                    function(*args, **kargs)
-                except:
-                    print("ERROR")
-                    for count, thing in enumerate(args):
-                        print '{0}. {1}'.format(count, thing)
-                    print(sys.exc_info()[0])
-                    print("ERROR")
-                    self.tasks.errors = True
-                self.tasks.task_done()
-
-    def __init__(self, num_threads = multiprocessing.cpu_count() + 1):
-        self.tasks = Queue(num_threads)
-        self.tasks.errors = False
-        # create num_threads Workers, by default the number of CPUs + 1
-        for _ in range(num_threads): self.Worker(self.tasks)
-
-    def add_task(self, function, *args, **kargs):
-        self.tasks.put((function, args, kargs))
-
-    def wait_completion(self):
-        # wait for the queue to be empty
-        self.tasks.join()
-        return self.tasks.errors
-
-
-if sys.platform == 'win32':
-
-    win = {
-        'CLEANCSS': './node_modules/.bin/cleancss',
-        'GIT': 'git.exe',
-        'GJSLINT': 'gjslint.exe',
-        'JSDOC': './node_modules/.bin/jsdoc',
-        'JSHINT': './node_modules/.bin/jshint',
-        'PYTHON': 'python.exe',
-        'PHANTOMJS': './node_modules/.bin/phantomjs'
-    }
-
-    sys_dir = os.environ.get('SYSTEMDRIVE')
-    program_files = os.environ.get('PROGRAMFILES')
-
-    if not which(win['GIT']):
-        win['GIT'] = os.path.join(program_files, 'Git', 'cmd', 'git.exe')
-    if not which(win['GIT']):
-        win['GIT'] = os.path.join(program_files, 'Git', 'bin', 'git.exe')
-
-    if not which(win['PYTHON']):
-        win['PYTHON'] = os.path.join(sys_dir, 'Python27', 'python.exe')
-
-    if not which(win['GJSLINT']):
-        win['GJSLINT'] = os.path.join(sys_dir, 'Python27', 'Scripts', 'gjslint.exe')
-
-    if not which(win['PHANTOMJS']):
-        win['PHANTOMJS'] = 'phantomjs.exe'
-    if not which(win['PHANTOMJS']):
-        win['PHANTOMJS'] = os.path.join(sys_dir, 'phantomjs-1.9.7-windows', 'phantomjs.exe')
-
-    if not which(win['JSDOC']):
-        win['JSDOC'] = os.path.join(program_files, 'jsdoc3', 'jsdoc.cmd')
-
-    for program, path in win.iteritems():
-        setattr(variables, program, path)
-
-else:
-    variables.CLEANCSS = './node_modules/.bin/cleancss'
-    variables.GIT = 'git'
-    variables.GJSLINT = 'gjslint'
-    variables.JSHINT = './node_modules/.bin/jshint'
-    variables.JSDOC = './node_modules/.bin/jsdoc'
-    variables.PYTHON = 'python'
-    variables.PHANTOMJS = './node_modules/.bin/phantomjs'
-
-variables.BRANCH = output(
-    '%(GIT)s', 'rev-parse', '--abbrev-ref', 'HEAD').strip()
-
-EXECUTABLES = [variables.CLEANCSS, variables.GIT, variables.GJSLINT,
-               variables.JSDOC, variables.JSHINT, variables.PYTHON,
-               variables.PHANTOMJS]
-
-EXAMPLES = [path
-            for path in ifind('examples')
-            if path.endswith('.html')
-            if path != 'examples/index.html']
-
-EXAMPLES_SRC = [path
-                for path in ifind('examples')
-                if path.endswith('.js')
-                if not path.endswith('.combined.js')
-                if path != 'examples/Jugl.js'
-                if path != 'examples/example-list.js']
-
-EXAMPLES_JSON = ['build/' + example.replace('.html', '.json')
-                 for example in EXAMPLES]
-
-EXAMPLES_COMBINED = ['build/' + example.replace('.html', '.combined.js')
-                     for example in EXAMPLES]
-
-GLSL_SRC = [path
-            for path in ifind('src')
-            if path.endswith('.glsl')]
-
-JSDOC_SRC = [path
-             for path in ifind('src')
-             if path.endswith('.jsdoc')]
-
-SHADER_SRC = [path.replace('.glsl', 'shader.js')
-              for path in GLSL_SRC]
-
-SPEC = [path
-        for path in ifind('test/spec')
-        if path.endswith('.js')]
-
-TASKS = [path
-         for path in ifind('tasks')
-         if path.endswith('.js')]
-
-SRC = [path
-       for path in ifind('src/ol')
-       if path.endswith('.js')
-       if path not in SHADER_SRC]
-
-NPM_INSTALL = 'build/npm-install-timestamp'
-
-def report_sizes(t):
-    stringio = StringIO()
-    gzipfile = gzip.GzipFile(t.name, 'w', 9, stringio)
-    with open(t.name, 'rb') as f:
-        shutil.copyfileobj(f, gzipfile)
-    gzipfile.close()
-    rawsize = os.stat(t.name).st_size
-    gzipsize = len(stringio.getvalue())
-    savings = '{0:.2%}'.format((rawsize - gzipsize)/float(rawsize))
-    t.info('uncompressed: %8d bytes', rawsize)
-    t.info('  compressed: %8d bytes, (saved %s)', gzipsize, savings)
-
-
-virtual('default', 'build')
-
-
-virtual('ci', 'lint', 'build', 'test',
-    'build/examples/all.combined.js', 'check-examples', 'apidoc')
-
-
-virtual('build', 'build/ol.css', 'build/ol.js', 'build/ol-debug.js')
-
-
-virtual('check', 'lint', 'build/ol.js', 'test')
-
-
-virtual('todo', 'fixme')
-
-
-@target(NPM_INSTALL, 'package.json')
-def npm_install(t):
-    t.run('npm', 'install')
-    t.touch()
-
-
-@target('build/ol.css', 'css/ol.css', NPM_INSTALL)
-def build_ol_css(t):
-    t.output('%(CLEANCSS)s', 'css/ol.css')
-
-
-@target('build/ol.js', SRC, SHADER_SRC, 'config/ol.json', NPM_INSTALL)
-def build_ol_new_js(t):
-    t.run('node', 'tasks/build.js', 'config/ol.json', 'build/ol.js')
-    report_sizes(t)
-
-
-@target('build/ol-debug.js', SRC, SHADER_SRC, 'config/ol-debug.json',
-        NPM_INSTALL)
-def build_ol_debug_js(t):
-    t.run('node', 'tasks/build.js', 'config/ol-debug.json', 'build/ol-debug.js')
-    report_sizes(t)
-
-
-for glsl_src in GLSL_SRC:
-    def shader_src_helper(glsl_src):
-        @target(glsl_src.replace('.glsl', 'shader.js'), glsl_src,
-                'src/ol/webgl/shader.mustache', 'bin/pyglslunit.py')
-        def shader_src(t):
-            t.run('%(PYTHON)s', 'bin/pyglslunit.py',
-                  '--input', glsl_src,
-                  '--template', 'src/ol/webgl/shader.mustache',
-                  '--output', t.name)
-    shader_src_helper(glsl_src)
-
-
-@target('build/test/requireall.js', SPEC)
-def build_test_requireall_js(t):
-    requires = set()
-    for dependency in t.dependencies:
-        for line in open(dependency, 'rU'):
-            match = re.match(r'goog\.provide\(\'(.*)\'\);', line)
-            if match:
-                requires.add(match.group(1))
-    with open(t.name, 'wb') as f:
-        for require in sorted(requires):
-            f.write('goog.require(\'%s\');\n' % (require,))
-
-
-virtual('build-examples', 'examples', 'build/examples/all.combined.js',
-        EXAMPLES_COMBINED)
-
-
-virtual('examples', 'examples/example-list.xml', EXAMPLES_JSON)
-
-
-@target('examples/example-list.xml', 'examples/example-list.js')
-def examples_examples_list_xml(t):
-    t.touch()  # already generated by bin/exampleparser.py
-
-
-@target('examples/example-list.js', 'bin/exampleparser.py', EXAMPLES)
-def examples_examples_list_js(t):
-    t.run('%(PYTHON)s', 'bin/exampleparser.py', 'examples', 'examples')
-
-
-@target('build/examples/all.combined.js', 'build/examples/all.js',
-        SRC, SHADER_SRC, 'config/examples-all.json', NPM_INSTALL)
-def build_examples_all_combined_js(t):
-    t.run('node', 'tasks/build.js', 'config/examples-all.json',
-          'build/examples/all.combined.js')
-    report_sizes(t)
-
-
-@target('build/examples/all.js', EXAMPLES_SRC)
-def build_examples_all_js(t):
-    t.output('%(PYTHON)s', 'bin/combine-examples.py', t.dependencies)
-
-
-@rule(r'\Abuild/examples/(?P<id>.*).json\Z')
-def examples_star_json(name, match):
-    def action(t):
-
-        # When compiling the ol3 code and the application code together it is
-        # better to use oli.js and olx.js files as "input" files rather than
-        # "externs" files. Indeed, externs prevent renaming, which is neither
-        # necessary nor desirable in this case.
-        #
-        # oli.js and olx.js do not provide or require namespaces (using
-        # "goog.provide" or "goog.require"). For that reason, if they are
-        # specified as input files through the "src" property, then
-        # closure-util will exclude them when creating the dependencies graph.
-        # So the compile "js" property is used instead. With that property the
-        # oli.js and olx.js files are passed directly to the compiler. And by
-        # setting "manage_closure_dependencies" to "true" the compiler will not
-        # exclude them from its dependencies graph.
-
-        content = json.dumps({
-          "exports": [],
-          "src": [
-            "src/**/*.js",
-            "build/ol.ext/*.js",
-            "examples/%(id)s.js" % match.groupdict()],
-          "compile": {
-            "js": [
-              "externs/olx.js",
-              "externs/oli.js",
-            ],
-            "externs": [
-              "externs/bingmaps.js",
-              "externs/bootstrap.js",
-              "externs/closure-compiler.js",
-              "externs/example.js",
-              "externs/fastclick.js",
-              "externs/geojson.js",
-              "externs/jquery-1.9.js",
-              "externs/proj4js.js",
-              "externs/tilejson.js",
-              "externs/topojson.js",
-              "externs/vbarray.js"
-            ],
-            "define": [
-              "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
-              "goog.dom.ASSUME_STANDARDS_MODE=true",
-              "goog.json.USE_NATIVE_JSON=true",
-              "goog.DEBUG=false"
-            ],
-            "jscomp_error": [
-              "accessControls",
-              "ambiguousFunctionDecl",
-              "checkDebuggerStatement",
-              "checkEventfulObjectDisposal",
-              "checkProvides",
-              "checkRegExp",
-              "checkStructDictInheritance",
-              "checkTypes",
-              "checkVars",
-              "const",
-              "constantProperty",
-              "deprecated",
-              "duplicate",
-              "duplicateMessage",
-              "es3",
-              "es5Strict",
-              "externsValidation",
-              "fileoverviewTags",
-              "globalThis",
-              "internetExplorerChecks",
-              "invalidCasts",
-              "misplacedTypeAnnotation",
-              "missingProperties",
-              "nonStandardJsDocs",
-              "strictModuleDepCheck",
-              "suspiciousCode",
-              "typeInvalidation",
-              "tweakValidation",
-              "undefinedNames",
-              "undefinedVars",
-              "uselessCode",
-              "violatedModuleDep",
-              "visibility"
-            ],
-            "jscomp_off": [
-              "unknownDefines"
-            ],
-            "extra_annotation_name": [
-              "api", "observable"
-            ],
-            "compilation_level": "ADVANCED",
-            "warning_level": "VERBOSE",
-            "output_wrapper": "(function(){%output%})();",
-            "use_types_for_optimization": True,
-            "manage_closure_dependencies": True
-          }
-        })
-        with open(t.name, 'wb') as f:
-            f.write(content)
-    return Target(name, action=action,
-                  dependencies=[__file__, NPM_INSTALL])
-
-
-@rule(r'\Abuild/examples/(?P<id>.*).combined.js\Z')
-def examples_star_combined_js(name, match):
-    def action(t):
-        config = 'build/examples/%(id)s.json' % match.groupdict()
-        t.run('node', 'tasks/build.js', config, name)
-        report_sizes(t)
-    dependencies = [SRC, SHADER_SRC,
-                    'examples/%(id)s.js' % match.groupdict(),
-                    'build/examples/%(id)s.json' % match.groupdict(),
-                    NPM_INSTALL]
-    return Target(name, action=action, dependencies=dependencies)
-
-
-@target('serve', 'examples', NPM_INSTALL)
-def serve(t):
-    t.run('node', 'tasks/serve.js')
-
-
-virtual('lint', 'build/lint-timestamp', 'build/check-requires-timestamp',
-    'build/check-whitespace-timestamp', 'jshint')
-
-
-@target('build/lint-timestamp', SRC, EXAMPLES_SRC, SPEC, precious=True)
-def build_lint_src_timestamp(t):
-    t.run('%(GJSLINT)s',
-          '--jslint_error=all',
-          '--custom_jsdoc_tags=event,fires,function,classdesc,api,observable',
-          '--strict',
-          t.newer(t.dependencies))
-    t.touch()
-
-virtual('jshint', 'build/jshint-timestamp')
-
-@target('build/jshint-timestamp', SRC, EXAMPLES_SRC, SPEC, TASKS,
-        NPM_INSTALL, precious=True)
-def build_jshint_timestamp(t):
-    t.run(variables.JSHINT, '--verbose', t.newer(t.dependencies))
-    t.touch()
-
-
-def _strip_comments(lines):
-    # FIXME this is a horribe hack, we should use a proper JavaScript parser
-    # here
-    in_multiline_comment = False
-    lineno = 0
-    for line in lines:
-        lineno += 1
-        if in_multiline_comment:
-            index = line.find('*/')
-            if index != -1:
-                in_multiline_comment = False
-                line = line[index + 2:]
-        if not in_multiline_comment:
-            line = re.sub(r'//[^\n]*', '', line)
-            line = re.sub(r'/\*.*?\*/', '', line)
-            index = line.find('/*')
-            if index != -1:
-                yield lineno, line[:index]
-                in_multiline_comment = True
-            else:
-                yield lineno, line
-
-
-@target('build/check-requires-timestamp', SRC, EXAMPLES_SRC, SHADER_SRC, SPEC)
-def build_check_requires_timestamp(t):
-    unused_count = 0
-    all_provides = set()
-    closure_lib_path = output('node', '-e',
-        'process.stdout.write(require("closure-util").getLibraryPath())')
-    for filename in ifind(closure_lib_path):
-        if filename.endswith('.js'):
-            if not re.match(r'.*/closure/goog/', filename):
-                continue
-            # Skip goog.i18n because it contains so many modules that it causes
-            # the generated regular expression to exceed Python's limits
-            if re.match(r'.*/closure/goog/i18n/', filename):
-                continue
-            for line in open(filename, 'rU'):
-                m = re.match(r'goog.provide\(\'(.*)\'\);', line)
-                if m:
-                    all_provides.add(m.group(1))
-    for filename in sorted(t.dependencies):
-        require_linenos = {}
-        uses = set()
-        lines = open(filename, 'rU').readlines()
-        for lineno, line in _strip_comments(lines):
-            m = re.match(r'goog.provide\(\'(.*)\'\);', line)
-            if m:
-                all_provides.add(m.group(1))
-                continue
-            m = re.match(r'goog.require\(\'(.*)\'\);', line)
-            if m:
-                require_linenos[m.group(1)] = lineno
-                continue
-        ignore_linenos = require_linenos.values()
-        for lineno, line in enumerate(lines):
-            if lineno in ignore_linenos:
-                continue
-            for require in require_linenos.iterkeys():
-                if require in line:
-                    uses.add(require)
-        for require in sorted(set(require_linenos.keys()) - uses):
-            t.info('%s:%d: unused goog.require: %r' % (
-                filename, require_linenos[require], require))
-            unused_count += 1
-    all_provides.discard('ol')
-    all_provides.discard('ol.MapProperty')
-
-    class Node(object):
-
-        def __init__(self):
-            self.present = False
-            self.children = {}
-
-        def _build_re(self, key):
-            if key == '*':
-                assert len(self.children) == 0
-                # We want to match `.doIt` but not `.SomeClass` or `.more.stuff`
-                return '(?=\\.[a-z]\\w*\\b(?!\\.))'
-            elif len(self.children) == 1:
-                child_key, child = next(self.children.iteritems())
-                child_re = child._build_re(child_key)
-                if child_key != '*':
-                    child_re = '\\.' + child_re
-                if self.present:
-                    return key + '(' + child_re + ')?'
-                else:
-                    return key + child_re
-            elif self.children:
-                children_re = '(?:' + '|'.join(
-                    ('\\.' if k != '*' else '') + self.children[k]._build_re(k)
-                    for k in sorted(self.children.keys())) + ')'
-                if self.present:
-                    return key + children_re + '?'
-                else:
-                    return key + children_re
-            else:
-                assert self.present
-                return key
-
-        def build_re(self, key):
-            return re.compile('\\b' + self._build_re(key) + '\\b')
-    root = Node()
-    for provide in all_provides:
-        node = root
-        for component in provide.split('.'):
-            if component not in node.children:
-                node.children[component] = Node()
-            node = node.children[component]
-        if component[0].islower():
-            # We've arrived at a namespace provide like `ol.foo`.
-            # In this case, we want to match uses like `ol.foo.doIt()` but
-            # not match things like `new ol.foo.SomeClass()`.
-            # For this purpose, we use the special wildcard key for the child.
-            node.children['*'] = Node()
-        else:
-            node.present = True
-    provide_res = [child.build_re(key)
-                   for key, child in root.children.iteritems()]
-    missing_count = 0
-    for filename in sorted(t.dependencies):
-        provides = set()
-        requires = set()
-        uses = set()
-        uses_linenos = {}
-        for lineno, line in _strip_comments(open(filename, 'rU')):
-            m = re.match(r'goog.provide\(\'(.*)\'\);', line)
-            if m:
-                provides.add(m.group(1))
-                continue
-            m = re.match(r'goog.require\(\'(.*)\'\);', line)
-            if m:
-                requires.add(m.group(1))
-                continue
-            while True:
-                for provide_re in provide_res:
-                    m = provide_re.search(line)
-                    if m:
-                        uses.add(m.group())
-                        uses_linenos[m.group()] = lineno
-                        line = line[:m.start()] + line[m.end():]
-                        break
-                else:
-                    break
-        if filename == 'src/ol/renderer/layerrenderer.js':
-            uses.discard('ol.renderer.Map')
-        m = re.match(
-            r'src/ol/renderer/(\w+)/\1(\w*)layerrenderer\.js\Z', filename)
-        if m:
-            uses.discard('ol.renderer.Map')
-            uses.discard('ol.renderer.%s.Map' % (m.group(1),))
-        missing_requires = uses - requires - provides
-        if missing_requires:
-            for missing_require in sorted(missing_requires):
-                t.info("%s:%d missing goog.require('%s')" %
-                       (filename, uses_linenos[missing_require], missing_require))
-                missing_count += 1
-    if unused_count or missing_count:
-        t.error('%d unused goog.requires, %d missing goog.requires' %
-                (unused_count, missing_count))
-    t.touch()
-
-
-@target('build/check-whitespace-timestamp', SRC, EXAMPLES_SRC,
-        SPEC, JSDOC_SRC, precious=True)
-def build_check_whitespace_timestamp(t):
-    CR_RE = re.compile(r'\r')
-    LEADING_WHITESPACE_RE = re.compile(r'\s+')
-    TRAILING_WHITESPACE_RE = re.compile(r'\s+\n\Z')
-    NO_NEWLINE_RE = re.compile(r'[^\n]\Z')
-    ALL_WHITESPACE_RE = re.compile(r'\s+\Z')
-    errors = 0
-    for filename in sorted(t.newer(t.dependencies)):
-        whitespace = False
-        for lineno, line in enumerate(open(filename, 'rU')):
-            if lineno == 0 and LEADING_WHITESPACE_RE.match(line):
-                t.info('%s:%d: leading whitespace', filename, lineno + 1)
-                errors += 1
-            if CR_RE.search(line):
-                t.info('%s:%d: carriage return character in line', filename, lineno + 1)
-                errors += 1
-            if TRAILING_WHITESPACE_RE.search(line):
-                t.info('%s:%d: trailing whitespace', filename, lineno + 1)
-                errors += 1
-            if NO_NEWLINE_RE.search(line):
-                t.info('%s:%d: no newline at end of file', filename, lineno + 1)
-                errors += 1
-            whitespace = ALL_WHITESPACE_RE.match(line)
-        if whitespace:
-            t.info('%s: trailing whitespace at end of file', filename)
-            errors += 1
-    if errors:
-        t.error('%d whitespace errors' % (errors,))
-    t.touch()
-
-
-virtual('apidoc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
-
-
-@target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), 'host-resources',
-        SRC, SHADER_SRC, ifind('config/jsdoc/api/template'),
-        NPM_INSTALL)
-def jsdoc_BRANCH_timestamp(t):
-    t.run('%(JSDOC)s', 'config/jsdoc/api/index.md',
-          '-c', 'config/jsdoc/api/conf.json',
-          '-d', 'build/hosted/%(BRANCH)s/apidoc')
-    t.touch()
-
-
-def split_example_file(example, dst_dir):
-    lines = open(example, 'rU').readlines()
-
-    target_lines = []
-    target_require_lines = []
-
-    found_requires = False
-    found_code = False
-    for line in lines:
-        m = re.match(r'goog.require\(\'(.*)\'\);', line)
-        if m:
-            found_requires = True
-            target_require_lines.append(line)
-        elif found_requires:
-            if found_code or line not in ('\n', '\r\n'):
-                found_code = True
-                target_lines.append(line)
-
-    target = open(
-        os.path.join(dst_dir, os.path.basename(example)), 'wb')
-    target_require = open(
-        os.path.join(dst_dir, os.path.basename(example)
-          .replace('.js', '-require.js')),
-        'wb')
-
-    target.writelines(target_lines)
-    target.close()
-
-    target_require.writelines(target_require_lines)
-    target_require.close()
-
-
-@target('host-resources', phony=True)
-def host_resources(t):
-    resources_dir = 'build/hosted/%(BRANCH)s/resources'
-    t.rm_rf(resources_dir)
-    t.cp_r('resources', resources_dir)
-
-
-@target('host-examples', 'build', 'host-resources', 'examples', phony=True)
-def host_examples(t):
-    examples_dir = 'build/hosted/%(BRANCH)s/examples'
-    build_dir = 'build/hosted/%(BRANCH)s/build'
-    css_dir = 'build/hosted/%(BRANCH)s/css'
-    closure_lib_path = output('node', '-e',
-        'process.stdout.write(require("closure-util").getLibraryPath())')
-    t.rm_rf(examples_dir)
-    t.makedirs(examples_dir)
-    t.rm_rf(build_dir)
-    t.makedirs(build_dir)
-    t.rm_rf(css_dir)
-    t.makedirs(css_dir)
-    t.cp(EXAMPLES, examples_dir)
-    for example in [path.replace('.html', '.js') for path in EXAMPLES]:
-        split_example_file(example, examples_dir % vars(variables))
-    t.cp_r('examples/data', examples_dir + '/data')
-    t.cp('bin/loader_hosted_examples.js', examples_dir + '/loader.js')
-    t.cp('build/ol.js', 'build/ol-debug.js', build_dir)
-    t.cp('build/ol.css', css_dir)
-    t.cp('examples/index.html', 'examples/example-list.js',
-         'examples/example-list.xml', 'examples/Jugl.js', examples_dir)
-    t.rm_rf('build/hosted/%(BRANCH)s/closure-library')
-    t.cp_r(closure_lib_path, 'build/hosted/%(BRANCH)s/closure-library')
-    t.rm_rf('build/hosted/%(BRANCH)s/ol')
-    t.makedirs('build/hosted/%(BRANCH)s/ol')
-    t.cp_r('src/ol', 'build/hosted/%(BRANCH)s/ol/ol')
-    t.rm_rf('build/hosted/%(BRANCH)s/ol.ext')
-    t.cp_r('build/ol.ext', 'build/hosted/%(BRANCH)s/ol.ext')
-    t.run('%(PYTHON)s', closure_lib_path + '/closure/bin/build/depswriter.py',
-          '--root_with_prefix', 'src ../../../ol',
-          '--root_with_prefix', 'build/ol.ext ../../../ol.ext',
-          '--root', 'build/hosted/%(BRANCH)s/closure-library/closure/goog',
-          '--root_with_prefix', 'build/hosted/%(BRANCH)s/closure-library/'
-          'third_party ../../third_party',
-          '--output_file', 'build/hosted/%(BRANCH)s/build/ol-deps.js')
-
-
-@target('check-examples', 'host-examples', phony=True)
-def check_examples(t):
-    examples = ['build/hosted/%(BRANCH)s/' + e
-                for e in EXAMPLES
-                if not open(e.replace('.html', '.js'), 'rU').readline().startswith('// NOCOMPILE')]
-    all_examples = [e + '?mode=advanced' for e in examples]
-    # Run the examples checks in a pool of threads
-    pool = ThreadPool()
-    for example in all_examples:
-        pool.add_task(t.run, '%(PHANTOMJS)s', 'bin/check-example.js', example)
-    errors = pool.wait_completion()
-    if errors:
-        sys.exit(1)
-
-
-@target('test', NPM_INSTALL, phony=True)
-def test(t):
-    t.run('node', 'tasks/test.js')
-
-
-@target('fixme', phony=True)
-def find_fixme(t):
-    regex = re.compile('FIXME|TODO')
-    matches = dict()
-    totalcount = 0
-    for filename in SRC:
-        f = open(filename, 'r')
-        for lineno, line in enumerate(f):
-            if regex.search(line):
-                if (filename not in matches):
-                    matches[filename] = list()
-                matches[filename].append('#%-10d %s' % (
-                    lineno + 1, line.strip()))
-                totalcount += 1
-        f.close()
-
-    for filename in matches:
-        num_matches = len(matches[filename])
-        noun = 'matches' if num_matches > 1 else 'match'
-        print '  %s has %d %s:' % (filename, num_matches, noun)
-        for match in matches[filename]:
-            print '    %s' % (match,)
-        print
-    print 'A total of %d TODO/FIXME(s) were found' % (totalcount,)
-
-
-@target('reallyclean')
-def reallyclean(t):
-    """Removes untracked files and folders from previous builds."""
-    # -X => only clean up files that are usually ignored e.g.
-    #       through .gitignore
-    # -d => also consider directories for deletion
-    # -f => if git configuration variable clean.requireForce != false,
-    #       git clean will refuse to run unless given -f or -n.
-    t.run('%(GIT)s', 'clean', '-X', '-d', '-f', '.')
-
-
-@target('checkdeps')
-def check_dependencies(t):
-    for exe in EXECUTABLES:
-        status = 'present' if which(exe) else 'MISSING'
-        print 'Program "%s" seems to be %s.' % (exe, status)
-    print 'For certain targets all above programs need to be present.'
-
-
-@target('help')
-def display_help(t):
-    print '''
-build.py - The OpenLayers 3 build script.
-
-Usage:
-  ./build.py [options] [target]                         (on Unix-based machines)
-  <python-executable.exe> build.py [options] [target]   (on Windows machines)
-
-There is one option:
-  -c               - Cleans up the repository from previous builds.
-
-The most common targets are:
-  serve            - Serves files, on port 3000.
-  lint             - Runs gjslint on all sourcefiles to enforce specific syntax.
-  build            - Builds singlefile versions of OpenLayers JavaScript and
-                     CSS. This is also the default build target which runs when
-                     no target is specified.
-  test             - Runs the testsuite and displays the results.
-  check            - Runs the lint-target, builds some OpenLayers files, and
-                     then runs test. Many developers call this target often
-                     while working on the code.
-  help             - Shows this help.
-
-Other less frequently used targets are:
-  apidoc           - Builds the API-Documentation using JSDoc3.
-  ci               - Builds all examples in various modes and usually takes a
-                     long time to finish. This target calls the following
-                     targets: lint, build, build-all, test, build-examples,
-                     check-examples and apidoc. This is the target run on
-                     Travis CI.
-  reallyclean      - Remove untracked files from the repository.
-  checkdeps        - Checks whether all required development software is
-                     installed on your machine.
-  fixme            - Will print a list of parts of the code that are marked
-                     with either TODO or FIXME.
-  todo             - This is an alias for the fixme-target (see above).
-
-If no target is given, the build-target will be executed.
-
-The above list is not complete, please see the source code for not-mentioned
-and only seldomly called targets.
-    '''
-
-if __name__ == '__main__':
-    main()

changelog/upgrade-notes.md

@@ -0,0 +1,167 @@
+## Upgrade notes
+
+### v3.5.0
+
+#### `ol.Object` and `bindTo`
+
+* The following experimental methods have been removed from `ol.Object`: `bindTo`, `unbind`, and `unbindAll`.  If you want to get notification about `ol.Object` property changes, you can listen for the `'propertychange'` event (e.g. `object.on('propertychange', listener)`).  Two-way binding can be set up at the application level using property change listeners.  See [#3472](https://github.com/openlayers/ol3/pull/3472) for details on the change.
+
+* The experimental `ol.dom.Input` component has been removed.  If you need to synchronize the state of a dom Input element with an `ol.Object`, this can be accomplished using listeners for change events.  For example, you might bind the state of a checkbox type input with a layer's visibility like this:
+
+  ```js
+  var layer = new ol.layer.Tile();
+  var checkbox = document.querySelector('#checkbox');
+
+  checkbox.addEventListener('change', function() {
+    var checked = this.checked;
+    if (checked !== layer.getVisible()) {
+      layer.setVisible(checked);
+    }
+  });
+
+  layer.on('change:visible', function() {
+    var visible = this.getVisible();
+    if (visible !== checkbox.checked) {
+      checkbox.checked = visible;
+    }
+  });
+  ```
+
+#### New Vector API
+
+* The following experimental vector classes have been removed: `ol.source.GeoJSON`, `ol.source.GML`, `ol.source.GPX`, `ol.source.IGC`, `ol.source.KML`, `ol.source.OSMXML`, and `ol.source.TopoJSON`. You now will use `ol.source.Vector` instead.
+
+  For example, if you used `ol.source.GeoJSON` as follows:
+
+  ```js
+  var source = new ol.source.GeoJSON({
+    url: 'features.json',
+    projection: 'EPSG:3857'
+  });
+  ```
+
+  you will need to change your code to:
+
+  ```js
+  var source = new ol.source.Vector({
+    url: 'features.json',
+    format: new ol.format.GeoJSON()
+  });
+  ```
+
+  See http://openlayers.org/en/master/examples/vector-layer.html for a real example.
+
+  Note that you no longer need to set a `projection` on the source!
+
+  Previously the vector data was loaded at source construction time, and, if the data projection and the source projection were not the same, the vector data was transformed to the source projection before being inserted (as features) into the source.
+
+  The vector data is now loaded at render time, when the view projection is known. And the vector data is transformed to the view projection if the data projection and the source projection are not the same.
+
+  If you still want to "eagerly" load the source you will use something like this:
+
+  ```js
+  var source = new ol.source.Vector();
+  $.ajax('features.json').then(function(response) {
+    var geojsonFormat = new ol.format.GeoJSON();
+    var features = geojsonFormat.readFeatures(response,
+        {featureProjection: 'EPSG:3857'});
+    source.addFeatures(features);
+  });
+  ```
+
+  The above code uses jQuery to send an Ajax request, but you can obviously use any Ajax library.
+
+  See http://openlayers.org/en/master/examples/igc.html for a real example.
+
+* Note about KML
+
+  If you used `ol.source.KML`'s `extractStyles` or `defaultStyle` options, you will now have to set these options on `ol.format.KML` instead. For example, if you used:
+
+  ```js
+  var source = new ol.source.KML({
+    url: 'features.kml',
+    extractStyles: false,
+    projection: 'EPSG:3857'
+  });
+  ```
+
+  you will now use:
+
+  ```js
+  var source = new ol.source.Vector({
+    url: 'features.kml',
+    format: new ol.format.KML({
+      extractStyles: false
+    })
+  });
+  ```
+
+* The `ol.source.ServerVector` class has been removed. If you used it, for example as follows:
+
+  ```js
+  var source = new ol.source.ServerVector({
+    format: new ol.format.GeoJSON(),
+    loader: function(extent, resolution, projection) {
+      var url = …;
+      $.ajax(url).then(function(response) {
+        source.addFeatures(source.readFeatures(response));
+      });
+    },
+    strategy: ol.loadingstrategy.bbox,
+    projection: 'EPSG:3857'
+  });
+  ```
+
+  you will need to change your code to:
+
+  ```js
+  var source = new ol.source.Vector({
+    loader: function(extent, resolution, projection) {
+      var url = …;
+      $.ajax(url).then(function(response) {
+        var format = new ol.format.GeoJSON();
+        var features = format.readFeatures(response,
+            {featureProjection: projection});
+        source.addFeatures(features);
+      });
+    },
+    strategy: ol.loadingstrategy.bbox
+  });
+  ```
+
+  See http://openlayers.org/en/master/examples/vector-osm.html for a real example.
+
+* The experimental `ol.loadingstrategy.createTile` function has been renamed to `ol.loadingstrategy.tile`. The signature of the function hasn't changed. See http://openlayers.org/en/master/examples/vector-osm.html for an example.
+
+#### Change to `ol.style.Icon`
+
+* When manually loading an image for `ol.style.Icon`, the image size should now be set
+with the `imgSize` option and not with `size`. `size` is supposed to be used for the
+size of a sub-rectangle in an image sprite.
+
+#### Support for non-square tiles
+
+The return value of `ol.tilegrid.TileGrid#getTileSize()` will now be an `ol.Size` array instead of a number if non-square tiles (i.e. an `ol.Size` array instead of a number as `tilsSize`) are used. To always get an `ol.Size`, the new `ol.size.toSize()` was added.
+
+#### Change to `ol.interaction.Draw`
+
+When finishing a draw, the `drawend` event is now dispatched before the feature is inserted to either the source or the collection. This change allows application code to finish setting up the feature.
+
+#### Misc.
+
+If you compile your application together with the library and use the `ol.feature.FeatureStyleFunction` type annotation (this should be extremely rare), the type is now named `ol.FeatureStyleFunction`.
+
+### v3.4.0
+
+There should be nothing special required when upgrading from v3.3.0 to v3.4.0.
+
+### v3.3.0
+
+* The `ol.events.condition.mouseMove` function was replaced by `ol.events.condition.pointerMove` (see [#3281](https://github.com/openlayers/ol3/pull/3281)). For example, if you use `ol.events.condition.mouseMove` as the condition in a `Select` interaction then you now need to use `ol.events.condition.pointerMove`:
+
+  ```js
+  var selectInteraction = new ol.interaction.Select({
+    condition: ol.events.condition.pointerMove
+    // …
+  });
+  ```

changelog/v3.1.0.md

@@ -112,7 +112,7 @@ The 3.1.0 release maintains a backwards-compatible API with the 3.0.0 release, s
  * [#2781](https://github.com/openlayers/ol3/pull/2781) - Use a standard title attribute for the control buttons ([@fredj](https://github.com/fredj))
  * [#2852](https://github.com/openlayers/ol3/pull/2852) - Add missing space between class names ([@fredj](https://github.com/fredj))
  * [#2891](https://github.com/openlayers/ol3/pull/2891) - Introduce a load function for image sources ([@ahocevar](https://github.com/ahocevar))
- * [#2885](https://github.com/openlayers/ol3/pull/2885) - Add wrapX option to TileJSON source ([@elemoine](https://github.com/elemoine))
+ * [#2885](https://github.com/openlayers/ol3/pull/2885) - Add wrapX option to TileJSON source ([@elemoine](https://github.com/elemoine))
  * [#2890](https://github.com/openlayers/ol3/pull/2890) - Use correct layer property names ([@elemoine](https://github.com/elemoine))
  * [#2887](https://github.com/openlayers/ol3/pull/2887) - Explicitly pass coordinate dimension before transforming. ([@tschaub](https://github.com/tschaub))
  * [#2886](https://github.com/openlayers/ol3/pull/2886) - Use ternary notation ([@elemoine](https://github.com/elemoine))

changelog/v3.1.1.md

@@ -0,0 +1,9 @@
+# 3.1.0
+
+## Summary
+
+This is a patch release to fix an issue with the select interaction in the 3.1.0 release.
+
+## Changes
+
+ * [#3082](https://github.com/openlayers/ol3/pull/3082) - Correct arguments for forEachGeometryAtPixel. ([@tschaub](https://github.com/tschaub))

changelog/v3.2.0.md

@@ -0,0 +1,86 @@
+# 3.2.0
+
+## Summary
+
+The 3.1.0 release includes 70 merged pull requests since 3.1.0.  Of note, the KML format [now parses `NetworkingLink` tags](https://github.com/openlayers/ol3/pull/3171).  The [measure example](http://openlayers.org/en/v3.2.0/examples/measure.html) was [reworked](https://github.com/openlayers/ol3/pull/3206) to display measurements and help messages while drawing.  A WMTS GetCapabilities format was [added](https://github.com/openlayers/ol3/pull/3026).  The WebGL renderer [now supports feature hit detection](https://github.com/openlayers/ol3/pull/3065) (on point features).  And you can now [detect](https://github.com/openlayers/ol3/pull/3172) features/colored pixels on image and tile layers!  See the full list of [changes](#changes) below.
+
+## Upgrade notes
+
+The 3.2.0 release maintains a backwards-compatible API with the 3.1.0 release, so upgrades should be painless.  Some special considerations below.
+
+ * You should not call `view.setRotation` with `undefined`, to reset the view rotation to `0` then use `view.setRotation(0)` (see [#3176](https://github.com/openlayers/ol3/pull/3176)).
+
+ * If you use `$(map.getViewport()).on('mousemove')` to detect features when the mouse is hovered on the map, you should now rely on the `pointermove` map event type and check in the `pointermove` listener that the `dragging` event property is `false` (see [#3190](https://github.com/openlayers/ol3/pull/3190)).
+
+## Changes
+
+ * [#3171](https://github.com/openlayers/ol3/pull/3171) - KML: Parsing of NetworkLink tag ([@oterral](https://github.com/oterral))
+ * [#3209](https://github.com/openlayers/ol3/pull/3209) - Coding style fixes ([@fredj](https://github.com/fredj))
+ * [#3208](https://github.com/openlayers/ol3/pull/3208) - Add setters and getters for imageLoadFunction ([@bartvde](https://github.com/bartvde))
+ * [#3019](https://github.com/openlayers/ol3/pull/3019) - Add option to allow Select interaction logic to select overlapping features ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3206](https://github.com/openlayers/ol3/pull/3206) - Add tooltip to show measure + help message while drawing ([@pgiraud](https://github.com/pgiraud))
+ * [#3205](https://github.com/openlayers/ol3/pull/3205) - Use ol.extent.createOrUpdateFromCoordinate ([@fredj](https://github.com/fredj))
+ * [#3026](https://github.com/openlayers/ol3/pull/3026) - Add support of reading WMTS Get Cap document ([@htulipe](https://github.com/htulipe))
+ * [#3201](https://github.com/openlayers/ol3/pull/3201) - Pass on opt_fast to parent clear function in ol.source.ServerVector (r=@elemoine,@gberaudo) ([@bartvde](https://github.com/bartvde))
+ * [#3199](https://github.com/openlayers/ol3/pull/3199) - Minor jsdoc fixes ([@fredj](https://github.com/fredj))
+ * [#3059](https://github.com/openlayers/ol3/pull/3059) - Cache the buffered extent value ([@fredj](https://github.com/fredj))
+ * [#3196](https://github.com/openlayers/ol3/pull/3196) - Remove unnecessary newlines ([@fredj](https://github.com/fredj))
+ * [#3099](https://github.com/openlayers/ol3/pull/3099) - Fix up parsing of OGR GML with ol.format.GML ([@bartvde](https://github.com/bartvde))
+ * [#3195](https://github.com/openlayers/ol3/pull/3195) - Coding style ([@fredj](https://github.com/fredj))
+ * [#3192](https://github.com/openlayers/ol3/pull/3192) - Add "url" option to ol.source.MapQuest ([@elemoine](https://github.com/elemoine))
+ * [#3172](https://github.com/openlayers/ol3/pull/3172) - Introduce forEachLayerAtPixel ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3178](https://github.com/openlayers/ol3/pull/3178) - GeoJSON externs fixes ([@fredj](https://github.com/fredj))
+ * [#3179](https://github.com/openlayers/ol3/pull/3179) - Disallow undefined values for ol.layer.Base ([@fredj](https://github.com/fredj))
+ * [#3161](https://github.com/openlayers/ol3/pull/3161) - Doc fix. writeFeaturesNode receives an array of Feature ([@3x0dv5](https://github.com/3x0dv5))
+ * [#3169](https://github.com/openlayers/ol3/pull/3169) - Fix default icon style in kml format ([@oterral](https://github.com/oterral))
+ * [#3190](https://github.com/openlayers/ol3/pull/3190) - Introduce `dragging` flag for MapBrowserEvent ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3135](https://github.com/openlayers/ol3/pull/3135) - Make changing the label of ZoomToExtent/FullScreen control consistent ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3186](https://github.com/openlayers/ol3/pull/3186) - Take the pixel ratio into account when clipping the layer ([@fredj](https://github.com/fredj))
+ * [#3183](https://github.com/openlayers/ol3/pull/3183) - Allow other params than 'mode' in example page query string. ([@htulipe](https://github.com/htulipe))
+ * [#2791](https://github.com/openlayers/ol3/pull/2791) - Re enable rotation button transition ([@fredj](https://github.com/fredj))
+ * [#3180](https://github.com/openlayers/ol3/pull/3180) - Add a getMap function to ol.FeatureOverlay (r=@ahocevar) ([@bartvde](https://github.com/bartvde))
+ * [#3176](https://github.com/openlayers/ol3/pull/3176) - Disallowed undefined rotation value ([@fredj](https://github.com/fredj))
+ * [#3177](https://github.com/openlayers/ol3/pull/3177) - Add example showing how to style polygon vertices ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3174](https://github.com/openlayers/ol3/pull/3174) - Use view.getRotation or view.getResolution instead of view.getState ([@fredj](https://github.com/fredj))
+ * [#3170](https://github.com/openlayers/ol3/pull/3170) - Coding style ([@fredj](https://github.com/fredj))
+ * [#3108](https://github.com/openlayers/ol3/pull/3108) - Support skipping features in the WebGL renderer ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3163](https://github.com/openlayers/ol3/pull/3163) - Use the layerStatesArray property from the frameState ([@fredj](https://github.com/fredj))
+ * [#3159](https://github.com/openlayers/ol3/pull/3159) - Don't pass specific options to the parent constructor ([@fredj](https://github.com/fredj))
+ * [#3066](https://github.com/openlayers/ol3/pull/3066) - Introduce hasFeatureAtPixel ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3065](https://github.com/openlayers/ol3/pull/3065) - Add hit-detection support for WebGL ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3128](https://github.com/openlayers/ol3/pull/3128) - Allow rendering of feature when download of icon failed ([@oterral](https://github.com/oterral))
+ * [#3156](https://github.com/openlayers/ol3/pull/3156) - Move readProjectionFrom* functions to the base classes ([@fredj](https://github.com/fredj))
+ * [#3107](https://github.com/openlayers/ol3/pull/3107) - Also listen on loading images ([@elemoine](https://github.com/elemoine))
+ * [#3153](https://github.com/openlayers/ol3/pull/3153) - Add missing GeoJSONFeature#bbox property ([@fredj](https://github.com/fredj))
+ * [#3154](https://github.com/openlayers/ol3/pull/3154) - Remove unnecessary newlines ([@fredj](https://github.com/fredj))
+ * [#3146](https://github.com/openlayers/ol3/pull/3146) - Enable tests for ol.geom.flat.reverse ([@icholy](https://github.com/icholy))
+ * [#3152](https://github.com/openlayers/ol3/pull/3152) - Update closure-library and closure-util version ([@fredj](https://github.com/fredj))
+ * [#3145](https://github.com/openlayers/ol3/pull/3145) - Add wrapX option to source.OSM and source.BingMaps ([@elemoine](https://github.com/elemoine))
+ * [#3139](https://github.com/openlayers/ol3/pull/3139) - Add ol.control.Control#setTarget ([@elemoine](https://github.com/elemoine))
+ * [#3144](https://github.com/openlayers/ol3/pull/3144) - Update CONTRIBUTING style guide with recent guidelines ([@bartvde](https://github.com/bartvde))
+ * [#3136](https://github.com/openlayers/ol3/pull/3136) - Use array.length = 0 instead of goog.array.clear ([@fredj](https://github.com/fredj))
+ * [#3140](https://github.com/openlayers/ol3/pull/3140) - Avoid use of goog.array.clone with arrays. ([@tschaub](https://github.com/tschaub))
+ * [#3122](https://github.com/openlayers/ol3/pull/3122) - Revert "Use offsetX and offsetY if available" ([@fredj](https://github.com/fredj))
+ * [#2385](https://github.com/openlayers/ol3/pull/2385) - Option to update vector layers while animating ([@ahocevar](https://github.com/ahocevar))
+ * [#3129](https://github.com/openlayers/ol3/pull/3129) - Only update the rbush item if the extent has changed ([@fredj](https://github.com/fredj))
+ * [#3117](https://github.com/openlayers/ol3/pull/3117) - Add pixelRatio support for DOM vector renderer ([@ahocevar](https://github.com/ahocevar))
+ * [#3124](https://github.com/openlayers/ol3/pull/3124) - Add a space between scale -value and -unit ([@sirtet](https://github.com/sirtet))
+ * [#3130](https://github.com/openlayers/ol3/pull/3130) - Document default value ([@fredj](https://github.com/fredj))
+ * [#3105](https://github.com/openlayers/ol3/pull/3105) - ol.geom.Geometry#getExtent re-factoring ([@fredj](https://github.com/fredj))
+ * [#3118](https://github.com/openlayers/ol3/pull/3118) - Bugfix: "Cannot read property 'firstElementChild' of null" (WFS) ([@naturalatlas](https://github.com/naturalatlas))
+ * [#3114](https://github.com/openlayers/ol3/pull/3114) - Specify node version in CONTRIBUTING.md ([@elemoine](https://github.com/elemoine))
+ * [#3106](https://github.com/openlayers/ol3/pull/3106) - Don't pass specific options to the parent constructor ([@fredj](https://github.com/fredj))
+ * [#3110](https://github.com/openlayers/ol3/pull/3110) - Use svg instead of png to get better image quality ([@PeterDaveHello](https://github.com/PeterDaveHello))
+ * [#2707](https://github.com/openlayers/ol3/pull/2707) - Generate source map of minified ol.js ([@gberaudo](https://github.com/gberaudo))
+ * [#3104](https://github.com/openlayers/ol3/pull/3104) - Don't pass renderBuffer option to the parent constructor ([@fredj](https://github.com/fredj))
+ * [#3096](https://github.com/openlayers/ol3/pull/3096) - popup example cleanup / simplification ([@fredj](https://github.com/fredj))
+ * [#3072](https://github.com/openlayers/ol3/pull/3072) - Optimize canvas hit detection by rendering features in a limited extent. ([@tschaub](https://github.com/tschaub))
+ * [#3101](https://github.com/openlayers/ol3/pull/3101) - Use bracket notation instead of goog.object functions. ([@tschaub](https://github.com/tschaub))
+ * [#3079](https://github.com/openlayers/ol3/pull/3079) - Exclude source files from docs. ([@tschaub](https://github.com/tschaub))
+ * [#3100](https://github.com/openlayers/ol3/pull/3100) - Assert that ol.layer.Tile#getPreload is always set ([@fredj](https://github.com/fredj))
+ * [#3084](https://github.com/openlayers/ol3/pull/3084) - Changes from the v3.1.x branch. ([@openlayers](https://github.com/openlayers))
+ * [#3094](https://github.com/openlayers/ol3/pull/3094) - Remove AUTHORS.md. ([@tschaub](https://github.com/tschaub))
+ * [#3089](https://github.com/openlayers/ol3/pull/3089) - Fixed URL link for test README ([@mike-mcgann](https://github.com/mike-mcgann))
+ * [#2894](https://github.com/openlayers/ol3/pull/2894) - Simplify CSS code in custom-controls example ([@fredj](https://github.com/fredj))
+ * [#3085](https://github.com/openlayers/ol3/pull/3085) - Fixed documentation typo for return value of ol.proj.Projection.isGlobal(). ([@mike-mcgann](https://github.com/mike-mcgann))
+ * [#3073](https://github.com/openlayers/ol3/pull/3073) - Make map's deviceOptions map options ([@ahocevar](https://github.com/ahocevar))

changelog/v3.2.1.md

@@ -0,0 +1,9 @@
+# 3.2.1
+
+## Summary
+
+This is a patch release that fixes a regression with the select interaction in the [3.2.0 release](https://github.com/openlayers/ol3/releases/tag/v3.2.0).
+
+## Changes
+
+ * [#3236](https://github.com/openlayers/ol3/pull/3236) - Select the uppermost feature. ([@tschaub](https://github.com/tschaub))

changelog/v3.3.0.md

@@ -0,0 +1,51 @@
+## Upgrade notes
+
+* The `ol.events.condition.mouseMove` function was replaced by `ol.events.condition.pointerMove` (see [#3281](https://github.com/openlayers/ol3/pull/3281)). For example, if you use `ol.events.condition.mouseMove` as the condition in a `Select` interaction then you now need to use `ol.events.condition.pointerMove`:
+
+  ```js
+  var selectInteraction = new ol.interaction.Select({
+    condition: ol.events.condition.pointerMove
+    // …
+  });
+  ```
+
+## Overview of all changes
+
+ * [#3263](https://github.com/openlayers/ol3/pull/3263) - Support ArcGIS Rest Services ([@cwgrant](https://github.com/cwgrant))
+ * [#3295](https://github.com/openlayers/ol3/pull/3295) - Add RESTful to WMTS GetCapabilities optionsFromCapabilities ([@sarametz](https://github.com/sarametz))
+ * [#3304](https://github.com/openlayers/ol3/pull/3304) - Remove scale line inner padding ([@fredj](https://github.com/fredj))
+ * [#3296](https://github.com/openlayers/ol3/pull/3296) - Add upgrade-notes.md file ([@elemoine](https://github.com/elemoine))
+ * [#3303](https://github.com/openlayers/ol3/pull/3303) - Add constant for us-ft units ([@ahocevar](https://github.com/ahocevar))
+ * [#3018](https://github.com/openlayers/ol3/pull/3018) - Add SelectEvent to interaction ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3301](https://github.com/openlayers/ol3/pull/3301) - Select interaction unit tests ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3298](https://github.com/openlayers/ol3/pull/3298) - Make ol.source.Source inherit from ol.Object ([@fredj](https://github.com/fredj))
+ * [#3297](https://github.com/openlayers/ol3/pull/3297) - Add getters to ol.source.WMTS ([@fredj](https://github.com/fredj))
+ * [#3281](https://github.com/openlayers/ol3/pull/3281) - Fix mouseMove event type comparison for IE10-11, pointermove ([@adube](https://github.com/adube))
+ * [#3293](https://github.com/openlayers/ol3/pull/3293) - Add missing opacity option for ol.style.IconOptions ([@ahocevar](https://github.com/ahocevar))
+ * [#3284](https://github.com/openlayers/ol3/pull/3284) - Fix jsdoc type for arrays of listening keys ([@fredj](https://github.com/fredj))
+ * [#3278](https://github.com/openlayers/ol3/pull/3278) - Add goog.provide for ol.DrawEventType ([@elemoine](https://github.com/elemoine))
+ * [#3272](https://github.com/openlayers/ol3/pull/3272) - Added getter function to return the wrapped source within the cluster ([@acanimal](https://github.com/acanimal))
+ * [#3275](https://github.com/openlayers/ol3/pull/3275) - Add ol.layer.Heatmap#blur getter and setter ([@fredj](https://github.com/fredj))
+ * [#3142](https://github.com/openlayers/ol3/pull/3142) - WMTS Get Cap document with updated WMTS.optionsFromCapabilities function ([@sarametz](https://github.com/sarametz))
+ * [#3271](https://github.com/openlayers/ol3/pull/3271) - [wip] Fix misplaced comment blocks ([@fredj](https://github.com/fredj))
+ * [#3273](https://github.com/openlayers/ol3/pull/3273) - Remove unused createGetTileIfLoadedFunction function. ([@tschaub](https://github.com/tschaub))
+ * [#3270](https://github.com/openlayers/ol3/pull/3270) - Make ol.Overlay autoPan default to false ([@elemoine](https://github.com/elemoine))
+ * [#3268](https://github.com/openlayers/ol3/pull/3268) - Fix autoPan in examples with ol.Overlay on hover ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3256](https://github.com/openlayers/ol3/pull/3256) - Add autoPan option to ol.Overlay ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3261](https://github.com/openlayers/ol3/pull/3261) - Fix forEachCorner extent, add TopLeft ([@adube](https://github.com/adube))
+ * [#3260](https://github.com/openlayers/ol3/pull/3260) - Remove unused goog.require ([@fredj](https://github.com/fredj))
+ * [#3246](https://github.com/openlayers/ol3/pull/3246) - Avoid creating unnecessary images in tile layers. ([@tschaub](https://github.com/tschaub))
+ * [#3254](https://github.com/openlayers/ol3/pull/3254) - Use lineCap, lineJoin and miterLimit stroke properties in RegularShape ([@fredj](https://github.com/fredj))
+ * [#3252](https://github.com/openlayers/ol3/pull/3252) - Avoid leaking global listenerSpy. ([@tschaub](https://github.com/tschaub))
+ * [#3248](https://github.com/openlayers/ol3/pull/3248) - Add tile loading events to image tile sources. ([@tschaub](https://github.com/tschaub))
+ * [#3240](https://github.com/openlayers/ol3/pull/3240) - Changes from the v3.2.x branch. ([@openlayers](https://github.com/openlayers))
+ * [#3233](https://github.com/openlayers/ol3/pull/3233) - Four small fixes. ([@stweil](https://github.com/stweil))
+ * [#3232](https://github.com/openlayers/ol3/pull/3232) - Fix typos found by codespell. ([@stweil](https://github.com/stweil))
+ * [#3231](https://github.com/openlayers/ol3/pull/3231) - Make ol.layer.Heatmap#radius configurable ([@fredj](https://github.com/fredj))
+ * [#3225](https://github.com/openlayers/ol3/pull/3225) - Respect attributions passed to TileJSON source. ([@tschaub](https://github.com/tschaub))
+ * [#3223](https://github.com/openlayers/ol3/pull/3223) - Resize the canvas when the tile size changes. ([@tschaub](https://github.com/tschaub))
+ * [#3224](https://github.com/openlayers/ol3/pull/3224) - Provide the ability to get the layer name from a MapQuest source ([@bartvde](https://github.com/bartvde))
+ * [#3222](https://github.com/openlayers/ol3/pull/3222) - Add geodesic option for measure ([@bartvde](https://github.com/bartvde))
+ * [#3221](https://github.com/openlayers/ol3/pull/3221) - Select the uppermost feature ([@fredj](https://github.com/fredj))
+ * [#3211](https://github.com/openlayers/ol3/pull/3211) - Bing https logo fix. ([@photostu](https://github.com/photostu))
+ * [#3215](https://github.com/openlayers/ol3/pull/3215) - Allow reuse of layer rendering code without creating a map. ([@tschaub](https://github.com/tschaub))

changelog/v3.4.0.md

@@ -0,0 +1,43 @@
+## Overview of all changes
+
+ * [#3383](https://github.com/openlayers/ol3/pull/3383) - GML3 tests time out in unit tests ([@bartvde](https://github.com/bartvde))
+ * [#3401](https://github.com/openlayers/ol3/pull/3401) - Allow GeoJSON to be serialized according to the right-hand rule. ([@tschaub](https://github.com/tschaub))
+ * [#3403](https://github.com/openlayers/ol3/pull/3403) - Remove unused goog.require ([@fredj](https://github.com/fredj))
+ * [#3362](https://github.com/openlayers/ol3/pull/3362) - Configure proj4 options and transforms upon construction ([@ahocevar](https://github.com/ahocevar))
+ * [#3394](https://github.com/openlayers/ol3/pull/3394) - Fix fullscreen pseudo CSS class name ([@fredj](https://github.com/fredj))
+ * [#3399](https://github.com/openlayers/ol3/pull/3399) - Clarify when widths need to be configured on a tile grid ([@ahocevar](https://github.com/ahocevar))
+ * [#3398](https://github.com/openlayers/ol3/pull/3398) - Make sure that the return value of wrapX() is stable ([@ahocevar](https://github.com/ahocevar))
+ * [#3396](https://github.com/openlayers/ol3/pull/3396) - Move the compare function out of ol.interaction.Modify.handleDownEvent_ ([@fredj](https://github.com/fredj))
+ * [#3395](https://github.com/openlayers/ol3/pull/3395) - ol.Interaction.Modify fixes ([@fperucic](https://github.com/fperucic))
+ * [#3387](https://github.com/openlayers/ol3/pull/3387) - Add wrapX option for ol.source.WMTS ([@ahocevar](https://github.com/ahocevar))
+ * [#3393](https://github.com/openlayers/ol3/pull/3393) - Remove unused define ([@fredj](https://github.com/fredj))
+ * [#3392](https://github.com/openlayers/ol3/pull/3392) - Fix switching class name of full-screen control ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3391](https://github.com/openlayers/ol3/pull/3391) - Minor code cleanup ([@fredj](https://github.com/fredj))
+ * [#3388](https://github.com/openlayers/ol3/pull/3388) - Add new geometry layout option for polyline format ([@fredj](https://github.com/fredj))
+ * [#3385](https://github.com/openlayers/ol3/pull/3385) - Fix ol.tilegrid.TileGrid#getZForResolution ([@elemoine](https://github.com/elemoine))
+ * [#3377](https://github.com/openlayers/ol3/pull/3377) - Support wrapX for attributions ([@ahocevar](https://github.com/ahocevar))
+ * [#3382](https://github.com/openlayers/ol3/pull/3382) - Create github source links ([@ahocevar](https://github.com/ahocevar))
+ * [#3376](https://github.com/openlayers/ol3/pull/3376) - Add ol.source.Tile support for wrapping around the x-axis ([@ahocevar](https://github.com/ahocevar))
+ * [#3378](https://github.com/openlayers/ol3/pull/3378) - Clarify where to ask questions ([@ahocevar](https://github.com/ahocevar))
+ * [#3380](https://github.com/openlayers/ol3/pull/3380) - Test the GeoJSON layout ([@fredj](https://github.com/fredj))
+ * [#3360](https://github.com/openlayers/ol3/pull/3360) - Don't unlisten image twice when disposing an ol.ImageTile ([@fredj](https://github.com/fredj))
+ * [#3361](https://github.com/openlayers/ol3/pull/3361) - Listen on localhost to avoid phantomjs browsing 0.0.0.0 ([@ahocevar](https://github.com/ahocevar))
+ * [#3365](https://github.com/openlayers/ol3/pull/3365) - Better docs for #getPointResolution ([@ahocevar](https://github.com/ahocevar))
+ * [#3363](https://github.com/openlayers/ol3/pull/3363) - New ol.proj features ([@bill-chadwick](https://github.com/bill-chadwick))
+ * [#3305](https://github.com/openlayers/ol3/pull/3305) - Add image loading events to image sources (r=@ahocevar,@elemoine) ([@bartvde](https://github.com/bartvde))
+ * [#3343](https://github.com/openlayers/ol3/pull/3343) - Line arrows example ([@fredj](https://github.com/fredj))
+ * [#3354](https://github.com/openlayers/ol3/pull/3354) - Mark ol.format.GeoJSON#writeFeature(s) option param optional ([@fredj](https://github.com/fredj))
+ * [#3346](https://github.com/openlayers/ol3/pull/3346) - Set the 'properties' member to null if the feature has not properties ([@fredj](https://github.com/fredj))
+ * [#3344](https://github.com/openlayers/ol3/pull/3344) - Minor code cleanup ([@fredj](https://github.com/fredj))
+ * [#3237](https://github.com/openlayers/ol3/pull/3237) - Add circles to Draw interaction. ([@Morgul](https://github.com/Morgul))
+ * [#2691](https://github.com/openlayers/ol3/pull/2691) - Add will-change CSS properties ([@fredj](https://github.com/fredj))
+ * [#3336](https://github.com/openlayers/ol3/pull/3336) - Use ol.Map#getTargetElement function ([@fredj](https://github.com/fredj))
+ * [#3335](https://github.com/openlayers/ol3/pull/3335) - Update rbush to version 1.3.5 ([@fredj](https://github.com/fredj))
+ * [#3322](https://github.com/openlayers/ol3/pull/3322) - Remove unneeded map.isDef call ([@fredj](https://github.com/fredj))
+ * [#3327](https://github.com/openlayers/ol3/pull/3327) - Add css to dist directory ([@ahocevar](https://github.com/ahocevar))
+ * [#3324](https://github.com/openlayers/ol3/pull/3324) - Add interface definition for ol.SelectEvent ([@ahocevar](https://github.com/ahocevar))
+ * [#3315](https://github.com/openlayers/ol3/pull/3315) - Fix Tissot indicatrix example description ([@fredj](https://github.com/fredj))
+ * [#3312](https://github.com/openlayers/ol3/pull/3312) - Fix HiDPI support for ArcGIS REST ([@ahocevar](https://github.com/ahocevar))
+ * [#2910](https://github.com/openlayers/ol3/pull/2910) - Support multiple featureTpes in GML parser ([@bartvde](https://github.com/bartvde))
+ * [#3309](https://github.com/openlayers/ol3/pull/3309) - Fix select event always reporting as multi select ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3307](https://github.com/openlayers/ol3/pull/3307) - Handle all non-degree units in ol.control.ScaleLine ([@ahocevar](https://github.com/ahocevar))

changelog/v3.5.0.md

@@ -0,0 +1,289 @@
+# v3.5.0
+
+## Summary
+
+The 3.5.0 release includes features and fixes from a whopping 129 pull requests since 3.4.0.  This release removes a number of "experimental" features from the API, so take a close look at the notes below when upgrading.
+
+## Upgrade notes
+
+### `ol.Object` and `bindTo`
+
+* The following experimental methods have been removed from `ol.Object`: `bindTo`, `unbind`, and `unbindAll`.  If you want to get notification about `ol.Object` property changes, you can listen for the `'propertychange'` event (e.g. `object.on('propertychange', listener)`).  Two-way binding can be set up at the application level using property change listeners.  See [#3472](https://github.com/openlayers/ol3/pull/3472) for details on the change.
+
+* The experimental `ol.dom.Input` component has been removed.  If you need to synchronize the state of a dom Input element with an `ol.Object`, this can be accomplished using listeners for change events.  For example, you might bind the state of a checkbox type input with a layer's visibility like this:
+
+  ```js
+  var layer = new ol.layer.Tile();
+  var checkbox = document.querySelector('#checkbox');
+
+  checkbox.addEventListener('change', function() {
+    var checked = this.checked;
+    if (checked !== layer.getVisible()) {
+      layer.setVisible(checked);
+    }
+  });
+
+  layer.on('change:visible', function() {
+    var visible = this.getVisible();
+    if (visible !== checkbox.checked) {
+      checkbox.checked = visible;
+    }
+  });
+  ```
+
+### New Vector API
+
+* The following experimental vector classes have been removed: `ol.source.GeoJSON`, `ol.source.GML`, `ol.source.GPX`, `ol.source.IGC`, `ol.source.KML`, `ol.source.OSMXML`, and `ol.source.TopoJSON`. You now will use `ol.source.Vector` instead.
+
+  For example, if you used `ol.source.GeoJSON` as follows:
+
+  ```js
+  var source = new ol.source.GeoJSON({
+    url: 'features.json',
+    projection: 'EPSG:3857'
+  });
+  ```
+
+  you will need to change your code to:
+
+  ```js
+  var source = new ol.source.Vector({
+    url: 'features.json',
+    format: new ol.format.GeoJSON()
+  });
+  ```
+
+  See http://openlayers.org/en/master/examples/vector-layer.html for a real example.
+
+  Note that you no longer need to set a `projection` on the source!
+
+  Previously the vector data was loaded at source construction time, and, if the data projection and the source projection were not the same, the vector data was transformed to the source projection before being inserted (as features) into the source.
+
+  The vector data is now loaded at render time, when the view projection is known. And the vector data is transformed to the view projection if the data projection and the source projection are not the same.
+
+  If you still want to "eagerly" load the source you will use something like this:
+
+  ```js
+  var source = new ol.source.Vector();
+  $.ajax('features.json').then(function(response) {
+    var geojsonFormat = new ol.format.GeoJSON();
+    var features = geojsonFormat.readFeatures(response,
+        {featureProjection: 'EPSG:3857'});
+    source.addFeatures(features);
+  });
+  ```
+
+  The above code uses jQuery to send an Ajax request, but you can obviously use any Ajax library.
+
+  See http://openlayers.org/en/master/examples/igc.html for a real example.
+
+* Note about KML
+
+  If you used `ol.source.KML`'s `extractStyles` or `defaultStyle` options, you will now have to set these options on `ol.format.KML` instead. For example, if you used:
+
+  ```js
+  var source = new ol.source.KML({
+    url: 'features.kml',
+    extractStyles: false,
+    projection: 'EPSG:3857'
+  });
+  ```
+
+  you will now use:
+
+  ```js
+  var source = new ol.source.Vector({
+    url: 'features.kml',
+    format: new ol.format.KML({
+      extractStyles: false
+    })
+  });
+  ```
+
+* The `ol.source.ServerVector` class has been removed. If you used it, for example as follows:
+
+  ```js
+  var source = new ol.source.ServerVector({
+    format: new ol.format.GeoJSON(),
+    loader: function(extent, resolution, projection) {
+      var url = …;
+      $.ajax(url).then(function(response) {
+        source.addFeatures(source.readFeatures(response));
+      });
+    },
+    strategy: ol.loadingstrategy.bbox,
+    projection: 'EPSG:3857'
+  });
+  ```
+
+  you will need to change your code to:
+
+  ```js
+  var source = new ol.source.Vector({
+    loader: function(extent, resolution, projection) {
+      var url = …;
+      $.ajax(url).then(function(response) {
+        var format = new ol.format.GeoJSON();
+        var features = format.readFeatures(response,
+            {featureProjection: projection});
+        source.addFeatures(features);
+      });
+    },
+    strategy: ol.loadingstrategy.bbox
+  });
+  ```
+
+  See http://openlayers.org/en/master/examples/vector-osm.html for a real example.
+
+* The experimental `ol.loadingstrategy.createTile` function has been renamed to `ol.loadingstrategy.tile`. The signature of the function hasn't changed. See http://openlayers.org/en/master/examples/vector-osm.html for an example.
+
+### Change to `ol.style.Icon`
+
+* When manually loading an image for `ol.style.Icon`, the image size should now be set
+with the `imgSize` option and not with `size`. `size` is supposed to be used for the
+size of a sub-rectangle in an image sprite.
+
+### Support for non-square tiles
+
+The return value of `ol.tilegrid.TileGrid#getTileSize()` will now be an `ol.Size` array instead of a number if non-square tiles (i.e. an `ol.Size` array instead of a number as `tilsSize`) are used. To always get an `ol.Size`, the new `ol.size.toSize()` was added.
+
+### Change to `ol.interaction.Draw`
+
+When finishing a draw, the `drawend` event is now dispatched before the feature is inserted to either the source or the collection. This change allows application code to finish setting up the feature.
+
+### Misc.
+
+If you compile your application together with the library and use the `ol.feature.FeatureStyleFunction` type annotation (this should be extremely rare), the type is now named `ol.FeatureStyleFunction`.
+
+## New features and fixes
+
+ * [#3646](https://github.com/openlayers/ol3/pull/3646) - Use graceful-fs in place of fs ([@elemoine](https://github.com/elemoine))
+ * [#3645](https://github.com/openlayers/ol3/pull/3645) - Fix test-coverage.js script ([@elemoine](https://github.com/elemoine))
+ * [#3640](https://github.com/openlayers/ol3/pull/3640) - Make make fail on requires and whitespace errors ([@elemoine](https://github.com/elemoine))
+ * [#3644](https://github.com/openlayers/ol3/pull/3644) - added altclick select to selectfeatures example ([@t27](https://github.com/t27))
+ * [#3612](https://github.com/openlayers/ol3/pull/3612) - Add ol.source.WMTS#getUrls and getRequestEncoding ([@elemoine](https://github.com/elemoine))
+ * [#3616](https://github.com/openlayers/ol3/pull/3616) - Add support for freehand drawing to the Draw interaction ([@ahocevar](https://github.com/ahocevar))
+ * [#3634](https://github.com/openlayers/ol3/pull/3634) - Remove unused local variable ([@fredj](https://github.com/fredj))
+ * [#3629](https://github.com/openlayers/ol3/pull/3629) - Problems with XYZ coordinates in snap interaction ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3633](https://github.com/openlayers/ol3/pull/3633) - Add a Makefile section to .editorconfig ([@elemoine](https://github.com/elemoine))
+ * [#3632](https://github.com/openlayers/ol3/pull/3632) - Make host-examples target copy index.js ([@elemoine](https://github.com/elemoine))
+ * [#3631](https://github.com/openlayers/ol3/pull/3631) - Restore Modify interaction constructor test ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3630](https://github.com/openlayers/ol3/pull/3630) - Initial tests for Modify interaction vertex creation ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3527](https://github.com/openlayers/ol3/pull/3527) - Replace pake with make? ([@elemoine](https://github.com/elemoine))
+ * [#3624](https://github.com/openlayers/ol3/pull/3624) - Add a one sentence summary for several exportable symbols ([@marcjansen](https://github.com/marcjansen))
+ * [#3623](https://github.com/openlayers/ol3/pull/3623) - ol3 overwrites WMS format_options instead of extending them. ([@bartvde](https://github.com/bartvde))
+ * [#3621](https://github.com/openlayers/ol3/pull/3621) - Fix typo in documentation comment ([@openlayers](https://github.com/openlayers))
+ * [#3614](https://github.com/openlayers/ol3/pull/3614) - GML2 parser does not parse all features ([@bartvde](https://github.com/bartvde))
+ * [#3619](https://github.com/openlayers/ol3/pull/3619) - Add a one sentence summary for ol.geom.* exportable symbols ([@marcjansen](https://github.com/marcjansen))
+ * [#3618](https://github.com/openlayers/ol3/pull/3618) - Replace non-breaking space (U+00A0) with regular space (U+0020). ([@tschaub](https://github.com/tschaub))
+ * [#3617](https://github.com/openlayers/ol3/pull/3617) - Add ol.size.hasArea. ([@tschaub](https://github.com/tschaub))
+ * [#3597](https://github.com/openlayers/ol3/pull/3597) - Remove dead link in api doc ([@fredj](https://github.com/fredj))
+ * [#3613](https://github.com/openlayers/ol3/pull/3613) - Add a one sentence summary for ol.interaction* exportable symbols ([@marcjansen](https://github.com/marcjansen))
+ * [#3611](https://github.com/openlayers/ol3/pull/3611) - Improve error handling in Esri JSON format ([@bartvde](https://github.com/bartvde))
+ * [#3560](https://github.com/openlayers/ol3/pull/3560) - Add an example showing how to create a permalink ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3571](https://github.com/openlayers/ol3/pull/3571) - Add wrapX support for vector layers (canvas renderer only) ([@ahocevar](https://github.com/ahocevar))
+ * [#3605](https://github.com/openlayers/ol3/pull/3605) - vector-esri-edit.html uses non api method ([@bartvde](https://github.com/bartvde))
+ * [#3602](https://github.com/openlayers/ol3/pull/3602) - Rename ol.feature.FeatureStyleFunction to ol.FeatureStyleFunction. ([@tschaub](https://github.com/tschaub))
+ * [#3604](https://github.com/openlayers/ol3/pull/3604) - Add charset so that zoom out button shows correctly ([@bartvde](https://github.com/bartvde))
+ * [#3603](https://github.com/openlayers/ol3/pull/3603) - Reformat upgrade-notes.md ([@elemoine](https://github.com/elemoine))
+ * [#3599](https://github.com/openlayers/ol3/pull/3599) - Improve docs for source.Vector options ([@probins](https://github.com/probins))
+ * [#3598](https://github.com/openlayers/ol3/pull/3598) - Remove unnecessary entry in `.gitignore`. ([@tschaub](https://github.com/tschaub))
+ * [#3595](https://github.com/openlayers/ol3/pull/3595) - Add featureloader.jsdoc ([@probins](https://github.com/probins))
+ * [#3593](https://github.com/openlayers/ol3/pull/3593) - Add /examples/index.js to .gitignore ([@fredj](https://github.com/fredj))
+ * [#3592](https://github.com/openlayers/ol3/pull/3592) - Remove reference to binding in Collection docs ([@probins](https://github.com/probins))
+ * [#3591](https://github.com/openlayers/ol3/pull/3591) - Only draw the layer if visible and inside the resolution range ([@fredj](https://github.com/fredj))
+ * [#3528](https://github.com/openlayers/ol3/pull/3528) - Fix memory leak when removing layers from ol.layer.Group ([@fredj](https://github.com/fredj))
+ * [#3549](https://github.com/openlayers/ol3/pull/3549) - Move ol.*_DURATION const to a constructor option ([@fredj](https://github.com/fredj))
+ * [#3587](https://github.com/openlayers/ol3/pull/3587) - Handle left/right segment intersections for top/bottom spans. ([@tschaub](https://github.com/tschaub))
+ * [#3516](https://github.com/openlayers/ol3/pull/3516) - Remove ol.format.BinaryFeature. ([@tschaub](https://github.com/tschaub))
+ * [#3586](https://github.com/openlayers/ol3/pull/3586) - Simplify dragAndDropInteraction in examples. ([@probins](https://github.com/probins))
+ * [#3555](https://github.com/openlayers/ol3/pull/3555) - Esri JSON support ([@bartvde](https://github.com/bartvde))
+ * [#3583](https://github.com/openlayers/ol3/pull/3583) - Add a one sentence summary for ol.proj.* and ol.layer.* exportable symbols ([@marcjansen](https://github.com/marcjansen))
+ * [#3581](https://github.com/openlayers/ol3/pull/3581) - Always show links to related API documentation. ([@tschaub](https://github.com/tschaub))
+ * [#3582](https://github.com/openlayers/ol3/pull/3582) - Index what the examples require. ([@tschaub](https://github.com/tschaub))
+ * [#3580](https://github.com/openlayers/ol3/pull/3580) - Add a one sentence summary for ol.source.* exportable symbols ([@marcjansen](https://github.com/marcjansen))
+ * [#3551](https://github.com/openlayers/ol3/pull/3551) - Automatically add links to API-docs in examples ([@marcjansen](https://github.com/marcjansen))
+ * [#3575](https://github.com/openlayers/ol3/pull/3575) - Check proj equivalence by code. ([@nd0ut](https://github.com/nd0ut))
+ * [#3579](https://github.com/openlayers/ol3/pull/3579) - Use HTTPS were available. ([@tschaub](https://github.com/tschaub))
+ * [#3558](https://github.com/openlayers/ol3/pull/3558) - Example sources in examples dir and built examples in build/examples. ([@tschaub](https://github.com/tschaub))
+ * [#3550](https://github.com/openlayers/ol3/pull/3550) - Reduce differences between the rendering test runner and the standard test runner. ([@tschaub](https://github.com/tschaub))
+ * [#3576](https://github.com/openlayers/ol3/pull/3576) - Add KML options related note the upgrade notes ([@elemoine](https://github.com/elemoine))
+ * [#3573](https://github.com/openlayers/ol3/pull/3573) - Modify draw interaction dispatch order ([@gberaudo](https://github.com/gberaudo))
+ * [#3572](https://github.com/openlayers/ol3/pull/3572) - Do not return a null tileSize ([@ahocevar](https://github.com/ahocevar))
+ * [#3570](https://github.com/openlayers/ol3/pull/3570) - Add missing @api ([@gberaudo](https://github.com/gberaudo))
+ * [#3569](https://github.com/openlayers/ol3/pull/3569) - Fix link to Bootstrap documentation ([@fredj](https://github.com/fredj))
+ * [#3559](https://github.com/openlayers/ol3/pull/3559) - Add support for non-square tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#3568](https://github.com/openlayers/ol3/pull/3568) - Move extractStyles option to ol.format.KML ([@fredj](https://github.com/fredj))
+ * [#3562](https://github.com/openlayers/ol3/pull/3562) - Simplify .ol-zoomslider and .ol-overviewmap CSS ([@fredj](https://github.com/fredj))
+ * [#3565](https://github.com/openlayers/ol3/pull/3565) - Move extractStyles option to ol.format.KML ([@fredj](https://github.com/fredj))
+ * [#3523](https://github.com/openlayers/ol3/pull/3523) - Update proj4 version to 2.3.6 ([@fredj](https://github.com/fredj))
+ * [#3556](https://github.com/openlayers/ol3/pull/3556) - Minor TileUTFGrid error fix ([@klokantech](https://github.com/klokantech))
+ * [#3557](https://github.com/openlayers/ol3/pull/3557) - Update FastClick externs to version 1.0.6 ([@fredj](https://github.com/fredj))
+ * [#3517](https://github.com/openlayers/ol3/pull/3517) - Add tests for previously untested classes ([@marcjansen](https://github.com/marcjansen))
+ * [#3548](https://github.com/openlayers/ol3/pull/3548) - Write the error stack instead of the error itself. ([@tschaub](https://github.com/tschaub))
+ * [#3542](https://github.com/openlayers/ol3/pull/3542) - Generate example index and rebuild examples on source changes. ([@tschaub](https://github.com/tschaub))
+ * [#3530](https://github.com/openlayers/ol3/pull/3530) - external resources not correctly in inline source of example ([@bartvde](https://github.com/bartvde))
+ * [#3448](https://github.com/openlayers/ol3/pull/3448) - Fix WebGL image layer rendering on retina displays ([@elemoine](https://github.com/elemoine))
+ * [#3544](https://github.com/openlayers/ol3/pull/3544) - Update comments about remaining GeoJSON work. ([@tschaub](https://github.com/tschaub))
+ * [#3531](https://github.com/openlayers/ol3/pull/3531) - Fix PointerEventHandler exception with Overlay containing SVG and IE9 ([@mantonovic](https://github.com/mantonovic))
+ * [#3521](https://github.com/openlayers/ol3/pull/3521) - Remove goog.isDefAndNotNull test on ol.layer.Group#getLayers result ([@fredj](https://github.com/fredj))
+ * [#3481](https://github.com/openlayers/ol3/pull/3481) - Proposal for a simpler vector API ([@elemoine](https://github.com/elemoine))
+ * [#3472](https://github.com/openlayers/ol3/pull/3472) - Remove the experimental bindTo method from ol.Object. ([@tschaub](https://github.com/tschaub))
+ * [#3505](https://github.com/openlayers/ol3/pull/3505) - Add a Create Custom Builds tutorial ([@elemoine](https://github.com/elemoine))
+ * [#3513](https://github.com/openlayers/ol3/pull/3513) - Remove layerGroup.setLayers(null) test ([@fredj](https://github.com/fredj))
+ * [#3511](https://github.com/openlayers/ol3/pull/3511) - Add goog.provide's ([@elemoine](https://github.com/elemoine))
+ * [#3509](https://github.com/openlayers/ol3/pull/3509) - Dispatch change event even when geometry is set to null ([@pgiraud](https://github.com/pgiraud))
+ * [#3510](https://github.com/openlayers/ol3/pull/3510) - Use sinon.spy to ensure change event is dispatched ([@pgiraud](https://github.com/pgiraud))
+ * [#3504](https://github.com/openlayers/ol3/pull/3504) - Rework build-examples.js task. ([@tschaub](https://github.com/tschaub))
+ * [#3470](https://github.com/openlayers/ol3/pull/3470) - Add rendering tests ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3413](https://github.com/openlayers/ol3/pull/3413) - Add support for generic external modules with Browserify ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3503](https://github.com/openlayers/ol3/pull/3503) - Use vector source instead of feature overlay in snap example. ([@tschaub](https://github.com/tschaub))
+ * [#3495](https://github.com/openlayers/ol3/pull/3495) - Initial basic project setup tutorial ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#3488](https://github.com/openlayers/ol3/pull/3488) - Add docs for exportable symbols. ([@tschaub](https://github.com/tschaub))
+ * [#3441](https://github.com/openlayers/ol3/pull/3441) - Add a "Compile Application and OpenLayers 3 Together" tutorial ([@elemoine](https://github.com/elemoine))
+ * [#3499](https://github.com/openlayers/ol3/pull/3499) - Update to closure-util 1.4.0 ([@elemoine](https://github.com/elemoine))
+ * [#3494](https://github.com/openlayers/ol3/pull/3494) - Mark VectorContext @api ([@gberaudo](https://github.com/gberaudo))
+ * [#3409](https://github.com/openlayers/ol3/pull/3409) - AssertionError in WMTS.optionsFromCapabilities. ([@bartvde](https://github.com/bartvde))
+ * [#3493](https://github.com/openlayers/ol3/pull/3493) - Add image loading events to ol.source.ImageStatic ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3490](https://github.com/openlayers/ol3/pull/3490) - Add .editorconfig and instructions on its use. ([@tschaub](https://github.com/tschaub))
+ * [#3489](https://github.com/openlayers/ol3/pull/3489) - Use an abstract base class instead of IVectorContext. ([@gberaudo](https://github.com/gberaudo))
+ * [#3483](https://github.com/openlayers/ol3/pull/3483) - Clarify view.setRotation docs ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3485](https://github.com/openlayers/ol3/pull/3485) - build.py graceful interrupt ([@malaretv](https://github.com/malaretv))
+ * [#3484](https://github.com/openlayers/ol3/pull/3484) - Make sure we copy the example css if it exists ([@bartvde](https://github.com/bartvde))
+ * [#3462](https://github.com/openlayers/ol3/pull/3462) - Remove ol.format.GMLBase from the API ([@ahocevar](https://github.com/ahocevar))
+ * [#3445](https://github.com/openlayers/ol3/pull/3445) - Start a FAQ document. ([@marcjansen](https://github.com/marcjansen))
+ * [#3468](https://github.com/openlayers/ol3/pull/3468) - Use the coveralls executable. ([@marcjansen](https://github.com/marcjansen))
+ * [#3415](https://github.com/openlayers/ol3/pull/3415) - Stable Only unchecked by default. ([@malaretv](https://github.com/malaretv))
+ * [#3420](https://github.com/openlayers/ol3/pull/3420) - Unregister viewport size listener on setTarget(null) ([@elemoine](https://github.com/elemoine))
+ * [#3456](https://github.com/openlayers/ol3/pull/3456) - Updated menu on the JSDOC template (non-responsive) ([@klokan](https://github.com/klokan))
+ * [#3475](https://github.com/openlayers/ol3/pull/3475) - Template examples ([@openlayers](https://github.com/openlayers))
+ * [#3455](https://github.com/openlayers/ol3/pull/3455) - Fix pre-loaded icons images for WebGL ([@tsauerwein](https://github.com/tsauerwein))
+ * [#3473](https://github.com/openlayers/ol3/pull/3473) - Add more tests for ol.coordinate. ([@marcjansen](https://github.com/marcjansen))
+ * [#3464](https://github.com/openlayers/ol3/pull/3464) - Mark more of the API stable. ([@tschaub](https://github.com/tschaub))
+ * [#3469](https://github.com/openlayers/ol3/pull/3469) - Update README. ([@malaretv](https://github.com/malaretv))
+ * [#3467](https://github.com/openlayers/ol3/pull/3467) - Update the coveralls badge. ([@openlayers](https://github.com/openlayers))
+ * [#3466](https://github.com/openlayers/ol3/pull/3466) - Include coveralls code-coverage badge in README. ([@marcjansen](https://github.com/marcjansen))
+ * [#3457](https://github.com/openlayers/ol3/pull/3457) - Integrate istanbul for test coverage ([@marcjansen](https://github.com/marcjansen))
+ * [#3446](https://github.com/openlayers/ol3/pull/3446) - Add updateWhileInteracting to olx.layer.VectorOptions ([@elemoine](https://github.com/elemoine))
+ * [#3438](https://github.com/openlayers/ol3/pull/3438) - Parser documentation and XML readme ([@gberaudo](https://github.com/gberaudo))
+ * [#3449](https://github.com/openlayers/ol3/pull/3449) - Fix assertion message ([@gberaudo](https://github.com/gberaudo))
+ * [#3440](https://github.com/openlayers/ol3/pull/3440) - Add fromLonLat and toLonLat convenience functions ([@ahocevar](https://github.com/ahocevar))
+ * [#3423](https://github.com/openlayers/ol3/pull/3423) - Parse extrude and altitude mode ([@gberaudo](https://github.com/gberaudo))
+ * [#3431](https://github.com/openlayers/ol3/pull/3431) - Better typing ([@fredj](https://github.com/fredj))
+ * [#3436](https://github.com/openlayers/ol3/pull/3436) - Mention readme.md files as help for contributors ([@ahocevar](https://github.com/ahocevar))
+ * [#3433](https://github.com/openlayers/ol3/pull/3433) - Add missing goog.provide/goog.require ol.source.TileEvent ([@fredj](https://github.com/fredj))
+ * [#3422](https://github.com/openlayers/ol3/pull/3422) - Fix Select behavior when multi is false ([@elemoine](https://github.com/elemoine))
+ * [#3428](https://github.com/openlayers/ol3/pull/3428) - Reorder assertions and variable declarations. ([@marcjansen](https://github.com/marcjansen))
+ * [#3414](https://github.com/openlayers/ol3/pull/3414) - Add missing ol.style.AtlasManager goog.require ([@fredj](https://github.com/fredj))
+ * [#3429](https://github.com/openlayers/ol3/pull/3429) - Adding missing provide for SelectFilterFunction ([@pgiraud](https://github.com/pgiraud))
+ * [#3426](https://github.com/openlayers/ol3/pull/3426) - Add assertion messages for all assertion statements ([@bartvde](https://github.com/bartvde))
+ * [#3425](https://github.com/openlayers/ol3/pull/3425) - Fix typo in ol.js ([@elemoine](https://github.com/elemoine))
+ * [#3424](https://github.com/openlayers/ol3/pull/3424) - Remove `@api` annotation from `ol.WEBGL_MAX_TEXTURE_SIZE`. ([@tschaub](https://github.com/tschaub))
+ * [#3419](https://github.com/openlayers/ol3/pull/3419) - Remove describe.only ([@elemoine](https://github.com/elemoine))
+ * [#3417](https://github.com/openlayers/ol3/pull/3417) - ol.interaction.Snap extent fix ([@fperucic](https://github.com/fperucic))
+ * [#3410](https://github.com/openlayers/ol3/pull/3410) - Add ol.Object.unset() method ([@gberaudo](https://github.com/gberaudo))
+ * [#3402](https://github.com/openlayers/ol3/pull/3402) - Add "filter" option to Select interaction ([@elemoine](https://github.com/elemoine))
+ * [#3416](https://github.com/openlayers/ol3/pull/3416) - Remove unnecessary typecasts in examples ([@fredj](https://github.com/fredj))
+ * [#3411](https://github.com/openlayers/ol3/pull/3411) - Listen for a 'change:geometry' event ([@fperucic](https://github.com/fperucic))
+ * [#3109](https://github.com/openlayers/ol3/pull/3109) - Snap feature ([@fperucic](https://github.com/fperucic))
+ * [#3407](https://github.com/openlayers/ol3/pull/3407) - Add v3.4.0 empty section to upgrade notes ([@bartvde](https://github.com/bartvde))

closure-util.json

@@ -1,3 +1,3 @@
 {
-  "library_url": "https://github.com/google/closure-library/archive/ad5e66c1e7d7829b0d77feae49aaf5f011265715.zip"
+  "library_url": "https://github.com/google/closure-library/archive/0011afd534469ba111786fe68300a634e08a4d80.zip"
 }

config/example.json

@@ -0,0 +1,79 @@
+{
+  "exports": [],
+  "src": [
+    "src/**/*.js",
+    "build/ol.ext/*.js",
+    "build/examples/{{id}}.js"
+  ],
+  "compile": {
+    "js": [
+      "externs/olx.js",
+      "externs/oli.js"
+    ],
+    "externs": [
+      "externs/bingmaps.js",
+      "externs/bootstrap.js",
+      "externs/closure-compiler.js",
+      "externs/example.js",
+      "externs/fastclick.js",
+      "externs/geojson.js",
+      "externs/jquery-1.9.js",
+      "externs/proj4js.js",
+      "externs/tilejson.js",
+      "externs/topojson.js",
+      "externs/vbarray.js"
+    ],
+    "define": [
+      "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
+      "goog.dom.ASSUME_STANDARDS_MODE=true",
+      "goog.json.USE_NATIVE_JSON=true",
+      "goog.DEBUG=false"
+    ],
+    "jscomp_error": [
+      "accessControls",
+      "ambiguousFunctionDecl",
+      "checkEventfulObjectDisposal",
+      "checkRegExp",
+      "checkStructDictInheritance",
+      "checkTypes",
+      "checkVars",
+      "const",
+      "constantProperty",
+      "deprecated",
+      "duplicateMessage",
+      "es3",
+      "es5Strict",
+      "externsValidation",
+      "fileoverviewTags",
+      "globalThis",
+      "internetExplorerChecks",
+      "invalidCasts",
+      "misplacedTypeAnnotation",
+      "missingGetCssName",
+      "missingProperties",
+      "missingProvide",
+      "missingRequire",
+      "missingReturn",
+      "newCheckTypes",
+      "nonStandardJsDocs",
+      "suspiciousCode",
+      "strictModuleDepCheck",
+      "typeInvalidation",
+      "undefinedNames",
+      "undefinedVars",
+      "uselessCode",
+      "visibility"
+    ],
+    "jscomp_off": [
+      "unknownDefines"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "compilation_level": "ADVANCED",
+    "warning_level": "VERBOSE",
+    "output_wrapper": "(function(){%output%})();",
+    "use_types_for_optimization": true,
+    "manage_closure_dependencies": true
+  }
+}

config/examples-all.json

@@ -3,7 +3,7 @@
   "src": [
     "src/**/*.js",
     "build/ol.ext/*.js",
-    "build/examples/all.js"
+    "build/compiled-examples/all.js"
   ],
   "compile": {
     "js": [
@@ -14,14 +14,14 @@
       "externs/bingmaps.js",
       "externs/bootstrap.js",
       "externs/closure-compiler.js",
+      "externs/esrijson.js",
       "externs/example.js",
       "externs/fastclick.js",
       "externs/geojson.js",
       "externs/jquery-1.9.js",
       "externs/proj4js.js",
       "externs/tilejson.js",
-      "externs/topojson.js",
-      "externs/vbarray.js"
+      "externs/topojson.js"
     ],
     "define": [
       "goog.array.ASSUME_NATIVE_FUNCTIONS=true",

config/examples/example-verbatim.html

@@ -0,0 +1 @@
+{{{ contents }}}

config/examples/example.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
+    {{{ extraHead }}}
+    {{{ css.tag }}}
+    <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
+    <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
+    <title>{{ title }}</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container" id="navbar-inner-container">
+          <a class="brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      {{{ contents }}}
+
+      <div class="row-fluid">
+        <div class="span12">
+          <h4 id="title">{{ title }}</h4>
+          <p id="shortdesc">{{ shortdesc }}</p>
+          <div id="docs">{{ md docs }}</div>
+          <div id="tags">{{ tags }}</div>
+          <div id="api-links">Related API documentation: {{{ js.apiHtml }}}</div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <hr>
+        <form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
+          <input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
+          <input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
+          <textarea class="hidden" name="js">{{ js.source }}</textarea>
+          <textarea class="hidden" name="css">{{ css.source }}</textarea>
+          <textarea class="hidden" name="html">{{ contents }}</textarea>
+          <input type="hidden" name="wrap" value="l">
+          <input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js">
+          <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;{{ title }}&lt;/title&gt;
+&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
+&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css" type="text/css"&gt;
+&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"&gt;&lt;/script&gt;
+{{ extraHead }}
+{{#if css.source}}
+&lt;style&gt;
+{{ css.source }}
+&lt;/style&gt;
+{{/if}}
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div class="container-fluid"&gt;
+
+{{ contents }}
+&lt;/div&gt;
+&lt;script&gt;
+{{ js.source }}
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+        </div>
+      </div>
+    </div>
+
+    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+    <script src="./resources/common.js"></script>
+    <script src="./resources/prism/prism.min.js"></script>
+    {{{ js.tag }}}
+
+  </body>
+</html>

config/examples/readme.md

@@ -0,0 +1,21 @@
+This folder contains example templates. These templates are used to build the examples in the `examples/` folder. The resulting examples are written to the `build/examples` folder.
+
+Although the main purpose of these examples is to demonstrate how to use the API, they also serve other purposes in the development cycle, and so are not exactly as they would be in normal application code:
+
+ * every time the library changes, they are compiled together with the library as a basic check that they remain in sync with the library
+
+ * they use a special loader script to enable defining at run time which build mode (raw/debug/advanced) to use
+
+To enable this, examples have the following, not needed in application code:
+
+ * each html file loads `loader.js`; application code would not need this, but would instead load the appropriate library build file, either a hosted version or a custom build
+
+ * each js file starts with `goog.require` functions, used by the compiler; application code would only have these if the code is to be compiled together with the library and/or Closure library
+
+ * some js files use type definitions (comments with @type tags); these are also used by the compiler, and are only needed if the code is to be compiled together with the library
+
+ * html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these
+
+ * in addition, examples use Twitter Bootstrap and jQuery; this is of course not a requirement - you may use whichever presentation/helper libraries you wish
+
+At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.

config/jsdoc/api/conf.json

@@ -34,7 +34,7 @@
         "cleverLinks": true,
         "monospaceLinks": true,
         "default": {
-            "outputSourceFiles": true
+            "outputSourceFiles": false
         },
         "applicationName": "OpenLayers 3"
     },

config/jsdoc/api/index.md

@@ -29,11 +29,10 @@ Interactions for [vector features](ol.Feature.html)
 <br>[Vector sources](ol.source.Vector.html) for [ol.layer.Vector](ol.layer.Vector.html)
 <br>[Formats](ol.format.Feature.html) for reading/writing vector data
 <br>[ol.format.WMSCapabilities](ol.format.WMSCapabilities.html)</td></tr>
-<tr><th>Projections</th><th>2-way bindings</th><th>Other components</th></tr>
+<tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
 <tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#transform) and [ol.proj.transformExtent()](ol.proj.html#transformExtent).</p>
 [ol.proj](ol.proj.html)</td>
-<td><p>[Objects](ol.Object.html) can be kept in sync using the [bindTo()](ol.Object.html#bindTo) method.</p>
-<p>A [DOM Input](ol.dom.Input.html) class is available to bind Object properties to HTML Input elements.</p></td>
+<td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.ObjectEvent](ol.ObjectEvent.html) with information on the changed property and old value.</p>
 <td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
 [ol.Geolocation](ol.Geolocation.html)<br>
 [ol.Overlay](ol.Overlay.html)<br>

config/jsdoc/api/readme.md

@@ -24,6 +24,8 @@ The second line tells the Closure compiler the type of the argument.
 
 The third line (`@api`) marks the method as part of the api and thus exportable. The stability can be added as value, e.g. `@api stable`. Without such an api annotation, the method will not be documented in the generated API documentation. Symbols without an api annotation will also not be exportable (unless they are explicitly exported with a `goog.exportProperty` call).
 
+The `@api` annotation can be used in conjunciton with the `@inheritDoc` annotation to export a symbol that is documented on a parent class (where the method may be abstract).  In general, `@api` annotations should never be used on abstract methods (only on their implementations).
+
 ### Events
 
 Events are documented using `@fires` and `@event` annotations:

config/jsdoc/api/template/static/scripts/main.js

@@ -53,13 +53,28 @@ $(function () {
     $(window).on('resize', _onResize);
     _onResize();
 
+    // create source code links to github
+    var srcLinks = $('div.tag-source');
+    var masterSearch = window.location.href.match(/\/([^\/]*\/)apidoc\//);
+    if (masterSearch && masterSearch.length) {
+      var branch = masterSearch[1];
+      srcLinks.each(function(i, el) {
+        var textParts = el.innerHTML.trim().split(', ');
+        var link = 'https://github.com/openlayers/ol3/blob/' + branch +
+            textParts[0];
+        el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
+            '<a href="' + link + textParts[1].replace('line ', '#l') + '">' +
+            textParts[1] + '</a>';
+      });
+    }
+
     // show/hide unstable items
     var links = $('a[href^="ol."]');
     var unstable = $('.unstable');
     var stabilityToggle = $('#stability-toggle');
     stabilityToggle.change(function() {
         unstable.toggleClass('hidden', this.checked);
-        var search = this.checked ? '' : '?unstable=true';
+        var search = this.checked ? '?stableonly=true' : '';
         links.each(function(i, el) {
             this.href = this.pathname + search + this.hash;
         });
@@ -73,6 +88,6 @@ $(function () {
     links.each(function(i, el) {
         this.href = this.pathname + search + this.hash;
     });
-    stabilityToggle.prop('checked', search !== '?unstable=true');
+    stabilityToggle.prop('checked', search === '?stableonly=true');
     unstable.toggleClass('hidden', stabilityToggle[0].checked);
 });

config/jsdoc/api/template/static/styles/jaguar.css

@@ -1,15 +1,47 @@
 @import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
+.navbar-inverse {
+  border: 0;
+}
 .navbar-inverse .navbar-inner {
   background: #1F6B75;
   height: 50px;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
 }
 .navbar-inverse .brand {
-  color: white;
-  font-size: 20px;
+  color: #fff;
+  font-size: 160%;
+  font-weight: bold;
+  position: absolute;
+  top: 6px;
+  left: 16px;
+}
+.navbar-inverse .brand:hover,
+.navbar-inverse .brand:focus {
+  color: #aae1e9;
+  text-decoration: none;
+}
+.navbar-inverse .brand img {
+  width: 35px;
+  height: 35px;
+  vertical-align: middle;
+  margin-right: 5px;
+  border:0;
 }
 .navbar-inverse .container {
-  padding: 5px 0 5px 0;
+  padding: 0;
 }
+.navbar-inverse .navbar-nav>li>a {
+  color: #fff;
+}
+.navbar-inverse .navbar-nav>li>a:hover,
+.navbar-inverse .navbar-nav>li>a:focus,
+.navbar-inverse .navbar-nav>li>a.active
+ {
+  outline:0;
+  color: #fff;
+  background-color: #268591;
+}
+
 body {
   padding-top: 50px;
 }
@@ -20,6 +52,8 @@ body {
 a {
   position: relative;
   z-index: 1;
+  -webkit-transition: all .2s;
+  transition: all .2s;
 }
 .navigation li {
   color: #888;
@@ -379,5 +413,6 @@ footer {
   color: white;
   position: absolute;
   top: 1em;
-  right: 8em;
+  left: 250px;
+  font-weight: normal;
 }

config/jsdoc/api/template/tmpl/layout.tmpl

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>OpenLayers 3 API Documentation - <?js= title ?></title>
+    <title>OpenLayers 3 API Reference - <?js= title ?></title>
     <script src="scripts/prettify/prettify.js"> </script>
     <script src="scripts/prettify/lang-css.js"> </script>
     <script src="scripts/jquery.min.js"> </script>
@@ -18,11 +18,16 @@
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
-      <a class="brand" href="/"><img src="../resources/logo.png" width="40"> OpenLayers 3</a>
-      <a class="brand" href="index.html">API Documentation</a>
+      <a class="brand" href="/"><img src="logo-70x70.png"> OpenLayers 3</a>
       <label id="stability">
-        <input type="checkbox" id="stability-toggle" checked> Stable Only
+        <input type="checkbox" id="stability-toggle"> Stable Only
       </label>
+      <ul class="nav navbar-nav pull-right">
+        <li><a href="../doc">Docs</a></li>
+        <li><a href="../examples">Examples</a></li>
+        <li><a href="index.html" class="active">API</a></li>
+        <li><a href="https://github.com/openlayers/ol3">Code</a></li>
+      </ul>
     </div>
   </div>
 </div>
@@ -42,4 +47,4 @@
 <script src="scripts/linenumber.js"></script>
 <script src="scripts/main.js"></script>
 </body>
-</html>
+</html>

config/ol.json

@@ -5,13 +5,13 @@
     "externs": [
       "externs/bingmaps.js",
       "externs/closure-compiler.js",
+      "externs/esrijson.js",
       "externs/geojson.js",
       "externs/oli.js",
       "externs/olx.js",
       "externs/proj4js.js",
       "externs/tilejson.js",
-      "externs/topojson.js",
-      "externs/vbarray.js"
+      "externs/topojson.js"
     ],
     "define": [
       "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
@@ -61,6 +61,8 @@
     "compilation_level": "ADVANCED",
     "warning_level": "VERBOSE",
     "use_types_for_optimization": true,
-    "manage_closure_dependencies": true
+    "manage_closure_dependencies": true,
+    "create_source_map": "build/ol.js.map",
+    "source_map_format": "V3"
   }
 }

css/ol.css

@@ -21,8 +21,12 @@
   font-size: 10px;
   text-align: center;
   margin: 1px;
-  padding: 0px 2px;
+  will-change: contents, width;
 }
+.ol-overlay-container {
+  will-change: left,right,top,bottom;
+}
+
 .ol-unsupported {
   display: none;
 }
@@ -53,11 +57,12 @@
 .ol-rotate {
   top: .5em;
   right: .5em;
-  transition: opacity .25s;
+  transition: opacity .25s linear, visibility 0s linear;
 }
 .ol-rotate.ol-hidden {
   opacity: 0;
-  display: none;
+  visibility: hidden;
+  transition: opacity .25s linear, visibility 0s linear .25s;
 }
 .ol-zoom-extent {
   top: 4.643em;
@@ -101,6 +106,7 @@
   display: block;
   font-weight: normal;
   font-size: 1.2em;
+  will-change: transform;
 }
 .ol-touch .ol-control button {
   font-size: 1.5em;
@@ -114,21 +120,12 @@
   background-color: #4c6079;
   background-color: rgba(0,60,136,0.7);
 }
-.ol-zoom-extent button:after {
-    content: "E";
-}
 .ol-zoom .ol-zoom-in {
   border-radius: 2px 2px 0 0;
 }
 .ol-zoom .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
-button.ol-full-screen-false:after {
-  content: "\2194";
-}
-button.ol-full-screen-true:after {
-  content: "\00d7";
-}
 
 
 .ol-attribution {
@@ -193,11 +190,8 @@ button.ol-full-screen-true:after {
 }
 
 .ol-zoomslider {
-  position: absolute;
   top: 4.5em;
   left: .5em;
-  background: #eee;
-  background: rgba(255, 255, 255, 0.4);
   width: 24px;
   height: 200px;
 }
@@ -221,7 +215,6 @@ button.ol-full-screen-true:after {
 }
 
 .ol-overviewmap {
-  position: absolute;
   left: 0.5em;
   bottom: 0.5em;
 }

doc/faq.md

@@ -0,0 +1,334 @@
+---
+title: Frequently Asked Questions (FAQ)
+layout: doc.hbs
+---
+
+# Frequently Asked Questions (FAQ)
+
+Certain questions arise more often than others when users ask for help. This 
+document tries to list some of the common questions that frequently get asked,
+e.g. on [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers-3).
+
+If you think a question (and naturally its answer) should be added here, feel
+free to ping us or to send a pull request enhancing this document.
+
+Table of contents:
+
+* [What projection is OpenLayers using?](#what-projection-is-openlayers-using)
+* [How do I change the projection of my map?](#how-do-i-change-the-projection-of-my-map)
+* [Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?](#why-is-my-map-centered-on-the-gulf-of-guinea-or-africa-the-ocean-null-island)
+* [Why is the order of a coordinate [lon,lat], and not [lat,lon]?](#why-is-the-order-of-a-coordinate-lonlat-and-not-latlon)
+* [Why aren't there any features in my source?](#why-arent-there-any-features-in-my-source)
+* [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map)
+* [How do I create a custom build of OpenLayers?](#how-do-i-create-a-custom-build-of-openlayers)
+* [Do I need to write my own code using Closure library?](#do-i-need-to-write-my-own-code-using-closure-library)
+* [Do I need to compress my code with Closure compiler?](#do-i-need-to-compress-my-code-with-closure-compiler)
+
+## What projection is OpenLayers using?
+
+Every map that you'll create with OpenLayers will have a view, and every view
+will have a projection. As the earth is three-dimensional and round but the 2D
+view of a map isn't, we need a mathematical expression to represent it. Enter
+projections.
+
+There isn't only one projection, but there are many common ones. Each projection
+has different properties, in that it accurately represents distances, angles or
+areas. Certain projections are better suited for different regions in the world.
+
+Back to the original question: OpenLayers is capable of dealing with most
+projections. If you do not explicitly set one, your map is going to use our
+default which is the Web Mercator projection (EPSG:3857). The same projection is
+used e.g. for the maps of the OpenStreetMap-project and commercial products such
+as Bing Maps or Google Maps.
+
+This projection is a good choice if you want a map which shows the whole world,
+and you may need to have this projection if you want to e.g. use the
+OpenStreetMap or Bing tiles.
+
+
+## How do I change the projection of my map?
+
+There is a good chance that you want to change the default projection of
+OpenLayers to something more appropriate for your region or your specific data.
+
+The projection of your map can be set through the `view`-property. Here are some
+examples:
+
+```javascript
+// OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
+var map = new ol.Map({
+  view: new ol.View({
+    projection: 'EPSG:4326'
+    // other view properties like map center etc.
+  })
+  // other properties for your map like layers etc.
+});
+```
+
+```javascript
+// To use other projections, you have to register the projection in OpenLayers:
+//
+// By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
+// So we create a projection instance for EPSG:21781 and pass it to
+// ol.proj.addProjection to make it available to the library for lookup by its
+// code.
+var swissProjection = new ol.proj.Projection({
+  code: 'EPSG:21781',
+  // The extent is used to determine zoom level 0. Recommended values for a
+  // projection's validity extent can be found at http://epsg.io/.
+  extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
+  units: 'm'
+});
+ol.proj.addProjection(swissProjection);
+
+// we can now use the projection:
+var map = new ol.Map({
+  view: new ol.View({
+    projection: swissProjection
+    // other view properties like map center etc.
+  })
+  // other properties for your map like layers etc.
+});
+```
+
+We recommend to lookup parameters of your projection (like the validity extent)
+over at [epsg.io](http://epsg.io/).
+
+
+## Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?
+
+If you have set a center in your map view, but don't see a real change in visual
+output, chances are that you have provided the coordinates of the map center in
+the wrong (a non-matching) projection.
+
+As the default projection in OpenLayers is Web Mercator (see above), the
+coordinates for the center have to be provided in that projection. Chances are
+that your map looks like this:
+
+```javascript
+var washingtonLonLat = [-77.036667, 38.895];
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: washingtonLonLat,
+    zoom: 12
+  })
+});
+```
+
+Here `[-77.036667, 38.895]` is provided as the center of the view. But as Web
+Mercator is a metric projection, you are currently telling OpenLayers that the
+center shall be some meters (~77m and ~39m respectively) away from `[0, 0]`. In
+the Web Mercator projection the coordinate is right in the gulf of guinea.
+
+The solution is easy: Provide the coordinates projected into Web Mercator.
+OpenLayers has some helpful utility methods to assist you:
+
+```javascript
+var washingtonLonLat = [-77.036667, 38.895];
+var washingtonWebMercator = ol.proj.fromLonLat(washingtonLonLat);
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: washingtonWebMercator,
+    zoom: 8
+  })
+});
+```
+
+The method `ol.proj.fromLonLat()` is available from version 3.5 onwards.
+
+If you told OpenLayers about a custom projection (see above), you can use the
+following method to transform a coordinate from WGS84 to your projection:
+
+```javascript
+// assuming that OpenLayers knows about EPSG:21781, see above
+var swissCoord = ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
+```
+
+
+## Why is the order of a coordinate [lon,lat], and not [lat,lon]?
+
+So you want to center your map on a certain place on the earth and obviously you
+need to have its coordinates for this. Let's assume you want your map centered
+on Schladming, a beautiful place in Austria. Head over to the wikipedia
+page for [Schladming](http://en.wikipedia.org/wiki/Schladming). In the top-right
+corner there is a link to [GeoHack](http://tools.wmflabs.org/geohack/geohack.php?pagename=Schladming&params=47_23_39_N_13_41_21_E_type:city(4565)_region:AT-6),
+which effectively tells you the coordinates are:
+
+    WGS84:
+    47° 23′ 39″ N, 13° 41′ 21″ E
+    47.394167, 13.689167
+
+So the next step would be to put the decimal coordinates into an array and use
+it as center:
+
+```javascript
+var schladming = [47.394167, 13.689167]; // caution partner, read on...
+// since we are using OSM, we have to transform the coordinates...
+var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: schladmingWebMercator,
+    zoom: 9
+  })
+});
+```
+
+Running the above example will possibly surprise you, since we are not centered
+on Schladming, Austria, but instead on Abyan, a region in Yemen (possibly also a
+nice place). So what happened?
+
+Many people mix up the order of longitude and latitude in a coordinate array.
+Don't worry if you get it wrong at first, many OpenLayers developers have to
+think twice about whether to put the longitude or the latitude first when they
+e.g. try to change the map center.
+
+Ok, then let's flip the coordinates:
+
+```javascript
+var schladming = [13.689167, 47.394167]; // longitude first, then latitude
+// since we are using OSM, we have to transform the coordinates...
+var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: schladmingWebMercator,
+    zoom: 9
+  })
+});
+```
+
+Schladming is now correctly displayed in the center of the map.
+
+So when you deal with EPSG:4326 coordinates in OpenLayers, put the longitude
+first, and then the latitude. This behaviour is the same as we had in OpenLayers
+2, and it actually makes sense because of the natural axis order in WGS84.
+
+If you cannot remember the correct order, just have a look at the method name
+we used: `ol.proj.fromLonLat`; even there we hint that we expect longitude
+first, and then latitude.
+
+
+## Why aren't there any features in my source?
+
+Suppose you want to load a KML file and display the contained features on the
+map. Code like the following could be used:
+
+```javascript
+var vector = new ol.layer.Vector({
+  source: new ol.source.KML({
+    projection: 'EPSG:3857',
+    url: 'data/kml/2012-02-10.kml'
+  })
+});
+```
+
+You may ask yourself how many features are in that KML, and try something like
+the following:
+
+```javascript
+var vector = new ol.layer.Vector({
+  source: new ol.source.KML({
+    projection: 'EPSG:3857',
+    url: 'data/kml/2012-02-10.kml'
+  })
+});
+var numFeatures = vector.getSource().getFeatures().length;
+console.log("Count right after construction: " + numFeatures);
+```
+
+This will log a count of `0` features to be in the source. This is because the
+loading of the KML-file will happen in an asynchronous manner. To get the count
+as soon as possible (right after the file has been fetched and the source has
+been populated with features), you should use an event listener function on the
+`source`:
+
+```javascript
+vector.getSource().on('change', function(evt){
+  var source = evt.target;
+  if (source.getState() === 'ready') {
+    var numFeatures = source.getFeatures().length; 
+    console.log("Count after change: " + numFeatures);
+  }
+});
+```
+
+This will correctly report the number of features, `1119` in that particular
+case.
+
+
+## How do I force a re-render of the map?
+
+Usually the map is automatically re-rendered, once a source changes (for example
+when a remote source has loaded).
+
+If you actually want to manually trigger a rendering, you could use
+
+```javascript
+map.render();
+```
+
+...or its companion method
+
+```javascript
+map.renderSync();
+```
+
+
+## How do I create a custom build of OpenLayers?
+
+Please refer to [this blog post](http://boundlessgeo.com/2014/10/openlayers-custom-builds-revisited/)
+which explains how to create a custom build of OpenLayers with just those parts
+included that you want.
+
+
+## Do I need to write my own code using Closure library?
+
+OpenLayers is built on top of the [Google Closure JavaScript
+library](https://developers.google.com/closure/library/), but this
+does not mean that you must use that library in your application code.
+
+OpenLayers should play well with all sorts of JavaScript libraries out there,
+and you are in no way forced to use a specific one. Choose one that looks
+right for you.
+
+
+## Do I need to compress my code with Closure compiler?
+
+No, you don't need to do compress your code with the [Google Closure
+compiler](https://developers.google.com/closure/compiler/).
+
+It may be a good choice though, because when your application code and the
+OpenLayers source code is compiled together using closure compiler, the
+resulting build will most probably be the smallest in terms of byte-size. For
+more details refer to [this tutorial](compile-application.md).
+
+If you don't want to use the closure compiler, or you can't, you are not at all
+forced to use it.
+
+

doc/index.hbs

@@ -12,3 +12,7 @@ For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutor
 Make sure to also check out the [OpenLayers 3 workshop](../../../ol3-workshop/).
 
 Find additional reference material in the [API docs](../apidoc).
+
+# Questions
+
+If you cannot find an answer in the documentation, you can ask your question on [stackoverflow using the tag 'openlayers-3'](http://stackoverflow.com/questions/tagged/openlayers-3).

doc/tutorials/browserify.md

@@ -0,0 +1,89 @@
+---
+title: Basic project setup using NPM and Browserify
+layout: doc.hbs
+---
+
+# Introduction
+
+When going beyond modifying existing examples you might be looking for a
+way to setup your own code with dependency management together with external
+dependencies like OpenLayers 3.
+
+This tutorial serves as a suggested project setup using NPM and Browserify
+for the most basic needs. There are several other options and in particular
+you might be interested in 
+[compiling your own code together with OpenLayers 3](closure.html).
+
+## Initial steps
+
+Create a new empty directory for your project and navigate to it by running
+`mkdir new-project && cd new-project`. Initialize your project using `npm init`
+and answer the questions asked.
+
+At this point you can ask NPM to add required dependencies by running
+`npm install --save-dev openlayers browserify watchify uglify-js`. Watchify and
+Uglify will be used to monitor for changes and to build into a minified
+bundle.
+
+## Application code and index.html
+
+Place your application code in `index.js`. Here is a simple starting point:
+
+```js
+var ol = require('openlayers');
+ 
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+```
+
+You will also need an `ìndex.html` file that will use your bundle. Here is a simple
+example:
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Using Browserify with OpenLayers</title>
+    <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css" type="text/css">
+    <style>
+      #map {
+        width: 400px;
+        height: 250px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
+```
+
+## Creating a bundle
+
+With simple scripts you can introduce the commands `npm run build` and `npm start` to
+manually build your bundle and watch for changes, respectively. Add the following
+to the script section in `package.json`:
+
+```json
+"scripts": {
+  "start": "watchify index.js --outfile bundle.js",
+  "build": "browserify index.js | uglifyjs --compress --output bundle.js"
+}
+```
+
+Note that `bundle.js` will contain your application code and all dependencies
+used in your application, in this case the official full build of OpenLayers 3.
+If you only need parts of OpenLayers 3 you can create
+[custom builds](../../builder).

doc/tutorials/closure.md

@@ -0,0 +1,337 @@
+---
+title: Compiling Application with Closure Compiler
+layout: doc.hbs
+---
+
+# Compiling Application with Closure Compiler
+
+The OpenLayers 3 code uses the Closure Library, and it is compiled with the
+Closure Compiler. Using OpenLayers 3 in an application does not require using
+Closure. But using Closure in an OpenLayers 3 application is possible. And this
+is what this tutorial is about.
+
+This tutorial will teach you how to set up an OpenLayers 3 application based on
+the [`closure-util`](https://github.com/openlayers/closure-util) node package,
+which provides utilities for working with Closure. Using `closure-util` is one
+way to use Closure in a web application, but there are others. This tutorial
+just covers the "`closure-util`" way.
+
+The `closure-util` documentation is available on the [`closure-util` readme
+page](https://github.com/openlayers/closure-util/blob/master/readme.md). You
+don't need to read the `closure-util` documentation to follow this tutorial,
+but it's available in `closure-util`'s [readme
+file](https://github.com/openlayers/closure-util/blob/master/readme.md) if you
+need it.
+
+Also, the sample application built in this tutorial is
+[available](https://github.com/openlayers/openlayers-closure-application) on
+GitHub.
+
+## Advantages of using Closure
+
+This tutorial will show you how to use the Closure Compiler to compile an
+application and OpenLayers 3 together. Compiling the application code together
+with the OpenLayers 3 code has a number of advantages.
+
+First of all, it allows you to only "pay" for the OpenLayers 3 code your
+application uses, as the compiler will exclude the OpenLayers 3 code that the
+application doesn't use. And there is no need to write and maintain a list of
+"exports", which is necessary when creating custom builds of OpenLayers 3.
+
+Also, compiling the application and OpenLayers 3 together allows using
+OpenLayers 3 functions and objects that are not part of the official OpenLayers
+3 API. Using non-API functions and objects may be risky, but it is mitigated by
+the fact that the compiler will complain if you use functions or objects
+that are not in OpenLayers 3 anymore.
+
+## Setting up the Application
+
+First, create a directory for the application. We will name that directory
+`openlayers-closure-application` in this tutorial.
+
+    $ mkdir openlayers-closure-application
+
+Now change to that directory:
+
+    $ cd openlayers-closure-application
+
+Our application will be a `node` application, and the `openlayers` and
+`closure-util` node packages will be downloaded from the node package registry
+using the `npm` command line tool.
+
+So we're going to create a `package.json` file for the application, which every
+node application includes. This file basically includes metadata for the
+application.
+
+Create the application's `package.json` file:
+
+    $ npm init
+
+You can pretty much use the default answers to the questions `npm init` asks
+you.
+
+Now install OpenLayers 3 using:
+
+    $ npm install openlayers --save
+
+The `--save` flag persists the `openlayers` dependency in the application's
+`package.json` file. You can edit `package.json` to verify that the dependency
+was added.
+
+`closure-util` is a dependency of the `openlayers` package, so it should have
+been installed with `openlayers`. Use the following to verify that
+`closure-util` is installed:
+
+    $ ./node_modules/openlayers/node_modules/.bin/closure-util
+
+    command argument is required
+
+    Usage: node closure-util <command> [options]
+
+    command     
+      update-compiler     Update the Compiler
+      update-library      Update the Library
+      update              Update both the Library and the Compiler
+      build               Build with Closure Compiler
+      serve               Start the development server
+
+    Options:
+       -l LEVEL, --loglevel LEVEL   Log level  [info]
+
+
+## Create an OpenLayers 3 map
+
+You're now going to create a JavaScript file that creates an OpenLayers 3 map.
+This is the file that we will define the application's entry point.
+
+First of all create an `src` directory at the root of the application:
+
+    $ mkdir src
+
+Now add a file `main.js` to `src`, with the following content:
+
+```js
+goog.provide('app');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+/**
+ * @type {ol.Map}
+ */
+app.map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 4
+  })
+});
+```
+
+`goog.provide('app')` creates the namespace `app` for the application. The
+`goog.require` statements that follow define the OpenLayers constructors and
+namespaces that the application uses. The rest of the code just creates the
+OpenLayers map as you would do in any OpenLayers application.
+
+## Compiling the Application
+
+We're now going to compile the application and OpenLayers 3 together, using the
+Closure Compiler and `closure-util`. For this we need to create a JSON config
+file, that we will then pass as an input file to the `closure-util` command.
+
+The minimum config file looks like this:
+
+```json
+{
+  "lib": [
+    "node_modules/openlayers/src/**/*.js",
+    "node_modules/openlayers/build/ol.ext/**/*.js",
+    "src/**/*.js"
+  ],
+  "compile": {
+    "closure_entry_point": "app",
+    "externs": [
+      "node_modules/openlayers/externs/bingmaps.js",
+      "node_modules/openlayers/externs/closure-compiler.js",
+      "node_modules/openlayers/externs/geojson.js",
+      "node_modules/openlayers/externs/proj4js.js",
+      "node_modules/openlayers/externs/tilejson.js",
+      "node_modules/openlayers/externs/topojson.js"
+    ],
+    "define": [
+      "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
+      "goog.dom.ASSUME_STANDARDS_MODE=true",
+      "goog.json.USE_NATIVE_JSON=true",
+      "goog.DEBUG=false",
+      "ol.ENABLE_DOM=false",
+      "ol.ENABLE_WEBGL=false"
+    ],
+    "js": [
+      "node_modules/openlayers/externs/olx.js",
+      "node_modules/openlayers/externs/oli.js"
+    ],
+    "jscomp_off": [
+      "unknownDefines"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "compilation_level": "ADVANCED",
+    "warning_level": "VERBOSE",
+    "output_wrapper": "(function(){%output%})();",
+    "use_types_for_optimization": true
+  }
+}
+```
+
+Create a `config.json` file with the above content at the root of the
+application directory.
+
+We can now use `closure-util` to compile the code:
+
+    $ ./node_modules/openlayers/node_modules/.bin/closure-util build config.json app.js
+
+The resulting `app.js` file, which you can view in your editor if you're
+curious, includes a minified version of the application code (`main.js`), and
+the OpenLayers 3 code that the application code uses.
+
+Here is a version of `config.json` with more compilation checks enabled:
+
+```json
+{
+  "lib": [
+    "node_modules/openlayers/src/**/*.js",
+    "node_modules/openlayers/build/ol.ext/**/*.js",
+    "src/**/*.js"
+  ],
+  "compile": {
+    "closure_entry_point": "app",
+    "externs": [
+      "node_modules/openlayers/externs/bingmaps.js",
+      "node_modules/openlayers/externs/closure-compiler.js",
+      "node_modules/openlayers/externs/geojson.js",
+      "node_modules/openlayers/externs/proj4js.js",
+      "node_modules/openlayers/externs/tilejson.js",
+      "node_modules/openlayers/externs/topojson.js"
+    ],
+    "define": [
+      "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
+      "goog.dom.ASSUME_STANDARDS_MODE=true",
+      "goog.json.USE_NATIVE_JSON=true",
+      "goog.DEBUG=false",
+      "ol.ENABLE_DOM=false",
+      "ol.ENABLE_WEBGL=false"
+    ],
+    "js": [
+      "node_modules/openlayers/externs/olx.js",
+      "node_modules/openlayers/externs/oli.js"
+    ],
+    "jscomp_error": [
+      "accessControls",
+      "ambiguousFunctionDecl",
+      "checkEventfulObjectDisposal",
+      "checkRegExp",
+      "checkStructDictInheritance",
+      "checkTypes",
+      "checkVars",
+      "const",
+      "constantProperty",
+      "deprecated",
+      "duplicateMessage",
+      "es3",
+      "es5Strict",
+      "externsValidation",
+      "fileoverviewTags",
+      "globalThis",
+      "internetExplorerChecks",
+      "invalidCasts",
+      "misplacedTypeAnnotation",
+      "missingGetCssName",
+      "missingProperties",
+      "missingProvide",
+      "missingRequire",
+      "missingReturn",
+      "newCheckTypes",
+      "nonStandardJsDocs",
+      "suspiciousCode",
+      "strictModuleDepCheck",
+      "typeInvalidation",
+      "undefinedNames",
+      "undefinedVars",
+      "uselessCode",
+      "visibility"
+    ],
+    "jscomp_off": [
+      "unknownDefines"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "compilation_level": "ADVANCED",
+    "warning_level": "VERBOSE",
+    "output_wrapper": "(function(){%output%})();",
+    "use_types_for_optimization": true
+  }
+}
+```
+
+## Create an HTML file for the Application
+
+You can now go ahead and create a simple HTML for the application. Create
+a `index.html` file with the following content at the root the application
+directory:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" type="text/css">
+    <title>Simple example</title>
+    <style>
+      #map {
+        width: 600px;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="app.js" type="text/javascript"></script>
+  </body>
+</html>
+```
+
+Note that the page includes a `script` tag referencing the `app.js` file,
+which is the file resuted from the compilation.
+
+You are done!
+
+## Run Application in Debug Mode
+
+As a bonus, we're going to show how to use `closure-util` to run the
+application in "debug" mode, where the original application and OpenLayers
+scripts are loaded one by one in the page.
+
+Start the `closure-util` development server:
+
+    $ ./node_modules/openlayers/node_modules/.bin/closure-util serve config.json
+
+Now change the `script` tag to the following in the `index.html` file:
+
+```html
+      <script src="@?main=src/main.js" type="text/javascript"></script>
+```
+
+Reload the page in your browser and you should see that scripts are now loaded
+individually, making debugging much easier.

doc/tutorials/custom-builds.md

@@ -0,0 +1,234 @@
+---
+title: Custom builds
+layout: doc.hbs
+---
+
+# Creating custom builds
+
+OpenLayers 3 is a big library providing a lot of functionality. So it is unlikely that an application will need and use all the functionality OpenLayers 3 provides. This is why creating application-specific OpenLayers 3 builds, with just the functionality your application needs, is often a good idea.
+
+An alternative to creating custom builds is to compile your application code together with OpenLayers 3. See the [Compiling Application with Closure Compiler](closure.html) tutorial for more information.
+
+This particular tutorial explains how to create custom builds of OpenLayers 3.
+
+## Requirements
+
+OpenLayers 3's build tools use Node and Java, so you need to have Node and Java installed on your machine. You can run `node --version` and `java -version` to test that Node and Java are installed, respectively.
+
+## Download OpenLayers
+
+Obviously, creating a custom build requires the OpenLayers 3 source and specific build scripts.
+
+To get the OpenLayers 3 source and the build scripts you can clone the `ol3` [repository](https://github.com/openlayers/ol3), or you can download one of the release archives. You can also download the `openlayers` Node package from the Node package registry, using NPM (the Node Package Manager). This is the method we are going to use in this tutorial.
+
+Create a directory:
+
+    $ mkdir openlayers
+
+Download the OpenLayers 3 distribution using NPM:
+
+    $ npm install openlayers
+
+This will download the latest stable version of OpenLayers 3, and install it under `node_modules`. You can list the content of `node_modules` to verify that it effectively contains a directory named "openlayers".
+
+The Node packages onto which the `openlayers` package depends are installed under `node_modules/openlayers/node_modules`. That directory should, for example, include `closure-util`, which is the utility library OpenLayers 3 uses for Closure.
+
+You should now have everything you need to create custom builds of OpenLayers 3!
+
+## Create a build configuration file
+
+Creating a custom build requires writing a build configuration file. The format of build configuration files is JSON. Here is a simple example of a build configuration file:
+
+```json
+{
+  "exports": [
+    "ol.Map",
+    "ol.View",
+    "ol.control.defaults",
+    "ol.layer.Tile",
+    "ol.source.OSM"
+  ],
+  "compile": {
+    "externs": [
+      "externs/bingmaps.js",
+      "externs/closure-compiler.js",
+      "externs/geojson.js",
+      "externs/oli.js",
+      "externs/olx.js",
+      "externs/proj4js.js",
+      "externs/tilejson.js",
+      "externs/topojson.js"
+    ],
+    "define": [
+      "goog.array.ASSUME_NATIVE_FUNCTIONS=true",
+      "goog.dom.ASSUME_STANDARDS_MODE=true",
+      "goog.json.USE_NATIVE_JSON=true",
+      "goog.DEBUG=false"
+    ],
+    "jscomp_off": [
+      "unknownDefines"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "compilation_level": "ADVANCED_OPTIMIZATIONS",
+    "use_types_for_optimization": true,
+    "manage_closure_dependencies": true
+  }
+}
+```
+
+Create a file named `ol-custom.json` with that content, and save it under the `node_modules/openlayers/build` directory. (You can save it to any location really.)
+
+The most relevant part of this configuration object is the `"exports"` array. This array declares the functions/constructors you use in your JavaScript code. For example, the above configuration file is what you'd use for the following JavaScript code:
+
+```js
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  controls: ol.control.defaults({
+    attributionOptions: {
+      collapsible: false
+    }
+  }),
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 4
+  })
+});
+```
+
+Note that this JavaScript code corresponds to OpenLayers 3's [`simple`](http://openlayers.org/en/master/examples/simple.html) example.
+
+You are now ready to create your first OpenLayers 3 build. Use the following command to create the build:
+
+    $ cd node_modules/openlayers
+    $ node tasks/build.js build/ol-custom.json build/ol-custom.js
+
+The build command may take some time, but it should end with the following output in the console:
+
+    info ol Parsing dependencies
+    info ol Compiling 364 sources
+
+The build command should have created an `ol-custom.js` file in the `node_modules/openlayers/build` directory. You can verify that the file was created. You can even open it in your editor if you're curious.
+
+As a test, you can use the following HTML file to verify that your custom build works as expected:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>OpenLayers 3 example</title>
+    <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
+    <style>
+      #map {
+        width: 600px;
+        height: 400px;
+      }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script src="node_modules/openlayers/build/ol-custom.js"></script>
+    <script>
+    var map = new ol.Map({
+      target: 'map',
+      layers: [
+        new ol.layer.Tile({
+          source: new ol.source.OSM()
+        })
+      ],
+      view: new ol.View({
+        center: [0, 0],
+        zoom: 4
+      })
+    });
+    </script>
+</body>
+</html>
+```
+
+## More on the config file
+
+### `define`'s
+
+Closure allows you to define constants that can be set at compile time. The `define` config property above sets four `goog` properties for the Closure library. The OpenLayers 3 code also has defined values you can set.
+
+Setting some of these to `false` means that the portions of the code relating to this setting become "dead", i.e. are never executed. As Closure Compiler's `ADVANCED` mode removes dead code, this makes the size of the advanced compiled file smaller.
+
+You might have noticed that the build file you've just created is considerably smaller than the full build, but it can be reduced further. This is because all three renderers and all layer types are included by default. We only need one renderer, and only need the tile layer, so can exclude the others by setting these properties with `define`s. So add the following to the define section of the config above:
+```
+      "ol.ENABLE_DOM=false",
+      "ol.ENABLE_WEBGL=false",
+      "ol.ENABLE_PROJ4JS=false",
+      "ol.ENABLE_IMAGE=false",
+      "ol.ENABLE_VECTOR=false",
+```
+
+and re-run the build script. The build size should now be smaller.
+
+### Externs
+
+The Closure documentation explains that "externs" are for external names used in the code being compiled. The compiler includes externs for built-ins such as `document`. The `externs` directory of the OpenLayers 3 code includes files for all those used in some part of the library. For example, if you use Bing Maps, you should include the Bing externs file in the `externs` section of the config file.
+
+`oli.js` and `olx.js` are externs files for the OpenLayers 3 API. For examples `olx.js` includes extern definitions for OpenLayers 3's constructor options. You should always use these two files as externs when creating custom builds.
+
+### Other compiler options
+
+There are a couple of other compiler options in the config file above. `manage_closure_dependencies` should always be used. `use_types_for_optimization` should be used for better compression rates.
+
+You can specify any of the other compiler options here as needed, such as the renaming reports, output manifest, or source maps. There is a full list of available options in [closure-util](https://github.com/openlayers/closure-util/blob/master/compiler-options.txt).
+
+Note that `build.js` currently requires you to enter an output file and will write the output from the compiler to it; it does not use the `js_output_file` compiler option. If you specify this in the config file, there will be no compiler output, so `build.js`'s output file will be empty.
+
+## A more complicated example
+
+Now let's try a more complicated example: [`heatmaps-earthquakes`](http://openlayers.org/en/master/examples/heatmap-earthquakes.html). The build configuration file looks like this:
+
+```json
+{
+  "exports": [
+    "ol.layer.Heatmap",
+    "ol.source.KML",
+    "ol.layer.Heatmap#getSource",
+    "ol.source.KML#on",
+    "ol.source.VectorEvent#feature",
+    "ol.Feature#get",
+    "ol.Feature#set",
+    "ol.layer.Tile",
+    "ol.source.Stamen",
+    "ol.Map",
+    "ol.View"
+  ],
+  "compile": {
+    "externs": [
+      "externs/olx.js",
+      "externs/oli.js"
+    ],
+    "define": [
+      "ol.ENABLE_DOM=false",
+      "ol.ENABLE_WEBGL=false",
+      "ol.ENABLE_PROJ4JS=false",
+      "ol.ENABLE_IMAGE=false",
+      "goog.dom.ASSUME_STANDARDS_MODE=true",
+      "goog.DEBUG=false"
+    ],
+    "compilation_level": "ADVANCED_OPTIMIZATIONS",
+    "use_types_for_optimization": true,
+    "manage_closure_dependencies": true
+  }
+}
+```
+
+The exports are given here in the order in which they occur in the `heatmaps-earthquakes` example's JavaScript code. In this example we not only use the `ol.` functions and constructors, but also `prototype` methods where the `ol` namespace is not directly used. In the code, we have for example `vector.getSource().on()`. This means we are using the `getSource` method of `layer.Heatmap` and the `on` method of `source.KML`, so this is what has to be exported. Similarly, `event.feature.get()` means we are using the `feature` property of `source.VectorEvent` and the `get` method of `Feature`. If any of these names are left out, the compile will complete successfully, but the missing names will be obfuscated and you will get a 'property undefined' error when you try and run the script.
+
+As this example uses a vector layer it is necessary to remove `"ol.ENABLE_VECTOR=false"` in the `define` section of the configuration.
+
+## Conclusion
+
+This tutorial should have given you the information you need to create custom builds, i.e. builds tailored to your application. See the [tasks readme](https://github.com/openlayers/ol3/tree/master/tasks/readme.md) for more information on the build scripts and the properties you can use in the build configuration file.

doc/tutorials/index.hbs

@@ -5,4 +5,8 @@ layout: doc.hbs
 
 # Tutorials
 
-We'll be putting together a more comprehensive set of tutorials here.  For now, you can take a look at the [introduction](introduction.html) and [basic concepts](concepts.html) tutorial.  Stay tuned for more!
+* [Introduction to OpenLayers 3](introduction.html)
+* [Basic Concepts](concepts.html)
+* [Create Custom Builds](custom-builds.html)
+* [Bundle Application and OpenLayers using Browserify](browserify.html)
+* [Compile Application and OpenLayers together](closure.html)

doc/tutorials/introduction.md

@@ -39,6 +39,4 @@ Class namespaces, such as `ol.layer` have a base class type with the same name,
 
 Source files are similarly organised, with a directory for each class namespace. Names are however all lower-case, and the subclasses repeat the superclass type in their name, for example, `ol/layer/vectorlayer.js`.
 
-The naming structure means that there are sometimes 2 objects with the same name but different initial, such as `ol.feature`, a simple object with static functions to be used with features, and `ol.Feature`, a class used to instantiate new features. These two objects are however stored in the same file, in this case, `ol/feature.js`
-
-OL3 follows the convention that the names of private properties and methods, that is, those that are not part of the API, end in an underscore. In general, instance properties are private and accessed using accessors.
+OL3 follows the convention that the names of private properties and methods, that is, those that are not part of the API, end in an underscore. In general, instance properties are private and accessed using accessors.

examples/accessible.css

@@ -0,0 +1,16 @@
+a.skiplink {
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+a.skiplink:focus {
+  clip: auto;
+  height: auto;
+  width: auto;
+  background-color: #fff;
+  padding: 0.3em;
+}

examples/accessible.html

@@ -1,72 +1,20 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Accessibility example</title>
-    <style>
-      a.skiplink {
-        position: absolute;
-        clip: rect(1px, 1px, 1px, 1px);
-        padding: 0;
-        border: 0;
-        height: 1px;
-        width: 1px;
-        overflow: hidden;
-      }
-      a.skiplink:focus {
-        clip: auto;
-        height: auto;
-        width: auto;
-        background-color: #fff;
-        padding: 0.3em;
-      }
-    </style>
-  </head>
-  <body>
+---
+template: example.html
+title: Accessibility example
+shortdesc: Example of an accessible map.
+docs: >
+  This page's `map` element has its `tabindex` attribute set to `"0"`, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
 
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png" alt=""> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
 
-    <div class="container-fluid">
+  Clicking on the "Zoom in" and "Zoom out" buttons below the map zooms the map in and out. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.
 
-      <div class="row-fluid">
-        <div class="span12">
-          <a class="skiplink" href="#map">Go to map</a>
-          <div id="map" class="map" tabindex="0"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Accessibility example</h4>
-          <p id="shortdesc">Example of an accessible map.</p>
-          <div id="docs">
-            <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
-            <p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
-            <p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">accessibility, tabindex</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=accessible" type="text/javascript"></script>
-
-  </body>
-</html>
+tags: "accessibility, tabindex"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <a class="skiplink" href="#map">Go to map</a>
+    <div id="map" class="map" tabindex="0"></div>
+    <button id="zoom-out">Zoom out</button>
+    <button id="zoom-in">Zoom in</button>
+  </div>
+</div>

examples/accessible.js

@@ -11,7 +11,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
@@ -24,9 +24,14 @@ var map = new ol.Map({
   })
 });
 
-jQuery('#map').after('<button type="button" ' +
-    'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
-    'Zoom out</button>');
-jQuery('#map').after('<button type="button" ' +
-    'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
-    'Zoom in</button>');
+document.getElementById('zoom-out').onclick = function() {
+  var view = map.getView();
+  var zoom = view.getZoom();
+  view.setZoom(zoom - 1);
+};
+
+document.getElementById('zoom-in').onclick = function() {
+  var view = map.getView();
+  var zoom = view.getZoom();
+  view.setZoom(zoom + 1);
+};

examples/animation.html

@@ -1,65 +1,27 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Animation example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-        <div class="span12">
-          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
-          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
-          <button id="rotate-around-rome">Rotate around Rome</button>
-          <button id="pan-to-london">Pan to London</button>
-          <button id="elastic-to-moscow">Elastic to Moscow</button>
-          <button id="bounce-to-istanbul">Bounce to Istanbul</button>
-          <button id="spin-to-rome">Spin to Rome</button>
-          <button id="fly-to-bern">Fly to Bern</button>
-          <button id="spiral-to-madrid">Spiral to Madrid</button>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Animation example</h4>
-          <p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
-          <div id="docs">
-            <p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">animation</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=animation" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Animation example
+shortdesc: Demonstrates animated pan, zoom, and rotation.
+docs: >
+  This example shows how to use the beforeRender function on the Map to run one
+  or more animations.
+tags: "animation"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span12">
+    <button id="rotate-left"><i class="icon-arrow-left"></i></button>
+    <button id="rotate-right"><i class="icon-arrow-right"></i></button>
+    <button id="rotate-around-rome">Rotate around Rome</button>
+    <button id="pan-to-london">Pan to London</button>
+    <button id="elastic-to-moscow">Elastic to Moscow</button>
+    <button id="bounce-to-istanbul">Bounce to Istanbul</button>
+    <button id="spin-to-rome">Spin to Rome</button>
+    <button id="fly-to-bern">Fly to Bern</button>
+    <button id="spiral-to-madrid">Spiral to Madrid</button>
+  </div>
+</div>

examples/animation.js

@@ -34,12 +34,12 @@ function elastic(t) {
   return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
 }
 
-var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
-var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
-var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
-var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
-var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
-var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
+var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
+var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
+var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
+var rome = ol.proj.fromLonLat([12.5, 41.9]);
+var bern = ol.proj.fromLonLat([7.4458, 46.95]);
+var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);
 
 var view = new ol.View({
   // the view's initial state
@@ -54,7 +54,10 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
+  // Improve user experience by loading tiles while animating. Will make
+  // animations stutter on mobile or slow devices.
+  loadTilesWhileAnimating: true,
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({

examples/arcgis-tiled.html

@@ -0,0 +1,16 @@
+---
+template: example.html
+title: Tiled ArcGIS MapServer example
+shortdesc: Example of a tiled ArcGIS layer.
+docs: >
+  This example shows how to use an ArcGIS REST MapService as tiles.
+  This source type supports Map and Image Services. For cached ArcGIS
+  services, better performance is available by using
+  <code>ol.source.XYZ</code> instead.
+tags: arcgis, tile, tilelayer"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/arcgis-tiled.js

@@ -0,0 +1,28 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileArcGISRest');
+
+var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+    'Specialty/ESRI_StateCityHighway_USA/MapServer';
+
+var layers = [
+  new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  }),
+  new ol.layer.Tile({
+    extent: [-13884991, 2870341, -7455066, 6338219],
+    source: new ol.source.TileArcGISRest({
+      url: url
+    })
+  })
+];
+var map = new ol.Map({
+  layers: layers,
+  target: 'map',
+  view: new ol.View({
+    center: [-10997148, 4569099],
+    zoom: 4
+  })
+});

examples/attributions.html

@@ -1,51 +1,15 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Attributions example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Attributions example</h4>
-          <p id="shortdesc">Example of a attributions visibily change on map resize, to collapse them on small maps.</p>
-          <div id="docs">
-            <p>See the <a href="attributions.js" target="_blank">attributions.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">attributions, openstreetmap</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=attributions" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Attributions example
+shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
+docs: >
+  When the map gets too small because of a resize, the attribution will be collapsed.
+  This is because the <code>collapsible</code> option is set to true if the width
+  of the map gets smaller than 600 pixels.
+tags: "attributions, openstreetmap"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/attributions.js

@@ -15,7 +15,7 @@ var map = new ol.Map({
     })
   ],
   controls: ol.control.defaults({ attribution: false }).extend([attribution]),
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],
@@ -29,5 +29,5 @@ function checkSize() {
   attribution.setCollapsed(small);
 }
 
-$(window).on('resize', checkSize);
+window.addEventListener('resize', checkSize);
 checkSize();

examples/bind-input.html

@@ -1,92 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Bind HTML input example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span4">
-          <h4 id="title">Bind HTML input example</h4>
-          <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
-          <div id="docs">
-            <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
-            <p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
-            <div id="no-webgl" class="alert alert-warning" style="display: none">
-              <h4>Warning!</h4>
-              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
-              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
-            </div>
-          </div>
-          <div id="tags">input, bind, openstreetmap</div>
-        </div>
-
-        <div class="span4">
-          <form class="">
-            <fieldset>
-              <legend>Layer</legend>
-              <label class="checkbox" for="visible">
-                <input id="visible" type="checkbox"/>visibility
-              </label>
-              <label>opacity</label>
-              <input id="opacity" type="range" min="0" max="1" step="0.01"/>
-            </fieldset>
-            <fieldset id="webgl" style="display: none">
-              <label>hue</label>
-              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-              <label>saturation</label>
-              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
-              <label>contrast</label>
-              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
-              <label>brightness</label>
-              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
-            </fieldset>
-          </form>
-        </div>
-
-        <div class="span4">
-          <form class="">
-            <fieldset>
-              <legend>View</legend>
-              <label>rotation</label>
-              <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-              <label>resolution</label>
-              <input id="resolution" type="number" min="0" step="250"/>
-            </fieldset>
-          </form>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=bind-input" type="text/javascript"></script>
-
-  </body>
-</html>

examples/bind-input.js

@@ -1,69 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.control');
-goog.require('ol.dom.Input');
-goog.require('ol.has');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
-
-
-function checkWebGL(evt) {
-  document.getElementById('no-webgl').style.display =
-      ol.has.WEBGL ? 'none' : '';
-  document.getElementById('has-webgl').style.display =
-      ol.has.WEBGL && !evt.glContext ? '' : 'none';
-  document.getElementById('webgl').style.display =
-      evt.glContext ? '' : 'none';
-}
-
-var layer = new ol.layer.Tile({
-  source: new ol.source.OSM()
-});
-layer.once('precompose', checkWebGL);
-
-var view = new ol.View({
-  center: [0, 0],
-  zoom: 2
-});
-
-var map = new ol.Map({
-  layers: [layer],
-  renderer: exampleNS.getRendererFromQueryString(),
-  target: 'map',
-  controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
-      collapsible: false
-    })
-  }),
-  view: view
-});
-
-var visible = new ol.dom.Input(document.getElementById('visible'));
-visible.bindTo('checked', layer, 'visible');
-
-var opacity = new ol.dom.Input(document.getElementById('opacity'));
-opacity.bindTo('value', layer, 'opacity')
-    .transform(parseFloat, String);
-
-var hue = new ol.dom.Input(document.getElementById('hue'));
-hue.bindTo('value', layer, 'hue')
-    .transform(parseFloat, String);
-
-var saturation = new ol.dom.Input(document.getElementById('saturation'));
-saturation.bindTo('value', layer, 'saturation')
-    .transform(parseFloat, String);
-
-var contrast = new ol.dom.Input(document.getElementById('contrast'));
-contrast.bindTo('value', layer, 'contrast')
-    .transform(parseFloat, String);
-
-var brightness = new ol.dom.Input(document.getElementById('brightness'));
-brightness.bindTo('value', layer, 'brightness')
-    .transform(parseFloat, String);
-
-
-var rotation = new ol.dom.Input(document.getElementById('rotation'));
-rotation.bindTo('value', view, 'rotation').transform(parseFloat, String);
-
-var resolution = new ol.dom.Input(document.getElementById('resolution'));
-resolution.bindTo('value', view, 'resolution').transform(parseFloat, String);

examples/bing-maps.html

@@ -1,60 +1,20 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Bing Maps example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-
-          <select id="layer-select">
-            <option value="Aerial">Aerial</option>
-            <option value="AerialWithLabels" selected>Aerial with labels</option>
-            <option value="Road">Road</option>
-            <option value="collinsBart">Collins Bart</option>
-            <option value="ordnanceSurvey">Ordnance Survey</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Bing Maps example</h4>
-          <p id="shortdesc">Example of a Bing Maps layer.</p>
-          <div id="docs">
-            <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
-            <p>See the <a href="bing-maps.js" target="_blank">bing-maps.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">bing, bing-maps</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=bing-maps" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Bing Maps example
+shortdesc: Example of a Bing Maps layer.
+docs: >
+  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
+tags: "bing, bing-maps"
+---
+ <div class="row-fluid">
+   <div class="span12">
+     <div id="map" class="map"></div>
+     <select id="layer-select">
+       <option value="Aerial">Aerial</option>
+       <option value="AerialWithLabels" selected>Aerial with labels</option>
+       <option value="Road">Road</option>
+       <option value="collinsBart">Collins Bart</option>
+       <option value="ordnanceSurvey">Ordnance Survey</option>
+     </select>
+   </div>
+ </div>

examples/bing-maps.js

@@ -28,7 +28,10 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
 }
 var map = new ol.Map({
   layers: layers,
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
+  // Improve user experience by loading tiles while dragging/zooming. Will make
+  // zooming choppy on mobile or slow devices.
+  loadTilesWhileInteracting: true,
   target: 'map',
   view: new ol.View({
     center: [-6655.5402445057125, 6709968.258934638],
@@ -36,11 +39,12 @@ var map = new ol.Map({
   })
 });
 
-$('#layer-select').change(function() {
-  var style = $(this).find(':selected').val();
-  var i, ii;
-  for (i = 0, ii = layers.length; i < ii; ++i) {
-    layers[i].setVisible(styles[i] == style);
+var select = document.getElementById('layer-select');
+function onChange() {
+  var style = select.value;
+  for (var i = 0, ii = layers.length; i < ii; ++i) {
+    layers[i].setVisible(styles[i] === style);
   }
-});
-$('#layer-select').trigger('change');
+}
+select.addEventListener('change', onChange);
+onChange();

examples/box-selection.html

@@ -1,59 +1,20 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Box selection example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
+---
+template: example.html
+title: Box selection example
+shortdesc: Using a DragBox interaction to select features.
+docs: >
+  <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
+  to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
+  <p>Use <code>SHIFT+drag</code> to draw boxes.</p>
+tags: "DragBox, feature, selection, box"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+  <div class="span4 offset4 pull-right">
+    <div id="info" class="alert alert-success">
+      &nbsp;
     </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span4">
-          <h4 id="title">Box selection example</h4>
-          <p id="shortdesc">Using a DragBox interaction to select features.</p>
-          <div id="docs">
-            <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
-            to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
-            <p>Use <code>SHIFT+drag</code> to draw boxes.</p>
-            <p>See the <a href="box-selection.js" target="_blank">box-selection.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">DragBox, feature, selection, box</div>
-        </div>
-        <div class="span4 offset4">
-          <div id="info" class="alert alert-success">
-            &nbsp;
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=box-selection" type="text/javascript"></script>
-
-  </body>
-</html>
+  </div>
+</div>

examples/box-selection.js

@@ -1,20 +1,20 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.events.condition');
-goog.require('ol.interaction');
+goog.require('ol.format.GeoJSON');
 goog.require('ol.interaction.DragBox');
 goog.require('ol.interaction.Select');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.source.GeoJSON');
 goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-var vectorSource = new ol.source.GeoJSON({
-  projection: 'EPSG:3857',
-  url: 'data/geojson/countries.geojson'
+var vectorSource = new ol.source.Vector({
+  url: 'data/geojson/countries.geojson',
+  format: new ol.format.GeoJSON()
 });
 
 

examples/brightness-contrast.css

@@ -0,0 +1,7 @@
+#reset-brightness {
+  min-width: 138px;
+}
+#reset-contrast {
+  min-width: 120px;
+}
+

examples/brightness-contrast.html

@@ -1,74 +1,27 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Brightness/contrast example</title>
-    <style>
-      #reset-brightness {
-        min-width: 138px;
-      }
-      #reset-contrast {
-        min-width: 120px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
+---
+template: example.html
+title: Brightness/contrast example
+shortdesc: Example of brightness/contrast control on the client (WebGL only).
+docs: >
+  This example shows how to control brightness/contrast on the client,
+  the example is limited to WebGL.
+tags: "brightness, contrast, webgl"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <div id="no-webgl" class="alert alert-error" style="display: none">
+      This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
     </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-
-          <div id="no-webgl" class="alert alert-error" style="display: none">
-            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-          </div>
-
-          <div class="btn-group">
-            <button id="increase-brightness"><i class="icon-plus"></i></button>
-            <button id="reset-brightness">Brightness</button>
-            <button id="decrease-brightness"><i class="icon-minus"></i></button>
-          </div>
-          <div class="btn-group">
-            <button id="increase-contrast"><i class="icon-plus"></i></button>
-            <button id="reset-contrast">Contrast</button>
-            <button id="decrease-contrast"><i class="icon-minus"></i></button>
-          </div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Brightness/contrast example</h4>
-          <p id="shortdesc">Example of brightness/contrast control on the client (WebGL only).</p>
-          <div id="docs">
-            <p>See the <a href="brightness-contrast.js" target="_blank">brightness-contrast.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">brightness, contrast, webgl</div>
-        </div>
-
-      </div>
-
+    <div class="btn-group">
+      <button id="increase-brightness"><i class="icon-plus"></i></button>
+      <button id="reset-brightness">Brightness</button>
+      <button id="decrease-brightness"><i class="icon-minus"></i></button>
     </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
-
-  </body>
-</html>
+    <div class="btn-group">
+      <button id="increase-contrast"><i class="icon-plus"></i></button>
+      <button id="reset-contrast">Contrast</button>
+      <button id="decrease-contrast"><i class="icon-minus"></i></button>
+    </div>
+  </div>
+</div>

examples/button-title.css

@@ -0,0 +1,4 @@
+.tooltip-inner {
+  white-space: nowrap;
+}
+

examples/button-title.html

@@ -1,62 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <style type="text/css">
-      .tooltip-inner {
-        white-space: nowrap;
-      }
-    </style>
-    <title>ol3 custom tooltips example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-        <div class="span12">
-          <h4 id="title">Custom tooltips</h4>
-          <p id="shortdesc">
-            This example shows how to customize the buttons tooltips with
-            <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
-          </p>
-          <div id="docs">
-            <p>
-              See the <a href="button-title.js" target="_blank">button-title.js source</a> to see how this is done.
-            </p>
-          </div>
-          <div id="tags">
-            custom, tooltip
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=button-title" type="text/javascript"></script>
-
-  </body>
-
-</html>
+---
+template: example.html
+title: Custom tooltips example
+shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
+docs: >
+  This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
+tags: "custom, tooltip"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/button-title.js

@@ -9,7 +9,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [-8730000, 5930000],

examples/canvas-tiles.html

@@ -1,52 +1,14 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Canvas tiles example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Canvas tiles example</h4>
-          <p id="shortdesc">Renders tiles with coordinates for debugging.</p>
-          <div id="docs">
-            <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
-            <p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">layers, openstreetmap, canvas</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Canvas tiles example
+shortdesc: Renders tiles with coordinates for debugging.
+docs: >
+  <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not
+  OSM tile coordinates (origin top left).</p>
+tags: "layers, openstreetmap, canvas"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/canvas-tiles.js

@@ -22,7 +22,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({

examples/center.css

@@ -0,0 +1,56 @@
+.mapcontainer {
+  position: relative;
+  margin-bottom: 20px;
+}
+.map {
+  width: 1000px;
+  height: 600px;
+}
+div.ol-zoom {
+  top: 178px;
+  left: 158px;
+}
+div.ol-attribution {
+  bottom: 30px;
+  right: 50px;
+}
+.padding-top {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  width: 1000px;
+  height: 170px;
+  background: rgba(255, 255, 255, 0.5);
+}
+.padding-left {
+  position: absolute;
+  top: 170px;
+  left: 0;
+  width: 150px;
+  height: 400px;
+  background: rgba(255, 255, 255, 0.5);
+}
+.padding-right {
+  position: absolute;
+  top: 170px;
+  left: 950px;
+  width: 50px;
+  height: 400px;
+  background: rgba(255, 255, 255, 0.5);
+}
+.padding-bottom {
+  position: absolute;
+  top: 570px;
+  left: 0px;
+  width: 1000px;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.5);
+}
+.center {
+  position: absolute;
+  border: solid 1px black;
+  top: 490px;
+  left: 560px;
+  width: 20px;
+  height: 20px;
+}

examples/center.html

@@ -1,131 +1,34 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <style>
-      .mapcontainer {
-        position: relative;
-        margin-bottom: 20px;
-      }
-      .map {
-        width: 1000px;
-        height: 600px;
-      }
-      div.ol-zoom {
-        top: 178px;
-        left: 158px;
-      }
-      div.ol-attribution {
-        bottom: 30px;
-        right: 50px;
-      }
-      .padding-top {
-        position: absolute;
-        top: 0;
-        left: 0px;
-        width: 1000px;
-        height: 170px;
-        background: rgba(255, 255, 255, 0.5);
-      }
-      .padding-left {
-        position: absolute;
-        top: 170px;
-        left: 0;
-        width: 150px;
-        height: 400px;
-        background: rgba(255, 255, 255, 0.5);
-      }
-      .padding-right {
-        position: absolute;
-        top: 170px;
-        left: 950px;
-        width: 50px;
-        height: 400px;
-        background: rgba(255, 255, 255, 0.5);
-      }
-      .padding-bottom {
-        position: absolute;
-        top: 570px;
-        left: 0px;
-        width: 1000px;
-        height: 30px;
-        background: rgba(255, 255, 255, 0.5);
-      }
-      .center {
-        position: absolute;
-        border: solid 1px black;
-        top: 490px;
-        left: 560px;
-        width: 20px;
-        height: 20px;
-      }
-    </style>
-    <title>Advanced View Positioning example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png">OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12 mapcontainer">
-          <div id="map" class="map"></div>
-          <div class="padding-top"></div>
-          <div class="padding-left"></div>
-          <div class="padding-right"></div>
-          <div class="padding-bottom"></div>
-          <div class="center"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-        <div class="span12">
-          <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
-          <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
-          <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
-          <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
-          <button id="centerlausanne">Center on Lausanne</button>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Advanced View Positioning example</h4>
-          <p id="shortdesc">This example demonstrates how a map's view can be
-            adjusted so a geometry or coordinate is positioned at a specific
-            pixel location. The map above has top, right, bottom, and left
-            padding applied inside the viewport. The view's <code>fitGeometry</code> method
-            is used to fit a geometry in the view with the same padding. The
-            view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
-            at a specific pixel location (the center of the black box).</p>
-          <div id="docs">
-            <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
-            <p>See the <a href="center.js" target="_blank">center.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">center, rotation, openstreetmap</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=center" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Advanced View Positioning example
+shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
+docs: >
+  This example demonstrates how a map's view can be
+  adjusted so a geometry or coordinate is positioned at a specific
+  pixel location. The map above has top, right, bottom, and left
+  padding applied inside the viewport. The view's <code>fitGeometry</code> method
+  is used to fit a geometry in the view with the same padding. The
+  view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
+  at a specific pixel location (the center of the black box).
+  <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
+tags: "center, rotation, openstreetmap"
+---
+<div class="row-fluid">
+  <div class="span12 mapcontainer">
+    <div id="map" class="map"></div>
+    <div class="padding-top"></div>
+    <div class="padding-left"></div>
+    <div class="padding-right"></div>
+    <div class="padding-bottom"></div>
+    <div class="center"></div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span12">
+    <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
+    <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
+    <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
+    <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
+    <button id="centerlausanne">Center on Lausanne</button>
+  </div>
+</div>

examples/center.js

@@ -1,20 +1,21 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
+goog.require('ol.format.GeoJSON');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.SimpleGeometry');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.source.GeoJSON');
 goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
 goog.require('ol.style.Circle');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
-var source = new ol.source.GeoJSON({
-  projection: 'EPSG:3857',
-  url: 'data/geojson/switzerland.geojson'
+var source = new ol.source.Vector({
+  url: 'data/geojson/switzerland.geojson',
+  format: new ol.format.GeoJSON()
 });
 var style = new ol.style.Style({
   fill: new ol.style.Fill({

examples/cluster.html

@@ -1,51 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Clustering example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Clustering example</h4>
-          <p id="shortdesc">Example of using <code>ol.Cluster</code>.</p>
-          <div id="docs">
-            <p>See the <a href="cluster.js" target="_blank">cluster.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">cluster vector</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=cluster" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Clustering example
+shortdesc: Example of using <code>ol.source.Cluster</code>.
+docs: >
+  This example shows how to do clustering on point features.
+tags: "cluster, vector"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/custom-controls.css

@@ -0,0 +1,7 @@
+.rotate-north {
+  top: 65px;
+  left: .5em;
+}
+.ol-touch .rotate-north {
+  top: 80px;
+}

examples/custom-controls.html

@@ -1,91 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <style type="text/css">
-      .rotate-north {
-        position: absolute;
-        top: 65px;
-        left: 8px;
-        background: rgba(255,255,255,0.4);
-        border-radius: 4px;
-        padding: 2px;
-      }
-      .ol-touch .rotate-north {
-        top: 80px;
-      }
-      .rotate-north a {
-        display: block;
-        color: white;
-        font-size: 16px;
-        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-        font-weight: bold;
-        margin: 1px;
-        text-decoration: none;
-        text-align: center;
-        border-radius: 2px;
-        height: 22px;
-        width: 22px;
-        background: rgba(0,60,136,0.5);
-      }
-      .ol-touch .rotate-north a {
-        font-size: 20px;
-        height: 30px;
-        width: 30px;
-        line-height: 26px;
-      }
-      .rotate-north a:hover {
-        background: rgba(0,60,136,0.7);
-      }
-    </style>
-    <title>ol3 custom controls example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-        <div class="span12">
-          <h4 id="title">Custom controls</h4>
-          <p id="shortdesc">This example shows how to create custom controls.</p>
-          <div id="docs">
-            <p>
-              This example creates a "rotate to north" button.
-              See the <a href="custom-controls.js" target="_blank">custom-controls.js
-              source</a> to see how this is done.
-            </p>
-          </div>
-          <div id="tags">
-            custom, control
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
-
-  </body>
-
-</html>
+---
+template: example.html
+title: Custom control example
+shortdesc: Shows how to create custom controls.
+docs: >
+  This example creates a "rotate to north" button.
+tags: "custom, control"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/custom-controls.js

@@ -29,23 +29,20 @@ app.RotateNorthControl = function(opt_options) {
 
   var options = opt_options || {};
 
-  var anchor = document.createElement('a');
-  anchor.href = '#rotate-north';
-  anchor.innerHTML = 'N';
+  var button = document.createElement('button');
+  button.innerHTML = 'N';
 
   var this_ = this;
   var handleRotateNorth = function(e) {
-    // prevent #rotate-north anchor from getting appended to the url
-    e.preventDefault();
     this_.getMap().getView().setRotation(0);
   };
 
-  anchor.addEventListener('click', handleRotateNorth, false);
-  anchor.addEventListener('touchstart', handleRotateNorth, false);
+  button.addEventListener('click', handleRotateNorth, false);
+  button.addEventListener('touchstart', handleRotateNorth, false);
 
   var element = document.createElement('div');
-  element.className = 'rotate-north ol-unselectable';
-  element.appendChild(anchor);
+  element.className = 'rotate-north ol-unselectable ol-control';
+  element.appendChild(button);
 
   ol.control.Control.call(this, {
     element: element,
@@ -74,7 +71,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/d3.html

@@ -1,54 +1,16 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>d3 integration example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">d3 integration example</h4>
-          <p id="shortdesc">Example of using ol3 and d3 together.</p>
-          <div id="docs">
-            <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
-            <p>See the <a href="d3.js" target="_blank">d3.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">d3</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="http://d3js.org/d3.v3.min.js"></script>
-    <script src="http://d3js.org/topojson.v1.min.js"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=d3" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: d3 integration example
+shortdesc: Example of using ol3 and d3 together.
+docs: >
+  <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
+tags: "d3"
+resources:
+  - http://d3js.org/d3.v3.min.js
+  - http://d3js.org/topojson.v1.min.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/d3.js

@@ -21,7 +21,7 @@ var map = new ol.Map({
   ],
   target: 'map',
   view: new ol.View({
-    center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),
+    center: ol.proj.fromLonLat([-97, 38]),
     zoom: 4
   })
 });

examples/data/WMTSCapabilities.xml

@@ -1,374 +1,279 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<Capabilities xmlns="http://www.opengis.net/wmts/1.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:gml="http://www.opengis.net/gml" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd" version="1.0.0">
-	<ows:ServiceIdentification>
-		<ows:Title>Web Map Tile Service</ows:Title>
-		<ows:ServiceType>OGC WMTS</ows:ServiceType>
-		<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
-		<ows:Fees>none</ows:Fees>
-		<ows:AccessConstraints>http://data.wien.gv.at/nutzungsbedingungen</ows:AccessConstraints>
-	</ows:ServiceIdentification>
-	<ows:ServiceProvider>
-		<ows:ProviderName>Magistrat Wien</ows:ProviderName>
-		<ows:ProviderSite xlink:href="http://www.wien.gv.at"/>
-		<ows:ServiceContact>
-			<ows:IndividualName>Gerhard Sommer</ows:IndividualName>
-		</ows:ServiceContact>
-	</ows:ServiceProvider>
-	<ows:OperationsMetadata>
-		<ows:Operation name="GetCapabilities">
-			<ows:DCP>
-				<ows:HTTP>
-					<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-				</ows:HTTP>
-			</ows:DCP>
-		</ows:Operation>
-		<ows:Operation name="GetTile">
-			<ows:DCP>
-				<ows:HTTP>
-					<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-					<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
-						<ows:Constraint name="GetEncoding">
-							<ows:AllowedValues>
-								<ows:Value>RESTful</ows:Value>
-							</ows:AllowedValues>
-						</ows:Constraint>
-					</ows:Get>
-				</ows:HTTP>
-			</ows:DCP>
-		</ows:Operation>
-	</ows:OperationsMetadata>
-	<Contents>
-		<Layer>
-			<ows:Title>Luftbild</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>lb</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>farbe</ows:Identifier>
-			</Style>
-			<Format>image/jpeg</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-		</Layer>
-		<Layer>
-			<ows:Title>MZK Flächen</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>fmzk</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>pastell</ows:Identifier>
-			</Style>
-			<Format>image/jpeg</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-		</Layer>
-		<Layer>
-			<ows:Title>Flächenwidmungs- und Bebauungsplan</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>flwbplmzk</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>rot</ows:Identifier>
-			</Style>
-			<Format>image/jpeg</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
-		</Layer>
-		<Layer>
-			<ows:Title>Beschriftung</ows:Title>
-			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
-				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
-				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
-			</ows:WGS84BoundingBox>
-			<ows:Identifier>beschriftung</ows:Identifier>
-			<Style isDefault="true">
-				<ows:Identifier>normal</ows:Identifier>
-			</Style>
-			<Format>image/png</Format>
-			<TileMatrixSetLink>
-				<TileMatrixSet>google3857</TileMatrixSet>
-			</TileMatrixSetLink>
-			<ResourceURL format="image/png" template="http://maps1.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps2.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps3.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps4.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-			<ResourceURL format="image/png" template="http://maps.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
-		</Layer>
-		<TileMatrixSet>
-			<!-- -180 85.05112878 -->
-			<ows:Identifier>google3857</ows:Identifier>
-			<ows:BoundingBox crs="urn:ogc:def:crs:EPSG:6.18:3:3857">
-				<ows:LowerCorner>1799448.394855 6124949.747770</ows:LowerCorner>
-				<ows:UpperCorner>1848250.442089 6162571.828177</ows:UpperCorner>
-			</ows:BoundingBox>
-			<ows:SupportedCRS>urn:ogc:def:crs:EPSG:6.18:3:3857</ows:SupportedCRS>
-			<WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
-			<TileMatrix>
-				<ows:Identifier>0</ows:Identifier>
-				<ScaleDenominator>559082264.029</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>1</MatrixWidth>
-				<MatrixHeight>1</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>1</ows:Identifier>
-				<ScaleDenominator>279541132.015</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>2</MatrixWidth>
-				<MatrixHeight>2</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>2</ows:Identifier>
-				<ScaleDenominator>139770566.007</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>4</MatrixWidth>
-				<MatrixHeight>4</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>3</ows:Identifier>
-				<ScaleDenominator>69885283.0036</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>8</MatrixWidth>
-				<MatrixHeight>8</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>4</ows:Identifier>
-				<ScaleDenominator>34942641.5018</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>16</MatrixWidth>
-				<MatrixHeight>16</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>5</ows:Identifier>
-				<ScaleDenominator>17471320.7509</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>32</MatrixWidth>
-				<MatrixHeight>32</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>6</ows:Identifier>
-				<ScaleDenominator>8735660.37545</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>64</MatrixWidth>
-				<MatrixHeight>64</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>7</ows:Identifier>
-				<ScaleDenominator>4367830.18773</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>128</MatrixWidth>
-				<MatrixHeight>128</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>8</ows:Identifier>
-				<ScaleDenominator>2183915.09386</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>256</MatrixWidth>
-				<MatrixHeight>256</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>9</ows:Identifier>
-				<ScaleDenominator>1091957.54693</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>512</MatrixWidth>
-				<MatrixHeight>512</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>10</ows:Identifier>
-				<ScaleDenominator>545978.773466</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>1024</MatrixWidth>
-				<MatrixHeight>1024</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>11</ows:Identifier>
-				<ScaleDenominator>272989.386733</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>2048</MatrixWidth>
-				<MatrixHeight>2048</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>12</ows:Identifier>
-				<ScaleDenominator>136494.693366</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>4096</MatrixWidth>
-				<MatrixHeight>4096</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>13</ows:Identifier>
-				<ScaleDenominator>68247.3466832</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>8192</MatrixWidth>
-				<MatrixHeight>8192</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>14</ows:Identifier>
-				<ScaleDenominator>34123.6733416</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>16384</MatrixWidth>
-				<MatrixHeight>16384</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>15</ows:Identifier>
-				<ScaleDenominator>17061.8366708</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>32768</MatrixWidth>
-				<MatrixHeight>32768</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>16</ows:Identifier>
-				<ScaleDenominator>8530.91833540</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>65536</MatrixWidth>
-				<MatrixHeight>65536</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>17</ows:Identifier>
-				<ScaleDenominator>4265.45916770</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>131072</MatrixWidth>
-				<MatrixHeight>131072</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>18</ows:Identifier>
-				<ScaleDenominator>2132.72958385</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>262144</MatrixWidth>
-				<MatrixHeight>262144</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>19</ows:Identifier>
-				<ScaleDenominator>1066.36479193</ScaleDenominator>
-				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>524288</MatrixWidth>
-				<MatrixHeight>524288</MatrixHeight>
-			</TileMatrix>
-		</TileMatrixSet>
-	</Contents>
-	<ServiceMetadataURL xlink:href="http://maps.wien.gv.at/wmts/1.0.0/WMTSCapabilities.xml"/>
+<Capabilities version="1.0.0" xmlns="http://www.opengis.net/wmts/1.0" xmlns:gml="http://www.opengis.net/gml" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd">
+    <ows:ServiceIdentification>
+        <ows:Title>Koordinates Labs</ows:Title>
+        <ows:ServiceType>OGC WMTS</ows:ServiceType>
+        <ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
+    </ows:ServiceIdentification>
+    <ows:ServiceProvider>
+        <ows:ProviderName>Koordinates</ows:ProviderName>
+        <ows:ProviderSite xlink:href="http://labs.koordinates.com"/>
+        <ows:ServiceContact/>
+    </ows:ServiceProvider>
+    <ows:OperationsMetadata>
+        <ows:Operation name="GetCapabilities">
+            <ows:DCP>
+                <ows:HTTP>
+                    <ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml?">
+                        <ows:Constraint name="GetEncoding">
+                            <ows:AllowedValues>
+                                <ows:Value>KVP</ows:Value>
+                            </ows:AllowedValues>
+                        </ows:Constraint>
+                    </ows:Get>
+                </ows:HTTP>
+            </ows:DCP>
+        </ows:Operation>
+        <ows:Operation name="GetFeatureInfo">
+            <ows:DCP>
+                <ows:HTTP>
+                    <ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/?">
+                        <ows:Constraint name="GetEncoding">
+                            <ows:AllowedValues>
+                                <ows:Value>KVP</ows:Value>
+                            </ows:AllowedValues>
+                        </ows:Constraint>
+                    </ows:Get>
+                </ows:HTTP>
+            </ows:DCP>
+        </ows:Operation>
+    </ows:OperationsMetadata>
+    <Contents>
+        <Layer>
+            <ows:Title>New Zealand Earthquakes</ows:Title>
+            <ows:Abstract>Historical earthquake data, accessed via the [GeoNet WFS feed](http://info.geonet.org.nz/display/appdata/Advanced+Queries). The data has been filtered to only include quakes in proximity to New Zealand with an `eventtype` of &quot;Earthquake&quot; or &quot;none&quot; per the [GeoNet catalogue](http://info.geonet.org.nz/display/appdata/Catalogue+Output). Most fields have been removed. Please also note the excluded data per this [GeoNet page](http://info.geonet.org.nz/display/appdata/The+Gap). We acknowledge the New Zealand GeoNet project and its sponsors EQC, GNS Science and LINZ, for providing data used in this layer.</ows:Abstract>
+            <ows:Identifier>layer-7328</ows:Identifier>
+            <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
+                <ows:LowerCorner>-20037508.342789 -6406581.708337</ows:LowerCorner>
+                <ows:UpperCorner>20037508.342789 -3653545.667928</ows:UpperCorner>
+            </ows:BoundingBox>
+            <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+                <ows:LowerCorner>-180.000000 -49.454297</ows:LowerCorner>
+                <ows:UpperCorner>180.000000 -31.160000</ows:UpperCorner>
+            </ows:WGS84BoundingBox>
+            <Style isDefault="true">
+                <ows:Title>Weighted point styles</ows:Title>
+                <ows:Identifier>style=39</ows:Identifier>
+            </Style>
+            <Format>image/png</Format>
+            <InfoFormat>application/json</InfoFormat>
+            <InfoFormat>text/html</InfoFormat>
+            <TileMatrixSetLink>
+                <TileMatrixSet>EPSG:3857</TileMatrixSet>
+            </TileMatrixSetLink>
+            <ResourceURL format="image/png" resourceType="tile" template="https://koordinates-tiles-a.global.ssl.fastly.net/services;key=d740ea02e0c44cafb70dce31a774ca10/tiles/v4/layer=7328,{style}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png"/>
+            <ResourceURL format="application/json" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.json"/>
+            <ResourceURL format="text/html" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.html"/>
+        </Layer>
+        <TileMatrixSet>
+            <ows:Title>GoogleMapsCompatible</ows:Title>
+            <ows:Abstract>The well-known 'GoogleMapsCompatible' tile matrix set defined by the OGC WMTS specification</ows:Abstract>
+            <ows:Identifier>EPSG:3857</ows:Identifier>
+            <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
+                <ows:LowerCorner>-20037508.342789 -20037508.342789</ows:LowerCorner>
+                <ows:UpperCorner>20037508.342789 20037508.342789</ows:UpperCorner>
+            </ows:BoundingBox>
+            <ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
+            <WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
+            <TileMatrix>
+                <ows:Identifier>0</ows:Identifier>
+                <ScaleDenominator>559082264.029</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1</MatrixWidth>
+                <MatrixHeight>1</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>1</ows:Identifier>
+                <ScaleDenominator>279541132.014</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2</MatrixWidth>
+                <MatrixHeight>2</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>2</ows:Identifier>
+                <ScaleDenominator>139770566.007</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>4</MatrixWidth>
+                <MatrixHeight>4</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>3</ows:Identifier>
+                <ScaleDenominator>69885283.0036</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>8</MatrixWidth>
+                <MatrixHeight>8</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>4</ows:Identifier>
+                <ScaleDenominator>34942641.5018</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>16</MatrixWidth>
+                <MatrixHeight>16</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>5</ows:Identifier>
+                <ScaleDenominator>17471320.7509</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>32</MatrixWidth>
+                <MatrixHeight>32</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>6</ows:Identifier>
+                <ScaleDenominator>8735660.37545</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>64</MatrixWidth>
+                <MatrixHeight>64</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>7</ows:Identifier>
+                <ScaleDenominator>4367830.18772</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>128</MatrixWidth>
+                <MatrixHeight>128</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>8</ows:Identifier>
+                <ScaleDenominator>2183915.09386</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>256</MatrixWidth>
+                <MatrixHeight>256</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>9</ows:Identifier>
+                <ScaleDenominator>1091957.54693</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>512</MatrixWidth>
+                <MatrixHeight>512</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>10</ows:Identifier>
+                <ScaleDenominator>545978.773466</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1024</MatrixWidth>
+                <MatrixHeight>1024</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>11</ows:Identifier>
+                <ScaleDenominator>272989.386733</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2048</MatrixWidth>
+                <MatrixHeight>2048</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>12</ows:Identifier>
+                <ScaleDenominator>136494.693366</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>4096</MatrixWidth>
+                <MatrixHeight>4096</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>13</ows:Identifier>
+                <ScaleDenominator>68247.3466832</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>8192</MatrixWidth>
+                <MatrixHeight>8192</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>14</ows:Identifier>
+                <ScaleDenominator>34123.6733416</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>16384</MatrixWidth>
+                <MatrixHeight>16384</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>15</ows:Identifier>
+                <ScaleDenominator>17061.8366708</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>32768</MatrixWidth>
+                <MatrixHeight>32768</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>16</ows:Identifier>
+                <ScaleDenominator>8530.9183354</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>65536</MatrixWidth>
+                <MatrixHeight>65536</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>17</ows:Identifier>
+                <ScaleDenominator>4265.4591677</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>131072</MatrixWidth>
+                <MatrixHeight>131072</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>18</ows:Identifier>
+                <ScaleDenominator>2132.72958385</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>262144</MatrixWidth>
+                <MatrixHeight>262144</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>19</ows:Identifier>
+                <ScaleDenominator>1066.36479192</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>524288</MatrixWidth>
+                <MatrixHeight>524288</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>20</ows:Identifier>
+                <ScaleDenominator>533.182395962</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1048576</MatrixWidth>
+                <MatrixHeight>1048576</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>21</ows:Identifier>
+                <ScaleDenominator>266.591197981</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2097152</MatrixWidth>
+                <MatrixHeight>2097152</MatrixHeight>
+            </TileMatrix>
+        </TileMatrixSet>
+    </Contents>
+    <ServiceMetadataURL xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml"/>
 </Capabilities>

examples/device-orientation.html

@@ -1,58 +1,23 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Device-Orientation example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
+---
+template: example.html
+title: Device-Orientation example
+shortdesc: Listen to DeviceOrientation events.
+docs: >
+  This example shows how to track changes in device orientation.
+tags: "orientation, openstreetmap"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <div class="span12">
+      <h4 id="title">Device orientation example</h4>
+      <label class="checkbox" for="track">
+        <input id="track" type="checkbox"/>track changes
+      </label>
+      <p>&alpha; : <code id="alpha"></code></p>
+      <p>&beta; : <code id="beta"></code></p>
+      <p>&gamma; : <code id="gamma"></code></p>
+      <p>heading : <code id="heading"></code></p>
     </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Device orientation example</h4>
-          <label class="checkbox" for="track">
-            <input id="track" type="checkbox"/>track changes
-          </label>
-          <p>&alpha; : <code id="alpha"></code></p>
-          <p>&beta; : <code id="beta"></code></p>
-          <p>&gamma; : <code id="gamma"></code></p>
-          <p>heading : <code id="heading"></code></p>
-          <p id="shortdesc">Listen to DeviceOrientation events</p>
-          <div id="docs">
-            <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">orientation, openstreetmap</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
-
-  </body>
-</html>
+  </div>
+</div>

examples/device-orientation.js

@@ -2,7 +2,6 @@ goog.require('ol.DeviceOrientation');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
-goog.require('ol.dom.Input');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
@@ -20,7 +19,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   controls: ol.control.defaults({
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
@@ -31,14 +30,20 @@ var map = new ol.Map({
 });
 
 var deviceOrientation = new ol.DeviceOrientation();
-var track = new ol.dom.Input(document.getElementById('track'));
-track.bindTo('checked', deviceOrientation, 'tracking');
+
+function el(id) {
+  return document.getElementById(id);
+}
+
+el('track').addEventListener('change', function() {
+  deviceOrientation.setTracking(this.checked);
+});
 
 deviceOrientation.on('change', function(event) {
-  $('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
-  $('#beta').text(deviceOrientation.getBeta() + ' [rad]');
-  $('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
-  $('#heading').text(deviceOrientation.getHeading() + ' [rad]');
+  el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
+  el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
+  el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';
+  el('heading').innerText = deviceOrientation.getHeading() + ' [rad]';
 });
 
 // tilt the map

examples/drag-and-drop-image-vector.html

@@ -1,56 +1,19 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Drag-and-Drop image vector example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
+---
+template: example.html
+title: Drag-and-Drop image vector example
+shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
+docs: >
+  Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to
+  an image on the client.
+tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <div class="span4 offset4 pull-right">
+      <div id="info" class="alert alert-success">
+        &nbsp;
       </div>
     </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span4">
-          <h4 id="title">Drag-and-Drop image vector example</h4>
-          <p id="shortdesc">Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
-          <div id="docs">
-            <p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image</div>
-        </div>
-        <div class="span4 offset4">
-          <div id="info" class="alert alert-success">
-            &nbsp;
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
-
-  </body>
-</html>
+  </div>
+</div>

examples/drag-and-drop-image-vector.js

@@ -104,7 +104,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],
@@ -114,17 +114,15 @@ var map = new ol.Map({
 
 dragAndDropInteraction.on('addfeatures', function(event) {
   var vectorSource = new ol.source.Vector({
-    features: event.features,
-    projection: event.projection
+    features: event.features
   });
-  map.getLayers().push(new ol.layer.Image({
+  map.addLayer(new ol.layer.Image({
     source: new ol.source.ImageVector({
       source: vectorSource,
       style: styleFunction
     })
   }));
-  var view = map.getView();
-  view.fitExtent(
+  map.getView().fitExtent(
       vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
 });
 
@@ -145,7 +143,10 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/drag-and-drop.html

@@ -1,56 +1,19 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Drag-and-Drop example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
+---
+template: example.html
+title: Drag-and-Drop example
+shortdesc: Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
+docs: >
+  Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will
+  only work with data in EPSG:4326 and EPSG:3857.
+tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <div class="span4 offset4 pull-right">
+      <div id="info" class="alert alert-success">
+        &nbsp;
       </div>
     </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span4">
-          <h4 id="title">Drag-and-Drop example</h4>
-          <p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
-          <div id="docs">
-            <p>See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div>
-        </div>
-        <div class="span4 offset4">
-          <div id="info" class="alert alert-success">
-            &nbsp;
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
-
-  </body>
-</html>
+  </div>
+</div>

examples/drag-and-drop.js

@@ -112,15 +112,13 @@ var map = new ol.Map({
 
 dragAndDropInteraction.on('addfeatures', function(event) {
   var vectorSource = new ol.source.Vector({
-    features: event.features,
-    projection: event.projection
+    features: event.features
   });
-  map.getLayers().push(new ol.layer.Vector({
+  map.addLayer(new ol.layer.Vector({
     source: vectorSource,
     style: styleFunction
   }));
-  var view = map.getView();
-  view.fitExtent(
+  map.getView().fitExtent(
       vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
 });
 
@@ -141,7 +139,10 @@ var displayFeatureInfo = function(pixel) {
   }
 };
 
-$(map.getViewport()).on('mousemove', function(evt) {
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
   var pixel = map.getEventPixel(evt.originalEvent);
   displayFeatureInfo(pixel);
 });

examples/drag-features.html

@@ -1,51 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Drag features example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Drag features example</h4>
-          <p id="shortdesc">Example of a drag features interaction.</p>
-          <div id="docs">
-            <p>See the <a href="drag-features.js" target="_blank">drag-features.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">drag, feature, vector, editing</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-features" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Drag features example
+shortdesc: Example of a drag features interaction.
+docs: >
+  The drag features interaction can be used to drag features to a new position.
+tags: "drag, feature, vector, editing"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/drag-rotate-and-zoom.html

@@ -1,52 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Drag rotate and zoom example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Drag rotate and zoom example</h4>
-          <p id="shortdesc">A single interaction to drag, rotate, and zoom.</p>
-          <div id="docs">
-            <p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
-            <p>See the <a href="drag-rotate-and-zoom.js" target="_blank">drag-rotate-and-zoom.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">drag, rotate, zoom, interaction</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Drag rotate and zoom example
+shortdesc: A single interaction to drag, rotate, and zoom.
+docs: >
+  <p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
+tags: "drag, rotate, zoom, interaction"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/drag-rotate-and-zoom.js

@@ -15,7 +15,7 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/draw-and-modify-features.html

@@ -1,61 +1,21 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Draw and modify features example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Draw and modify features example</h4>
-          <p id="shortdesc">Example of using the ol.interaction.Draw interaction together with
-          the ol.interaction.Modify interaction.</p>
-          <form class="form-inline">
-            <label>Geometry type &nbsp;</label>
-              <select id="type">
-                <option value="Point">Point</option>
-                <option value="LineString">LineString</option>
-                <option value="Polygon">Polygon</option>
-              </select>
-          </form>
-
-          <div id="docs">
-            <p>See the <a href="draw-and-modify-features.js" target="_blank">draw-and-modify-features.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">draw, edit, modify, vector, featureoverlay</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=draw-and-modify-features" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Draw and modify features example
+shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
+docs: >
+  Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
+tags: "draw, edit, modify, vector, featureoverlay"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+  <form class="form-inline">
+    <label>Geometry type &nbsp;</label>
+    <select id="type">
+      <option value="Point">Point</option>
+      <option value="LineString">LineString</option>
+      <option value="Polygon">Polygon</option>
+    </select>
+  </form>
+</div>

examples/draw-and-modify-features.js

@@ -2,7 +2,6 @@ goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.events.condition');
-goog.require('ol.interaction');
 goog.require('ol.interaction.Draw');
 goog.require('ol.interaction.Modify');
 goog.require('ol.layer.Tile');

examples/draw-features.html

@@ -1,61 +1,26 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Draw features example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Draw features example</h4>
-          <p id="shortdesc">Example of using the ol.interaction.Draw interaction.</p>
-          <form class="form-inline">
-            <label>Geometry type &nbsp;</label>
-              <select id="type">
-                <option value="None">None</option>
-                <option value="Point">Point</option>
-                <option value="LineString">LineString</option>
-                <option value="Polygon">Polygon</option>
-              </select>
-          </form>
-
-          <div id="docs">
-            <p>See the <a href="draw-features.js" target="_blank">draw-features.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">draw, edit, vector</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=draw-features" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Draw features example
+shortdesc: Example of using the ol.interaction.Draw interaction.
+docs: >
+  Example of using the Draw interaction. Select a geometry type from the
+  dropdown above to start drawing. To finish drawing, click the last
+  point. To activate freehand drawing for lines and polygons, hold the `Shift`
+  key.
+tags: "draw, edit, freehand, vector"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <form class="form-inline">
+      <label>Geometry type &nbsp;</label>
+      <select id="type">
+        <option value="None">None</option>
+        <option value="Point">Point</option>
+        <option value="LineString">LineString</option>
+        <option value="Polygon">Polygon</option>
+        <option value="Circle">Circle</option>
+      </select>
+    </form>
+  </div>
+</div>

examples/draw-features.js

@@ -1,6 +1,5 @@
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.interaction');
 goog.require('ol.interaction.Draw');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
@@ -15,7 +14,7 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var source = new ol.source.Vector();
+var source = new ol.source.Vector({wrapX: false});
 
 var vector = new ol.layer.Vector({
   source: source,
@@ -38,7 +37,7 @@ var vector = new ol.layer.Vector({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [-11000000, 4600000],

examples/dynamic-data.html

@@ -1,51 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Dynamic data example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Dynamic data example</h4>
-          <p id="shortdesc">Example of dynamic data.</p>
-          <div id="docs">
-            <p>See the <a href="dynamic-data.js" target="_blank">dynamic-data.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">dynamic-data</div>
-        </div>
-
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=dynamic-data" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Dynamic data example
+shortdesc: Example of dynamic data.
+docs: >
+  Example of dynamic data.
+tags: "dynamic-data"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/dynamic-data.js

@@ -17,7 +17,7 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(),
+  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     center: [0, 0],

examples/earthquake-clusters.css

@@ -0,0 +1,19 @@
+#map {
+  position: relative;
+}
+#info {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  z-index: 100;
+}
+.tooltip.in {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.tooltip.top .tooltip-arrow {
+  border-top-color: white;
+}
+.tooltip-inner {
+  border: 2px solid white;
+}

examples/earthquake-clusters.html

@@ -1,75 +1,16 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
-    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Earthquake Clusters</title>
-    <style>
-      #map {
-        position: relative;
-      }
-      #info {
-        position: absolute;
-        height: 1px;
-        width: 1px;
-        z-index: 100;
-      }
-      .tooltip.in {
-        opacity: 1;
-        filter: alpha(opacity=100);
-      }
-      .tooltip.top .tooltip-arrow {
-        border-top-color: white;
-      }
-      .tooltip-inner {
-        border: 2px solid white;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span12">
-          <div id="map" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Earthquake Clusters</h4>
-          <p id="shortdesc">Demonstrates the use of style geometries to render source features of a cluster.</p>
-          <div id="docs">
-            <p>
-              This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.
-            </p>
-            <p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>. See the <a href="earthquake-clusters.js" target="_blank">earthquake-clusters.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">KML, vector, style, geometry, cluster</div>
-        </div>
-      </div>
-
-    </div>
-
-    <script src="../resources/jquery.min.js" type="text/javascript"></script>
-    <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
-    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
-    <script src="loader.js?id=earthquake-clusters" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: example.html
+title: Earthquake Clusters
+shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
+docs: >
+  <p>This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations
+  (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
+  the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
+  <p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
+tags: "KML, vector, style, geometry, cluster"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>