3.11.0-beta.2

Update all dependencies.

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

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

@@ -2,6 +2,50 @@
 
 ### 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`.
+
 ### v3.10.0
 
 #### `ol.layer.Layer` changes

changelog/v3.10.1.md

@@ -0,0 +1,7 @@
+# v3.10.1
+
+## Summary
+
+This is a patch release that fixes a regression causing text styles with a fill but no stroke to not be rendered.
+
+ * [#4242](https://github.com/openlayers/ol3/pull/4242) - Fix a drawText regression introduced with 31a68e2 ([@marcjansen](https://github.com/marcjansen))

config/examples/example.html

@@ -9,7 +9,7 @@
     <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="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
@@ -46,7 +46,7 @@
           <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="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{{ extraResources }}">
         </form>
         <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -57,7 +57,7 @@
 &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 }}
+{{ extraHead.remote }}
 {{#if css.source}}
 &lt;style&gt;
 {{ css.source }}

config/jsdoc/api/conf.json

@@ -16,7 +16,7 @@
         ]
     },
     "plugins": [
-        "node_modules/jsdoc/plugins/markdown",
+        "node_modules/jsdoc-fork/plugins/markdown",
         "config/jsdoc/api/plugins/inheritdoc",
         "config/jsdoc/api/plugins/typedefs",
         "config/jsdoc/api/plugins/events",

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-fork/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-fork/lib/jsdoc/template'),
+    fs = require('jsdoc-fork/lib/jsdoc/fs'),
+    path = require('jsdoc-fork/lib/jsdoc/path'),
     taffy = require('taffydb').taffy,
-    handle = require('jsdoc/util/error').handle,
-    helper = require('jsdoc/util/templateHelper'),
+    handle = require('jsdoc-fork/lib/jsdoc/util/error').handle,
+    helper = require('jsdoc-fork/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-fork/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
+        staticFileScanner = new (require('jsdoc-fork/lib/jsdoc/src/scanner')).Scanner();
 
         staticFilePaths.forEach(function(filePath) {
             var extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);

config/jsdoc/info/publish.js

@@ -6,11 +6,14 @@ var assert = require('assert');
 var fs = require('fs');
 var path = require('path');
 
+var Promise = require('bluebird');
+
 
 /**
  * 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) {
 
@@ -168,6 +171,8 @@ exports.publish = function(data, opts) {
     return (symbol.name in augments || symbol.virtual);
   });
 
+  return new Promise(function(resolve, reject) {
+
     process.stdout.write(
         JSON.stringify({
           symbols: symbols,
@@ -175,6 +180,8 @@ exports.publish = function(data, opts) {
           typedefs: typedefs,
           externs: externs,
           base: base
-      }, null, 2));
+        }, null, 2), resolve);
+
+  });
 
 };

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;
@@ -154,6 +159,7 @@
 .ol-attribution img {
   max-height: 2em;
   max-width: inherit;
+  vertical-align: middle;
 }
 .ol-attribution ul, .ol-attribution button {
   display: inline-block;
@@ -192,26 +198,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 {

examples/accessible.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Accessibility example
 shortdesc: Example of an accessible map.
 docs: >

examples/animation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Animation example
 shortdesc: Demonstrates animated pan, zoom, and rotation.
 docs: >

examples/arcgis-tiled.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Tiled ArcGIS MapServer example
 shortdesc: Example of a tiled ArcGIS layer.
 docs: >

examples/attributions.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Attributions example
 shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
 docs: >

examples/bing-maps.html

@@ -1,10 +1,12 @@
 ---
-template: example.html
+layout: example.html
 title: Bing Maps example
 shortdesc: Example of a Bing Maps layer.
 docs: >
   <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
 tags: "bing, bing-maps"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
  <div class="row-fluid">
    <div class="span12">

examples/blend-modes.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Blend modes example
 shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
 docs: >

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,11 +1,11 @@
 ---
-template: example.html
+layout: example.html
 title: Box selection example
 shortdesc: Using a DragBox interaction to select features.
 docs: >
   <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
   to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
-  <p>Use <code>SHIFT+drag</code> to draw boxes.</p>
+  <p>Use <code>Ctrl+drag</code> (<code>Meta+drag</code> on Mac) to draw boxes.</p>
 tags: "DragBox, feature, selection, box"
 ---
 <div class="row-fluid">

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.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom tooltips example
 shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >

examples/canvas-tiles.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Canvas tiles example
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >

examples/center.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Advanced View Positioning example
 shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
 docs: >

examples/cluster.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Clustering example
 shortdesc: Example of using <code>ol.source.Cluster</code>.
 docs: >

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,30 @@
+---
+layout: example.html
+title: Manipulating colors with a raster source
+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 class="row-fluid">
+  <div class="span12">
+    <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>
+  </div>
+</div>

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,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom control example
 shortdesc: Shows how to create custom controls.
 docs: >

examples/custom-interactions.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom interaction example
 shortdesc: Example of a custom interaction.
 docs: >

examples/d3.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: d3 integration example
 shortdesc: Example of using ol3 and d3 together.
 docs: >

examples/device-orientation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Device-Orientation example
 shortdesc: Listen to DeviceOrientation events.
 docs: >

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

@@ -1,11 +1,13 @@
 ---
-template: example.html
+layout: example.html
 title: Drag-and-Drop image vector example
 shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 docs: >
   Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to
   an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/drag-and-drop.html

@@ -1,11 +1,13 @@
 ---
-template: example.html
+layout: example.html
 title: Drag-and-Drop example
 shortdesc: Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
 docs: >
   Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will
   only work with data in EPSG:4326 and EPSG:3857.
 tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/drag-rotate-and-zoom.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Drag rotate and zoom example
 shortdesc: A single interaction to drag, rotate, and zoom.
 docs: >

examples/draw-and-modify-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Draw and modify features example
 shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
 docs: >

examples/draw-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Draw features example
 shortdesc: Example of using the ol.interaction.Draw interaction.
 docs: >

examples/dynamic-data.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Dynamic data example
 shortdesc: Example of dynamic data.
 docs: >

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

examples/epsg-4326.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: EPSG:4326 example
 shortdesc: Example of a map in EPSG:4326.
 docs: >

examples/export-map.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Export map example
 shortdesc: Example of exporting a map as a PNG image.
 docs: >

examples/feature-animation.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Feature animation example
 shortdesc: Demonstrates how to animate features.
 docs: >

examples/feature-move-animation.html

@@ -0,0 +1,24 @@
+---
+layout: example.html
+title: Animate a feature movement
+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 class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span12">
+    <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>
+  </div>
+</div>

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 [];
+    }
+    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/fractal.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Fractal Example
 shortdesc: Example of a fractal.
 docs: >

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

@@ -1,11 +1,13 @@
 ---
-template: example.html
+layout: example.html
 title: Full screen drag rotate and zoom example
 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>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">

examples/full-screen.html

@@ -1,11 +1,13 @@
 ---
-template: example.html
+layout: example.html
 title: Full screen control example
 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">

examples/geojson.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: GeoJSON example
 shortdesc: Example of GeoJSON features.
 docs: >

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,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Geolocation example
 shortdesc: Example of a geolocation map.
 docs: >

examples/getfeatureinfo-image.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: GetFeatureInfo example (image layer)
 shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
 docs: >

examples/getfeatureinfo-tile.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: 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.
 docs: >

examples/gpx.html

@@ -1,10 +1,12 @@
 ---
-template: example.html
+layout: example.html
 title: GPX example
 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">

examples/graticule.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Graticule example
 shortdesc: This example shows how to add a graticule overlay to a map.
 docs: >

examples/heatmap-earthquakes.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Earthquakes heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >

examples/icon-sprite-webgl.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Icon sprites with WebGL example
 shortdesc: Icon sprite with WebGL
 docs: >

examples/icon.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Vector Icon Example
 shortdesc: Example using an icon to symbolize a point.
 docs: >

examples/igc.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: IGC example
 shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
 docs: >

examples/image-filter.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image Filter Example
 shortdesc: Apply a filter to imagery
 docs: >
@@ -7,6 +7,8 @@ docs: >
   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">

examples/image-load-events.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image load events example
 shortdesc: Example using image load events.
 docs: >

examples/image-vector-layer.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Image vector layer example
 shortdesc: Example of an image vector layer.
 docs: >

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,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: JSTS Example
 shortdesc: Example on how to use JSTS with OpenLayers 3.
 docs: >

examples/kml-earthquakes.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Earthquakes in KML
 shortdesc: Demonstrates the use of a Shape symbolizer to render earthquake locations.
 docs: >

examples/kml-timezones.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Timezones in KML
 shortdesc: Demonstrates rendering timezones from KML.
 docs: >

examples/kml.html

@@ -1,10 +1,12 @@
 ---
-template: example.html
+layout: example.html
 title: KML example
 shortdesc: Example of using the KML source.
 docs: >
   Example of using the KML source.
 tags: "KML"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/layer-clipping-webgl.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer WebGL clipping example
 shortdesc: Layer WebGL clipping example.
 docs: >

examples/layer-clipping.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer clipping example
 shortdesc: Layer clipping example
 docs: >

examples/layer-extent.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Limited Layer Extent
 shortdesc: Restricting layer rendering to a limited extent.
 docs: >

examples/layer-group.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer group example
 shortdesc: Example of a map with layer group.
 docs: >

examples/layer-spy.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Layer Spy Example
 shortdesc: View a portion of one layer over another
 docs: >
@@ -9,6 +9,8 @@ docs: >
   recent mouse position, giving you a spyglass effect for viewing one layer over another.</p>
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
 tags: "spy, image manipulation"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/layer-swipe.html

@@ -1,10 +1,12 @@
 ---
-template: example.html
+layout: example.html
 title: Layer Swipe example
 shortdesc: Example of a Layer swipe map.
 docs: >
   Example of a Layer swipe map.
 tags: "swipe, openstreetmap"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/layer-z-index.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Z-index layer ordering example
 shortdesc: Example of ordering layers using Z-index.
 docs: >

examples/lazy-source.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Lazy Source
 shortdesc: Example of setting a layer source after construction.
 docs: >

examples/line-arrows.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: LineString arrows example
 shortdesc: Example of drawing arrows for each line string segment.
 docs: >

examples/localized-openstreetmap.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Localized OpenStreetMap example
 shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
 docs: >

examples/mapbox-vector-tiles-advanced.css

@@ -0,0 +1,3 @@
+.map {
+  background: #f8f4f0;
+}

examples/mapbox-vector-tiles-advanced.html

@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Advanced Mapbox vector tiles example
+shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
+docs: >
+  A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
+tags: "mapbox, vector, tiles, mobile"
+resources:
+  - resources/mapbox-streets-v6-style.js
+cloak:
+  pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/mapbox-vector-tiles-advanced.js

@@ -0,0 +1,73 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.proj');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
+goog.require('ol.tilegrid.TileGrid');
+
+
+var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+
+// For how many zoom levels do we want to use the same vector tiles?
+// 1 means "use tiles from all zoom levels". 2 means "use the same tiles for 2
+// subsequent zoom levels".
+var reuseZoomLevels = 2;
+
+// Offset of loaded tiles from web mercator zoom level 0.
+// 0 means "At map zoom level 0, use tiles from zoom level 0". 1 means "At map
+// zoom level 0, use tiles from zoom level 1".
+var zoomOffset = 1;
+
+// Calculation of tile urls
+var resolutions = [];
+for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
+  resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
+}
+function tileUrlFunction(tileCoord) {
+  return ('http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+      '{z}/{x}/{y}.vector.pbf?access_token=' + key)
+      .replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset))
+      .replace('{x}', String(tileCoord[1]))
+      .replace('{y}', String(-tileCoord[2] - 1))
+      .replace('{a-d}', 'abcd'.substr(
+          ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
+}
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.VectorTile({
+      preload: Infinity,
+      source: new ol.source.VectorTile({
+        attributions: [new ol.Attribution({
+          html: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+              '© <a href="http://www.openstreetmap.org/copyright">' +
+              'OpenStreetMap contributors</a>'
+        })],
+        format: new ol.format.MVT(),
+        tileGrid: new ol.tilegrid.TileGrid({
+          extent: ol.proj.get('EPSG:3857').getExtent(),
+          resolutions: resolutions
+        }),
+        tilePixelRatio: 16,
+        tileUrlFunction: tileUrlFunction
+      }),
+      style: createMapboxStreetsV6Style()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    minZoom: 1,
+    zoom: 2
+  })
+});
+
+// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
+// ol.style.Text are required for createMapboxStreetsV6Style()

examples/mapbox-vector-tiles.css

@@ -0,0 +1,3 @@
+.map {
+  background: #f8f4f0;
+}

examples/mapbox-vector-tiles.html

@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Mapbox vector tiles example
+shortdesc: Example of a Mapbox vector tiles map.
+docs: >
+  A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
+tags: "simple, mapbox, vector, tiles"
+resources:
+  - resources/mapbox-streets-v6-style.js
+cloak:
+  pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/mapbox-vector-tiles.js

@@ -0,0 +1,42 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
+
+
+var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.VectorTile({
+      source: new ol.source.VectorTile({
+        attributions: [new ol.Attribution({
+          html: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+              '© <a href="http://www.openstreetmap.org/copyright">' +
+              'OpenStreetMap contributors</a>'
+        })],
+        format: new ol.format.MVT(),
+        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
+        tilePixelRatio: 16,
+        url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+            '{z}/{x}/{y}.vector.pbf?access_token=' + key
+      }),
+      style: createMapboxStreetsV6Style()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
+// ol.style.Text are required for createMapboxStreetsV6Style()

examples/mapguide-untiled.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: MapGuide untiled example
 shortdesc: Example of a untiled MapGuide map.
 docs: >

examples/mapquest.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: MapQuest example
 shortdesc: Example of a MapQuest map.Shows how to create custom controls.
 docs: >

examples/measure.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Measure example
 shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
 docs: >

examples/min-max-resolution.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Min/max resolution example
 shortdesc: Show/hide layers depending on current view resolution.
 docs: >

examples/mobile-full-screen.html

@@ -1,8 +1,10 @@
 ---
-template: example-verbatim.html
+layout: example-verbatim.html
 title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <!doctype html>
 <html lang="en">

examples/modify-features.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Modify features example
 shortdesc: Editing features with the modify interaction.
 docs: >

examples/modify-test.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Modify features test
 shortdesc: Example for testing feature modification.
 docs: >

examples/modify-test.js

@@ -13,7 +13,6 @@ goog.require('ol.style.Style');
 
 
 var styleFunction = (function() {
-  /* jshint -W069 */
   var styles = {};
   var image = new ol.style.Circle({
     radius: 5,
@@ -58,7 +57,6 @@ var styleFunction = (function() {
   return function(feature, resolution) {
     return styles[feature.getGeometry().getType()] || styles['default'];
   };
-  /* jshint +W069 */
 })();
 
 var geojsonObject = {
@@ -169,7 +167,6 @@ var layer = new ol.layer.Vector({
 });
 
 var overlayStyle = (function() {
-  /* jshint -W069 */
   var styles = {};
   styles['Polygon'] = [
     new ol.style.Style({
@@ -230,7 +227,6 @@ var overlayStyle = (function() {
   return function(feature, resolution) {
     return styles[feature.getGeometry().getType()];
   };
-  /* jshint +W069 */
 })();
 
 var select = new ol.interaction.Select({

examples/mouse-position.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Mouse position example
 shortdesc: Example of a mouse position control, outside the map.
 docs: >

examples/moveend.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Moveend Example
 shortdesc: Use of the moveend event.
 docs: >

examples/navigation-controls.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Navigation controls example
 shortdesc: Shows how to add navigation controls.
 docs: >

examples/overlay.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Overlay example
 shortdesc: Demonstrates overlays.
 docs: >

examples/overviewmap-custom.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: OverviewMap control example advanced
 shortdesc: Example of OverviewMap control with advanced customization.
 docs: >

examples/overviewmap.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: OverviewMap control example
 shortdesc: Example of OverviewMap control.
 docs: >

examples/permalink.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Permalink example
 shortdesc: Example on how to create permalinks.
 docs: >

examples/polygon-styles.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Custom styles for polygons
 shortdesc: Showing the vertices of a polygon with a custom style geometry.
 docs: >

examples/popup.html

@@ -1,5 +1,5 @@
 ---
-template: example.html
+layout: example.html
 title: Popup example
 shortdesc: Uses an overlay to create a popup.
 docs: >

examples/preload.html

@@ -1,10 +1,12 @@
 ---
-template: example.html
+layout: example.html
 title: Preload example
 shortdesc: Example of tile preloading.
 docs: >
   <p>The map on the top preloads low resolution tiles.  The map on the bottom does not use any preloading.  Try zooming out and panning to see the difference.</p>
 tags: "preload, bing"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span6">
@@ -14,4 +16,3 @@ tags: "preload, bing"
     <div id="map2" class="map"></div>
   </div>
 </div>
-