Merge pull request #4562 from openlayers/release-v3.12.0

Release v3.12.0

.gitignore

@@ -1,4 +1,3 @@
-*.pyc
 /build/
 /node_modules/
 /dist/

.npmignore

@@ -1,2 +1 @@
-*.pyc
 /build/

.travis.yml

@@ -1,5 +1,11 @@
-language: python
-sudo: false
+sudo: required
+dist: trusty
+
+language: node_js
+
+node_js:
+  - "4"
+
 cache:
   directories:
     - node_modules
@@ -7,7 +13,8 @@ env:
   - DISPLAY=:99.0
 
 before_install:
-  - "npm install -g npm && npm install"
+  - "npm prune"
+  - "sudo pip install -r requirements.txt"
 
 before_script:
   - "rm src/ol/renderer/webgl/*shader.js"

CONTRIBUTING.md

@@ -21,11 +21,14 @@ Look for `readme.md` files! Several directories contain a `readme.md` file that
 
 ## Contributing Code
 
+See [`DEVELOPING.md`](https://github.com/openlayers/ol3/blob/master/DEVELOPING.md) to learn how to get started developing.
+
 Our preferred means of receiving contributions is through [pull requests](https://help.github.com/articles/using-pull-requests). Make sure
 that your pull request follows our pull request guidelines below before submitting it.
 
 This page describes what you need to know to contribute code to ol3 as a developer.
 
+
 ## Contributor License Agreement
 
 Before accepting a contribution, we ask that you provide us a Contributor
@@ -35,162 +38,11 @@ Contributor License Agreement](https://raw.github.com/openlayers/cla/master/ccla
 making your contribution as an individual, you can submit a digital [Individual
 Contributor License Agreement](https://docs.google.com/spreadsheet/viewform?formkey=dGNNVUJEMXF2dERTU0FXM3JjNVBQblE6MQ).
 
-## Setting up development environment
-
-You will obviously start by
-[forking](https://github.com/openlayers/ol3/fork) the ol3 repository.
-
-### Travis CI
-
-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.
-
-Although not mandatory, it is also recommended to set up Travis CI for your ol3 fork.
-For that go to your ol3 fork's Service Hooks page and set up the Travis hook.
-Then every time you push to your fork, the test suite will be run. This means
-errors can be caught before creating a pull request. For those making
-small or occasional contributions, this may be enough to check that your contributions
-are ok; in this case, you do not need to install the build tools on your local environment
-as described below.
-
-### Development dependencies
-
-The minimum requirements are:
-
-* GNU Make
-* Git
-* [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`, `node`, `python` and `java` should be in your `PATH`.
-
-You can check your configuration by running:
-
-    $ make check-deps
-
-To install the Node.js dependencies run
-
-    $ npm install
-
-To install the extra Python modules, run:
-
-    $ sudo pip install -r requirements.txt
-or
-
-    $ cat requirements.txt | sudo xargs easy_install
-
-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 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 usage of `make` is as follows:
-
-    $ make <target>
-
-where `<target>` is the name of the build target you want to execute. For
-example:
-
-    $ 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`.
-
-The `serve` target starts a node-based web server, which we will refer to as the *dev server*. You'll need to start that server for running the examples and the tests in a browser. More information on that further down.
-
-Other targets include `apidoc` and `ci`. The latter is the target used on Travis CI. See ol3's [Travis configuration file](https://github.com/openlayers/ol3/blob/master/.travis.yml).
-
-## Running the `check` target
-
-The `check` target is to be run before pushing code to GitHub and opening pull
-requests. Branches that don't pass `check` won't pass the integration tests,
-and have therefore no chance of being merged into `master`.
-
-To run the `check` target:
-
-    $ make check
-
-If you want to run the full suite of integration tests, see "Running the integration
-tests" below.
-
-## Running examples
-
-To run the examples you first need to start the dev server:
-
-    $ make serve
-
-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 build, just like
-the examples [hosted](http://openlayers.org/en/master/examples/) on GitHub.
-Start by executing the `host-examples` build target:
-
-    $ make host-examples
-
-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 (`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:
-
-    $ make test
-
-See also the test-specific [README](../master/test/README.md).
-
-## Running the integration tests
-
-When you submit a pull request the [Travis continuous integration
-server](https://travis-ci.org/) will run a full suite of tests, including
-building all versions of the library and checking that all of the examples
-work.  You will receive an email with the results, and the status will be
-displayed in the pull request.
-
-To run the full suite of integration tests use the `ci` target:
-
-    $ make ci
-
-Running the full suite of integration tests currently takes 5-10 minutes.
-
-This makes sure that your commit won't break the build. It also runs JSDoc3 to
-make sure that there are no invalid API doc directives.
-
-## Adding examples
-
-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 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.
-
-### Use of the `goog` namespace in examples
-
-Short story: the ol3 examples should not use the `goog` namespace, except
-for `goog.require`.
-
-Longer story: we want that the ol3 examples work in multiple modes, with the
-standalone lib (which has implications of the symbols and properties we
-export), and compiled together with the ol3 library.
-
-Compiling the examples together with the library makes it mandatory to declare dependencies with `goog.require` statements.
 
 ## Pull request guidelines
 
+Before working on a pull request, create an issue explaining what you want to contribute. This ensures that your pull request won't go unnoticed, and that you are not contributing something that is not suitable for the project. Once a core developer has set the `pull request accepted` label on the issue, you can submit a pull request. The pull request description should reference the original issue.
+
 Your pull request must:
 
  * Follow OpenLayers 3's coding style.
@@ -254,6 +106,13 @@ style of the existing OpenLayers 3 code, which includes:
 
  * Use `array.length = 0` instead of `goog.array.clear`.
 
+ * Use `v !== undefined` instead of `goog.isDef(v)` and `v === null` instead of
+   `goog.isNull(v)`.
+
+ * Use ECMAScript 5.1 functions instead of the `goog` equivalents. For example,
+   use `Object.keys(obj)` instead of `goog.object.getKeys(obj)`, `arr.forEach(f)`
+   instead of `goog.array.forEach(arr, f)`, etc ...
+
  * Use bracket notation instead of `goog.object.set` and `goog.object.get` (with
    two arguments).
 

DEVELOPING.md

@@ -0,0 +1,155 @@
+# Developing
+
+## Setting up development environment
+
+You will obviously start by
+[forking](https://github.com/openlayers/ol3/fork) the ol3 repository.
+
+### Travis CI
+
+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.
+
+Although not mandatory, it is also recommended to set up Travis CI for your ol3 fork.
+For that go to your ol3 fork's Service Hooks page and set up the Travis hook.
+Then every time you push to your fork, the test suite will be run. This means
+errors can be caught before creating a pull request. For those making
+small or occasional contributions, this may be enough to check that your contributions
+are ok; in this case, you do not need to install the build tools on your local environment
+as described below.
+
+### Development dependencies
+
+The minimum requirements are:
+
+* GNU Make
+* Git
+* [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`, `node`, `python` and `java` should be in your `PATH`.
+
+You can check your configuration by running:
+
+    $ make check-deps
+
+To install the Node.js dependencies run
+
+    $ npm install
+
+To install the extra Python modules, run:
+
+    $ sudo pip install -r requirements.txt
+or
+
+    $ cat requirements.txt | sudo xargs easy_install
+
+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 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 usage of `make` is as follows:
+
+    $ make <target>
+
+where `<target>` is the name of the build target you want to execute. For
+example:
+
+    $ 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`.
+
+The `serve` target starts a node-based web server, which we will refer to as the *dev server*. You'll need to start that server for running the examples and the tests in a browser. More information on that further down.
+
+Other targets include `apidoc` and `ci`. The latter is the target used on Travis CI. See ol3's [Travis configuration file](https://github.com/openlayers/ol3/blob/master/.travis.yml).
+
+## Running the `check` target
+
+The `check` target is to be run before pushing code to GitHub and opening pull
+requests. Branches that don't pass `check` won't pass the integration tests,
+and have therefore no chance of being merged into `master`.
+
+To run the `check` target:
+
+    $ make check
+
+If you want to run the full suite of integration tests, see "Running the integration
+tests" below.
+
+## Running examples
+
+To run the examples you first need to start the dev server:
+
+    $ make serve
+
+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 build, just like
+the examples [hosted](http://openlayers.org/en/master/examples/) on GitHub.
+Start by executing the `host-examples` build target:
+
+    $ make host-examples
+
+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 (`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:
+
+    $ make test
+
+See also the test-specific [README](../master/test/README.md).
+
+## Running the integration tests
+
+When you submit a pull request the [Travis continuous integration
+server](https://travis-ci.org/) will run a full suite of tests, including
+building all versions of the library and checking that all of the examples
+work.  You will receive an email with the results, and the status will be
+displayed in the pull request.
+
+To run the full suite of integration tests use the `ci` target:
+
+    $ make ci
+
+Running the full suite of integration tests currently takes 5-10 minutes.
+
+This makes sure that your commit won't break the build. It also runs JSDoc3 to
+make sure that there are no invalid API doc directives.
+
+## Adding examples
+
+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 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.
+
+### Use of the `goog` namespace in examples
+
+Short story: the ol3 examples should not use the `goog` namespace, except
+for `goog.require`.
+
+Longer story: we want that the ol3 examples work in multiple modes, with the
+standalone lib (which has implications of the symbols and properties we
+export), and compiled together with the ol3 library.
+
+Compiling the examples together with the library makes it mandatory to declare dependencies with `goog.require` statements.

Makefile

@@ -19,7 +19,7 @@ BUILD_HOSTED := build/hosted/$(BRANCH)
 BUILD_HOSTED_EXAMPLES := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES))
 BUILD_HOSTED_EXAMPLES_JS := $(addprefix $(BUILD_HOSTED)/,$(EXAMPLES_JS))
 
-UNPHANTOMABLE_EXAMPLES = examples/shaded-relief.html examples/raster.html examples/region-growing.html
+UNPHANTOMABLE_EXAMPLES = examples/shaded-relief.html examples/raster.html examples/region-growing.html examples/color-manipulation.html
 CHECK_EXAMPLE_TIMESTAMPS = $(patsubst examples/%.html,build/timestamps/check-%-timestamp,$(filter-out $(UNPHANTOMABLE_EXAMPLES),$(EXAMPLES_HTML)))
 
 TASKS_JS := $(shell find tasks -name '*.js')

changelog/upgrade-notes.md

@@ -1,7 +1,70 @@
 ## Upgrade notes
 
+### v3.12.0
+
+#### `ol.Map#forEachFeatureAtPixel` changes
+
+The optional `layerFilter` function is now also called for unmanaged layers. To get the same behaviour as before, wrap your layer filter code in an if block like this:
+```js
+function layerFilter(layer) {
+  if (map.getLayers().getArray().indexOf(layer) !== -1) {
+    // existing layer filter code
+  }
+}
+```
+
 ### v3.11.0
 
+#### `ol.format.KML` changes
+
+KML icons are scaled 50% so that the rendering better matches Google Earth rendering.
+
+If a KML placemark has a name and is a point, an `ol.style.Text` is created with the name displayed to the right of the icon (if there is an icon).
+This can be controlled with the showPointNames option which defaults to true.
+
+To disable rendering of the point names for placemarks, use the option:
+new ol.format.KML({ showPointNames: false });
+
+
+#### `ol.interaction.DragBox` and `ol.interaction.DragZoom` changes
+
+Styling is no longer done with `ol.Style`, but with pure CSS. The `style` constructor option is no longer required, and no longer available. Instead, there is a `className` option for the CSS selector. The default for `ol.interaction.DragBox` is `ol-dragbox`, and `ol.interaction.DragZoom` uses `ol-dragzoom`. If you previously had
+```js
+new ol.interaction.DragZoom({
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: [255, 255, 255, 0.4]
+    })
+  })
+});
+```
+you'll now just need
+```js
+new ol.interaction.DragZoom();
+```
+but with additional css:
+```css
+.ol-dragzoom {
+  border-color: red;
+  border-width: 3px;
+  background-color: rgba(255,255,255,0.4);
+}
+```
+
+#### Removal of `ol.source.TileVector`
+
+With the introduction of true vector tile support, `ol.source.TileVector` becomes obsolete. Change your code to use `ol.layer.VectorTile` and `ol.source.VectorTile` instead of `ol.layer.Vector` and `ol.source.TileVector`.
+
+#### `ol.Map#forEachFeatureAtPixel` changes for unmanaged layers
+
+`ol.Map#forEachFeatureAtPixel` will still be called for unmanaged layers, but the 2nd argument to the callback function will be `null` instead of a reference to the unmanaged layer. This brings back the behavior of the abandoned `ol.FeatureOverlay` that was replaced by unmanaged layers.
+
+If you are affected by this change, please change your unmanaged layer to a regular layer by using e.g. `ol.Map#addLayer` instead of `ol.layer.Layer#setMap`.
+
 ### v3.10.0
 
 #### `ol.layer.Layer` changes

changelog/v3.11.0.md

@@ -0,0 +1,136 @@
+# v3.11.0
+
+## Summary
+
+The v3.11.0 release includes features and fixes from 73 pull requests since the v3.10.1 release.  New features and improvements include:
+
+* Support for raster reprojection - load raster sources in one projection and view them in another.
+* Support for Mapbox Vector Tiles!
+* Improved KML support, GeoJSON & TopoJSON fixes, and much more.  See below for the full list.
+
+## Upgrade notes
+
+#### `ol.format.KML` changes
+
+KML icons are scaled 50% so that the rendering better matches Google Earth rendering.
+
+If a KML placemark has a name and is a point, an `ol.style.Text` is created with the name displayed to the right of the icon (if there is an icon).
+This can be controlled with the showPointNames option which defaults to true.
+
+To disable rendering of the point names for placemarks, use the option:
+new ol.format.KML({ showPointNames: false });
+
+#### `ol.interaction.DragBox` and `ol.interaction.DragZoom` changes
+
+Styling is no longer done with `ol.Style`, but with pure CSS. The `style` constructor option is no longer required, and no longer available. Instead, there is a `className` option for the CSS selector. The default for `ol.interaction.DragBox` is `ol-dragbox`, and `ol.interaction.DragZoom` uses `ol-dragzoom`. If you previously had
+```js
+new ol.interaction.DragZoom({
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: [255, 255, 255, 0.4]
+    })
+  })
+});
+```
+you'll now just need
+```js
+new ol.interaction.DragZoom();
+```
+but with additional css:
+```css
+.ol-dragzoom {
+  border-color: red;
+  border-width: 3px;
+  background-color: rgba(255,255,255,0.4);
+}
+```
+
+#### Removal of `ol.source.TileVector`
+
+With the introduction of true vector tile support, `ol.source.TileVector` becomes obsolete. Change your code to use `ol.layer.VectorTile` and `ol.source.VectorTile` instead of `ol.layer.Vector` and `ol.source.TileVector`.
+
+#### `ol.Map#forEachFeatureAtPixel` changes for unmanaged layers
+
+`ol.Map#forEachFeatureAtPixel` will still be called for unmanaged layers, but the 2nd argument to the callback function will be `null` instead of a reference to the unmanaged layer. This brings back the behavior of the abandoned `ol.FeatureOverlay` that was replaced by unmanaged layers.
+
+If you are affected by this change, please change your unmanaged layer to a regular layer by using e.g. `ol.Map#addLayer` instead of `ol.layer.Layer#setMap`.
+
+## Full list of changes
+
+ * [#4394](https://github.com/openlayers/ol3/pull/4394) - Allow ol.Object property update without notification. ([@DavidHequet](https://github.com/DavidHequet))
+ * [#4395](https://github.com/openlayers/ol3/pull/4395) - Flag ol.style.Text setOffsetX and Y as @api. ([@adube](https://github.com/adube))
+ * [#4393](https://github.com/openlayers/ol3/pull/4393) - Faster vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#4392](https://github.com/openlayers/ol3/pull/4392) - Update clean-css to version 3.4.7 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4391](https://github.com/openlayers/ol3/pull/4391) - Pass null as forEachFeatureAtPixel layer arg for unmanaged layers ([@ahocevar](https://github.com/ahocevar))
+ * [#4390](https://github.com/openlayers/ol3/pull/4390) - Fix usage of mocha-phantomjs-core after update ([@ahocevar](https://github.com/ahocevar))
+ * [#4387](https://github.com/openlayers/ol3/pull/4387) - Add default argument to getRendererFromQueryString ([@ahocevar](https://github.com/ahocevar))
+ * [#4376](https://github.com/openlayers/ol3/pull/4376) - Make KML format ignore image styles that aren't icons ([@elemoine](https://github.com/elemoine))
+ * [#4385](https://github.com/openlayers/ol3/pull/4385) - Don't transform the scale specified by the user ([@oterral](https://github.com/oterral))
+ * [#4388](https://github.com/openlayers/ol3/pull/4388) - Quick-fix running tests with PhantomJS ([@ahocevar](https://github.com/ahocevar))
+ * [#4378](https://github.com/openlayers/ol3/pull/4378) - Add a writeStyles option to KML format ([@elemoine](https://github.com/elemoine))
+ * [#4375](https://github.com/openlayers/ol3/pull/4375) - Fixed documentation typo (ol.source.ImageWMS) ([@simonseyock](https://github.com/simonseyock))
+ * [#4371](https://github.com/openlayers/ol3/pull/4371) - Fix typo in closure compilation tutorial ([@dtreiter](https://github.com/dtreiter))
+ * [#4370](https://github.com/openlayers/ol3/pull/4370) - Improve ol.interaction.Select#getLayer documentation. ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4365](https://github.com/openlayers/ol3/pull/4365) - Update fs-extra to version 0.26.2 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4366](https://github.com/openlayers/ol3/pull/4366) - Update resemblejs to version 2.0.1 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4368](https://github.com/openlayers/ol3/pull/4368) - Append KML placemark text style to existing styles ([@marcjansen](https://github.com/marcjansen))
+ * [#4361](https://github.com/openlayers/ol3/pull/4361) - Make GPX format not fail on unsupported geometries ([@elemoine](https://github.com/elemoine))
+ * [#4360](https://github.com/openlayers/ol3/pull/4360) - Update getExtent return value jsdoc tag ([@fredj](https://github.com/fredj))
+ * [#4359](https://github.com/openlayers/ol3/pull/4359) - Update closure-util to version 1.9.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4357](https://github.com/openlayers/ol3/pull/4357) - Update all dependencies. ([@openlayers](https://github.com/openlayers))
+ * [#4356](https://github.com/openlayers/ol3/pull/4356) - Update Metalsmith and layouts plugin. ([@tschaub](https://github.com/tschaub))
+ * [#4355](https://github.com/openlayers/ol3/pull/4355) - Update PhantomJS. ([@tschaub](https://github.com/tschaub))
+ * [#4353](https://github.com/openlayers/ol3/pull/4353) - Resolve path to jsdoc-fork. ([@tschaub](https://github.com/tschaub))
+ * [#3627](https://github.com/openlayers/ol3/pull/3627) - Make package.json compatible for npm frontend use. ([@ThomasG77](https://github.com/ThomasG77))
+ * [#4163](https://github.com/openlayers/ol3/pull/4163) - Fixes for building with Node 4.x. ([@tschaub](https://github.com/tschaub))
+ * [#4347](https://github.com/openlayers/ol3/pull/4347) - Use require.resolve() to find jsdoc. ([@tschaub](https://github.com/tschaub))
+ * [#4291](https://github.com/openlayers/ol3/pull/4291) - Add 'Move a feature along a line' example. ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4344](https://github.com/openlayers/ol3/pull/4344) - Allow different resolutions in x and y direction for ol.source.ImageStatic ([@bartvde](https://github.com/bartvde))
+ * [#4339](https://github.com/openlayers/ol3/pull/4339) - Make sure drawImage width and height are not too big ([@bartvde](https://github.com/bartvde))
+ * [#4334](https://github.com/openlayers/ol3/pull/4334) - Check view extent within image extent ([@ahocevar](https://github.com/ahocevar))
+ * [#4332](https://github.com/openlayers/ol3/pull/4332) - Fix write out GeoJSON features with id equal to 0 ([@fredj](https://github.com/fredj))
+ * [#4331](https://github.com/openlayers/ol3/pull/4331) - Allow TopoJSON features with id equal to 0 ([@fredj](https://github.com/fredj))
+ * [#4330](https://github.com/openlayers/ol3/pull/4330) - ol.format.TopoJSON is read only, update the jsdoc ([@openlayers](https://github.com/openlayers))
+ * [#4327](https://github.com/openlayers/ol3/pull/4327) - Allow GeoJSON features with id equal to 0 ([@fredj](https://github.com/fredj))
+ * [#4219](https://github.com/openlayers/ol3/pull/4219) - Support tiled vector data and Mapbox vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#4322](https://github.com/openlayers/ol3/pull/4322) - Add wrapX override support for ol.source.Cluster ([@FRizZL](https://github.com/FRizZL))
+ * [#4316](https://github.com/openlayers/ol3/pull/4316) - Render name labels if the geometry is a point in KML format (@tamarmot) ([@marcjansen](https://github.com/marcjansen))
+ * [#4313](https://github.com/openlayers/ol3/pull/4313) - Align logos nicely with attribution text ([@ahocevar](https://github.com/ahocevar))
+ * [#4297](https://github.com/openlayers/ol3/pull/4297) - Create standalone versions of ol.ext packages ([@ahocevar](https://github.com/ahocevar))
+ * [#4302](https://github.com/openlayers/ol3/pull/4302) - scale icons by 0.5 so they are not huge ([@tamarmot](https://github.com/tamarmot))
+ * [#4301](https://github.com/openlayers/ol3/pull/4301) - Remove jshint -W069 tags in source code ([@fredj](https://github.com/fredj))
+ * [#4273](https://github.com/openlayers/ol3/pull/4273) - Expand docs on ol.source url prop. ([@Barryrowe](https://github.com/Barryrowe))
+ * [#4293](https://github.com/openlayers/ol3/pull/4293) - Refine the pull request process ([@ahocevar](https://github.com/ahocevar))
+ * [#4289](https://github.com/openlayers/ol3/pull/4289) - Restrict maxZoom of the static-image example ([@ahocevar](https://github.com/ahocevar))
+ * [#4275](https://github.com/openlayers/ol3/pull/4275) - Fix ol.events.condition.mouseOnly parameter type ([@fredj](https://github.com/fredj))
+ * [#4248](https://github.com/openlayers/ol3/pull/4248) - Use Math.cosh of ES6/2015 if available ([@marcjansen](https://github.com/marcjansen))
+ * [#4286](https://github.com/openlayers/ol3/pull/4286) - Add a color manipulation example. ([@tschaub](https://github.com/tschaub))
+ * [#4122](https://github.com/openlayers/ol3/pull/4122) - Raster reprojection ([@klokantech](https://github.com/klokantech))
+ * [#4283](https://github.com/openlayers/ol3/pull/4283) - Flag ol.tilegrid.TileGrid getTileCoordExtent as @api ([@adube](https://github.com/adube))
+ * [#4280](https://github.com/openlayers/ol3/pull/4280) - Use overlay container instead of viewport for ol.render.Box ([@ahocevar](https://github.com/ahocevar))
+ * [#4278](https://github.com/openlayers/ol3/pull/4278) - Use DOM instead of map canvas for ol.render.Box ([@ahocevar](https://github.com/ahocevar))
+ * [#4277](https://github.com/openlayers/ol3/pull/4277) - Improve the box select example ([@fredj](https://github.com/fredj))
+ * [#4276](https://github.com/openlayers/ol3/pull/4276) - Better ol.events.condition.platformModifierKeyOnly documentation ([@fredj](https://github.com/fredj))
+ * [#4102](https://github.com/openlayers/ol3/pull/4102) - Export ol.Observable#dispatchEvent function ([@fredj](https://github.com/fredj))
+ * [#4261](https://github.com/openlayers/ol3/pull/4261) - ol.events.condition.mouseOnly may be wrong ([@fredj](https://github.com/fredj))
+ * [#4269](https://github.com/openlayers/ol3/pull/4269) - Fix Zoom control duration option - allow `0` as value ([@adube](https://github.com/adube))
+ * [#4268](https://github.com/openlayers/ol3/pull/4268) - Add method for retrieving ol.Overlay by id ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4257](https://github.com/openlayers/ol3/pull/4257) - Remove unused ol.math-methods ([@marcjansen](https://github.com/marcjansen))
+ * [#4270](https://github.com/openlayers/ol3/pull/4270) - Fix Keyboard zoom interation options ([@adube](https://github.com/adube))
+ * [#4272](https://github.com/openlayers/ol3/pull/4272) - Allow the DragZoom interaction created in defaults to use zoomDuration option. ([@adube](https://github.com/adube))
+ * [#4271](https://github.com/openlayers/ol3/pull/4271) - Fix DragZoom interaction duration, allow `0` value ([@adube](https://github.com/adube))
+ * [#4267](https://github.com/openlayers/ol3/pull/4267) - Example usability improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#4263](https://github.com/openlayers/ol3/pull/4263) - Add back CSSProperties.prototype.touchAction extern ([@fredj](https://github.com/fredj))
+ * [#4259](https://github.com/openlayers/ol3/pull/4259) - Remove use of toDegrees/toRadians util functions ([@marcjansen](https://github.com/marcjansen))
+ * [#4258](https://github.com/openlayers/ol3/pull/4258) - Remove usage of goog.dom.TagName enum ([@marcjansen](https://github.com/marcjansen))
+ * [#4255](https://github.com/openlayers/ol3/pull/4255) - Fix zoom slider width for retina displays ([@ahocevar](https://github.com/ahocevar))
+ * [#4249](https://github.com/openlayers/ol3/pull/4249) - Make whole example box clickable ([@ahocevar](https://github.com/ahocevar))
+ * [#4045](https://github.com/openlayers/ol3/pull/4045) - Add parser for dimension property from WMTS Capabilities.xml ([@Jenselme](https://github.com/Jenselme))
+ * [#4161](https://github.com/openlayers/ol3/pull/4161) - Add `translatestart`, `translateend` and `translating` events to `ol.interaction.Translate` ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4186](https://github.com/openlayers/ol3/pull/4186) - Do not export ol.webgl.Context ([@elemoine](https://github.com/elemoine))
+ * [#4239](https://github.com/openlayers/ol3/pull/4239) - Changing highlighted to highlight ([@austinkeeley](https://github.com/austinkeeley))
+ * [#3727](https://github.com/openlayers/ol3/pull/3727) - Added getOverviewMap getter method in overviewmapcontrol.js ([@bogdanvaduva](https://github.com/bogdanvaduva))

changelog/v3.11.1.md

@@ -0,0 +1,11 @@
+# v3.11.1
+
+## Summary
+
+The v3.11.1 release is a patch release that addresses a few regressions in the v3.11.0 release.  See the [v3.11.0 release notes](https://github.com/openlayers/ol3/releases/tag/v3.11.0) for details on upgrading from v3.10.
+
+## Fixes
+
+ * [#4413](https://github.com/openlayers/ol3/pull/4413) - Revert "Merge pull request #4339 from bartvde/issue-4337" ([@bartvde](https://github.com/bartvde))
+ * [#4412](https://github.com/openlayers/ol3/pull/4412) - Revert "Merge pull request #4344 from bartvde/issue-2844" ([@ahocevar](https://github.com/ahocevar))
+ * [#4408](https://github.com/openlayers/ol3/pull/4408) - Use ratio when calculating ImageWMS width and height ([@ahocevar](https://github.com/ahocevar))

changelog/v3.11.2.md

@@ -0,0 +1,11 @@
+# v3.11.2
+
+## Summary
+
+The v3.11.2 release is a patch release that addresses a few regressions in the v3.11.1 release.  See the [v3.11.0 release notes](https://github.com/openlayers/ol3/releases/tag/v3.11.0) for details on upgrading from v3.10.
+
+## Fixes
+
+ * [#4450](https://github.com/openlayers/ol3/pull/4450) - Fix select interaction regression caused by #4391 ([@ahocevar](https://github.com/ahocevar))
+ * [#4448](https://github.com/openlayers/ol3/pull/4448) - Check ol.source.UrlTile#urls property for null value ([@fredj](https://github.com/fredj))
+ * [#4439](https://github.com/openlayers/ol3/pull/4439) - Allow '' for crossOrigin (as Anonymous alias) ([@ahocevar](https://github.com/ahocevar))

changelog/v3.12.0.md

@@ -0,0 +1,96 @@
+# v3.12.0
+
+## Summary
+
+The v3.12.0 release includes features and fixes from 71 pull requests since the v3.11.2 release.  New features and improvements include:
+
+* Tile coordinate wrapping for raster reprojection.
+* Support for multi-line labels.
+* Allow rendering geometries to an arbitrary canvas (useful for vector legends).
+
+## Upgrade notes
+
+#### `ol.Map#forEachFeatureAtPixel` changes
+
+The optional `layerFilter` function is now also called for unmanaged layers. To get the same behaviour as before, wrap your layer filter code in an if block like this:
+```js
+function layerFilter(layer) {
+  if (map.getLayers().getArray().indexOf(layer) !== -1) {
+    // existing layer filter code
+  }
+}
+```
+
+## Full list of changes
+
+ * [#4559](https://github.com/openlayers/ol3/pull/4559) - Fix up failing KML test in Firefox ([@bartvde](https://github.com/bartvde))
+ * [#4561](https://github.com/openlayers/ol3/pull/4561) - Exclude feature loader MVT test from IE9 ([@bartvde](https://github.com/bartvde))
+ * [#4552](https://github.com/openlayers/ol3/pull/4552) - Make sure compiled code calls ol.VectorTile#setProjection ([@ahocevar](https://github.com/ahocevar))
+ * [#4551](https://github.com/openlayers/ol3/pull/4551) - Handle tile coordinate wrapping when reprojecting raster tiles ([@klokantech](https://github.com/klokantech))
+ * [#4544](https://github.com/openlayers/ol3/pull/4544) - Update vector-tile to version 1.2.0 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4537](https://github.com/openlayers/ol3/pull/4537) - Allow specifying non default DPI on ol.source.TileArcGISRest ([@bartvde](https://github.com/bartvde))
+ * [#4548](https://github.com/openlayers/ol3/pull/4548) - Improve vector tile related docs ([@ahocevar](https://github.com/ahocevar))
+ * [#4549](https://github.com/openlayers/ol3/pull/4549) - Update vector label example ([@tsauerwein](https://github.com/tsauerwein))
+ * [#4512](https://github.com/openlayers/ol3/pull/4512) - Support for multi-line labels (improved) ([@flightaware](https://github.com/flightaware))
+ * [#4546](https://github.com/openlayers/ol3/pull/4546) - Update coveralls to version 2.11.6 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4539](https://github.com/openlayers/ol3/pull/4539) - Ignore index.html in example list ([@fredj](https://github.com/fredj))
+ * [#4536](https://github.com/openlayers/ol3/pull/4536) - Register the change callback when the tile is enqueued ([@fredj](https://github.com/fredj))
+ * [#4528](https://github.com/openlayers/ol3/pull/4528) - Remove redundant code from ol.featureloader.tile ([@ahocevar](https://github.com/ahocevar))
+ * [#4535](https://github.com/openlayers/ol3/pull/4535) - Do not use an array for a single style ([@ahocevar](https://github.com/ahocevar))
+ * [#4532](https://github.com/openlayers/ol3/pull/4532) - Mark olx.source.WMTSOptions#dimensions as not null ([@fredj](https://github.com/fredj))
+ * [#4530](https://github.com/openlayers/ol3/pull/4530) - Remove use of goog.isNull ([@fredj](https://github.com/fredj))
+ * [#4529](https://github.com/openlayers/ol3/pull/4529) - Update coding style rules ([@fredj](https://github.com/fredj))
+ * [#4518](https://github.com/openlayers/ol3/pull/4518) - Add support for OSM vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#4524](https://github.com/openlayers/ol3/pull/4524) - Add example for rendering custom point symbols ([@ahocevar](https://github.com/ahocevar))
+ * [#4523](https://github.com/openlayers/ol3/pull/4523) - Allow rendering geometries to an arbitrary canvas ([@ahocevar](https://github.com/ahocevar))
+ * [#4525](https://github.com/openlayers/ol3/pull/4525) - Make render tests work on more devices ([@ahocevar](https://github.com/ahocevar))
+ * [#4515](https://github.com/openlayers/ol3/pull/4515) - Accept HTMLCanvasElement for an icon's img ([@ahocevar](https://github.com/ahocevar))
+ * [#4521](https://github.com/openlayers/ol3/pull/4521) - Fix imagestyle docs ([@ahocevar](https://github.com/ahocevar))
+ * [#4508](https://github.com/openlayers/ol3/pull/4508) - Remove unused files ([@fredj](https://github.com/fredj))
+ * [#4487](https://github.com/openlayers/ol3/pull/4487) - Remove fallback css color ([@fredj](https://github.com/fredj))
+ * [#4502](https://github.com/openlayers/ol3/pull/4502) - Improve ol.source.WMTS.optionsFromCapabilities jsdoc layout ([@fredj](https://github.com/fredj))
+ * [#4511](https://github.com/openlayers/ol3/pull/4511) - Minor code cleanup ([@fredj](https://github.com/fredj))
+ * [#4510](https://github.com/openlayers/ol3/pull/4510) - Adding a check just in case the projection is not defined/supported ([@GeoCat](https://github.com/GeoCat))
+ * [#4505](https://github.com/openlayers/ol3/pull/4505) - Remove use of goog.object.getKeys ([@fredj](https://github.com/fredj))
+ * [#4472](https://github.com/openlayers/ol3/pull/4472) - Do not ignore layer filter for unmanaged layers ([@ahocevar](https://github.com/ahocevar))
+ * [#4476](https://github.com/openlayers/ol3/pull/4476) - Remove use of goog.functions.constant ([@fredj](https://github.com/fredj))
+ * [#4484](https://github.com/openlayers/ol3/pull/4484) - Remove use of goog.dom.createDom ([@fredj](https://github.com/fredj))
+ * [#4486](https://github.com/openlayers/ol3/pull/4486) - Remove note about DragZoom and vector support ([@fredj](https://github.com/fredj))
+ * [#4483](https://github.com/openlayers/ol3/pull/4483) - Remove use of goog.object.containsKey ([@fredj](https://github.com/fredj))
+ * [#4475](https://github.com/openlayers/ol3/pull/4475) - Fix up failing tests in Internet Explorer ([@bartvde](https://github.com/bartvde))
+ * [#4485](https://github.com/openlayers/ol3/pull/4485) - Use appendChild instead of goog.dom.append ([@fredj](https://github.com/fredj))
+ * [#4481](https://github.com/openlayers/ol3/pull/4481) - Remove blur workaround in ol.control.Attribution ([@fredj](https://github.com/fredj))
+ * [#4479](https://github.com/openlayers/ol3/pull/4479) - Export ol.interaction.Interaction#getMap function ([@fredj](https://github.com/fredj))
+ * [#4478](https://github.com/openlayers/ol3/pull/4478) - Fix olx.control.FullScreenOptions#label apidoc ([@fredj](https://github.com/fredj))
+ * [#4477](https://github.com/openlayers/ol3/pull/4477) - Replace goog.nullFunction with ol.nullFunction ([@fredj](https://github.com/fredj))
+ * [#4474](https://github.com/openlayers/ol3/pull/4474) - Remove use of goog.dom.createElement and goog.dom.createTextNode ([@fredj](https://github.com/fredj))
+ * [#4469](https://github.com/openlayers/ol3/pull/4469) - Upgrade to JSTS 0.17.0 in example ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#4465](https://github.com/openlayers/ol3/pull/4465) - Update handlebars to version 4.0.5 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4464](https://github.com/openlayers/ol3/pull/4464) - Merge in changes from the 3.11.2 release. ([@openlayers](https://github.com/openlayers))
+ * [#4463](https://github.com/openlayers/ol3/pull/4463) - Remove use of goog.array.sort ([@fredj](https://github.com/fredj))
+ * [#4450](https://github.com/openlayers/ol3/pull/4450) - Fix select interaction regression caused by #4391 ([@ahocevar](https://github.com/ahocevar))
+ * [#4458](https://github.com/openlayers/ol3/pull/4458) - Remove extra space in type annotation ([@fredj](https://github.com/fredj))
+ * [#4420](https://github.com/openlayers/ol3/pull/4420) - Remove Bootstrap and jQuery from example snippets. ([@openlayers](https://github.com/openlayers))
+ * [#4442](https://github.com/openlayers/ol3/pull/4442) - Use jsdoc@3.4.0. ([@tschaub](https://github.com/tschaub))
+ * [#4449](https://github.com/openlayers/ol3/pull/4449) - Change the label of the full screen button to be more intuitive ([@bartvde](https://github.com/bartvde))
+ * [#4448](https://github.com/openlayers/ol3/pull/4448) - Check ol.source.UrlTile#urls property for null value ([@fredj](https://github.com/fredj))
+ * [#4440](https://github.com/openlayers/ol3/pull/4440) - Raster reprojection tutorial ([@klokantech](https://github.com/klokantech))
+ * [#4439](https://github.com/openlayers/ol3/pull/4439) - Allow '' for crossOrigin (as Anonymous alias) ([@ahocevar](https://github.com/ahocevar))
+ * [#4429](https://github.com/openlayers/ol3/pull/4429) - Dispatch a change event only if the value changes ([@fredj](https://github.com/fredj))
+ * [#4435](https://github.com/openlayers/ol3/pull/4435) - Remove unnecessary cast ([@fredj](https://github.com/fredj))
+ * [#4434](https://github.com/openlayers/ol3/pull/4434) - Remove unused local variables ([@fredj](https://github.com/fredj))
+ * [#4433](https://github.com/openlayers/ol3/pull/4433) - Remove unused local variables ([@fredj](https://github.com/fredj))
+ * [#4140](https://github.com/openlayers/ol3/pull/4140) - Add flight animation example ([@tsauerwein](https://github.com/tsauerwein))
+ * [#4428](https://github.com/openlayers/ol3/pull/4428) - Add imageSize regression test for ol.source.ImageWMS ([@ahocevar](https://github.com/ahocevar))
+ * [#4426](https://github.com/openlayers/ol3/pull/4426) - Improve ol.source.StaticImage ([@ahocevar](https://github.com/ahocevar))
+ * [#4425](https://github.com/openlayers/ol3/pull/4425) - Test number property with !== undefined ([@fredj](https://github.com/fredj))
+ * [#4423](https://github.com/openlayers/ol3/pull/4423) - Update mocha to version 2.3.4 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4416](https://github.com/openlayers/ol3/pull/4416) - Update clean-css to version 3.4.8 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4415](https://github.com/openlayers/ol3/pull/4415) - Scale StaticImage image to imageExtent ([@ahocevar](https://github.com/ahocevar))
+ * [#4414](https://github.com/openlayers/ol3/pull/4414) - Remove ol.ImageUrlFunction ([@ahocevar](https://github.com/ahocevar))
+ * [#4389](https://github.com/openlayers/ol3/pull/4389) - Smooth transitions on parameter changes ([@elemoine](https://github.com/elemoine))
+ * [#4410](https://github.com/openlayers/ol3/pull/4410) - Merge in changes from the 3.11.1 release. ([@openlayers](https://github.com/openlayers))
+ * [#4401](https://github.com/openlayers/ol3/pull/4401) - Allow style function to return a style. ([@tschaub](https://github.com/tschaub))
+ * [#4404](https://github.com/openlayers/ol3/pull/4404) - Set correctly the opt_this parameter when writing a KML document ([@oterral](https://github.com/oterral))
+ * [#4397](https://github.com/openlayers/ol3/pull/4397) - Update glob to version 6.0.1 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#4362](https://github.com/openlayers/ol3/pull/4362) - Rotate control now takes optional resetNorth function. ([@tamarmot](https://github.com/tamarmot))

config/examples/example.html

@@ -1,16 +1,17 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="./resources/prism/prism.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 }}}
+    {{{ extraHead.local }}}
     {{{ css.tag }}}
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
     <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
   </head>
@@ -24,14 +25,17 @@
 
     <div class="container-fluid">
 
-      {{{ contents }}}
-
       <div class="row-fluid">
         <div class="span12">
           <h4 id="title">{{ title }}</h4>
+          {{{ contents }}}
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
           <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>
@@ -41,47 +45,33 @@
           <a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
           <a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
         </div>
-        <form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
+        <form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/library/pure/">
           <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,http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js">
+          <input type="hidden" name="resources" value="http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
         </form>
         <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.5/css/bootstrap.min.css"&gt;
-&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
-&lt;script src="http://openlayers.org/en/v{{ olVersion }}/build/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;head&gt;
+    &lt;title&gt;{{ title }}&lt;/title&gt;
+    &lt;link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
+    &lt;script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"&gt;&lt;/script&gt;{{#if extraHead.remote}}
+{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
+    &lt;style&gt;
+{{ indent css.source spaces=6 }}    &lt;/style&gt;{{/if}}
+  &lt;/head&gt;
+  &lt;body&gt;
+{{ indent contents spaces=4 }}    &lt;script&gt;
+{{ indent js.source spaces=6 }}    &lt;/script&gt;
+  &lt;/body&gt;
 &lt;/html&gt;</code></pre>
       </div>
     </div>
 
-    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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

@@ -16,6 +16,4 @@ To enable this, examples have the following, not needed in application code:
 
  * 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/index.md

@@ -11,6 +11,7 @@
 [ol.layer.Tile](ol.layer.Tile.html)<br>
 [ol.layer.Image](ol.layer.Image.html)<br>
 [ol.layer.Vector](ol.layer.Vector.html)</td>
+[ol.layer.VectorTile](ol.layer.VectorTile.html)</td>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
@@ -27,6 +28,7 @@ Interactions for [vector features](ol.Feature.html)
 <td>[Tile sources](ol.source.Tile.html) for [ol.layer.Tile](ol.layer.Tile.html)
 <br>[Image sources](ol.source.Image.html) for [ol.layer.Image](ol.layer.Image.html)
 <br>[Vector sources](ol.source.Vector.html) for [ol.layer.Vector](ol.layer.Vector.html)
+<br>[Vector tile sources](ol.source.VectorTile.html) for [ol.layer.VectorTile](ol.layer.VectorTile.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>Observable objects</th><th>Other components</th></tr>

config/jsdoc/api/plugins/api.js

@@ -16,7 +16,7 @@ exports.defineTags = function(dictionary) {
         doclet.stability = level;
       } else {
         var errorText = util.format('Invalid stability level (%s) in %s line %s', tag.text, doclet.meta.filename, doclet.meta.lineno);
-        require('jsdoc/util/error').handle( new Error(errorText) );
+        require('jsdoc/lib/jsdoc/util/error').handle( new Error(errorText) );
       }
     }
   });

config/jsdoc/api/template/publish.js

@@ -1,10 +1,10 @@
 /*global env: true */
-var template = require('jsdoc/template'),
-    fs = require('jsdoc/fs'),
-    path = require('jsdoc/path'),
+var template = require('jsdoc/lib/jsdoc/template'),
+    fs = require('jsdoc/lib/jsdoc/fs'),
+    path = require('jsdoc/lib/jsdoc/path'),
     taffy = require('taffydb').taffy,
-    handle = require('jsdoc/util/error').handle,
-    helper = require('jsdoc/util/templateHelper'),
+    handle = require('jsdoc/lib/jsdoc/util/error').handle,
+    helper = require('jsdoc/lib/jsdoc/util/templateHelper'),
     _ = require('underscore'),
     htmlsafe = helper.htmlsafe,
     linkto = helper.linkto,
@@ -350,8 +350,8 @@ exports.publish = function(taffyData, opts, tutorials) {
     var staticFileScanner;
     if (conf['default'].staticFiles) {
         staticFilePaths = conf['default'].staticFiles.paths || [];
-        staticFileFilter = new (require('jsdoc/src/filter')).Filter(conf['default'].staticFiles);
-        staticFileScanner = new (require('jsdoc/src/scanner')).Scanner();
+        staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
+        staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
 
         staticFilePaths.forEach(function(filePath) {
             var extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);

config/jsdoc/info/publish.js

@@ -11,6 +11,7 @@ var path = require('path');
  * Publish hook for the JSDoc template.  Writes to JSON stdout.
  * @param {function} data The root of the Taffy DB containing doclet records.
  * @param {Object} opts Options.
+ * @return {Promise} A promise that resolves when writing is complete.
  */
 exports.publish = function(data, opts) {
 

css/ol.css

@@ -1,3 +1,8 @@
+.ol-box {
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 2px solid blue;
+}
 
 .ol-mouse-position {
   top: 8px;
@@ -6,7 +11,6 @@
 }
 
 .ol-scale-line {
-  background: #95b9e6;
   background: rgba(0,60,136,0.3);
   border-radius: 4px;
   bottom: 8px;
@@ -15,9 +19,9 @@
   position: absolute;
 }
 .ol-scale-line-inner {
-  border: 1px solid #eeeeee;
+  border: 1px solid #eee;
   border-top: none;
-  color: #eeeeee;
+  color: #eee;
   font-size: 10px;
   text-align: center;
   margin: 1px;
@@ -42,7 +46,6 @@
 
 .ol-control {
   position: absolute;
-  background-color: #eee;
   background-color: rgba(255,255,255,0.4);
   border-radius: 4px;
   padding: 2px;
@@ -90,7 +93,6 @@
   height: 1.375em;
   width: 1.375em;
   line-height: .4em;
-  background-color: #7b98bc;
   background-color: rgba(0,60,136,0.5);
   border: none;
   border-radius: 2px;
@@ -117,7 +119,6 @@
 .ol-control button:hover,
 .ol-control button:focus {
   text-decoration: none;
-  background-color: #4c6079;
   background-color: rgba(0,60,136,0.7);
 }
 .ol-zoom .ol-zoom-in {
@@ -154,6 +155,7 @@
 .ol-attribution img {
   max-height: 2em;
   max-width: inherit;
+  vertical-align: middle;
 }
 .ol-attribution ul, .ol-attribution button {
   display: inline-block;
@@ -192,26 +194,15 @@
 .ol-zoomslider {
   top: 4.5em;
   left: .5em;
-  width: 24px;
   height: 200px;
 }
-.ol-zoomslider-thumb {
-  position: absolute;
-  background: #7b98bc;
-  background: rgba(0,60,136,0.5);
-  border-radius: 2px;
-  cursor: pointer;
+.ol-zoomslider button {
+  position: relative;
   height: 10px;
-  width: 22px;
-  margin: 3px;
 }
 
 .ol-touch .ol-zoomslider {
   top: 5.5em;
-  width: 2.052em;
-}
-.ol-touch .ol-zoomslider-thumb {
-  width: 1.8em;
 }
 
 .ol-overviewmap {

doc/tutorials/closure.md

@@ -312,7 +312,7 @@ directory:
 ```
 
 Note that the page includes a `script` tag referencing the `app.js` file,
-which is the file resuted from the compilation.
+which is the file resulting from the compilation.
 
 You are done!
 

doc/tutorials/index.hbs

@@ -10,3 +10,4 @@ layout: doc.hbs
 * [Create Custom Builds](custom-builds.html)
 * [Bundle Application and OpenLayers using Browserify](browserify.html)
 * [Compile Application and OpenLayers together](closure.html)
+* [Raster Reprojection](raster-reprojection.html)

doc/tutorials/raster-reprojection.md

@@ -0,0 +1,132 @@
+---
+title: Raster Reprojection
+layout: doc.hbs
+---
+
+# Raster Reprojection
+
+OpenLayers 3 has an ability to display raster data from WMS, WMTS, static images and many other sources in a different coordinate system than delivered from the server.
+Transformation of the map projections of the image happens directly in a web browser.
+The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.
+
+# Usage
+The API usage is very simple. Just specify proper projection (using [EPSG](http://epsg.io) code) on `ol.View`:
+``` javascript
+var map = new ol.Map({
+  target: 'map',
+  view: new ol.View({
+    projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
+    center: [0, 0],
+    zoom: 2
+  }),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.TileWMS({
+        projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
+        url: 'http://demo.boundlessgeo.com/geoserver/wms',
+        params: {
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+        }
+      })
+    })
+  ]
+});
+```
+If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projection different from the current `ol.View`’s projection then the reprojection happens automatically under the hood.
+
+### Examples
+- [Raster reprojection demo](http://openlayers.org/en/master/examples/reprojection.html)
+- [OpenStreetMap to WGS84 reprojection](http://openlayers.org/en/master/examples/reprojection-wgs84.html)
+- [Reprojection with EPSG.io database search](http://openlayers.org/en/master/examples/reprojection-by-code.html)
+- [Image reprojection](http://openlayers.org/en/master/examples/reprojection-image.html)
+
+### Custom projection
+The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string.
+Following example shows definition of a [British National Grid](http://epsg.io/27700):
+
+``` html
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
+```
+
+``` javascript
+proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
+    '+x_0=400000 +y_0=-100000 +ellps=airy ' +
+    '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
+    '+units=m +no_defs');
+var proj27700 = ol.proj.get('EPSG:27700');
+proj27700.setExtent([0, 0, 700000, 1300000]);
+```
+
+### Change of the view projection
+To switch the projection used to display the map you have to set a new `ol.View` with selected projection on the `ol.Map`:
+``` javascript
+map.setView(new ol.View({
+    projection: 'EPSG:27700',
+    center: [400000, 650000],
+    zoom: 4
+  }));
+```
+
+## TileGrid and Extents
+When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles.
+The TileGrid of the reprojected tiles is by default internally constructed using `ol.tilegrid.getForProjection(projection)`.
+The projection should have extent defined (see above) for this to work properly.
+
+Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using `ol.source.TileImage#setTileGridForProjection(projection, tilegrid)`.
+This TileGrid will then be used when reprojecting to the specified projection instead of creating the default one.
+In certain cases, this can be used to optimize performance (by tweaking tile sizes) or visual quality (by specifying resolutions).
+
+# How it works
+
+The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol.proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
+The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):
+
+<img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" />
+
+This way we can support a wide range of projections from proj4js (or even custom transformation functions) on almost any hardware (with canvas 2d support) with a relatively small number of actual transformation calculations.
+
+The precision of the reprojection is then limited by the number of triangles.
+
+The reprojection process preserves transparency on the raster data supplied from the source (png or gif) and the gaps and no-data pixels generated by reprojection are automatically transparent.
+
+###Dynamic triangulation
+
+The above image above shows a noticeable error (especially on the edges) when the original image (left; EPSG:27700) is transformed with only a limited number of triangles (right; EPSG:3857).
+The error can be minimized by increasing the number of triangles used.
+
+Since some transformations require a more detail triangulation network, the dynamic triangulation process automatically measures reprojection error and iteratively subdivides to meet a specific error threshold:
+
+<img src="raster-reprojection-resources/iterative-triangulation.png" alt="Iterative triangulation" width="600" />
+
+For debugging, rendering of the reprojection edges can be enabled by `ol.source.TileImage#setRenderReprojectionEdges(true)`.
+
+# Advanced
+
+### Disabling reprojection
+In case you are creating a custom build of OpenLayers and do not need the reprojection code, you can reduce the build size by setting `ol.ENABLE_RASTER_REPROJECTION` to `false`, which completely disables the reprojection support.
+See [Custom builds](custom-builds.html#defines) tutorial on how to do this.
+
+### Triangulation precision threshold
+The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ol.DEFAULT_RASTER_REPROJECTION_ERROR_THRESHOLD` (0.5 pixel).
+In case a different threshold needs to be defined for different sources, the `reprojectionErrorThreshold` option can be passed when constructing the tile image source.
+
+###Limiting visibility of reprojected map by extent
+
+The reprojection algorithm uses inverse transformation (from *view projection* to *data projection*).
+For certain coordinate systems this can result in a "double occurrence" of the source data on a map.
+For example, when reprojecting a map of Switzerland from EPSG:21781 to EPSG:3857, it is displayed twice: once at the proper place in Europe, but also in the Pacific Ocean near New Zealand, on the opposite side of the globe.
+
+<img src="raster-reprojection-resources/double-occurrence.jpg" alt="Double occurrence of a reprojected map" width="600" />
+
+Although this is mathematically correct behavior of the inverse transformation, visibility of the layer on multiple places is not expected by users.
+A possible general solution would be to calculate the forward transformation for every vertex as well - but this would significantly decrease performance (especially for computationally expensive transformations).
+
+Therefore a recommended workaround is to define a proper visibility extent on the `ol.layer.Tile` in the view projection.
+Setting such a limit is demonstrated in the [reprojection demo example](http://openlayers.org/en/master/examples/reprojection.html).
+
+### Resolution calculation
+When determining source tiles to load, the ideal source resolution needs to be calculated.
+The `ol.reproj.calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution)` function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.
+
+It is, however, generally not practical to use the same source zoom level for the whole target zoom level -- different projections can have significantly different resolutions in different parts of the world (e.g. polar regions in EPSG:3857 vs EPSG:4326) and enforcing a single resolution for the whole zoom level would result in some tiles being scaled up/down, possibly requiring a huge number of source tiles to be loaded.
+Therefore, the resolution mapping is calculated separately for each reprojected tile (in the middle of the tile extent).

examples/accessible.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Accessibility example
+layout: example.html
+title: Accessible Map
 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.
@@ -10,11 +10,7 @@ docs: >
 
 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>
+<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>

examples/animation.html

@@ -1,27 +1,19 @@
 ---
-template: example.html
-title: Animation example
+layout: example.html
+title: View Animation
 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" title="Rotate clockwise">↻</button>
-    <button id="rotate-right" title="Rotate counterclockwise">↺</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 id="map" class="map"></div>
+<button id="rotate-left" title="Rotate clockwise">↻</button>
+<button id="rotate-right" title="Rotate counterclockwise">↺</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>

examples/arcgis-tiled.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Tiled ArcGIS MapServer example
+layout: example.html
+title: Tiled ArcGIS MapServer
 shortdesc: Example of a tiled ArcGIS layer.
 docs: >
   This example shows how to use an ArcGIS REST MapService as tiles.
@@ -9,8 +9,4 @@ docs: >
   <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>
+<div id="map" class="map"></div>

examples/attributions.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Attributions example
+layout: example.html
+title: Attributions
 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.
@@ -8,8 +8,4 @@ docs: >
   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>
+<div id="map" class="map"></div>

examples/bing-maps.html

@@ -1,20 +1,18 @@
 ---
-template: example.html
-title: Bing Maps example
+layout: example.html
+title: Bing Maps
 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"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
- <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 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>

examples/blend-modes.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Blend modes example
+layout: example.html
+title: Blend Modes
 shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
 docs: >
   <p>This example shows how to change the canvas compositing / blending mode in
@@ -20,57 +20,49 @@ docs: >
   checkboxes.</p>
 tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
-<div class="row-fluid">
-  <div class="span12">
-    <form class="form-horizontal">
-      <label>
-        <select id="blend-mode" class="form-control">
-          <option value="source-over">source-over (default)</option>
-          <option>source-in</option>
-          <option>source-out</option>
-          <option>source-atop</option>
-          <option>destination-over</option>
-          <option>destination-in</option>
-          <option>destination-out</option>
-          <option>destination-atop</option>
-          <option>lighter</option>
-          <option>copy</option>
-          <option>xor</option>
-          <option>multiply</option>
-          <option>screen</option>
-          <option>overlay</option>
-          <option>darken</option>
-          <option>lighten</option>
-          <option>color-dodge</option>
-          <option>color-burn</option>
-          <option>hard-light</option>
-          <option>soft-light</option>
-          <option selected>difference</option>
-          <option>exclusion</option>
-          <option>hue</option>
-          <option>saturation</option>
-          <option>color</option>
-          <option>luminosity</option>
-        </select>
-        Canvas compositing / blending mode
-      </label>
-      <label>
-        <input type="checkbox" id="affect-red" checked>
-        Red circle affected
-      </label>
-      <label>
-        <input type="checkbox" id="affect-green" checked>
-        Green circle affected
-      </label>
-      <label>
-        <input type="checkbox" id="affect-blue" checked>
-        Blue circle affected
-      </label>
-    </form>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<form class="form-horizontal">
+  <label>
+    <select id="blend-mode" class="form-control">
+      <option value="source-over">source-over (default)</option>
+      <option>source-in</option>
+      <option>source-out</option>
+      <option>source-atop</option>
+      <option>destination-over</option>
+      <option>destination-in</option>
+      <option>destination-out</option>
+      <option>destination-atop</option>
+      <option>lighter</option>
+      <option>copy</option>
+      <option>xor</option>
+      <option>multiply</option>
+      <option>screen</option>
+      <option>overlay</option>
+      <option>darken</option>
+      <option>lighten</option>
+      <option>color-dodge</option>
+      <option>color-burn</option>
+      <option>hard-light</option>
+      <option>soft-light</option>
+      <option selected>difference</option>
+      <option>exclusion</option>
+      <option>hue</option>
+      <option>saturation</option>
+      <option>color</option>
+      <option>luminosity</option>
+    </select>
+    Canvas compositing / blending mode
+  </label>
+  <label>
+    <input type="checkbox" id="affect-red" checked>
+    Red circle affected
+  </label>
+  <label>
+    <input type="checkbox" id="affect-green" checked>
+    Green circle affected
+  </label>
+  <label>
+    <input type="checkbox" id="affect-blue" checked>
+    Blue circle affected
+  </label>
+</form>

examples/box-selection.css

@@ -0,0 +1,4 @@
+.ol-dragbox {
+  background-color: rgba(255,255,255,0.4);
+  border-color: rgba(100,150,0,1);
+}

examples/box-selection.html

@@ -1,20 +1,12 @@
 ---
-template: example.html
-title: Box selection example
+layout: example.html
+title: Box Selection
 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>
+  <p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) 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>
-</div>
+<div id="map" class="map"></div>
+<div id="info">No countries selected</div>

examples/box-selection.js

@@ -8,8 +8,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 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.Vector({
@@ -43,12 +41,7 @@ var selectedFeatures = select.getFeatures();
 
 // a DragBox interaction used to select features by drawing boxes
 var dragBox = new ol.interaction.DragBox({
-  condition: ol.events.condition.shiftKeyOnly,
-  style: new ol.style.Style({
-    stroke: new ol.style.Stroke({
-      color: [0, 0, 255, 1]
-    })
-  })
+  condition: ol.events.condition.platformModifierKeyOnly
 });
 
 map.addInteraction(dragBox);

examples/button-title.css

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

examples/button-title.html

@@ -1,13 +1,13 @@
 ---
-template: example.html
-title: Custom tooltips example
+layout: example.html
+title: Custom Tooltips
 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"
+resources:
+  - https://code.jquery.com/jquery-1.11.2.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/canvas-tiles.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Canvas tiles example
+layout: example.html
+title: Canvas Tiles
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >
   The black grid tiles are generated on the client with an HTML5 canvas. The
@@ -10,8 +10,4 @@ docs: >
   `-y - 1`.
 tags: "layers, openstreetmap, canvas"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/center.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Advanced View Positioning example
+layout: example.html
+title: Advanced View Positioning
 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
@@ -10,25 +10,19 @@ docs: >
   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>
+  <p>Use <code>Alt+Shift+Drag</code> 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 class="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>
+<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>

examples/cluster.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: Clustering example
+layout: example.html
+title: Clustered Features
 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>
+<div id="map" class="map"></div>

examples/cluster.js

@@ -38,7 +38,7 @@ var clusters = new ol.layer.Vector({
     var size = feature.get('features').length;
     var style = styleCache[size];
     if (!style) {
-      style = [new ol.style.Style({
+      style = new ol.style.Style({
         image: new ol.style.Circle({
           radius: 10,
           stroke: new ol.style.Stroke({
@@ -54,7 +54,7 @@ var clusters = new ol.layer.Vector({
             color: '#fff'
           })
         })
-      })];
+      });
       styleCache[size] = style;
     }
     return style;

examples/color-manipulation.css

@@ -0,0 +1,5 @@
+table.controls td {
+  text-align: center;
+  padding: 2px 5px;
+  min-width: 60px;
+}

examples/color-manipulation.html

@@ -0,0 +1,26 @@
+---
+layout: example.html
+title: Color Manipulation
+shortdesc: Demonstrates color manipulation with a raster source.
+docs: >
+  A raster source allows arbitrary manipulation of pixel values.  In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source.  The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
+tags: "color, hue, lightness, chroma"
+---
+<div id="map" class="map"></div>
+<table class="controls">
+  <tr>
+    <td>hue</td>
+    <td><span id="hueOut"></span>°</td>
+    <td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
+  </tr>
+  <tr>
+    <td>chroma</td>
+    <td><span id="chromaOut"></span> %</td>
+    <td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
+  </tr>
+  <tr>
+    <td>lightness</td>
+    <td><span id="lightnessOut"></span> %</td>
+    <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
+  </tr>
+</table>

examples/color-manipulation.js

@@ -0,0 +1,173 @@
+// NOCOMPILE
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.source.Raster');
+goog.require('ol.source.Stamen');
+
+
+/**
+ * Color manipulation functions below are adapted from
+ * https://github.com/d3/d3-color.
+ */
+var Xn = 0.950470;
+var Yn = 1;
+var Zn = 1.088830;
+var t0 = 4 / 29;
+var t1 = 6 / 29;
+var t2 = 3 * t1 * t1;
+var t3 = t1 * t1 * t1;
+var twoPi = 2 * Math.PI;
+
+
+/**
+ * Convert an RGB pixel into an HCL pixel.
+ * @param {ol.raster.Pixel} pixel A pixel in RGB space.
+ * @return {ol.raster.Pixel} A pixel in HCL space.
+ */
+function rgb2hcl(pixel) {
+  var red = rgb2xyz(pixel[0]);
+  var green = rgb2xyz(pixel[1]);
+  var blue = rgb2xyz(pixel[2]);
+
+  var x = xyz2lab(
+      (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn);
+  var y = xyz2lab(
+      (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn);
+  var z = xyz2lab(
+      (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);
+
+  var l = 116 * y - 16;
+  var a = 500 * (x - y);
+  var b = 200 * (y - z);
+
+  var c = Math.sqrt(a * a + b * b);
+  var h = Math.atan2(b, a);
+  if (h < 0) {
+    h += twoPi;
+  }
+
+  pixel[0] = h;
+  pixel[1] = c;
+  pixel[2] = l;
+
+  return pixel;
+}
+
+
+/**
+ * Convert an HCL pixel into an RGB pixel.
+ * @param {ol.raster.Pixel} pixel A pixel in HCL space.
+ * @return {ol.raster.Pixel} A pixel in RGB space.
+ */
+function hcl2rgb(pixel) {
+  var h = pixel[0];
+  var c = pixel[1];
+  var l = pixel[2];
+
+  var a = Math.cos(h) * c;
+  var b = Math.sin(h) * c;
+
+  var y = (l + 16) / 116;
+  var x = isNaN(a) ? y : y + a / 500;
+  var z = isNaN(b) ? y : y - b / 200;
+
+  y = Yn * lab2xyz(y);
+  x = Xn * lab2xyz(x);
+  z = Zn * lab2xyz(z);
+
+  pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z);
+  pixel[1] = xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z);
+  pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
+
+  return pixel;
+}
+
+function xyz2lab(t) {
+  return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
+}
+
+function lab2xyz(t) {
+  return t > t1 ? t * t * t : t2 * (t - t0);
+}
+
+function rgb2xyz(x) {
+  return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+}
+
+function xyz2rgb(x) {
+  return 255 * (x <= 0.0031308 ?
+      12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
+}
+
+var raster = new ol.source.Raster({
+  sources: [new ol.source.Stamen({
+    layer: 'watercolor'
+  })],
+  operation: function(pixels, data) {
+    var hcl = rgb2hcl(pixels[0]);
+
+    var h = hcl[0] + Math.PI * data.hue / 180;
+    if (h < 0) {
+      h += twoPi;
+    } else if (h > twoPi) {
+      h -= twoPi;
+    }
+    hcl[0] = h;
+
+    hcl[1] *= (data.chroma / 100);
+    hcl[2] *= (data.lightness / 100);
+
+    return hcl2rgb(hcl);
+  },
+  lib: {
+    rgb2hcl: rgb2hcl,
+    hcl2rgb: hcl2rgb,
+    rgb2xyz: rgb2xyz,
+    lab2xyz: lab2xyz,
+    xyz2lab: xyz2lab,
+    xyz2rgb: xyz2rgb,
+    Xn: Xn,
+    Yn: Yn,
+    Zn: Zn,
+    t0: t0,
+    t1: t1,
+    t2: t2,
+    t3: t3,
+    twoPi: twoPi
+  }
+});
+
+raster.on('beforeoperations', function(event) {
+  var data = event.data;
+  for (var id in controls) {
+    data[id] = Number(controls[id].value);
+  }
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Image({
+      source: raster
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 2500000],
+    zoom: 2,
+    maxZoom: 18
+  })
+});
+
+var controlIds = ['hue', 'chroma', 'lightness'];
+var controls = {};
+controlIds.forEach(function(id) {
+  var control = document.getElementById(id);
+  var output = document.getElementById(id + 'Out');
+  control.addEventListener('input', function() {
+    output.innerText = control.value;
+    raster.changed();
+  });
+  output.innerText = control.value;
+  controls[id] = control;
+});

examples/custom-controls.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: Custom control example
+layout: example.html
+title: Custom Controls
 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>
+<div id="map" class="map"></div>

examples/custom-controls.js

@@ -75,7 +75,7 @@ var map = new ol.Map({
   target: 'map',
   view: new ol.View({
     center: [0, 0],
-    zoom: 2,
+    zoom: 3,
     rotation: 1
   })
 });

examples/custom-interactions.html

@@ -1,14 +1,10 @@
 ---
-template: example.html
-title: Custom interaction example
+layout: example.html
+title: Custom Interactions
 shortdesc: Example of a custom interaction.
 docs: >
   This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
   Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/custom-interactions.js

@@ -19,8 +19,7 @@ goog.require('ol.style.Style');
 /**
  * Define a namespace for the application.
  */
-window.app = {};
-var app = window.app;
+var app = {};
 
 
 

examples/d3.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: d3 integration example
+layout: example.html
+title: d3 Integration
 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>
@@ -9,8 +9,4 @@ 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>
+<div id="map" class="map"></div>

examples/d3.js

@@ -1,5 +1,4 @@
 // NOCOMPILE
-// this example uses d3 for which we don't have an externs file.
 goog.require('ol');
 goog.require('ol.Map');
 goog.require('ol.View');

examples/device-orientation.html

@@ -1,23 +1,19 @@
 ---
-template: example.html
-title: Device-Orientation example
+layout: example.html
+title: Device Orientation
 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>
-</div>
+<div id="map" class="map"></div>
+<label>
+  track changes
+  <input id="track" type="checkbox"/>
+</label>
+<p>
+  α : <code id="alpha"></code>&nbsp;&nbsp;
+  β : <code id="beta"></code>&nbsp;&nbsp;
+  γ : <code id="gamma"></code>&nbsp;&nbsp;
+  heading : <code id="heading"></code>
+</p>

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

@@ -1,19 +1,12 @@
 ---
-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.
+layout: example.html
+title: Drag-and-Drop Image Vector
+shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector.
 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.
+  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"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<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>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

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

@@ -19,7 +19,7 @@ goog.require('ol.style.Style');
 
 
 var defaultStyle = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.5)'
@@ -30,14 +30,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
-  'Polygon': [new ol.style.Style({
+  }),
+  'Polygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
@@ -45,8 +45,8 @@ var defaultStyle = {
       color: '#0ff',
       width: 1
     })
-  })],
-  'MultiPoint': [new ol.style.Style({
+  }),
+  'MultiPoint': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,0,255,0.5)'
@@ -57,14 +57,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })],
-  'MultiPolygon': [new ol.style.Style({
+  }),
+  'MultiPolygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
@@ -72,7 +72,7 @@ var defaultStyle = {
       color: '#00f',
       width: 1
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/drag-and-drop.html

@@ -1,19 +1,12 @@
 ---
-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.
+layout: example.html
+title: Drag-and-Drop
+shortdesc: Example of using the drag-and-drop interaction.
 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.
+  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"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<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>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/drag-and-drop.js

@@ -18,7 +18,7 @@ goog.require('ol.style.Style');
 
 
 var defaultStyle = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.5)'
@@ -29,14 +29,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
-  'Polygon': [new ol.style.Style({
+  }),
+  'Polygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
@@ -44,8 +44,8 @@ var defaultStyle = {
       color: '#0ff',
       width: 1
     })
-  })],
-  'MultiPoint': [new ol.style.Style({
+  }),
+  'MultiPoint': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,0,255,0.5)'
@@ -56,14 +56,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })],
-  'MultiPolygon': [new ol.style.Style({
+  }),
+  'MultiPolygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
@@ -71,7 +71,7 @@ var defaultStyle = {
       color: '#00f',
       width: 1
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/drag-rotate-and-zoom.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: Drag rotate and zoom example
+layout: example.html
+title: Drag, Rotate, and Zoom
 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>
+  <p><code>Shift+Drag</code> 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>
+<div id="map" class="map"></div>

examples/draw-and-modify-features.html

@@ -1,21 +1,17 @@
 ---
-template: example.html
-title: Draw and modify features example
+layout: example.html
+title: Draw and Modify Features
 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>
+<div id="map" class="map"></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>

examples/draw-features.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Draw features example
+layout: example.html
+title: Draw Features
 shortdesc: Example of using the ol.interaction.Draw interaction.
 docs: >
   Example of using the Draw interaction. Select a geometry type from the
@@ -12,20 +12,16 @@ docs: >
   points and creates a rectangular box.
 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>
-        <option value="Square">Square</option>
-        <option value="Box">Box</option>
-      </select>
-    </form>
-  </div>
-</div>
+<div id="map" class="map"></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>
+    <option value="Circle">Circle</option>
+    <option value="Square">Square</option>
+    <option value="Box">Box</option>
+    <option value="None">None</option>
+  </select>
+</form>

examples/dynamic-data.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: Dynamic data example
+layout: example.html
+title: Dynamic Data
 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>
+<div id="map" class="map"></div>

examples/earthquake-clusters.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Earthquake Clusters
 shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
 docs: >
@@ -9,8 +9,4 @@ docs: >
   <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>
+<div id="map" class="map"></div>

examples/earthquake-clusters.js

@@ -84,7 +84,7 @@ function styleFunction(feature, resolution) {
   var style;
   var size = feature.get('features').length;
   if (size > 1) {
-    style = [new ol.style.Style({
+    style = new ol.style.Style({
       image: new ol.style.Circle({
         radius: feature.get('radius'),
         fill: new ol.style.Fill({
@@ -96,10 +96,10 @@ function styleFunction(feature, resolution) {
         fill: textFill,
         stroke: textStroke
       })
-    })];
+    });
   } else {
     var originalFeature = feature.get('features')[0];
-    style = [createEarthquakeStyle(originalFeature)];
+    style = createEarthquakeStyle(originalFeature);
   }
   return style;
 }

examples/earthquake-custom-symbol.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Earthquakes with custom symbols
+shortdesc: Demonstrates the use of `ol.render.toCanvas` to create custom icon symbols.
+docs: >
+  This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a custom lightning symbol and a size relative to their magnitude.
+tags: "KML, vector, style, canvas, symbol"
+---
+<div id="map" class="map"></div>

examples/earthquake-custom-symbol.js

@@ -0,0 +1,71 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.KML');
+goog.require('ol.geom.Polygon');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.render');
+goog.require('ol.source.Stamen');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var styleCache = {};
+var styleFunction = function(feature, resolution) {
+  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
+  // standards-violating <magnitude> tag in each Placemark.  We extract it from
+  // the Placemark's name instead.
+  var name = feature.get('name');
+  var magnitude = parseFloat(name.substr(2));
+  var size = parseInt(10 + 40 * (magnitude - 5), 10);
+  var style = styleCache[size];
+  if (!style) {
+    var canvas =
+        /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
+    var render = ol.render.toContext(
+        /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
+        {size: [size + 2, size + 2], pixelRatio: size / 10});
+    render.setFillStrokeStyle(
+        new ol.style.Fill({ color: 'rgba(255, 153, 0, 0.4)' }),
+        new ol.style.Stroke({ color: 'rgba(255, 204, 0, 0.2)', width: 1 }));
+    render.drawPolygonGeometry(new ol.geom.Polygon(
+        [[[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]]));
+    style = new ol.style.Style({
+      image: new ol.style.Icon({
+        img: canvas,
+        imgSize: [canvas.width, canvas.height],
+        rotation: 1.2
+      })
+    });
+    styleCache[size] = style;
+  }
+  return style;
+};
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'data/kml/2012_Earthquakes_Mag5.kml',
+    format: new ol.format.KML({
+      extractStyles: false
+    })
+  }),
+  style: styleFunction
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.Stamen({
+    layer: 'toner'
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/epsg-4326.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: EPSG:4326 example
+layout: example.html
+title: EPSG:4326
 shortdesc: Example of a map in EPSG:4326.
 docs: >
   This example shows how to create a map in EPSG:4326.
 tags: "epsg4326"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/export-map.html

@@ -1,18 +1,14 @@
 ---
-template: example.html
-title: Export map example
+layout: example.html
+title: Map Export
 shortdesc: Example of exporting a map as a PNG image.
 docs: >
   Example of exporting a map as a PNG image.
 tags: "export, png, openstreetmap"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div id="no-download" class="alert alert-danger" style="display: none">
-      This example requires a browser that supports the
-      <a href="http://caniuse.com/#feat=download">link download</a> attribute.
-    </div>
-    <a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Export PNG</a>
-  </div>
+<div id="map" class="map"></div>
+<div id="no-download" class="alert alert-danger" style="display: none">
+  This example requires a browser that supports the
+  <a href="http://caniuse.com/#feat=download">link download</a> attribute.
 </div>
+<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>

examples/feature-animation.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Feature animation example
+layout: example.html
+title: Custom Animation
 shortdesc: Demonstrates how to animate features.
 docs: >
   This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
@@ -8,8 +8,4 @@ docs: >
   is added to the layer.
 tags: "animation, vector, feature, flash"
 ---
-<div class="row">
-  <div class="span8">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/feature-animation.js

@@ -83,7 +83,7 @@ function flash(feature) {
       return;
     }
     // tell OL3 to continue postcompose animation
-    frameState.animate = true;
+    map.render();
   }
   listenerKey = map.on('postcompose', animate);
 }

examples/feature-move-animation.html

@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: Marker Animation
+shortdesc: Demonstrates how to move a feature along a line.
+docs: >
+  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
+  animate a (marker) feature along a line. In this example an encoded polyline
+  is being used.
+tags: "animation, feature, postcompose, polyline"
+---
+<div id="map" class="map"></div>
+<label for="speed">
+  speed:&nbsp;
+  <input id="speed" type="range" min="10" max="999" step="10" value="60">
+</label>
+<button id="start-animation">Start Animation</button>

examples/feature-move-animation.js

@@ -0,0 +1,205 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.Polyline');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+// This long string is placed here due to jsFiddle limitations.
+// It is usually loaded with AJAX.
+var polyline = [
+  'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}N',
+  'fIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^',
+  'aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_E',
+  'kUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_',
+  'Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@',
+  'sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]k',
+  'DuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mC',
+  'um@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@ka',
+  'i@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgB',
+  'k_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__',
+  'DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAw',
+  'Xyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrX',
+  'itAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@',
+  'xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNma',
+  'CsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_',
+  'fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o',
+  '~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAm',
+  'b@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_',
+  'lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknF',
+  'oFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snA',
+  'w`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDw',
+  'zGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}',
+  '@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwy',
+  'A{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi',
+  '@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC',
+  '|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBb',
+  'h@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipA',
+  'dy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_',
+  's@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCo',
+  'SfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@',
+  'oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e',
+  '[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfY',
+  'gEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~k',
+  'Dyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB',
+  '_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jI',
+  'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@',
+  'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ',
+  'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m',
+  '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
+].join('');
+
+var route = /** @type {ol.geom.LineString} */ (new ol.format.Polyline({
+  factor: 1e6
+}).readGeometry(polyline, {
+  dataProjection: 'EPSG:4326',
+  featureProjection: 'EPSG:3857'
+}));
+
+var routeCoords = route.getCoordinates();
+var routeLength = routeCoords.length;
+
+var routeFeature = new ol.Feature({
+  type: 'route',
+  geometry: route
+});
+var geoMarker = new ol.Feature({
+  type: 'geoMarker',
+  geometry: new ol.geom.Point(routeCoords[0])
+});
+var startMarker = new ol.Feature({
+  type: 'icon',
+  geometry: new ol.geom.Point(routeCoords[0])
+});
+var endMarker = new ol.Feature({
+  type: 'icon',
+  geometry: new ol.geom.Point(routeCoords[routeLength - 1])
+});
+
+var styles = {
+  'route': new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      width: 6, color: [237, 212, 0, 0.8]
+    })
+  }),
+  'icon': new ol.style.Style({
+    image: new ol.style.Icon({
+      anchor: [0.5, 1],
+      src: 'data/icon.png'
+    })
+  }),
+  'geoMarker': new ol.style.Style({
+    image: new ol.style.Circle({
+      radius: 7,
+      snapToPixel: false,
+      fill: new ol.style.Fill({color: 'black'}),
+      stroke: new ol.style.Stroke({
+        color: 'white', width: 2
+      })
+    })
+  })
+};
+
+var vectorLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [routeFeature, geoMarker, startMarker, endMarker]
+  }),
+  style: function(feature, resolution) {
+    // hide geoMarker if animation is active
+    if (animating && feature.get('type') === 'geoMarker') {
+      return null;
+    }
+    return styles[feature.get('type')];
+  }
+});
+
+var center = [-5639523.95, -3501274.52];
+var map = new ol.Map({
+  target: document.getElementById('map'),
+  loadTilesWhileAnimating: true,
+  view: new ol.View({
+    center: center,
+    zoom: 10,
+    minZoom: 2,
+    maxZoom: 19
+  }),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        imagerySet: 'AerialWithLabels',
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+      })
+    }),
+    vectorLayer
+  ]
+});
+
+var moveFeature = function(event) {
+  var vectorContext = event.vectorContext;
+  var frameState = event.frameState;
+
+  if (animating) {
+    var elapsedTime = frameState.time - now;
+    // here the trick to increase speed is to jump some indexes
+    // on lineString coordinates
+    var index = Math.round(speed * elapsedTime / 1000);
+
+    if (index >= routeLength) {
+      stopAnimation(true);
+      return;
+    }
+
+    var currentPoint = new ol.geom.Point(routeCoords[index]);
+    var feature = new ol.Feature(currentPoint);
+    vectorContext.drawFeature(feature, styles.geoMarker);
+  }
+  // tell OL3 to continue the postcompose animation
+  map.render();
+};
+
+function startAnimation() {
+  if (animating) {
+    stopAnimation(false);
+  } else {
+    animating = true;
+    now = new Date().getTime();
+    speed = speedInput.value;
+    startButton.textContent = 'Cancel Animation';
+    // hide geoMarker
+    geoMarker.setStyle(null);
+    // just in case you pan somewhere else
+    map.getView().setCenter(center);
+    map.on('postcompose', moveFeature);
+    map.render();
+  }
+}
+
+
+/**
+ * @param {boolean} ended end of animation.
+ */
+function stopAnimation(ended) {
+  animating = false;
+  startButton.textContent = 'Start Animation';
+
+  // if animation cancelled set the marker at the beginning
+  var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
+  /** @type {ol.geom.Point} */ (geoMarker.getGeometry())
+    .setCoordinates(coord);
+  //remove listener
+  map.un('postcompose', moveFeature);
+}
+
+var speed, now;
+var animating = false;
+var speedInput = document.getElementById('speed');
+var startButton = document.getElementById('start-animation');
+startButton.addEventListener('click', startAnimation, false);

examples/flight-animation.html

@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Flight Animation
+shortdesc: Demonstrates how to animate flights with ´postcompose´.
+docs: >
+  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
+  animate flights. A great circle arc between two airports is calculated using
+  <a href="https://github.com/springmeyer/arc.js">arc.js</a> and then the flight
+  paths are animated with <b>postcompose</b>. The flight data is provided by
+  <a href="http://openflights.org/data.html">OpenFlights</a> (a simplified data
+  set from the <a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/">
+  Mapbox.js documentation</a> is used).
+tags: "animation, vector, feature, flights, arc"
+resources:
+  - https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
+---
+<div id="map" class="map"></div>

examples/flight-animation.js

@@ -0,0 +1,129 @@
+// NOCOMPILE
+goog.require('ol.Attribution');
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.Stamen');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.Stamen({
+        layer: 'toner'
+      })
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var defaultStroke = new ol.style.Stroke({
+  color: '#EAE911',
+  width: 2
+});
+var defaultStyle = new ol.style.Style({
+  stroke: defaultStroke
+});
+
+var pointsPerMs = 0.1;
+var animateFlights = function(event) {
+  var vectorContext = event.vectorContext;
+  var frameState = event.frameState;
+  vectorContext.setFillStrokeStyle(null, defaultStroke);
+
+  var features = flightsSource.getFeatures();
+  for (var i = 0; i < features.length; i++) {
+    var feature = features[i];
+    if (!feature.get('finished')) {
+      // only draw the lines for which the animation has not
+      // finished yet
+      var coords = feature.getGeometry().getCoordinates();
+      var elapsedTime = frameState.time - feature.get('start');
+      var elapsedPoints = elapsedTime * pointsPerMs;
+
+      if (elapsedPoints >= coords.length) {
+        feature.set('finished', true);
+      }
+
+      var maxIndex = Math.min(elapsedPoints, coords.length);
+      var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));
+
+      // directly draw the line with the vector context
+      vectorContext.drawLineStringGeometry(currentLine, feature);
+    }
+  }
+  // tell OL3 to continue the postcompose animation
+  map.render();
+};
+
+var addLater = function(feature, timeout) {
+  window.setTimeout(function() {
+    feature.set('start', new Date().getTime());
+    flightsSource.addFeature(feature);
+  }, timeout);
+};
+
+var flightsSource = new ol.source.Vector({
+  wrapX: false,
+  attributions: [new ol.Attribution({
+    html: 'Flight data by ' +
+        '<a href="http://openflights.org/data.html">OpenFlights</a>,'
+  })],
+  loader: function(extent, resolution, projection) {
+    var url = 'data/openflights/flights.json';
+    fetch(url).then(function(response) {
+      return response.json();
+    }).then(function(json) {
+      var flightsData = json.flights;
+      for (var i = 0; i < flightsData.length; i++) {
+        var flight = flightsData[i];
+        var from = flight[0];
+        var to = flight[1];
+
+        // create an arc circle between the two locations
+        var arcGenerator = new arc.GreatCircle(
+            {x: from[1], y: from[0]},
+            {x: to[1], y: to[0]});
+
+        var arcLine = arcGenerator.Arc(100, {offset: 10});
+        if (arcLine.geometries.length === 1) {
+          var line = new ol.geom.LineString(arcLine.geometries[0].coords);
+          line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
+
+          var feature = new ol.Feature({
+            geometry: line,
+            finished: false
+          });
+          // add the feature with a delay so that the animation
+          // for all features does not start at the same time
+          addLater(feature, i * 50);
+        }
+      }
+      map.on('postcompose', animateFlights);
+    });
+  }
+});
+
+var flightsLayer = new ol.layer.Vector({
+  source: flightsSource,
+  style: function(feature, resolution) {
+    // if the animation is still active for a feature, do not
+    // render the feature with the layer style
+    if (feature.get('finished')) {
+      return defaultStyle;
+    } else {
+      return null;
+    }
+  }
+});
+map.addLayer(flightsLayer);

examples/fractal.html

@@ -1,18 +1,14 @@
 ---
-template: example.html
-title: Fractal Example
+layout: example.html
+title: Fractal Rendering
 shortdesc: Example of a fractal.
 docs: >
-  Example of a fractal.
+  This example demonstrates how features with many vertices can be efficiently rendered.
 tags: "fractal, vector"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <label for="depth">
-      depth:&nbsp;
-      <input id="depth" type="range" min="0" max="9" step="1" value="5">
-      &nbsp;(<span id="count">#</span> points)
-    </label>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<label for="depth">
+  depth:&nbsp;
+  <input id="depth" type="range" min="0" max="9" step="1" value="5">
+  &nbsp;(<span id="count">#</span> points)
+</label>

examples/full-screen-drag-rotate-and-zoom.html

@@ -1,14 +1,12 @@
 ---
-template: example.html
-title: Full screen drag rotate and zoom example
+layout: example.html
+title: Full Screen Drag, Rotate, and Zoom
 shortdesc: Example of drag rotate and zoom control with full screen effect.
 docs: >
-  <p>Hold down <code>Shift</code> + drag to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift</code> + drag thing again.</p>
+  <p>Hold down <code>Shift+Drag</code> to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift+Drag</code> thing again.</p>
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/full-screen.html

@@ -1,14 +1,12 @@
 ---
-template: example.html
-title: Full screen control example
+layout: example.html
+title: Full Screen Control
 shortdesc: Example of a full screen control.
 docs: >
   <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, bing, bing-maps"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/geojson.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: GeoJSON example
+layout: example.html
+title: GeoJSON
 shortdesc: Example of GeoJSON features.
 docs: >
   Example of GeoJSON features.
 tags: "geojson, vector, openstreetmap"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/geojson.js

@@ -21,25 +21,25 @@ var image = new ol.style.Circle({
 });
 
 var styles = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: image
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 1
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 1
     })
-  })],
-  'MultiPoint': [new ol.style.Style({
+  }),
+  'MultiPoint': new ol.style.Style({
     image: image
-  })],
-  'MultiPolygon': [new ol.style.Style({
+  }),
+  'MultiPolygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'yellow',
       width: 1
@@ -47,8 +47,8 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 0, 0.1)'
     })
-  })],
-  'Polygon': [new ol.style.Style({
+  }),
+  'Polygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'blue',
       lineDash: [4],
@@ -57,8 +57,8 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
-  })],
-  'GeometryCollection': [new ol.style.Style({
+  }),
+  'GeometryCollection': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'magenta',
       width: 2
@@ -73,8 +73,8 @@ var styles = {
         color: 'magenta'
       })
     })
-  })],
-  'Circle': [new ol.style.Style({
+  }),
+  'Circle': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'red',
       width: 2
@@ -82,7 +82,7 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(255,0,0,0.2)'
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/geolocation-orientation.html

@@ -1,5 +1,5 @@
 ---
-template: example-verbatim.html
+layout: example-verbatim.html
 title: Geolocation Tracking with Orientation
 shortdesc: Example of a geolocated and oriented map.
 tags: "fullscreen, geolocation, orientation, mobile"

examples/geolocation.html

@@ -1,24 +1,21 @@
 ---
-template: example.html
-title: Geolocation example
-shortdesc: Example of a geolocation map.
+layout: example.html
+title: Geolocation
+shortdesc: Using geolocation to control a map view.
 docs: >
-  Example of a geolocation map.
+  This example uses the Geolocation API to control the view.
 tags: "geolocation, openstreetmap"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div class="span4 pull-right">
-      <div id="info" class="alert alert-danger" style="display: none;"></div>
-    </div>
-    <label class="checkbox" for="track">
-      <input id="track" type="checkbox"/>track position
-    </label>
-    <p>position accuracy : <code id="accuracy"></code></p>
-    <p>altitude : <code id="altitude"></code></p>
-    <p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
-    <p>heading : <code id="heading"></code></p>
-    <p>speed : <code id="speed"></code></p>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<div id="info" style="display: none;"></div>
+<label for="track">
+  track position
+  <input id="track" type="checkbox"/>
+</label>
+<p>
+  position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
+  altitude : <code id="altitude"></code>&nbsp;&nbsp;
+  altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
+  heading : <code id="heading"></code>&nbsp;&nbsp;
+  speed : <code id="speed"></code>
+</p>

examples/getfeatureinfo-image.html

@@ -1,20 +1,10 @@
 ---
-template: example.html
-title: GetFeatureInfo example (image layer)
-shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
+layout: example.html
+title: WMS GetFeatureInfo (Image Layer)
+shortdesc: Using an image WMS source with GetFeatureInfo requests
 docs: >
-  <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
+  This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.  Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
 tags: "getfeatureinfo, forEachLayerAtPixel"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
-<div class="row-fluid">
-  <div class="span4 offset4 iframe-info">
-    <div id="info" class="alert alert-success">
-      &nbsp;
-    </div>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/getfeatureinfo-image.js

@@ -8,7 +8,7 @@ var wmsSource = new ol.source.ImageWMS({
   url: 'http://demo.boundlessgeo.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne'},
   serverType: 'geoserver',
-  crossOrigin: ''
+  crossOrigin: 'anonymous'
 });
 
 var wmsLayer = new ol.layer.Image({

examples/getfeatureinfo-tile.html

@@ -1,20 +1,10 @@
 ---
-template: example.html
-title: WMS GetFeatureInfo example (tile layer)
-shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.
+layout: example.html
+title: WMS GetFeatureInfo (Tile Layer)
+shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source
 docs: >
-  <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
+  This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.  Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
 tags: "getfeatureinfo, forEachLayerAtPixel"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
-<div class="row-fluid">
-  <div class="span4 offset4 iframe-info">
-    <div id="info" class="alert alert-success">
-      &nbsp;
-    </div>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/getfeatureinfo-tile.js

@@ -8,7 +8,7 @@ var wmsSource = new ol.source.TileWMS({
   url: 'http://demo.boundlessgeo.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne'},
   serverType: 'geoserver',
-  crossOrigin: ''
+  crossOrigin: 'anonymous'
 });
 
 var wmsLayer = new ol.layer.Tile({

examples/gpx.html

@@ -1,18 +1,12 @@
 ---
-template: example.html
-title: GPX example
+layout: example.html
+title: GPX Data
 shortdesc: Example of using the GPX source.
 docs: >
   Example of using the GPX source.
 tags: "GPX"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<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>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/gpx.js

@@ -21,7 +21,7 @@ var raster = new ol.layer.Tile({
 });
 
 var style = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.4)'
@@ -32,19 +32,19 @@ var style = {
         width: 1
       })
     })
-  })],
-  'LineString': [new ol.style.Style({
+  }),
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
-  'MultiLineString': [new ol.style.Style({
+  }),
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })]
+  })
 };
 
 var vector = new ol.layer.Vector({

examples/graticule.html

@@ -1,13 +1,9 @@
 ---
-template: example.html
-title: Graticule example
+layout: example.html
+title: Map Graticule
 shortdesc: This example shows how to add a graticule overlay to a map.
 docs: >
   This example shows how to add a graticule overlay to a map.
 tags: "graticule"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/heatmap-earthquakes.html

@@ -1,21 +1,15 @@
 ---
-template: example.html
-title: Earthquakes heatmap
+layout: example.html
+title: Earthquakes Heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >
   This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
 tags: "heatmap, kml, vector, style"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-  <div class="span4">
-    <form>
-      <label>radius size</label>
-      <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
-      <label>blur size</label>
-      <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
-    </form>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<form>
+  <label>radius size</label>
+  <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
+  <label>blur size</label>
+  <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
+</form>

examples/icon-negative.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Icon Pixel Operations
+shortdesc: Canvas pixel operations on a point icon.
+docs: >
+  Example using an icon to symbolize a point. Click on the icon to select it, and it will be rendered using its negative image.
+tags: "vector, style, icon, marker, canvas, select"
+---
+<div id="map" class="map"></div>

examples/icon-negative.js

@@ -0,0 +1,71 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Stamen');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Style');
+
+
+function createStyle(src, img) {
+  return new ol.style.Style({
+    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+      anchor: [0.5, 0.96],
+      src: src,
+      img: img,
+      imgSize: img ? [img.width, img.height] : undefined
+    }))
+  });
+}
+
+var iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
+iconFeature.set('style', createStyle('data/icon.png', undefined));
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.Stamen({ layer: 'watercolor' })
+    }),
+    new ol.layer.Vector({
+      style: function(feature) { return feature.get('style'); },
+      source: new ol.source.Vector({ features: [iconFeature] })
+    })
+  ],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 3
+  })
+});
+
+var selectStyle = {};
+var select = new ol.interaction.Select({
+  style: function(feature, resolution) {
+    var image = feature.get('style').getImage().getImage();
+    if (!selectStyle[image.src]) {
+      var canvas = document.createElement('canvas');
+      var context = canvas.getContext('2d');
+      canvas.width = image.width;
+      canvas.height = image.height;
+      context.drawImage(image, 0, 0, image.width, image.height);
+      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+      var data = imageData.data;
+      for (var i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
+        data[i] = 255 - data[i];
+      }
+      context.putImageData(imageData, 0, 0);
+      selectStyle[image.src] = createStyle(undefined, canvas);
+    }
+    return selectStyle[image.src];
+  }
+});
+map.addInteraction(select);
+
+map.on('pointermove', function(evt) {
+  map.getTargetElement().style.cursor =
+      map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
+});

examples/icon-sprite-webgl.html

@@ -1,18 +1,10 @@
 ---
-template: example.html
-title: Icon sprites with WebGL example
+layout: example.html
+title: Icon Sprites with WebGL
 shortdesc: Icon sprite with WebGL
 docs: >
   <p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
 tags: "webgl, icon, sprite, vector, point"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div class="span2 offset2 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
-    </div>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/icon-sprite-webgl.js

@@ -78,14 +78,8 @@ var vector = new ol.layer.Vector({
   source: vectorSource
 });
 
-// Use the "webgl" renderer by default.
-var renderer = common.getRendererFromQueryString();
-if (!renderer) {
-  renderer = 'webgl';
-}
-
 var map = new ol.Map({
-  renderer: renderer,
+  renderer: common.getRendererFromQueryString('webgl'),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({

examples/icon.html

@@ -1,13 +1,13 @@
 ---
-template: example.html
-title: Vector Icon Example
+layout: example.html
+title: Icon Symbolizer
 shortdesc: Example using an icon to symbolize a point.
 docs: >
   Example using an icon to symbolize a point.
 tags: "vector, style, icon, marker, popup"
+resources:
+  - https://code.jquery.com/jquery-1.11.2.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"><div id="popup"></div></div>
-  </div>
-</div>
+<div id="map" class="map"><div id="popup"></div></div>

examples/igc.html

@@ -1,19 +1,11 @@
 ---
-template: example.html
-title: IGC example
+layout: example.html
+title: IGC Data
 shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
 docs: >
   <p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
 tags: "complex-geometry, closest-feature, igc, opencyclemap"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <input id="time" type="range" value="0" steps="1" />
-    <div class="span4 offset4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
-    </div>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<input id="time" type="range" value="0" steps="1" />
+<div id="info">&nbsp;</div>

examples/igc.js

@@ -27,17 +27,17 @@ var colors = {
 var styleCache = {};
 var styleFunction = function(feature, resolution) {
   var color = colors[feature.get('PLT')];
-  var styleArray = styleCache[color];
-  if (!styleArray) {
-    styleArray = [new ol.style.Style({
+  var style = styleCache[color];
+  if (!style) {
+    style = new ol.style.Style({
       stroke: new ol.style.Stroke({
         color: color,
         width: 3
       })
-    })];
-    styleCache[color] = styleArray;
+    });
+    styleCache[color] = style;
   }
-  return styleArray;
+  return style;
 };
 
 var vectorSource = new ol.source.Vector();

examples/image-filter.html

@@ -1,18 +1,16 @@
 ---
-template: example.html
-title: Image Filter Example
+layout: example.html
+title: Image Filters
 shortdesc: Apply a filter to imagery
 docs: >
   <p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
   These listeners get an event with a reference to the Canvas rendering context.
   In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>
 <select id="kernel" name="kernel">
   <option>none</option>
   <option selected>sharpen</option>

examples/image-load-events.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Image load events example
+layout: example.html
+title: Image Load Events
 shortdesc: Example using image load events.
 docs: >
   <p>Image sources fire events related to image loading.  You can
@@ -10,9 +10,7 @@ docs: >
   renders an image loading progress bar at the bottom of the map.</p>
 tags: "image, events, loading"
 ---
-<div class="row-fluid">
-  <div class="span12 wrapper">
-    <div id="map" class="map"></div>
-    <div id="progress"></div>
-  </div>
+<div class="wrapper">
+  <div id="map" class="map"></div>
+  <div id="progress"></div>
 </div>

examples/image-vector-layer.html

@@ -1,6 +1,6 @@
 ---
-template: example.html
-title: Image vector layer example
+layout: example.html
+title: Image Vector Layer
 shortdesc: Example of an image vector layer.
 docs: >
   <p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
@@ -8,13 +8,5 @@ docs: >
   is then used as the image of an image layer.</p>
 tags: "vector, image"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div class="span4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
-    </div>
-  </div>
-</div>
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/index.html

@@ -18,6 +18,7 @@
         color: #333;
       }
       .example {
+        display: block;
         padding: 10px;
         background-color: #F5F5F5;
         height: 140px;
@@ -198,13 +199,13 @@
       <div style="display: none;">
         <div id="template" class="row">
           <div class="col-md-4 col-sm-4" jugl:repeat="example examples">
-            <div class="example">
-              <a jugl:attributes="href example.link" class="mainlink">
+            <a jugl:attributes="href example.link" class="example">
+              <span class="mainlink">
                 <strong><span jugl:replace="example.title">title</span></strong><br>
                 <small jugl:content="'(' + example.example + ')'"></small>
-              </a>
+              </span>
               <p class="description" jugl:content="example.shortdesc"></p>
-            </div>
+            </a>
           </div>
         </div>
       </div>

examples/jsts.html

@@ -1,19 +1,13 @@
 ---
-template: example.html
-title: JSTS Example
+layout: example.html
+title: JSTS Integration
 shortdesc: Example on how to use JSTS with OpenLayers 3.
 docs: >
   Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
   with OpenLayers 3.
 tags: "vector, jsts, buffer"
 resources:
-  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js
-  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js
-
-
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.17.0/javascript.util.min.js
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.17.0/jsts.min.js
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>

examples/jsts.js

@@ -12,10 +12,11 @@ goog.require('ol.source.Vector');
 
 
 var source = new ol.source.Vector();
-$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+fetch('data/geojson/roads-seoul.geojson').then(function(response) {
+  return response.json();
+}).then(function(json) {
   var format = new ol.format.GeoJSON();
-  var features = format.readFeatures(response,
-      {featureProjection: 'EPSG:3857'});
+  var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
 
   var parser = new jsts.io.olParser();