3.11.0-beta.1

Make package.json compatible for npm frontend use.

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

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/bing-maps.html

@@ -5,6 +5,8 @@ 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/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

@@ -5,7 +5,7 @@ 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/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 @@
+---
+template: 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/drag-and-drop-image-vector.html

@@ -6,6 +6,8 @@ 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

@@ -6,6 +6,8 @@ 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/feature-move-animation.html

@@ -0,0 +1,24 @@
+---
+template: 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/full-screen-drag-rotate-and-zoom.html

@@ -6,6 +6,8 @@ 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

@@ -6,6 +6,8 @@ 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/gpx.html

@@ -5,6 +5,8 @@ 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/image-filter.html

@@ -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/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/kml.html

@@ -5,6 +5,8 @@ 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-spy.html

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

@@ -5,6 +5,8 @@ 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/mapbox-vector-tiles-advanced.css

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

examples/mapbox-vector-tiles-advanced.html

@@ -0,0 +1,17 @@
+---
+template: 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 @@
+---
+template: 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/mobile-full-screen.html

@@ -3,6 +3,8 @@ template: 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-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/preload.html

@@ -5,6 +5,8 @@ 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>
-

examples/raster.html

@@ -22,6 +22,8 @@ tags: "raster, pixel"
 resources:
   - http://d3js.org/d3.v3.min.js
   - raster.css
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12 rel">

examples/region-growing.html

@@ -24,6 +24,8 @@ docs: >
     to the operation.
   </p>
 tags: "raster, region growing"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/reprojection-by-code.html

@@ -0,0 +1,26 @@
+---
+template: example.html
+title: Reprojection with EPSG.io database search
+shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
+docs: >
+  This example shows client-side raster reprojection capabilities from
+  MapQuest OSM (EPSG:3857) to arbitrary projection by searching
+  in <a href="http://epsg.io/">EPSG.io</a> database.
+tags: "reprojection, projection, proj4js, mapquest, epsg.io"
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+  <form class="form-inline">
+    <label for="epsg-query">Search projection:</label>
+    <input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
+    <button id="epsg-search" class="btn">Search</button>
+    <span id="epsg-result"></span>
+    <div>
+      <label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label>
+    </div>
+  </form>
+</div>

examples/reprojection-by-code.js

@@ -0,0 +1,116 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileImage');
+
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'osm'})
+    })
+  ],
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    projection: 'EPSG:3857',
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+
+var queryInput = document.getElementById('epsg-query');
+var searchButton = document.getElementById('epsg-search');
+var resultSpan = document.getElementById('epsg-result');
+var renderEdgesCheckbox = document.getElementById('render-edges');
+
+function setProjection(code, name, proj4def, bbox) {
+  if (code === null || name === null || proj4def === null || bbox === null) {
+    resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';
+    map.setView(new ol.View({
+      projection: 'EPSG:3857',
+      center: [0, 0],
+      zoom: 1
+    }));
+    return;
+  }
+
+  resultSpan.innerHTML = '(' + code + ') ' + name;
+
+  var newProjCode = 'EPSG:' + code;
+  proj4.defs(newProjCode, proj4def);
+  var newProj = ol.proj.get(newProjCode);
+  var fromLonLat = ol.proj.getTransform('EPSG:4326', newProj);
+
+  // very approximate calculation of projection extent
+  var extent = ol.extent.applyTransform(
+      [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat);
+  newProj.setExtent(extent);
+  var newView = new ol.View({
+    projection: newProj
+  });
+  map.setView(newView);
+
+  var size = map.getSize();
+  if (size) {
+    newView.fit(extent, size);
+  }
+}
+
+
+function search(query) {
+  resultSpan.innerHTML = 'Searching...';
+  $.ajax({
+    url: 'http://epsg.io/?format=json&q=' + query,
+    dataType: 'jsonp',
+    success: function(response) {
+      if (response) {
+        var results = response['results'];
+        if (results && results.length > 0) {
+          for (var i = 0, ii = results.length; i < ii; i++) {
+            var result = results[i];
+            if (result) {
+              var code = result['code'], name = result['name'],
+                  proj4def = result['proj4'], bbox = result['bbox'];
+              if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
+                  bbox && bbox.length == 4) {
+                setProjection(code, name, proj4def, bbox);
+                return;
+              }
+            }
+          }
+        }
+      }
+      setProjection(null, null, null, null);
+    }
+  });
+}
+
+
+/**
+ * @param {Event} e Change event.
+ */
+searchButton.onclick = function(e) {
+  search(queryInput.value);
+  e.preventDefault();
+};
+
+
+/**
+ * @param {Event} e Change event.
+ */
+renderEdgesCheckbox.onchange = function(e) {
+  map.getLayers().forEach(function(layer) {
+    if (layer instanceof ol.layer.Tile) {
+      var source = layer.getSource();
+      if (source instanceof ol.source.TileImage) {
+        source.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
+      }
+    }
+  });
+};

examples/reprojection-image.html

@@ -0,0 +1,15 @@
+---
+template: example.html
+title: Image reprojection example
+shortdesc: Demonstrates client-side reprojection of single image source.
+docs: >
+  This example shows client-side reprojection of single image source.
+tags: "reprojection, projection, proj4js, mapquest, image, imagestatic"
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/reprojection-image.js

@@ -0,0 +1,39 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.ImageStatic');
+goog.require('ol.source.MapQuest');
+
+
+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 imageExtent = [0, 0, 700000, 1300000];
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'osm'})
+    }),
+    new ol.layer.Image({
+      source: new ol.source.ImageStatic({
+        url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
+               'British_National_Grid.svg/2000px-British_National_Grid.svg.png',
+        crossOrigin: '',
+        projection: 'EPSG:27700',
+        imageExtent: imageExtent
+      })
+    })
+  ],
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: ol.proj.transform(ol.extent.getCenter(imageExtent),
+                              'EPSG:27700', 'EPSG:3857'),
+    zoom: 4
+  })
+});

examples/reprojection-wgs84.html

@@ -0,0 +1,13 @@
+---
+template: example.html
+title: OpenStreetMap reprojection example
+shortdesc: Demonstrates client-side reprojection of OpenStreetMap in WGS84.
+docs: >
+  This example shows client-side reprojection of OpenStreetMap in WGS84.
+tags: "reprojection, projection, openstreetmap, wgs84, tile"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/reprojection-wgs84.js

@@ -0,0 +1,19 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 1
+  })
+});

examples/reprojection.html

@@ -0,0 +1,48 @@
+---
+template: example.html
+title: Raster reprojection example
+shortdesc: Demonstrates client-side raster reprojection between various projections.
+docs: >
+  This example shows client-side raster reprojection between various projections.
+tags: "reprojection, projection, proj4js, mapquest, wms, wmts, hidpi"
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+  <form class="form-inline">
+    <div class="col-md-3">
+      <label>Base map:</label>
+      <select id="base-layer">
+        <option value="mapquest">MapQuest (EPSG:3857)</option>
+        <option value="wms4326">WMS (EPSG:4326)</option>
+      </select>
+    </div>
+    <div class="col-md-4">
+      <label>Overlay map:</label>
+      <select id="overlay-layer">
+        <option value="bng">British National Grid (EPSG:27700)</option>
+        <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
+        <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
+        <option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option>
+        <option value="states">United States (EPSG:3857)</option>
+      </select>
+    </div>
+    <div class="col-md-5">
+      <label>View projection:</label>
+      <select id="view-projection">
+        <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
+        <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>
+        <option value="ESRI:54009">Mollweide (ESRI:54009)</option>
+        <option value="EPSG:27700">British National Grid (EPSG:27700)</option>
+        <option value="EPSG:23032">ED50 / UTM zone 32N (EPSG:23032)</option>
+        <option value="EPSG:2163">US National Atlas Equal Area (EPSG:2163)</option>
+        <option value="EPSG:3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
+        <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
+      </select>
+    </div>
+    <label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label> (only displayed on reprojected data)
+  </form>
+</div>

examples/reprojection.js

@@ -0,0 +1,244 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.format.WMTSCapabilities');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileImage');
+goog.require('ol.source.TileWMS');
+goog.require('ol.source.WMTS');
+goog.require('ol.source.XYZ');
+goog.require('ol.tilegrid.TileGrid');
+
+
+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]);
+
+proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl ' +
+    '+towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
+var proj23032 = ol.proj.get('EPSG:23032');
+proj23032.setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);
+
+proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=' +
+    '-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 ' +
+    '+ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+var proj5479 = ol.proj.get('EPSG:5479');
+proj5479.setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
+
+proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 ' +
+    '+lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel ' +
+    '+towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
+var proj21781 = ol.proj.get('EPSG:21781');
+proj21781.setExtent([485071.54, 75346.36, 828515.78, 299941.84]);
+
+proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 ' +
+    '+x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+var proj3413 = ol.proj.get('EPSG:3413');
+proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
+
+proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 ' +
+    '+a=6370997 +b=6370997 +units=m +no_defs');
+var proj2163 = ol.proj.get('EPSG:2163');
+proj2163.setExtent([-8040784.5135, -2577524.9210, 3668901.4484, 4785105.1096]);
+
+proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 ' +
+    '+units=m +no_defs');
+var proj54009 = ol.proj.get('ESRI:54009');
+proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
+
+
+var layers = [];
+
+layers['bng'] = new ol.layer.Tile({
+  source: new ol.source.XYZ({
+    projection: 'EPSG:27700',
+    url: 'http://tileserver.maptiler.com/miniscale/{z}/{x}/{y}.png',
+    crossOrigin: '',
+    maxZoom: 6
+  })
+});
+
+layers['mapquest'] = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'osm'})
+});
+
+layers['wms4326'] = new ol.layer.Tile({
+  source: new ol.source.TileWMS({
+    url: 'http://demo.boundlessgeo.com/geoserver/wms',
+    crossOrigin: '',
+    params: {
+      'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+    },
+    projection: 'EPSG:4326'
+  })
+});
+
+layers['wms21781'] = new ol.layer.Tile({
+  source: new ol.source.TileWMS({
+    attributions: [new ol.Attribution({
+      html: '© ' +
+          '<a href="http://www.geo.admin.ch/internet/geoportal/' +
+          'en/home.html">' +
+          'Pixelmap 1:1000000 / geo.admin.ch</a>'
+    })],
+    crossOrigin: 'anonymous',
+    params: {
+      'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
+      'FORMAT': 'image/jpeg'
+    },
+    url: 'http://wms.geo.admin.ch/',
+    projection: 'EPSG:21781'
+  })
+});
+
+var parser = new ol.format.WMTSCapabilities();
+$.ajax('http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
+    'wmts.cgi?SERVICE=WMTS&request=GetCapabilities').then(function(response) {
+  var result = parser.read(response);
+  var options = ol.source.WMTS.optionsFromCapabilities(result,
+      {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
+  options.crossOrigin = '';
+  options.projection = 'EPSG:3413';
+  options.wrapX = false;
+  layers['wmts3413'] = new ol.layer.Tile({
+    source: new ol.source.WMTS(options)
+  });
+});
+
+layers['grandcanyon'] = new ol.layer.Tile({
+  source: new ol.source.XYZ({
+    url: 'http://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',
+    crossOrigin: '',
+    tilePixelRatio: 2,
+    maxZoom: 15,
+    attributions: [new ol.Attribution({
+      html: 'Tiles &copy; USGS, rendered with ' +
+          '<a href="http://www.maptiler.com/">MapTiler</a>'
+    })]
+  })
+});
+
+var startResolution =
+    ol.extent.getWidth(ol.proj.get('EPSG:3857').getExtent()) / 256;
+var resolutions = new Array(22);
+for (var i = 0, ii = resolutions.length; i < ii; ++i) {
+  resolutions[i] = startResolution / Math.pow(2, i);
+}
+
+layers['states'] = new ol.layer.Tile({
+  source: new ol.source.TileWMS({
+    url: 'http://demo.boundlessgeo.com/geoserver/wms',
+    crossOrigin: '',
+    params: {'LAYERS': 'topp:states', 'TILED': true},
+    serverType: 'geoserver',
+    tileGrid: new ol.tilegrid.TileGrid({
+      extent: [-13884991, 2870341, -7455066, 6338219],
+      resolutions: resolutions,
+      tileSize: [512, 256]
+    }),
+    projection: 'EPSG:3857'
+  })
+});
+
+
+var map = new ol.Map({
+  layers: [
+    layers['mapquest'],
+    layers['bng']
+  ],
+  renderer: common.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    projection: 'EPSG:3857',
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+
+var baseLayerSelect = document.getElementById('base-layer');
+var overlayLayerSelect = document.getElementById('overlay-layer');
+var viewProjSelect = document.getElementById('view-projection');
+var renderEdgesCheckbox = document.getElementById('render-edges');
+var renderEdges = false;
+
+function updateViewProjection() {
+  var newProj = ol.proj.get(viewProjSelect.value);
+  var newProjExtent = newProj.getExtent();
+  var newView = new ol.View({
+    projection: newProj,
+    center: ol.extent.getCenter(newProjExtent || [0, 0, 0, 0]),
+    zoom: 0,
+    extent: newProjExtent || undefined
+  });
+  map.setView(newView);
+
+  // Example how to prevent double occurence of map by limiting layer extent
+  if (newProj == ol.proj.get('EPSG:3857')) {
+    layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
+  } else {
+    layers['bng'].setExtent(undefined);
+  }
+}
+
+
+/**
+ * @param {Event} e Change event.
+ */
+viewProjSelect.onchange = function(e) {
+  updateViewProjection();
+};
+
+updateViewProjection();
+
+var updateRenderEdgesOnLayer = function(layer) {
+  if (layer instanceof ol.layer.Tile) {
+    var source = layer.getSource();
+    if (source instanceof ol.source.TileImage) {
+      source.setRenderReprojectionEdges(renderEdges);
+    }
+  }
+};
+
+
+/**
+ * @param {Event} e Change event.
+ */
+baseLayerSelect.onchange = function(e) {
+  var layer = layers[baseLayerSelect.value];
+  if (layer) {
+    layer.setOpacity(1);
+    updateRenderEdgesOnLayer(layer);
+    map.getLayers().setAt(0, layer);
+  }
+};
+
+
+/**
+ * @param {Event} e Change event.
+ */
+overlayLayerSelect.onchange = function(e) {
+  var layer = layers[overlayLayerSelect.value];
+  if (layer) {
+    layer.setOpacity(0.7);
+    updateRenderEdgesOnLayer(layer);
+    map.getLayers().setAt(1, layer);
+  }
+};
+
+
+/**
+ * @param {Event} e Change event.
+ */
+renderEdgesCheckbox.onchange = function(e) {
+  renderEdges = renderEdgesCheckbox.checked;
+  map.getLayers().forEach(function(layer) {
+    updateRenderEdgesOnLayer(layer);
+  });
+};

examples/resources/mapbox-streets-v6-style.js

@@ -0,0 +1,311 @@
+// Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
+// http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json
+
+function createMapboxStreetsV6Style() {
+  var fill = new ol.style.Fill({color: ''});
+  var stroke = new ol.style.Stroke({color: '', width: 1});
+  var polygon = new ol.style.Style({fill: fill});
+  var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
+  var line = new ol.style.Style({stroke: stroke});
+  var text = new ol.style.Style({text: new ol.style.Text({
+    text: '', fill: fill, stroke: stroke
+  })});
+  var iconCache = {};
+  function getIcon(iconName) {
+    var icon = iconCache[iconName];
+    if (!icon) {
+      icon = new ol.style.Style({image: new ol.style.Icon({
+        src: '//raw.githubusercontent.com/mapbox/maki/mb-pages/renders/' +
+            iconName + '-12.png'
+      })});
+      iconCache[iconName] = icon;
+    }
+    return icon;
+  }
+  var styles = [];
+  return function(feature, resolution) {
+    var length = 0;
+    var layer = feature.get('layer');
+    var cls = feature.get('class');
+    var type = feature.get('type');
+    var scalerank = feature.get('scalerank');
+    var labelrank = feature.get('labelrank');
+    var adminLevel = feature.get('admin_level');
+    var maritime = feature.get('maritime');
+    var disputed = feature.get('disputed');
+    var maki = feature.get('maki');
+    var geom = feature.getGeometry().getType();
+    if (layer == 'landuse' && cls == 'park') {
+      fill.setColor('#d8e8c8');
+      styles[length++] = polygon;
+    } else if (layer == 'landuse' && cls == 'cemetery') {
+      fill.setColor('#e0e4dd');
+      styles[length++] = polygon;
+    } else if (layer == 'landuse' && cls == 'hospital') {
+      fill.setColor('#fde');
+      styles[length++] = polygon;
+    } else if (layer == 'landuse' && cls == 'school') {
+      fill.setColor('#f0e8f8');
+      styles[length++] = polygon;
+    } else if (layer == 'landuse' && cls == 'wood') {
+      fill.setColor('rgb(233,238,223)');
+      styles[length++] = polygon;
+    } else if (layer == 'waterway' &&
+        cls != 'river' && cls != 'stream' && cls != 'canal') {
+      stroke.setColor('#a0c8f0');
+      stroke.setWidth(1.3);
+      styles[length++] = line;
+    } else if (layer == 'waterway' && cls == 'river') {
+      stroke.setColor('#a0c8f0');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'waterway' && (cls == 'stream' ||
+        cls == 'canal')) {
+      stroke.setColor('#a0c8f0');
+      stroke.setWidth(1.3);
+      styles[length++] = line;
+    } else if (layer == 'water') {
+      fill.setColor('#a0c8f0');
+      styles[length++] = polygon;
+    } else if (layer == 'aeroway' && geom == 'Polygon') {
+      fill.setColor('rgb(242,239,235)');
+      styles[length++] = polygon;
+    } else if (layer == 'aeroway' && geom == 'LineString' &&
+        resolution <= 76.43702828517625) {
+      stroke.setColor('#f0ede9');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'building') {
+      fill.setColor('#f2eae2');
+      stroke.setColor('#dfdbd7');
+      stroke.setWidth(1);
+      styles[length++] = strokedPolygon;
+    } else if (layer == 'tunnel' && cls == 'motorway_link') {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'tunnel' && cls == 'service') {
+      stroke.setColor('#cfcdca');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'tunnel' &&
+        (cls == 'street' || cls == 'street_limited')) {
+      stroke.setColor('#cfcdca');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'tunnel' && cls == 'main' &&
+        resolution <= 1222.99245256282) {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'tunnel' && cls == 'motorway') {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'tunnel' && cls == 'path') {
+      stroke.setColor('#cba');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'tunnel' && cls == 'major_rail') {
+      stroke.setColor('#bbb');
+      stroke.setWidth(1.4);
+      styles[length++] = line;
+    } else if (layer == 'road' && cls == 'motorway_link') {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'road' && (cls == 'street' ||
+        cls == 'street_limited') && geom == 'LineString') {
+      stroke.setColor('#cfcdca');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'road' && cls == 'main' &&
+        resolution <= 1222.99245256282) {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'road' && cls == 'motorway' &&
+        resolution <= 4891.96981025128) {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'road' && cls == 'path') {
+      stroke.setColor('#cba');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'road' && cls == 'major_rail') {
+      stroke.setColor('#bbb');
+      stroke.setWidth(1.4);
+      styles[length++] = line;
+    } else if (layer == 'bridge' && cls == 'motorway_link') {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'bridge' && cls == 'motorway') {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'bridge' && cls == 'service') {
+      stroke.setColor('#cfcdca');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'bridge' &&
+        (cls == 'street' || cls == 'street_limited')) {
+      stroke.setColor('#cfcdca');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'bridge' && cls == 'main' &&
+        resolution <= 1222.99245256282) {
+      stroke.setColor('#e9ac77');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'bridge' && cls == 'path') {
+      stroke.setColor('#cba');
+      stroke.setWidth(1.2);
+      styles[length++] = line;
+    } else if (layer == 'bridge' && cls == 'major_rail') {
+      stroke.setColor('#bbb');
+      stroke.setWidth(1.4);
+      styles[length++] = line;
+    } else if (layer == 'admin' && adminLevel >= 3 && maritime === 0) {
+      stroke.setColor('#9e9cab');
+      stroke.setWidth(1);
+      styles[length++] = line;
+    } else if (layer == 'admin' && adminLevel == 2 &&
+        disputed === 0 && maritime === 0) {
+      stroke.setColor('#9e9cab');
+      stroke.setWidth(1);
+      styles[length++] = line;
+    } else if (layer == 'admin' && adminLevel == 2 &&
+        disputed === 1 && maritime === 0) {
+      stroke.setColor('#9e9cab');
+      stroke.setWidth(1);
+      styles[length++] = line;
+    } else if (layer == 'admin' && adminLevel >= 3 && maritime === 1) {
+      stroke.setColor('#a0c8f0');
+      stroke.setWidth(1);
+      styles[length++] = line;
+    } else if (layer == 'admin' && adminLevel == 2 && maritime === 1) {
+      stroke.setColor('#a0c8f0');
+      stroke.setWidth(1);
+      styles[length++] = line;
+    } else if (layer == 'country_label' && scalerank === 1) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#334');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(2);
+      styles[length++] = text;
+    } else if (layer == 'country_label' && scalerank === 2 &&
+        resolution <= 19567.87924100512) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('bold 10px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#334');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(2);
+      styles[length++] = text;
+    } else if (layer == 'country_label' && scalerank === 3 &&
+        resolution <= 9783.93962050256) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('bold 9px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#334');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(2);
+      styles[length++] = text;
+    } else if (layer == 'country_label' && scalerank === 4 &&
+        resolution <= 4891.96981025128) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('bold 8px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#334');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(2);
+      styles[length++] = text;
+    } else if (layer == 'marine_label' && labelrank === 1 &&
+        geom == 'Point') {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont(
+          'italic 11px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#74aee9');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(0.75);
+      styles[length++] = text;
+    } else if (layer == 'marine_label' && labelrank === 2 &&
+        geom == 'Point') {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont(
+          'italic 11px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#74aee9');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(0.75);
+      styles[length++] = text;
+    } else if (layer == 'marine_label' && labelrank === 3 &&
+        geom == 'Point') {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont(
+          'italic 10px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#74aee9');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(0.75);
+      styles[length++] = text;
+    } else if (layer == 'marine_label' && labelrank === 4 &&
+        geom == 'Point') {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont(
+          'italic 9px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#74aee9');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(0.75);
+      styles[length++] = text;
+    } else if (layer == 'place_label' && type == 'city' &&
+        resolution <= 1222.99245256282) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('11px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#333');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(1.2);
+      styles[length++] = text;
+    } else if (layer == 'place_label' && type == 'town' &&
+        resolution <= 305.748113140705) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('9px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#333');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(1.2);
+      styles[length++] = text;
+    } else if (layer == 'place_label' && type == 'village' &&
+        resolution <= 38.21851414258813) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('8px "Open Sans", "Arial Unicode MS"');
+      fill.setColor('#333');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(1.2);
+      styles[length++] = text;
+    } else if (layer == 'place_label' &&
+        resolution <= 19.109257071294063 && (type == 'hamlet' ||
+        type == 'suburb' || type == 'neighbourhood')) {
+      text.getText().setText(feature.get('name_en'));
+      text.getText().setFont('bold 9px "Arial Narrow"');
+      fill.setColor('#633');
+      stroke.setColor('rgba(255,255,255,0.8)');
+      stroke.setWidth(1.2);
+      styles[length++] = text;
+    } else if (layer == 'poi_label' && resolution <= 19.109257071294063 &&
+        scalerank == 1 && maki !== 'marker') {
+      styles[length++] = getIcon(maki);
+    } else if (layer == 'poi_label' && resolution <= 9.554628535647032 &&
+        scalerank == 2 && maki !== 'marker') {
+      styles[length++] = getIcon(maki);
+    } else if (layer == 'poi_label' && resolution <= 4.777314267823516 &&
+        scalerank == 3 && maki !== 'marker') {
+      styles[length++] = getIcon(maki);
+    } else if (layer == 'poi_label' && resolution <= 2.388657133911758 &&
+        scalerank == 4 && maki !== 'marker') {
+      styles[length++] = getIcon(maki);
+    } else if (layer == 'poi_label' && resolution <= 1.194328566955879 &&
+        scalerank >= 5 && maki !== 'marker') {
+      styles[length++] = getIcon(maki);
+    }
+    styles.length = length;
+    return styles;
+  };
+}

examples/static-image.js

@@ -36,6 +36,7 @@ var map = new ol.Map({
   view: new ol.View({
     projection: projection,
     center: ol.extent.getCenter(extent),
-    zoom: 2
+    zoom: 2,
+    maxZoom: 8
   })
 });

examples/tile-vector.css

@@ -1,4 +0,0 @@
- #map {
-   max-width: 600px;
-   margin: 0 auto;
- }

examples/tile-vector.html

@@ -1,23 +0,0 @@
----
-template: example.html
-title: Tile vector example
-shortdesc: Example of vector tiles from openstreetmap.us.
-docs: >
-  Example of vector tiles from openstreetmap.us.
-tags: "custom, control"
----
- <div class="row-fluid">
-   <div class="span12">
-     <div id="map" class="map" style="background: white;"></div>
-   </div>
- </div>
-<div class="alert">
-  <strong>Warning</strong> Map is becoming unresponsive with too many layers.
-</div>
-<fieldset>
-  <legend>Layers</legend>
-  <label class="checkbox"><input type="checkbox" id="landuse"/> Landuse</label>
-  <label class="checkbox"><input type="checkbox" id="buildings"/> Buildings</label>
-  <label class="checkbox"><input type="checkbox" id="water" checked/> Water</label>
-  <label class="checkbox"><input type="checkbox" id="roads" checked/> Roads</label>
-</fieldset>

examples/tile-vector.js

@@ -1,168 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.format.TopoJSON');
-goog.require('ol.layer.Vector');
-goog.require('ol.proj');
-goog.require('ol.source.TileVector');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-
-var waterLayer = new ol.layer.Vector({
-  source: new ol.source.TileVector({
-    format: new ol.format.TopoJSON(),
-    projection: 'EPSG:3857',
-    tileGrid: ol.tilegrid.createXYZ({
-      maxZoom: 19
-    }),
-    url: 'http://{a-c}.tile.openstreetmap.us/' +
-        'vectiles-water-areas/{z}/{x}/{y}.topojson'
-  }),
-  style: new ol.style.Style({
-    fill: new ol.style.Fill({
-      color: '#9db9e8'
-    })
-  })
-});
-
-var roadStyleCache = {};
-var roadLayer = new ol.layer.Vector({
-  source: new ol.source.TileVector({
-    format: new ol.format.TopoJSON(),
-    projection: 'EPSG:3857',
-    tileGrid: ol.tilegrid.createXYZ({
-      maxZoom: 19
-    }),
-    url: 'http://{a-c}.tile.openstreetmap.us/' +
-        'vectiles-highroad/{z}/{x}/{y}.topojson'
-  }),
-  style: function(feature, resolution) {
-    var kind = feature.get('kind');
-    var railway = feature.get('railway');
-    var sort_key = feature.get('sort_key');
-    var styleKey = kind + '/' + railway + '/' + sort_key;
-    var styleArray = roadStyleCache[styleKey];
-    if (!styleArray) {
-      var color, width;
-      if (railway) {
-        color = '#7de';
-        width = 1;
-      } else {
-        color = {
-          'major_road': '#776',
-          'minor_road': '#ccb',
-          'highway': '#f39'
-        }[kind];
-        width = kind == 'highway' ? 1.5 : 1;
-      }
-      styleArray = [new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: color,
-          width: width
-        }),
-        zIndex: sort_key
-      })];
-      roadStyleCache[styleKey] = styleArray;
-    }
-    return styleArray;
-  }
-});
-
-var buildingStyle = [
-  new ol.style.Style({
-    fill: new ol.style.Fill({
-      color: '#666',
-      opacity: 0.4
-    }),
-    stroke: new ol.style.Stroke({
-      color: '#444',
-      width: 1
-    })
-  })
-];
-var buildingLayer = new ol.layer.Vector({
-  source: new ol.source.TileVector({
-    format: new ol.format.TopoJSON({
-      defaultProjection: 'EPSG:4326'
-    }),
-    projection: 'EPSG:3857',
-    tileGrid: ol.tilegrid.createXYZ({
-      maxZoom: 19
-    }),
-    url: 'http://{a-c}.tile.openstreetmap.us/' +
-        'vectiles-buildings/{z}/{x}/{y}.topojson'
-  }),
-  visible: false,
-  style: function(f, resolution) {
-    return (resolution < 10) ? buildingStyle : [];
-  }
-});
-
-var landuseStyleCache = {};
-var landuseLayer = new ol.layer.Vector({
-  source: new ol.source.TileVector({
-    format: new ol.format.TopoJSON({
-      defaultProjection: 'EPSG:4326'
-    }),
-    projection: 'EPSG:3857',
-    tileGrid: ol.tilegrid.createXYZ({
-      maxZoom: 19
-    }),
-    url: 'http://{a-c}.tile.openstreetmap.us/' +
-        'vectiles-land-usages/{z}/{x}/{y}.topojson'
-  }),
-  visible: false,
-  style: function(feature, resolution) {
-    var kind = feature.get('kind');
-    var styleKey = kind;
-    var styleArray = landuseStyleCache[styleKey];
-    if (!styleArray) {
-      var color, width;
-      color = {
-        'parking': '#ddd',
-        'industrial': '#aaa',
-        'urban area': '#aaa',
-        'park': '#76C759',
-        'school': '#DA10E7',
-        'garden': '#76C759',
-        'pitch': '#D58F8D',
-        'scrub': '#3E7D28',
-        'residential': '#4C9ED9'
-      }[kind];
-      width = kind == 'highway' ? 1.5 : 1;
-      styleArray = [new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: color,
-          width: width
-        }),
-        fill: new ol.style.Fill({
-          color: color,
-          opacity: 0.5
-        })
-      })];
-      landuseStyleCache[styleKey] = styleArray;
-    }
-    return styleArray;
-  }
-});
-
-var map = new ol.Map({
-  layers: [landuseLayer, buildingLayer, waterLayer, roadLayer],
-  renderer: 'canvas',
-  target: document.getElementById('map'),
-  view: new ol.View({
-    center: ol.proj.fromLonLat([-74.0064, 40.7142]),
-    maxZoom: 19,
-    zoom: 15
-  })
-});
-
-$('input[type=checkbox]').on('change', function() {
-  var layer = {
-    landuse: landuseLayer,
-    buildings: buildingLayer,
-    water: waterLayer,
-    roads: roadLayer
-  }[$(this).attr('id')];
-  layer.setVisible(!layer.getVisible());
-});

examples/tileutfgrid.js

@@ -49,10 +49,8 @@ var displayCountryInfo = function(coordinate) {
         //  info.innerHTML = Mustache.render(gridSource.getTemplate(), data);
         mapElement.style.cursor = data ? 'pointer' : '';
         if (data) {
-          /* jshint -W069 */
           flagElement.src = 'data:image/png;base64,' + data['flag_png'];
           nameElement.innerHTML = data['admin'];
-          /* jshint +W069 */
         }
         infoOverlay.setPosition(data ? coordinate : undefined);
       });

examples/vector-osm.html

@@ -5,6 +5,8 @@ shortdesc: Example of using the OSM XML source.
 docs: >
  OSM XML vector data is loaded dynamically from a server using a tiling strategy.
 tags: "vector, osm, xml, loading, server"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/vector-wfs.html

@@ -5,6 +5,8 @@ shortdesc: Example of using WFS with a BBOX strategy.
 docs: >
   This example loads new features from GeoServer WFS when the view extent changes.
 tags: "vector, WFS, bbox, loading, server"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/zoom-constrained.html

@@ -5,6 +5,8 @@ shortdesc: Example of a zoom constrained view.
 docs: >
   This map has a view that is constrained between zoom levels 9 and 13.  This is done using the `minZoom` and `maxZoom` view options.
 tags: "bing, zoom, minZoom, maxZoom"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

externs/closure-compiler.js

@@ -7,3 +7,11 @@
  *
  * @externs
  */
+
+// see https://github.com/google/closure-compiler/pull/1206
+
+/**
+ * @type {string}
+ * @see http://www.w3.org/TR/pointerevents/#the-touch-action-css-property
+ */
+CSSProperties.prototype.touchAction;

externs/example.js

@@ -9,3 +9,10 @@ var common;
  * @return {string} Renderer type.
  */
 common.getRendererFromQueryString = function() {};
+
+
+/**
+ * @return {function((ol.Feature|ol.render.Feature), number):
+ *     Array.<ol.style.Style>}
+ */
+var createMapboxStreetsV6Style = function() {};

externs/oli.js

@@ -211,6 +211,25 @@ oli.interaction.DragAndDropEvent.prototype.projection;
 oli.interaction.DragAndDropEvent.prototype.file;
 
 
+
+/**
+ * @interface
+ */
+oli.interaction.TranslateEvent = function() {};
+
+
+/**
+ * @type {ol.Collection.<ol.Feature>}
+ */
+oli.interaction.TranslateEvent.prototype.features;
+
+
+/**
+ * @type {ol.Coordinate}
+ */
+oli.interaction.TranslateEvent.prototype.coordinate;
+
+
 /**
  * @type {Object}
  */

externs/olx.js

@@ -309,7 +309,8 @@ olx.MapOptions.prototype.view;
 
 /**
  * Object literal with config options for the overlay.
- * @typedef {{element: (Element|undefined),
+ * @typedef {{id: (number|string|undefined),
+ *     element: (Element|undefined),
  *     offset: (Array.<number>|undefined),
  *     position: (ol.Coordinate|undefined),
  *     positioning: (ol.OverlayPositioning|string|undefined),
@@ -323,6 +324,15 @@ olx.MapOptions.prototype.view;
 olx.OverlayOptions;
 
 
+/**
+ * Set the overlay id. The overlay id can be used with the
+ * {@link ol.Map#getOverlayById} method.
+ * @type {number|string|undefined}
+ * @api
+ */
+olx.OverlayOptions.prototype.id;
+
+
 /**
  * The overlay element.
  * @type {Element|undefined}
@@ -1675,6 +1685,57 @@ olx.format.EsriJSONOptions;
 olx.format.EsriJSONOptions.prototype.geometryName;
 
 
+/**
+ * @typedef {{featureClass: (function((ol.geom.Geometry|Object.<string, *>)=)|
+ *         function(ol.geom.GeometryType,Array.<number>,
+ *             (Array.<number>|Array.<Array.<number>>),Object.<string, *>)|
+ *         undefined),
+ *     geometryName: (string|undefined),
+ *     layers: (Array.<string>|undefined),
+ *     layerName: (string|undefined)}}
+ * @api
+ */
+olx.format.MVTOptions;
+
+
+/**
+ * Class for features returned by {@link ol.format.MVT#readFeatures}. Set to
+ * {@link ol.Feature} to get full editing and geometry support at the cost of
+ * decreased rendering performance. The default is {@link ol.render.Feature},
+ * which is optimized for rendering and hit detection.
+ * @type {undefined|function((ol.geom.Geometry|Object.<string, *>)=)|
+ *     function(ol.geom.GeometryType,Array.<number>,
+ *         (Array.<number>|Array.<Array.<number>>),Object.<string, *>)}
+ * @api
+ */
+olx.format.MVTOptions.prototype.featureClass;
+
+
+/**
+ * Geometry name to use when creating features. Default is 'geometry'.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.MVTOptions.prototype.geometryName;
+
+
+/**
+ * Name of the feature attribute that holds the layer name. Default is 'layer'.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.MVTOptions.prototype.layerName;
+
+
+/**
+ * Layers to read features from. If not provided, features will be read from all
+ * layers.
+ * @type {Array.<string>|undefined}
+ * @api
+ */
+olx.format.MVTOptions.prototype.layers;
+
+
 /**
  * @typedef {{factor: (number|undefined),
  *     geometryLayout: (ol.geom.GeometryLayout|undefined)}}
@@ -1734,7 +1795,8 @@ olx.format.IGCOptions.prototype.altitudeMode;
 
 /**
  * @typedef {{extractStyles: (boolean|undefined),
- *     defaultStyle: (Array.<ol.style.Style>|undefined)}}
+ *     defaultStyle: (Array.<ol.style.Style>|undefined),
+ *     showPointNames: (boolean|undefined)}}
  * @api
  */
 olx.format.KMLOptions;
@@ -1748,6 +1810,14 @@ olx.format.KMLOptions;
 olx.format.KMLOptions.prototype.extractStyles;
 
 
+/**
+ * Show names as labels for placemarks which contain points. Default is `true`.
+ * @type {boolean|undefined}
+ * @api stable
+ */
+olx.format.KMLOptions.prototype.showPointNames;
+
+
 /**
  * Default style. The default default style is the same as Google Earth.
  * @type {Array.<ol.style.Style>|undefined}
@@ -2271,13 +2341,21 @@ olx.interaction.DragAndDropOptions.prototype.projection;
 
 
 /**
- * @typedef {{condition: (ol.events.ConditionType|undefined),
- *     style: ol.style.Style}}
+ * @typedef {{className: (string|undefined),
+ *     condition: (ol.events.ConditionType|undefined)}}
  * @api
  */
 olx.interaction.DragBoxOptions;
 
 
+/**
+ * CSS class name for styling the box. The default is `ol-dragbox`.
+ * @type {string|undefined}
+ * @api
+ */
+olx.interaction.DragBoxOptions.prototype.className;
+
+
 /**
  * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
  * to indicate whether that event should be handled.
@@ -2288,14 +2366,6 @@ olx.interaction.DragBoxOptions;
 olx.interaction.DragBoxOptions.prototype.condition;
 
 
-/**
- * Style for the box.
- * @type {ol.style.Style}
- * @api
- */
-olx.interaction.DragBoxOptions.prototype.style;
-
-
 /**
  * @typedef {{kinetic: (ol.Kinetic|undefined)}}
  * @api
@@ -2364,14 +2434,22 @@ olx.interaction.DragRotateOptions.prototype.duration;
 
 
 /**
- * @typedef {{condition: (ol.events.ConditionType|undefined),
- *     duration: (number|undefined),
- *     style: ol.style.Style}}
+ * @typedef {{className: (string|undefined),
+ *     condition: (ol.events.ConditionType|undefined),
+ *     duration: (number|undefined)}}
  * @api
  */
 olx.interaction.DragZoomOptions;
 
 
+/**
+ * CSS class name for styling the box. The default is `ol-dragzoom`.
+ * @type {string|undefined}
+ * @api
+ */
+olx.interaction.DragZoomOptions.prototype.className;
+
+
 /**
  * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
  * to indicate whether that event should be handled.
@@ -2390,14 +2468,6 @@ olx.interaction.DragZoomOptions.prototype.condition;
 olx.interaction.DragZoomOptions.prototype.duration;
 
 
-/**
- * Style for the box.
- * @type {ol.style.Style}
- * @api
- */
-olx.interaction.DragZoomOptions.prototype.style;
-
-
 /**
  * @typedef {{clickTolerance: (number|undefined),
  *     features: (ol.Collection.<ol.Feature>|undefined),
@@ -3580,6 +3650,133 @@ olx.layer.VectorOptions.prototype.updateWhileInteracting;
 olx.layer.VectorOptions.prototype.visible;
 
 
+/**
+ * @typedef {{extent: (ol.Extent|undefined),
+ *     map: (ol.Map|undefined),
+ *     minResolution: (number|undefined),
+ *     maxResolution: (number|undefined),
+ *     opacity: (number|undefined),
+ *     renderBuffer: (number|undefined),
+ *     renderOrder: (function(ol.Feature, ol.Feature):number|undefined),
+ *     source: (ol.source.VectorTile|undefined),
+ *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
+ *     updateWhileAnimating: (boolean|undefined),
+ *     updateWhileInteracting: (boolean|undefined),
+ *     visible: (boolean|undefined)}}
+ * @api
+ */
+olx.layer.VectorTileOptions;
+
+
+/**
+ * The buffer around the viewport extent used by the renderer when getting
+ * features from the vector source for the rendering or hit-detection.
+ * Recommended value: the size of the largest symbol, line width or label.
+ * Default is 100 pixels.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.renderBuffer;
+
+
+/**
+ * Render order. Function to be used when sorting features before rendering. By
+ * default features are drawn in the order that they are created.
+ * @type {function(ol.Feature, ol.Feature):number|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.renderOrder;
+
+
+/**
+ * Sets the layer as overlay on a map. The map will not manage this layer in its
+ * layers collection, and the layer will be rendered on top. This is useful for
+ * temporary layers. The standard way to add a layer to a map and have it
+ * managed by the map is to use {@link ol.Map#addLayer}.
+ * @type {ol.Map|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.map;
+
+
+/**
+ * The bounding extent for layer rendering.  The layer will not be rendered
+ * outside of this extent.
+ * @type {ol.Extent|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.extent;
+
+
+/**
+ * The minimum resolution (inclusive) at which this layer will be visible.
+ * @type {number|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.minResolution;
+
+
+/**
+ * The maximum resolution (exclusive) below which this layer will be visible.
+ * @type {number|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.maxResolution;
+
+
+/**
+ * Opacity. 0-1. Default is `1`.
+ * @type {number|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.opacity;
+
+
+/**
+ * Source.
+ * @type {ol.source.VectorTile|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.source;
+
+
+/**
+ * Layer style. See {@link ol.style} for default style which will be used if
+ * this is not defined.
+ * @type {ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.style;
+
+
+/**
+ * When set to `true`, feature batches will be recreated during animations.
+ * This means that no vectors will be shown clipped, but the setting will have a
+ * performance impact for large amounts of vector data. When set to `false`,
+ * batches will be recreated when no animation is active.  Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.updateWhileAnimating;
+
+
+/**
+ * When set to `true`, feature batches will be recreated during interactions.
+ * See also `updateWhileAnimating`. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.updateWhileInteracting;
+
+
+/**
+ * Visibility. Default is `true` (visible).
+ * @type {boolean|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.visible;
+
+
 /**
  * Namespace.
  * @type {Object}
@@ -3592,6 +3789,7 @@ olx.source;
  *     key: string,
  *     imagerySet: string,
  *     maxZoom: (number|undefined),
+ *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     wrapX: (boolean|undefined)}}
  * @api
@@ -3632,6 +3830,15 @@ olx.source.BingMapsOptions.prototype.imagerySet;
 olx.source.BingMapsOptions.prototype.maxZoom;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.BingMapsOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -3655,7 +3862,8 @@ olx.source.BingMapsOptions.prototype.wrapX;
  *     format: (ol.format.Feature|undefined),
  *     logo: (string|undefined),
  *     projection: ol.proj.ProjectionLike,
- *     source: ol.source.Vector}}
+ *     source: ol.source.Vector,
+ *     wrapX: (boolean|undefined)}}
  * @api
  */
 olx.source.ClusterOptions;
@@ -3717,6 +3925,14 @@ olx.source.ClusterOptions.prototype.projection;
 olx.source.ClusterOptions.prototype.source;
 
 
+/**
+ * WrapX. Default is true
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.ClusterOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{preemptive: (boolean|undefined),
  *            url: string}}
@@ -3751,6 +3967,7 @@ olx.source.TileUTFGridOptions.prototype.url;
  *            logo: (string|olx.LogoOptions|undefined),
  *            opaque: (boolean|undefined),
  *            projection: ol.proj.ProjectionLike,
+ *            reprojectionErrorThreshold: (number|undefined),
  *            state: (ol.source.State|string|undefined),
  *            tileClass: (function(new: ol.ImageTile, ol.TileCoord,
  *                                 ol.TileState, string, ?string,
@@ -3759,6 +3976,8 @@ olx.source.TileUTFGridOptions.prototype.url;
  *            tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *            tilePixelRatio: (number|undefined),
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
+ *            url: (string|undefined),
+ *            urls: (Array.<string>|undefined),
  *            wrapX: (boolean|undefined)}}
  * @api
  */
@@ -3809,6 +4028,15 @@ olx.source.TileImageOptions.prototype.opaque;
 olx.source.TileImageOptions.prototype.projection;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileImageOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Source state.
  * @type {ol.source.State|string|undefined}
@@ -3862,6 +4090,24 @@ olx.source.TileImageOptions.prototype.tilePixelRatio;
 olx.source.TileImageOptions.prototype.tileUrlFunction;
 
 
+/**
+ * URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
+ * used instead of defining each one separately in the `urls` option.
+ * @type {string|undefined}
+ * @api stable
+ */
+olx.source.TileImageOptions.prototype.url;
+
+
+/**
+ * An array of URL templates.
+ * @type {Array.<string>|undefined}
+ * @api
+ */
+olx.source.TileImageOptions.prototype.urls;
+
+
 /**
  * Whether to wrap the world horizontally. The default, `undefined`, is to
  * request out-of-bounds tiles from the server. When set to `false`, only one
@@ -3877,31 +4123,40 @@ olx.source.TileImageOptions.prototype.wrapX;
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *            format: (ol.format.Feature|undefined),
  *            logo: (string|olx.LogoOptions|undefined),
- *     tileGrid: ol.tilegrid.TileGrid,
+ *            opaque: (boolean|undefined),
+ *            projection: ol.proj.ProjectionLike,
+ *            state: (ol.source.State|string|undefined),
+ *            tileClass: (function(new: ol.VectorTile, ol.TileCoord,
+ *                 ol.TileState, string, ol.format.Feature,
+ *                 ol.TileLoadFunctionType)|undefined),
+ *            tileGrid: (ol.tilegrid.TileGrid|undefined),
+ *            tileLoadFunction: (ol.TileLoadFunctionType|undefined),
+ *            tilePixelRatio: (number|undefined),
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
- *     tileLoadFunction: (ol.TileVectorLoadFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
  *            wrapX: (boolean|undefined)}}
  * @api
  */
-olx.source.TileVectorOptions;
+olx.source.VectorTileOptions;
 
 
+/**
 /**
  * Attributions.
  * @type {Array.<ol.Attribution>|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.attributions;
+olx.source.VectorTileOptions.prototype.attributions;
 
 
 /**
- * Format. Required unless tileLoadFunction is used.
+ * Feature format for tiles. Used and required by the default
+ * `tileLoadFunction`.
  * @type {ol.format.Feature|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.format;
+olx.source.VectorTileOptions.prototype.format;
 
 
 /**
@@ -3909,42 +4164,86 @@ olx.source.TileVectorOptions.prototype.format;
  * @type {string|olx.LogoOptions|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.logo;
+olx.source.VectorTileOptions.prototype.logo;
+
+
+/**
+ * Whether the layer is opaque.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.opaque;
+
+
+/**
+ * Projection.
+ * @type {ol.proj.ProjectionLike}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.projection;
+
+
+/**
+ * Source state.
+ * @type {ol.source.State|string|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.state;
+
+
+/**
+ * Class used to instantiate image tiles. Default is {@link ol.VectorTile}.
+ * @type {function(new: ol.VectorTile, ol.TileCoord,
+ *                 ol.TileState, string, ol.format.Feature,
+ *                 ol.TileLoadFunctionType)|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.tileClass;
 
 
 /**
  * Tile grid.
- * @type {ol.tilegrid.TileGrid}
+ * @type {ol.tilegrid.TileGrid|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.tileGrid;
+olx.source.VectorTileOptions.prototype.tileGrid;
+
+
+/**
+ * Optional function to load a tile given a URL.
+ * @type {ol.TileLoadFunctionType|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.tileLoadFunction;
+
+
+/**
+ * The pixel ratio used by the tile service. For example, if the tile
+ * service advertizes 256px by 256px tiles but actually sends 512px
+ * by 512px tiles (for retina/hidpi devices) then `tilePixelRatio`
+ * should be set to `2`. Default is `1`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.tilePixelRatio;
 
 
 /**
  * Optional function to get tile URL given a tile coordinate and the projection.
- * Required if url or urls are not provided.
  * @type {ol.TileUrlFunctionType|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.tileUrlFunction;
-
-
-/**
- * Optional function to override the default loading and format parsing behaviour.
- * If this option is used format is ignored and the provided function will be
- * responsible for data retrieval and transformation into features.
- * @type {ol.TileVectorLoadFunctionType|undefined}
- * @api
- */
-olx.source.TileVectorOptions.prototype.tileLoadFunction;
+olx.source.VectorTileOptions.prototype.tileUrlFunction;
 
 
 /**
  * URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
+ * used instead of defining each one separately in the `urls` option.
  * @type {string|undefined}
- * @api
+ * @api stable
  */
-olx.source.TileVectorOptions.prototype.url;
+olx.source.VectorTileOptions.prototype.url;
 
 
 /**
@@ -3952,17 +4251,17 @@ olx.source.TileVectorOptions.prototype.url;
  * @type {Array.<string>|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.urls;
+olx.source.VectorTileOptions.prototype.urls;
 
 
 /**
- * Wrap the world horizontally. Default is `true`. For vector editing across the
- * -180° and 180° meridians to work properly, this should be set to `false`. The
- * resulting geometry coordinates will then exceed the world bounds.
+ * Whether to wrap the world horizontally. When set to `false`, only one world
+ * will be rendered. When set to `true`, tiles will be wrapped horizontally to
+ * render multiple worlds. Default is `true`.
  * @type {boolean|undefined}
  * @api
  */
-olx.source.TileVectorOptions.prototype.wrapX;
+olx.source.VectorTileOptions.prototype.wrapX;
 
 
 /**
@@ -4066,6 +4365,7 @@ olx.source.ImageMapGuideOptions.prototype.params;
 
 /**
  * @typedef {{layer: string,
+ *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined)}}
  * @api
@@ -4081,6 +4381,15 @@ olx.source.MapQuestOptions;
 olx.source.MapQuestOptions.prototype.layer;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.MapQuestOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -4134,6 +4443,7 @@ olx.source.TileDebugOptions.prototype.wrapX;
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
  *     maxZoom: (number|undefined),
+ *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
  *     wrapX: (boolean|undefined)}}
@@ -4172,6 +4482,15 @@ olx.source.OSMOptions.prototype.crossOrigin;
 olx.source.OSMOptions.prototype.maxZoom;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.OSMOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -4528,6 +4847,7 @@ olx.source.ImageWMSOptions.prototype.url;
  *     minZoom: (number|undefined),
  *     maxZoom: (number|undefined),
  *     opaque: (boolean|undefined),
+ *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined)}}
  * @api
@@ -4567,6 +4887,15 @@ olx.source.StamenOptions.prototype.maxZoom;
 olx.source.StamenOptions.prototype.opaque;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.StamenOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -4673,6 +5002,7 @@ olx.source.ImageStaticOptions.prototype.url;
  *     logo: (string|olx.LogoOptions|undefined),
  *     tileGrid: (ol.tilegrid.TileGrid|undefined),
  *     projection: ol.proj.ProjectionLike,
+ *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
@@ -4744,6 +5074,15 @@ olx.source.TileArcGISRestOptions.prototype.tileGrid;
 olx.source.TileArcGISRestOptions.prototype.projection;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -4781,6 +5120,7 @@ olx.source.TileArcGISRestOptions.prototype.urls;
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
+ *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: string,
  *     wrapX: (boolean|undefined)}}
@@ -4811,6 +5151,15 @@ olx.source.TileJSONOptions.prototype.attributions;
 olx.source.TileJSONOptions.prototype.crossOrigin;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileJSONOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional function to load a tile given a URL.
  * @type {ol.TileLoadFunctionType|undefined}
@@ -4845,6 +5194,7 @@ olx.source.TileJSONOptions.prototype.wrapX;
  *     tileGrid: (ol.tilegrid.TileGrid|undefined),
  *     maxZoom: (number|undefined),
  *     projection: ol.proj.ProjectionLike,
+ *     reprojectionErrorThreshold: (number|undefined),
  *     serverType: (ol.source.wms.ServerType|string|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
@@ -4945,6 +5295,15 @@ olx.source.TileWMSOptions.prototype.maxZoom;
 olx.source.TileWMSOptions.prototype.projection;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileWMSOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * The type of the remote WMS server. Currently only used when `hidpi` is
  * `true`. Default is `undefined`.
@@ -5065,6 +5424,12 @@ olx.source.VectorOptions.prototype.strategy;
  * the given URL. Use a {@link ol.FeatureUrlFunction} to generate the url with
  * other loading strategies.
  * Requires `format` to be set as well.
+ * When default XHR feature loader is provided, the features will
+ * be transformed from the data projection to the view projection
+ * during parsing. If your remote data source does not advertise its projection
+ * properly, this transformation will be incorrect. For some formats, the
+ * default projection (usually EPSG:4326) can be overridden by setting the
+ * defaultDataProjection constructor option on the format.
  * @type {string|ol.FeatureUrlFunction|undefined}
  * @api
  */
@@ -5110,6 +5475,7 @@ olx.source.VectorOptions.prototype.wrapX;
  *     logo: (string|olx.LogoOptions|undefined),
  *     tileGrid: ol.tilegrid.WMTS,
  *     projection: ol.proj.ProjectionLike,
+ *     reprojectionErrorThreshold: (number|undefined),
  *     requestEncoding: (ol.source.WMTSRequestEncoding|string|undefined),
  *     layer: string,
  *     style: string,
@@ -5175,6 +5541,15 @@ olx.source.WMTSOptions.prototype.tileGrid;
 olx.source.WMTSOptions.prototype.projection;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.WMTSOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Request encoding. Default is `KVP`.
  * @type {ol.source.WMTSRequestEncoding|string|undefined}
@@ -5301,6 +5676,7 @@ olx.source.WMTSOptions.prototype.wrapX;
  *     crossOrigin: (null|string|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
  *     projection: ol.proj.ProjectionLike,
+ *     reprojectionErrorThreshold: (number|undefined),
  *     maxZoom: (number|undefined),
  *     minZoom: (number|undefined),
  *     tileGrid: (ol.tilegrid.TileGrid|undefined),
@@ -5352,6 +5728,15 @@ olx.source.XYZOptions.prototype.logo;
 olx.source.XYZOptions.prototype.projection;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.XYZOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Optional max zoom level. Default is `18`.
  * @type {number|undefined}
@@ -5442,6 +5827,7 @@ olx.source.XYZOptions.prototype.wrapX;
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
+ *     reprojectionErrorThreshold: (number|undefined),
  *     url: !string,
  *     tierSizeCalculation: (string|undefined),
  *     size: ol.Size}}
@@ -5478,6 +5864,15 @@ olx.source.ZoomifyOptions.prototype.crossOrigin;
 olx.source.ZoomifyOptions.prototype.logo;
 
 
+/**
+ * Maximum allowed reprojection error (in pixels). Default is `0.5`.
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.ZoomifyOptions.prototype.reprojectionErrorThreshold;
+
+
 /**
  * Prefix of URL template.
  * @type {!string}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "3.10.1",
+  "version": "3.11.0-beta.1",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -24,22 +24,30 @@
   "bugs": {
     "url": "https://github.com/openlayers/ol3/issues"
   },
+  "browser": "dist/ol.js",
+  "style": [
+    "css/ol.css"
+  ],
   "dependencies": {
     "async": "0.9.0",
+    "bluebird": "^2.10.1",
     "browserify": "9.0.3",
     "closure-util": "1.8.0",
+    "derequire": "2.0.2",
     "fs-extra": "0.12.0",
     "glob": "5.0.3",
     "graceful-fs": "3.0.2",
     "handlebars": "3.0.1",
-    "jsdoc": "3.3.2",
+    "jsdoc-fork": "^4.0.0-beta.1",
     "marked": "0.3.5",
     "metalsmith": "1.6.0",
     "metalsmith-templates": "0.7.0",
     "nomnom": "1.8.0",
+    "pbf": "1.3.5",
     "pixelworks": "1.0.0",
     "rbush": "1.3.5",
     "temp": "0.8.1",
+    "vector-tile": "1.1.3",
     "walk": "2.3.4"
   },
   "devDependencies": {
@@ -63,6 +71,18 @@
   },
   "ext": [
     "rbush",
-    {"module": "pixelworks", "browserify": true}
+    {
+      "module": "pbf",
+      "browserify": true
+    },
+    {
+      "module": "pixelworks",
+      "browserify": true
+    },
+    {
+      "module": "vector-tile",
+      "name": "vectortile",
+      "browserify": true
+    }
   ]
 }

src/ol/control/attributioncontrol.js

@@ -4,7 +4,6 @@ goog.provide('ol.control.Attribution');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.dom.classlist');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
@@ -38,13 +37,13 @@ ol.control.Attribution = function(opt_options) {
    * @private
    * @type {Element}
    */
-  this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
+  this.ulElement_ = goog.dom.createElement('UL');
 
   /**
    * @private
    * @type {Element}
    */
-  this.logoLi_ = goog.dom.createElement(goog.dom.TagName.LI);
+  this.logoLi_ = goog.dom.createElement('LI');
 
   this.ulElement_.appendChild(this.logoLi_);
   goog.style.setElementShown(this.logoLi_, false);
@@ -77,7 +76,7 @@ ol.control.Attribution = function(opt_options) {
    * @type {Node}
    */
   this.collapseLabel_ = goog.isString(collapseLabel) ?
-      goog.dom.createDom(goog.dom.TagName.SPAN, {}, collapseLabel) :
+      goog.dom.createDom('SPAN', {}, collapseLabel) :
       collapseLabel;
 
   var label = options.label ? options.label : 'i';
@@ -87,12 +86,12 @@ ol.control.Attribution = function(opt_options) {
    * @type {Node}
    */
   this.label_ = goog.isString(label) ?
-      goog.dom.createDom(goog.dom.TagName.SPAN, {}, label) :
+      goog.dom.createDom('SPAN', {}, label) :
       label;
 
   var activeLabel = (this.collapsible_ && !this.collapsed_) ?
       this.collapseLabel_ : this.label_;
-  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var button = goog.dom.createDom('BUTTON', {
     'type': 'button',
     'title': tipLabel
   }, activeLabel);
@@ -111,7 +110,7 @@ ol.control.Attribution = function(opt_options) {
       ol.css.CLASS_CONTROL +
       (this.collapsed_ && this.collapsible_ ? ' ol-collapsed' : '') +
       (this.collapsible_ ? '' : ' ol-uncollapsible');
-  var element = goog.dom.createDom(goog.dom.TagName.DIV,
+  var element = goog.dom.createDom('DIV',
       cssClasses, this.ulElement_, button);
 
   var render = options.render ? options.render : ol.control.Attribution.render;
@@ -262,7 +261,7 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     }
   }
   for (attributionKey in visibleAttributions) {
-    attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
+    attributionElement = goog.dom.createElement('LI');
     attributionElement.innerHTML =
         visibleAttributions[attributionKey].getHTML();
     this.ulElement_.appendChild(attributionElement);
@@ -270,7 +269,7 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     this.attributionElementRenderedVisible_[attributionKey] = true;
   }
   for (attributionKey in hiddenAttributions) {
-    attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
+    attributionElement = goog.dom.createElement('LI');
     attributionElement.innerHTML =
         hiddenAttributions[attributionKey].getHTML();
     goog.style.setElementShown(attributionElement, false);
@@ -323,7 +322,7 @@ ol.control.Attribution.prototype.insertLogos_ = function(frameState) {
       if (logoValue === '') {
         logoElement = image;
       } else {
-        logoElement = goog.dom.createDom(goog.dom.TagName.A, {
+        logoElement = goog.dom.createDom('A', {
           'href': logoValue
         });
         logoElement.appendChild(image);

src/ol/control/fullscreencontrol.js

@@ -2,7 +2,6 @@ goog.provide('ol.control.FullScreen');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.dom.classlist');
 goog.require('goog.dom.fullscreen');
 goog.require('goog.dom.fullscreen.EventType');
@@ -56,7 +55,7 @@ ol.control.FullScreen = function(opt_options) {
       goog.dom.createTextNode(labelActive) : labelActive;
 
   var tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
-  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var button = goog.dom.createDom('BUTTON', {
     'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen(),
     'type': 'button',
     'title': tipLabel
@@ -72,7 +71,7 @@ ol.control.FullScreen = function(opt_options) {
   var cssClasses = this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE +
       ' ' + ol.css.CLASS_CONTROL + ' ' +
       (!goog.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '');
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
+  var element = goog.dom.createDom('DIV', cssClasses, button);
 
   goog.base(this, {
     element: element,

src/ol/control/mousepositioncontrol.js

@@ -3,7 +3,6 @@
 goog.provide('ol.control.MousePosition');
 
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.CoordinateFormatType');
@@ -44,7 +43,7 @@ ol.control.MousePosition = function(opt_options) {
 
   var className = options.className ? options.className : 'ol-mouse-position';
 
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, className);
+  var element = goog.dom.createDom('DIV', className);
 
   var render = options.render ?
       options.render : ol.control.MousePosition.render;

src/ol/control/overviewmapcontrol.js

@@ -2,7 +2,6 @@ goog.provide('ol.control.OverviewMap');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.dom.classlist');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
@@ -65,7 +64,7 @@ ol.control.OverviewMap = function(opt_options) {
    * @type {Node}
    */
   this.collapseLabel_ = goog.isString(collapseLabel) ?
-      goog.dom.createDom(goog.dom.TagName.SPAN, {}, collapseLabel) :
+      goog.dom.createDom('SPAN', {}, collapseLabel) :
       collapseLabel;
 
   var label = options.label ? options.label : '\u00BB';
@@ -75,12 +74,12 @@ ol.control.OverviewMap = function(opt_options) {
    * @type {Node}
    */
   this.label_ = goog.isString(label) ?
-      goog.dom.createDom(goog.dom.TagName.SPAN, {}, label) :
+      goog.dom.createDom('SPAN', {}, label) :
       label;
 
   var activeLabel = (this.collapsible_ && !this.collapsed_) ?
       this.collapseLabel_ : this.label_;
-  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var button = goog.dom.createDom('BUTTON', {
     'type': 'button',
     'title': tipLabel
   }, activeLabel);
@@ -88,7 +87,7 @@ ol.control.OverviewMap = function(opt_options) {
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
-  var ovmapDiv = goog.dom.createDom(goog.dom.TagName.DIV, 'ol-overviewmap-map');
+  var ovmapDiv = goog.dom.createDom('DIV', 'ol-overviewmap-map');
 
   /**
    * @type {ol.Map}
@@ -112,7 +111,7 @@ ol.control.OverviewMap = function(opt_options) {
         }, this);
   }
 
-  var box = goog.dom.createDom(goog.dom.TagName.DIV, 'ol-overviewmap-box');
+  var box = goog.dom.createDom('DIV', 'ol-overviewmap-box');
 
   /**
    * @type {ol.Overlay}
@@ -129,7 +128,7 @@ ol.control.OverviewMap = function(opt_options) {
       ol.css.CLASS_CONTROL +
       (this.collapsed_ && this.collapsible_ ? ' ol-collapsed' : '') +
       (this.collapsible_ ? '' : ' ol-uncollapsible');
-  var element = goog.dom.createDom(goog.dom.TagName.DIV,
+  var element = goog.dom.createDom('DIV',
       cssClasses, ovmapDiv, button);
 
   var render = options.render ? options.render : ol.control.OverviewMap.render;
@@ -520,3 +519,13 @@ ol.control.OverviewMap.prototype.setCollapsed = function(collapsed) {
 ol.control.OverviewMap.prototype.getCollapsed = function() {
   return this.collapsed_;
 };
+
+
+/**
+ * Return the overview map.
+ * @return {ol.Map} Overview map.
+ * @api
+ */
+ol.control.OverviewMap.prototype.getOverviewMap = function() {
+  return this.ovmap_;
+};

src/ol/control/rotatecontrol.js

@@ -1,7 +1,6 @@
 goog.provide('ol.control.Rotate');
 
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.dom.classlist');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
@@ -40,7 +39,7 @@ ol.control.Rotate = function(opt_options) {
   this.label_ = null;
 
   if (goog.isString(label)) {
-    this.label_ = goog.dom.createDom(goog.dom.TagName.SPAN,
+    this.label_ = goog.dom.createDom('SPAN',
         'ol-compass', label);
   } else {
     this.label_ = label;
@@ -49,7 +48,7 @@ ol.control.Rotate = function(opt_options) {
 
   var tipLabel = options.tipLabel ? options.tipLabel : 'Reset rotation';
 
-  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var button = goog.dom.createDom('BUTTON', {
     'class': className + '-reset',
     'type' : 'button',
     'title': tipLabel
@@ -60,7 +59,7 @@ ol.control.Rotate = function(opt_options) {
 
   var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
       ol.css.CLASS_CONTROL;
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
+  var element = goog.dom.createDom('DIV', cssClasses, button);
 
   var render = options.render ? options.render : ol.control.Rotate.render;
 

src/ol/control/scalelinecontrol.js

@@ -4,15 +4,14 @@ goog.provide('ol.control.ScaleLineUnits');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
-goog.require('goog.math');
 goog.require('goog.style');
 goog.require('ol');
 goog.require('ol.Object');
 goog.require('ol.TransformFunction');
 goog.require('ol.control.Control');
 goog.require('ol.css');
+goog.require('ol.math');
 goog.require('ol.proj');
 goog.require('ol.proj.METERS_PER_UNIT');
 goog.require('ol.proj.Units');
@@ -67,14 +66,14 @@ ol.control.ScaleLine = function(opt_options) {
    * @private
    * @type {Element}
    */
-  this.innerElement_ = goog.dom.createDom(goog.dom.TagName.DIV,
+  this.innerElement_ = goog.dom.createDom('DIV',
       className + '-inner');
 
   /**
    * @private
    * @type {Element}
    */
-  this.element_ = goog.dom.createDom(goog.dom.TagName.DIV,
+  this.element_ = goog.dom.createDom('DIV',
       className + ' ' + ol.css.CLASS_UNSELECTABLE, this.innerElement_);
 
   /**
@@ -218,7 +217,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
 
     // Convert pointResolution from degrees to meters
     this.toEPSG4326_ = null;
-    cosLatitude = Math.cos(goog.math.toRadians(center[1]));
+    cosLatitude = Math.cos(ol.math.toRadians(center[1]));
     pointResolution *= Math.PI * cosLatitude * ol.sphere.NORMAL.radius / 180;
     projectionUnits = ol.proj.Units.METERS;
 
@@ -230,7 +229,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
       this.toEPSG4326_ = ol.proj.getTransformFromProjections(
           projection, ol.proj.get('EPSG:4326'));
     }
-    cosLatitude = Math.cos(goog.math.toRadians(this.toEPSG4326_(center)[1]));
+    cosLatitude = Math.cos(ol.math.toRadians(this.toEPSG4326_(center)[1]));
     var radius = ol.sphere.NORMAL.radius;
     goog.asserts.assert(ol.proj.METERS_PER_UNIT[projectionUnits],
         'Meters per unit should be defined for the projection unit');

src/ol/control/zoomcontrol.js

@@ -1,7 +1,6 @@
 goog.provide('ol.control.Zoom');
 
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.animation');
@@ -38,7 +37,7 @@ ol.control.Zoom = function(opt_options) {
   var zoomOutTipLabel = options.zoomOutTipLabel ?
       options.zoomOutTipLabel : 'Zoom out';
 
-  var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var inElement = goog.dom.createDom('BUTTON', {
     'class': className + '-in',
     'type' : 'button',
     'title': zoomInTipLabel
@@ -48,7 +47,7 @@ ol.control.Zoom = function(opt_options) {
       goog.events.EventType.CLICK, goog.partial(
           ol.control.Zoom.prototype.handleClick_, delta), false, this);
 
-  var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var outElement = goog.dom.createDom('BUTTON', {
     'class': className + '-out',
     'type' : 'button',
     'title': zoomOutTipLabel
@@ -60,7 +59,7 @@ ol.control.Zoom = function(opt_options) {
 
   var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
       ol.css.CLASS_CONTROL;
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement,
+  var element = goog.dom.createDom('DIV', cssClasses, inElement,
       outElement);
 
   goog.base(this, {
@@ -72,7 +71,7 @@ ol.control.Zoom = function(opt_options) {
    * @type {number}
    * @private
    */
-  this.duration_ = options.duration ? options.duration : 250;
+  this.duration_ = options.duration !== undefined ? options.duration : 250;
 
 };
 goog.inherits(ol.control.Zoom, ol.control.Control);

src/ol/control/zoomslidercontrol.js

@@ -4,7 +4,6 @@ goog.provide('ol.control.ZoomSlider');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.Event');
 goog.require('goog.events.EventType');
@@ -79,9 +78,11 @@ ol.control.ZoomSlider = function(opt_options) {
   this.duration_ = options.duration ? options.duration : 200;
 
   var className = options.className ? options.className : 'ol-zoomslider';
-  var thumbElement = goog.dom.createDom(goog.dom.TagName.DIV,
-      [className + '-thumb', ol.css.CLASS_UNSELECTABLE]);
-  var containerElement = goog.dom.createDom(goog.dom.TagName.DIV,
+  var thumbElement = goog.dom.createDom('BUTTON', {
+    'type': 'button',
+    'class': className + '-thumb ' + ol.css.CLASS_UNSELECTABLE
+  });
+  var containerElement = goog.dom.createDom('DIV',
       [className, ol.css.CLASS_UNSELECTABLE, ol.css.CLASS_CONTROL],
       thumbElement);
 

src/ol/control/zoomtoextentcontrol.js

@@ -2,7 +2,6 @@ goog.provide('ol.control.ZoomToExtent');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.control.Control');
@@ -35,7 +34,7 @@ ol.control.ZoomToExtent = function(opt_options) {
   var label = options.label ? options.label : 'E';
   var tipLabel = options.tipLabel ?
       options.tipLabel : 'Fit to extent';
-  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var button = goog.dom.createDom('BUTTON', {
     'type': 'button',
     'title': tipLabel
   }, label);
@@ -45,7 +44,7 @@ ol.control.ZoomToExtent = function(opt_options) {
 
   var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
       ol.css.CLASS_CONTROL;
-  var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, button);
+  var element = goog.dom.createDom('DIV', cssClasses, button);
 
   goog.base(this, {
     element: element,

src/ol/deviceorientation.js

@@ -2,10 +2,10 @@ goog.provide('ol.DeviceOrientation');
 goog.provide('ol.DeviceOrientationProperty');
 
 goog.require('goog.events');
-goog.require('goog.math');
 goog.require('ol');
 goog.require('ol.Object');
 goog.require('ol.has');
+goog.require('ol.math');
 
 
 /**
@@ -115,24 +115,24 @@ ol.DeviceOrientation.prototype.orientationChange_ = function(browserEvent) {
   var event = /** @type {DeviceOrientationEvent} */
       (browserEvent.getBrowserEvent());
   if (event.alpha !== null) {
-    var alpha = goog.math.toRadians(event.alpha);
+    var alpha = ol.math.toRadians(event.alpha);
     this.set(ol.DeviceOrientationProperty.ALPHA, alpha);
     // event.absolute is undefined in iOS.
     if (goog.isBoolean(event.absolute) && event.absolute) {
       this.set(ol.DeviceOrientationProperty.HEADING, alpha);
     } else if (goog.isNumber(event.webkitCompassHeading) &&
                event.webkitCompassAccuracy != -1) {
-      var heading = goog.math.toRadians(event.webkitCompassHeading);
+      var heading = ol.math.toRadians(event.webkitCompassHeading);
       this.set(ol.DeviceOrientationProperty.HEADING, heading);
     }
   }
   if (event.beta !== null) {
     this.set(ol.DeviceOrientationProperty.BETA,
-        goog.math.toRadians(event.beta));
+        ol.math.toRadians(event.beta));
   }
   if (event.gamma !== null) {
     this.set(ol.DeviceOrientationProperty.GAMMA,
-        goog.math.toRadians(event.gamma));
+        ol.math.toRadians(event.gamma));
   }
   this.changed();
 };

src/ol/dom/dom.js

@@ -5,7 +5,6 @@ goog.provide('ol.dom.BrowserFeature');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.userAgent');
 goog.require('goog.vec.Mat4');
 goog.require('ol');
@@ -18,7 +17,7 @@ goog.require('ol');
  * @return {CanvasRenderingContext2D}
  */
 ol.dom.createCanvasContext2D = function(opt_width, opt_height) {
-  var canvas = goog.dom.createElement(goog.dom.TagName.CANVAS);
+  var canvas = goog.dom.createElement('CANVAS');
   if (opt_width) {
     canvas.width = opt_width;
   }
@@ -45,7 +44,7 @@ ol.dom.canUseCssTransform = (function() {
         // this browser is ancient
         canUseCssTransform = false;
       } else {
-        var el = goog.dom.createElement(goog.dom.TagName.P),
+        var el = goog.dom.createElement('P'),
             has2d,
             transforms = {
               'webkitTransform': '-webkit-transform',
@@ -88,7 +87,7 @@ ol.dom.canUseCssTransform3D = (function() {
         // this browser is ancient
         canUseCssTransform3D = false;
       } else {
-        var el = goog.dom.createElement(goog.dom.TagName.P),
+        var el = goog.dom.createElement('P'),
             has3d,
             transforms = {
               'webkitTransform': '-webkit-transform',

src/ol/events/condition.js

@@ -2,7 +2,6 @@ goog.provide('ol.events.ConditionType');
 goog.provide('ol.events.condition');
 
 goog.require('goog.asserts');
-goog.require('goog.dom.TagName');
 goog.require('goog.functions');
 goog.require('ol.MapBrowserEvent.EventType');
 goog.require('ol.MapBrowserPointerEvent');
@@ -141,8 +140,9 @@ ol.events.condition.noModifierKeys = function(mapBrowserEvent) {
 
 
 /**
- * Return `true` if only the platform-modifier-key (e.g. the windows-key) is
- * pressed, `false` otherwise (e.g. when additionally the shift-key is pressed).
+ * Return `true` if only the platform-modifier-key (the meta-key on Mac,
+ * ctrl-key otherwise) is pressed, `false` otherwise (e.g. when additionally
+ * the shift-key is pressed).
  *
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
  * @return {boolean} True if only the platform modifier key is pressed.
@@ -188,24 +188,20 @@ ol.events.condition.targetNotEditable = function(mapBrowserEvent) {
       'target should be an Element');
   var tagName = target.tagName;
   return (
-      tagName !== goog.dom.TagName.INPUT &&
-      tagName !== goog.dom.TagName.SELECT &&
-      tagName !== goog.dom.TagName.TEXTAREA);
+      tagName !== 'INPUT' &&
+      tagName !== 'SELECT' &&
+      tagName !== 'TEXTAREA');
 };
 
 
 /**
  * Return `true` if the event originates from a mouse device.
  *
- * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
+ * @param {ol.MapBrowserPointerEvent} mapBrowserEvent Map browser event.
  * @return {boolean} True if the event originates from a mouse device.
  * @api stable
  */
 ol.events.condition.mouseOnly = function(mapBrowserEvent) {
-  goog.asserts.assertInstanceof(mapBrowserEvent, ol.MapBrowserPointerEvent,
-      'mapBrowserEvent should be an instance of ol.MapBrowserPointerEvent');
-  /* pointerId must be 1 for mouse devices,
-   * see: http://www.w3.org/Submission/pointer-events/#pointerevent-interface
-   */
-  return mapBrowserEvent.pointerEvent.pointerId == 1;
+  // see http://www.w3.org/TR/pointerevents/#widl-PointerEvent-pointerType
+  return mapBrowserEvent.pointerEvent.pointerType == 'mouse';
 };

src/ol/featureloader.js

@@ -7,6 +7,7 @@ goog.require('goog.events');
 goog.require('goog.net.EventType');
 goog.require('goog.net.XhrIo');
 goog.require('goog.net.XhrIo.ResponseType');
+goog.require('ol.TileState');
 goog.require('ol.format.FormatType');
 goog.require('ol.xml');
 
@@ -46,22 +47,28 @@ ol.FeatureUrlFunction;
 /**
  * @param {string|ol.FeatureUrlFunction} url Feature URL service.
  * @param {ol.format.Feature} format Feature format.
- * @param {function(this:ol.source.Vector, Array.<ol.Feature>)} success
- *     Function called with the loaded features. Called with the vector
+ * @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection)|function(this:ol.source.Vector, Array.<ol.Feature>)} success
+ *     Function called with the loaded features and optionally with the data
+ *     projection. Called with the vector tile or source as `this`.
+ * @param {function(this:ol.VectorTile)|function(this:ol.source.Vector)} failure
+ *     Function called when loading failed. Called with the vector tile or
  *     source as `this`.
  * @return {ol.FeatureLoader} The feature loader.
  */
-ol.featureloader.loadFeaturesXhr = function(url, format, success) {
+ol.featureloader.loadFeaturesXhr = function(url, format, success, failure) {
   return (
       /**
        * @param {ol.Extent} extent Extent.
        * @param {number} resolution Resolution.
        * @param {ol.proj.Projection} projection Projection.
-       * @this {ol.source.Vector}
+       * @this {ol.source.Vector|ol.VectorTile}
        */
       function(extent, resolution, projection) {
         var xhrIo = new goog.net.XhrIo();
-        xhrIo.setResponseType(goog.net.XhrIo.ResponseType.TEXT);
+        xhrIo.setResponseType(
+            format.getType() == ol.format.FormatType.ARRAY_BUFFER ?
+                goog.net.XhrIo.ResponseType.ARRAY_BUFFER :
+                goog.net.XhrIo.ResponseType.TEXT);
         goog.events.listen(xhrIo, goog.net.EventType.COMPLETE,
             /**
              * @param {Event} event Event.
@@ -87,18 +94,24 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success) {
                   if (!source) {
                     source = ol.xml.parse(xhrIo.getResponseText());
                   }
+                } else if (type == ol.format.FormatType.ARRAY_BUFFER) {
+                  source = xhrIo.getResponse();
                 } else {
                   goog.asserts.fail('unexpected format type');
                 }
                 if (source) {
                   var features = format.readFeatures(source,
                       {featureProjection: projection});
+                  if (ol.ENABLE_VECTOR_TILE && success.length == 2) {
+                    success.call(this, features, format.readProjection(source));
+                  } else {
                     success.call(this, features);
+                  }
                 } else {
                   goog.asserts.fail('undefined or null source');
                 }
               } else {
-                // FIXME
+                failure.call(this);
               }
               goog.dispose(xhrIo);
             }, false, this);
@@ -112,6 +125,35 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success) {
 };
 
 
+/**
+ * Create an XHR feature loader for a `url` and `format`. The feature loader
+ * loads features (with XHR), parses the features, and adds them to the
+ * vector tile.
+ * @param {string|ol.FeatureUrlFunction} url Feature URL service.
+ * @param {ol.format.Feature} format Feature format.
+ * @return {ol.FeatureLoader} The feature loader.
+ * @api
+ */
+ol.featureloader.tile = function(url, format) {
+  return ol.featureloader.loadFeaturesXhr(url, format,
+      /**
+       * @param {Array.<ol.Feature>} features The loaded features.
+       * @param {ol.proj.Projection} projection Data projection.
+       * @this {ol.VectorTile}
+       */
+      function(features, projection) {
+        this.setProjection(projection);
+        this.setFeatures(features);
+      },
+      /**
+       * @this {ol.VectorTile}
+       */
+      function() {
+        this.setState(ol.TileState.ERROR);
+      });
+};
+
+
 /**
  * Create an XHR feature loader for a `url` and `format`. The feature loader
  * loads features (with XHR), parses the features, and adds them to the
@@ -129,5 +171,5 @@ ol.featureloader.xhr = function(url, format) {
        */
       function(features) {
         this.addFeatures(features);
-      });
+      }, /* FIXME handle error */ ol.nullFunction);
 };

src/ol/format/featureformat.js

@@ -24,6 +24,7 @@ ol.format.Feature = function() {
    * @type {ol.proj.Projection}
    */
   this.defaultDataProjection = null;
+
 };
 
 
@@ -95,7 +96,7 @@ ol.format.Feature.prototype.readFeature = goog.abstractMethod;
 /**
  * Read all features from a source.
  *
- * @param {Document|Node|Object|string} source Source.
+ * @param {Document|Node|ArrayBuffer|Object|string} source Source.
  * @param {olx.format.ReadOptions=} opt_options Read options.
  * @return {Array.<ol.Feature>} Features.
  */

src/ol/format/format.js

@@ -5,6 +5,7 @@ goog.provide('ol.format.FormatType');
  * @enum {string}
  */
 ol.format.FormatType = {
+  ARRAY_BUFFER: 'arraybuffer',
   JSON: 'json',
   TEXT: 'text',
   XML: 'xml'

src/ol/format/geojsonformat.js

@@ -408,7 +408,7 @@ ol.format.GeoJSON.prototype.readFeatureFromObject = function(
     feature.setGeometryName(this.geometryName_);
   }
   feature.setGeometry(geometry);
-  if (geoJSONFeature.id) {
+  if (geoJSONFeature.id !== undefined) {
     feature.setId(geoJSONFeature.id);
   }
   if (geoJSONFeature.properties) {
@@ -530,7 +530,7 @@ ol.format.GeoJSON.prototype.writeFeatureObject = function(
     'type': 'Feature'
   };
   var id = feature.getId();
-  if (id) {
+  if (id !== undefined) {
     object['id'] = id;
   }
   var geometry = feature.getGeometry();

src/ol/format/kmlformat.js

@@ -10,7 +10,7 @@ goog.require('goog.Uri');
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.dom.NodeType');
-goog.require('goog.math');
+goog.require('goog.object');
 goog.require('ol');
 goog.require('ol.Feature');
 goog.require('ol.FeatureStyleFunction');
@@ -30,6 +30,7 @@ goog.require('ol.geom.MultiPoint');
 goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
+goog.require('ol.math');
 goog.require('ol.proj');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Icon');
@@ -97,6 +98,13 @@ ol.format.KML = function(opt_options) {
    */
   this.sharedStyles_ = {};
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.showPointNames_ = options.showPointNames !== undefined ?
+      options.showPointNames : true;
+
 };
 goog.inherits(ol.format.KML, ol.format.XMLFeature);
 
@@ -203,6 +211,14 @@ ol.format.KML.DEFAULT_IMAGE_STYLE_SRC_ =
     'https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png';
 
 
+/**
+ * @const
+ * @type {number}
+ * @private
+ */
+ol.format.KML.DEFAULT_IMAGE_SCALE_MULTIPLIER_ = 0.5;
+
+
 /**
  * @const
  * @type {ol.style.Image}
@@ -215,7 +231,7 @@ ol.format.KML.DEFAULT_IMAGE_STYLE_ = new ol.style.Icon({
   anchorYUnits: ol.format.KML.DEFAULT_IMAGE_STYLE_ANCHOR_Y_UNITS_,
   crossOrigin: 'anonymous',
   rotation: 0,
-  scale: 0.5,
+  scale: ol.format.KML.DEFAULT_IMAGE_SCALE_MULTIPLIER_,
   size: ol.format.KML.DEFAULT_IMAGE_STYLE_SIZE_,
   src: ol.format.KML.DEFAULT_IMAGE_STYLE_SRC_
 });
@@ -232,16 +248,27 @@ ol.format.KML.DEFAULT_STROKE_STYLE_ = new ol.style.Stroke({
 });
 
 
+/**
+ * @const
+ * @type {ol.style.Stroke}
+ * @private
+ */
+ol.format.KML.DEFAULT_TEXT_STROKE_STYLE_ = new ol.style.Stroke({
+  color: [51, 51, 51, 1],
+  width: 2
+});
+
+
 /**
  * @const
  * @type {ol.style.Text}
  * @private
  */
 ol.format.KML.DEFAULT_TEXT_STYLE_ = new ol.style.Text({
-  font: 'normal 16px Helvetica',
+  font: 'bold 16px Helvetica',
   fill: ol.format.KML.DEFAULT_FILL_STYLE_,
-  stroke: ol.format.KML.DEFAULT_STROKE_STYLE_,
-  scale: 1
+  stroke: ol.format.KML.DEFAULT_TEXT_STROKE_STYLE_,
+  scale: 0.8
 });
 
 
@@ -278,17 +305,67 @@ ol.format.KML.ICON_ANCHOR_UNITS_MAP_ = {
 };
 
 
+/**
+ * @param {ol.style.Style|undefined} foundStyle Style.
+ * @param {string} name Name.
+ * @return {ol.style.Style} style Style.
+ * @private
+ */
+ol.format.KML.createNameStyleFunction_ = function(foundStyle, name) {
+  /** @type {?ol.style.Text} */
+  var textStyle = null;
+  var textOffset = [0, 0];
+  var textAlign = 'start';
+  if (foundStyle.getImage()) {
+    var imageSize = foundStyle.getImage().getImageSize();
+    if (imageSize && imageSize.length == 2) {
+      // Offset the label to be centered to the right of the icon, if there is
+      // one.
+      textOffset[0] = foundStyle.getImage().getScale() * imageSize[0] / 2;
+      textOffset[1] = -foundStyle.getImage().getScale() * imageSize[1] / 2;
+      textAlign = 'left';
+    }
+  }
+  if (!goog.object.isEmpty(foundStyle.getText())) {
+    textStyle = /** @type {ol.style.Text} */
+        (goog.object.clone(foundStyle.getText()));
+    textStyle.setText(name);
+    textStyle.setTextAlign(textAlign);
+    textStyle.setOffsetX(textOffset[0]);
+    textStyle.setOffsetY(textOffset[1]);
+  } else {
+    textStyle = new ol.style.Text({
+      text: name,
+      offsetX: textOffset[0],
+      offsetY: textOffset[1],
+      textAlign: textAlign
+    });
+  }
+  var nameStyle = new ol.style.Style({
+    fill: undefined,
+    image: undefined,
+    text: textStyle,
+    stroke: undefined,
+    zIndex: undefined
+  });
+  return nameStyle;
+};
+
+
 /**
  * @param {Array.<ol.style.Style>|undefined} style Style.
  * @param {string} styleUrl Style URL.
  * @param {Array.<ol.style.Style>} defaultStyle Default style.
- * @param {Object.<string, (Array.<ol.style.Style>|string)>} sharedStyles
- * Shared styles.
+ * @param {Object.<string, (Array.<ol.style.Style>|string)>} sharedStyles Shared
+ *          styles.
+ * @param {boolean|undefined} showPointNames true to show names for point
+ *          placemarks.
  * @return {ol.FeatureStyleFunction} Feature style function.
  * @private
  */
-ol.format.KML.createFeatureStyleFunction_ = function(
-    style, styleUrl, defaultStyle, sharedStyles) {
+ol.format.KML.createFeatureStyleFunction_ = function(style, styleUrl,
+    defaultStyle, sharedStyles, showPointNames) {
+
   return (
       /**
        * @param {number} resolution Resolution.
@@ -296,11 +373,45 @@ ol.format.KML.createFeatureStyleFunction_ = function(
        * @this {ol.Feature}
        */
       function(resolution) {
+        var drawName = showPointNames;
+        /** @type {ol.style.Style|undefined} */
+        var nameStyle;
+        /** @type {string} */
+        var name = '';
+        if (drawName) {
+          if (this.getGeometry()) {
+            drawName = (this.getGeometry().getType() ===
+                        ol.geom.GeometryType.POINT);
+          }
+        }
+
+        if (drawName) {
+          name = /** @type {string} */ (this.getProperties()['name']);
+          drawName = drawName && name;
+        }
+
         if (style) {
+          if (drawName) {
+            nameStyle = ol.format.KML.createNameStyleFunction_(style[0],
+                name);
+            return [style, nameStyle];
+          }
           return style;
         }
         if (styleUrl) {
-          return ol.format.KML.findStyle_(styleUrl, defaultStyle, sharedStyles);
+          var foundStyle = ol.format.KML.findStyle_(styleUrl, defaultStyle,
+              sharedStyles);
+          if (drawName) {
+            nameStyle = ol.format.KML.createNameStyleFunction_(foundStyle[0],
+                name);
+            return foundStyle.concat(nameStyle);
+          }
+          return foundStyle;
+        }
+        if (drawName) {
+          nameStyle = ol.format.KML.createNameStyleFunction_(defaultStyle[0],
+              name);
+          return defaultStyle.concat(nameStyle);
         }
         return defaultStyle;
       });
@@ -533,7 +644,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) {
   var heading = /** @type {number} */
       (object['heading']);
   if (heading !== undefined) {
-    rotation = goog.math.toRadians(heading);
+    rotation = ol.math.toRadians(heading);
   }
 
   var scale = /** @type {number|undefined} */
@@ -551,7 +662,7 @@ ol.format.KML.IconStyleParser_ = function(node, objectStack) {
     offset: offset,
     offsetOrigin: ol.style.IconOrigin.BOTTOM_LEFT,
     rotation: rotation,
-    scale: scale,
+    scale: ol.format.KML.DEFAULT_IMAGE_SCALE_MULTIPLIER_ * scale,
     size: size,
     src: src
   });
@@ -1694,7 +1805,8 @@ ol.format.KML.prototype.readPlacemark_ = function(node, objectStack) {
     var style = object['Style'];
     var styleUrl = object['styleUrl'];
     var styleFunction = ol.format.KML.createFeatureStyleFunction_(
-        style, styleUrl, this.defaultStyle_, this.sharedStyles_);
+        style, styleUrl, this.defaultStyle_, this.sharedStyles_,
+        this.showPointNames_);
     feature.setStyle(styleFunction);
   }
   delete object['Style'];

src/ol/format/mvtformat.js

@@ -0,0 +1,259 @@
+//FIXME Implement projection handling
+
+goog.provide('ol.format.MVT');
+
+goog.require('goog.asserts');
+goog.require('ol.Feature');
+goog.require('ol.ext.pbf');
+goog.require('ol.ext.vectortile');
+goog.require('ol.format.Feature');
+goog.require('ol.format.FormatType');
+goog.require('ol.geom.Geometry');
+goog.require('ol.geom.GeometryLayout');
+goog.require('ol.geom.GeometryType');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.MultiLineString');
+goog.require('ol.geom.MultiPoint');
+goog.require('ol.geom.Point');
+goog.require('ol.geom.Polygon');
+goog.require('ol.proj');
+goog.require('ol.proj.Projection');
+goog.require('ol.proj.Units');
+goog.require('ol.render.Feature');
+
+
+
+/**
+ * @classdesc
+ * Feature format for reading data in the Mapbox MVT format.
+ *
+ * @constructor
+ * @extends {ol.format.Feature}
+ * @param {olx.format.MVTOptions=} opt_options Options.
+ * @api
+ */
+ol.format.MVT = function(opt_options) {
+
+  goog.base(this);
+
+  var options = opt_options ? opt_options : {};
+
+  /**
+   * @type {ol.proj.Projection}
+   */
+  this.defaultDataProjection = new ol.proj.Projection({
+    code: 'EPSG:3857',
+    units: ol.proj.Units.TILE_PIXELS
+  });
+
+  /**
+   * @private
+   * @type {function((ol.geom.Geometry|Object.<string, *>)=)|
+   *     function(ol.geom.GeometryType,Array.<number>,
+   *         (Array.<number>|Array.<Array.<number>>),Object.<string, *>)}
+   */
+  this.featureClass_ = options.featureClass ?
+      options.featureClass : ol.render.Feature;
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.geometryName_ = options.geometryName ?
+      options.geometryName : 'geometry';
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.layerName_ = options.layerName ? options.layerName : 'layer';
+
+  /**
+   * @private
+   * @type {Array.<string>}
+   */
+  this.layers_ = options.layers ? options.layers : null;
+
+};
+goog.inherits(ol.format.MVT, ol.format.Feature);
+
+
+/**
+ * @inheritDoc
+ */
+ol.format.MVT.prototype.getType = function() {
+  return ol.format.FormatType.ARRAY_BUFFER;
+};
+
+
+/**
+ * @private
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @param {string} layer Layer.
+ * @param {olx.format.ReadOptions=} opt_options Read options.
+ * @return {ol.Feature} Feature.
+ */
+ol.format.MVT.prototype.readFeature_ = function(
+    rawFeature, layer, opt_options) {
+  var feature = new this.featureClass_();
+  var values = rawFeature.properties;
+  values[this.layerName_] = layer;
+  var geometry = ol.format.Feature.transformWithOptions(
+      ol.format.MVT.readGeometry_(rawFeature), false,
+      this.adaptOptions(opt_options));
+  if (geometry) {
+    goog.asserts.assertInstanceof(geometry, ol.geom.Geometry);
+    values[this.geometryName_] = geometry;
+  }
+  feature.setProperties(values);
+  feature.setGeometryName(this.geometryName_);
+  return feature;
+};
+
+
+/**
+ * @private
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @param {string} layer Layer.
+ * @return {ol.render.Feature} Feature.
+ */
+ol.format.MVT.prototype.readRenderFeature_ = function(rawFeature, layer) {
+  var coords = rawFeature.loadGeometry();
+  var ends = [];
+  var flatCoordinates = [];
+  ol.format.MVT.calculateFlatCoordinates_(coords, flatCoordinates, ends);
+
+  var type = rawFeature.type;
+  /** @type {ol.geom.GeometryType} */
+  var geometryType;
+  if (type === 1) {
+    geometryType = coords.length === 1 ?
+        ol.geom.GeometryType.POINT : ol.geom.GeometryType.MULTI_POINT;
+  } else if (type === 2) {
+    if (coords.length === 1) {
+      geometryType = ol.geom.GeometryType.LINE_STRING;
+    } else {
+      geometryType = ol.geom.GeometryType.MULTI_LINE_STRING;
+    }
+  } else if (type === 3) {
+    geometryType = ol.geom.GeometryType.POLYGON;
+  }
+
+  var values = rawFeature.properties;
+  values[this.layerName_] = layer;
+
+  return new this.featureClass_(geometryType, flatCoordinates, ends, values);
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.format.MVT.prototype.readFeatures = function(source, opt_options) {
+  goog.asserts.assertInstanceof(source, ArrayBuffer);
+
+  var layers = this.layers_;
+
+  var pbf = new ol.ext.pbf(source);
+  var tile = new ol.ext.vectortile.VectorTile(pbf);
+  var features = [];
+  var featureClass = this.featureClass_;
+  var layer, feature;
+  for (var name in tile.layers) {
+    if (layers && layers.indexOf(name) == -1) {
+      continue;
+    }
+    layer = tile.layers[name];
+
+    for (var i = 0, ii = layer.length; i < ii; ++i) {
+      if (featureClass === ol.render.Feature) {
+        feature = this.readRenderFeature_(layer.feature(i), name);
+      } else {
+        feature = this.readFeature_(layer.feature(i), name, opt_options);
+      }
+      features.push(feature);
+    }
+  }
+
+  return features;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.format.MVT.prototype.readProjection = function(source) {
+  return this.defaultDataProjection;
+};
+
+
+/**
+ * Sets the layers that features will be read from.
+ * @param {Array.<string>} layers Layers.
+ * @api
+ */
+ol.format.MVT.prototype.setLayers = function(layers) {
+  this.layers_ = layers;
+};
+
+
+/**
+ * @private
+ * @param {Object} coords Raw feature coordinates.
+ * @param {Array.<number>} flatCoordinates Flat coordinates to be populated by
+ *     this function.
+ * @param {Array.<number>} ends Ends to be populated by this function.
+ */
+ol.format.MVT.calculateFlatCoordinates_ = function(
+    coords, flatCoordinates, ends) {
+  var end = 0;
+  var line, coord;
+  for (var i = 0, ii = coords.length; i < ii; ++i) {
+    line = coords[i];
+    for (var j = 0, jj = line.length; j < jj; ++j) {
+      coord = line[j];
+      // Non-tilespace coords can be calculated here when a TileGrid and
+      // TileCoord are known.
+      flatCoordinates.push(coord.x, coord.y);
+    }
+    end += 2 * j;
+    ends.push(end);
+  }
+};
+
+
+/**
+ * @private
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @return {ol.geom.Geometry} Geometry.
+ */
+ol.format.MVT.readGeometry_ = function(rawFeature) {
+  var type = rawFeature.type;
+  if (type === 0) {
+    return null;
+  }
+
+  var coords = rawFeature.loadGeometry();
+  var ends = [];
+  var flatCoordinates = [];
+  ol.format.MVT.calculateFlatCoordinates_(coords, flatCoordinates, ends);
+
+  var geom;
+  if (type === 1) {
+    geom = coords.length === 1 ?
+        new ol.geom.Point(null) : new ol.geom.MultiPoint(null);
+  } else if (type === 2) {
+    if (coords.length === 1) {
+      geom = new ol.geom.LineString(null);
+    } else {
+      geom = new ol.geom.MultiLineString(null);
+    }
+  } else if (type === 3) {
+    geom = new ol.geom.Polygon(null);
+  }
+
+  geom.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates,
+      ends);
+
+  return geom;
+};

src/ol/format/topojsonformat.js

@@ -17,7 +17,7 @@ goog.require('ol.proj');
 
 /**
  * @classdesc
- * Feature format for reading and writing data in the TopoJSON format.
+ * Feature format for reading data in the TopoJSON format.
  *
  * @constructor
  * @extends {ol.format.JSONFeature}
@@ -260,7 +260,7 @@ ol.format.TopoJSON.readFeatureFromGeometry_ = function(object, arcs,
   var feature = new ol.Feature();
   feature.setGeometry(/** @type {ol.geom.Geometry} */ (
       ol.format.Feature.transformWithOptions(geometry, false, opt_options)));
-  if (object.id) {
+  if (object.id !== undefined) {
     feature.setId(object.id);
   }
   if (object.properties) {

src/ol/format/wmtscapabilitiesformat.js

@@ -156,6 +156,18 @@ ol.format.WMTSCapabilities.readTileMatrixSetLink_ = function(node,
 };
 
 
+/**
+ * @private
+ * @param {Node} node Node.
+ * @param {Array.<*>} objectStack Object stack.
+ * @return {Object|undefined} Dimension object.
+ */
+ol.format.WMTSCapabilities.readDimensions_ = function(node, objectStack) {
+  return ol.xml.pushParseAndPop({},
+      ol.format.WMTSCapabilities.DIMENSION_PARSERS_, node, objectStack);
+};
+
+
 /**
  * @private
  * @param {Node} node Node.
@@ -303,6 +315,8 @@ ol.format.WMTSCapabilities.LAYER_PARSERS_ = ol.xml.makeStructureNS(
           ol.format.XSD.readString),
       'TileMatrixSetLink': ol.xml.makeObjectPropertyPusher(
           ol.format.WMTSCapabilities.readTileMatrixSetLink_),
+      'Dimension': ol.xml.makeObjectPropertyPusher(
+          ol.format.WMTSCapabilities.readDimensions_),
       'ResourceURL': ol.xml.makeObjectPropertyPusher(
           ol.format.WMTSCapabilities.readResourceUrl_)
     }, ol.xml.makeStructureNS(ol.format.WMTSCapabilities.OWS_NAMESPACE_URIS_, {
@@ -346,6 +360,23 @@ ol.format.WMTSCapabilities.TMS_LINKS_PARSERS_ = ol.xml.makeStructureNS(
     });
 
 
+/**
+ * @const
+ * @type {Object.<string, Object.<string, ol.xml.Parser>>}
+ * @private
+ */
+ol.format.WMTSCapabilities.DIMENSION_PARSERS_ = ol.xml.makeStructureNS(
+    ol.format.WMTSCapabilities.NAMESPACE_URIS_, {
+      'Default': ol.xml.makeObjectPropertySetter(
+          ol.format.XSD.readString),
+      'Value': ol.xml.makeObjectPropertyPusher(
+          ol.format.XSD.readString)
+    }, ol.xml.makeStructureNS(ol.format.WMTSCapabilities.OWS_NAMESPACE_URIS_, {
+      'Identifier': ol.xml.makeObjectPropertySetter(
+          ol.format.XSD.readString)
+    }));
+
+
 /**
  * @const
  * @type {Object.<string, Object.<string, ol.xml.Parser>>}

src/ol/geolocation.js

@@ -5,12 +5,12 @@ goog.provide('ol.GeolocationProperty');
 
 goog.require('goog.events');
 goog.require('goog.events.EventType');
-goog.require('goog.math');
 goog.require('ol.Coordinate');
 goog.require('ol.Object');
 goog.require('ol.geom.Geometry');
 goog.require('ol.geom.Polygon');
 goog.require('ol.has');
+goog.require('ol.math');
 goog.require('ol.proj');
 goog.require('ol.sphere.WGS84');
 
@@ -160,7 +160,7 @@ ol.Geolocation.prototype.positionChange_ = function(position) {
       coords.altitudeAccuracy === null ?
       undefined : coords.altitudeAccuracy);
   this.set(ol.GeolocationProperty.HEADING, coords.heading === null ?
-      undefined : goog.math.toRadians(coords.heading));
+      undefined : ol.math.toRadians(coords.heading));
   if (!this.position_) {
     this.position_ = [coords.longitude, coords.latitude];
   } else {

src/ol/geom/flat/geodesicflatgeom.js

@@ -1,7 +1,6 @@
 goog.provide('ol.geom.flat.geodesic');
 
 goog.require('goog.asserts');
-goog.require('goog.math');
 goog.require('goog.object');
 goog.require('ol.TransformFunction');
 goog.require('ol.math');
@@ -102,12 +101,12 @@ ol.geom.flat.geodesic.greatCircleArc = function(
 
   var geoProjection = ol.proj.get('EPSG:4326');
 
-  var cosLat1 = Math.cos(goog.math.toRadians(lat1));
-  var sinLat1 = Math.sin(goog.math.toRadians(lat1));
-  var cosLat2 = Math.cos(goog.math.toRadians(lat2));
-  var sinLat2 = Math.sin(goog.math.toRadians(lat2));
-  var cosDeltaLon = Math.cos(goog.math.toRadians(lon2 - lon1));
-  var sinDeltaLon = Math.sin(goog.math.toRadians(lon2 - lon1));
+  var cosLat1 = Math.cos(ol.math.toRadians(lat1));
+  var sinLat1 = Math.sin(ol.math.toRadians(lat1));
+  var cosLat2 = Math.cos(ol.math.toRadians(lat2));
+  var sinLat2 = Math.sin(ol.math.toRadians(lat2));
+  var cosDeltaLon = Math.cos(ol.math.toRadians(lon2 - lon1));
+  var sinDeltaLon = Math.sin(ol.math.toRadians(lon2 - lon1));
   var d = sinLat1 * sinLat2 + cosLat1 * cosLat2 * cosDeltaLon;
 
   return ol.geom.flat.geodesic.line_(
@@ -126,10 +125,10 @@ ol.geom.flat.geodesic.greatCircleArc = function(
         var x = cosLat1 * sinLat2 - sinLat1 * cosLat2 * cosDeltaLon;
         var theta = Math.atan2(y, x);
         var lat = Math.asin(sinLat1 * cosD + cosLat1 * sinD * Math.cos(theta));
-        var lon = goog.math.toRadians(lon1) +
+        var lon = ol.math.toRadians(lon1) +
             Math.atan2(Math.sin(theta) * sinD * cosLat1,
                        cosD - sinLat1 * Math.sin(lat));
-        return [goog.math.toDegrees(lon), goog.math.toDegrees(lat)];
+        return [ol.math.toDegrees(lon), ol.math.toDegrees(lat)];
       }, ol.proj.getTransform(geoProjection, projection), squaredTolerance);
 };
 

src/ol/geom/geometry.js

@@ -2,10 +2,12 @@ goog.provide('ol.geom.Geometry');
 goog.provide('ol.geom.GeometryLayout');
 goog.provide('ol.geom.GeometryType');
 
+goog.require('goog.asserts');
 goog.require('goog.functions');
 goog.require('ol.Object');
 goog.require('ol.extent');
 goog.require('ol.proj');
+goog.require('ol.proj.Units');
 
 
 /**
@@ -250,6 +252,10 @@ ol.geom.Geometry.prototype.translate = goog.abstractMethod;
  * @api stable
  */
 ol.geom.Geometry.prototype.transform = function(source, destination) {
+  goog.asserts.assert(
+      ol.proj.get(source).getUnits() !== ol.proj.Units.TILE_PIXELS &&
+      ol.proj.get(destination).getUnits() !== ol.proj.Units.TILE_PIXELS,
+      'cannot transform geometries with TILE_PIXELS units');
   this.applyTransform(ol.proj.getTransform(source, destination));
   return this;
 };

src/ol/has.js

@@ -1,7 +1,6 @@
 goog.provide('ol.has');
 
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('ol');
 goog.require('ol.dom');
 goog.require('ol.webgl');
@@ -125,7 +124,7 @@ ol.has.WEBGL;
     if ('WebGLRenderingContext' in goog.global) {
       try {
         var canvas = /** @type {HTMLCanvasElement} */
-            (goog.dom.createElement(goog.dom.TagName.CANVAS));
+            (goog.dom.createElement('CANVAS'));
         var gl = ol.webgl.getContext(canvas, {
           failIfMajorPerformanceCaveat: true
         });

src/ol/image.js

@@ -14,7 +14,7 @@ goog.require('ol.extent');
  * @constructor
  * @extends {ol.ImageBase}
  * @param {ol.Extent} extent Extent.
- * @param {number|undefined} resolution Resolution.
+ * @param {Array.<number>|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
  * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {string} src Image source URI.
@@ -114,7 +114,10 @@ ol.Image.prototype.handleImageError_ = function() {
  */
 ol.Image.prototype.handleImageLoad_ = function() {
   if (this.resolution === undefined) {
-    this.resolution = ol.extent.getHeight(this.extent) / this.image_.height;
+    this.resolution = [
+      ol.extent.getWidth(this.extent) / this.image_.width,
+      ol.extent.getHeight(this.extent) / this.image_.height
+    ];
   }
   this.state = ol.ImageState.LOADED;
   this.unlistenImage_();

src/ol/imagebase.js

@@ -24,7 +24,9 @@ ol.ImageState = {
  * @constructor
  * @extends {goog.events.EventTarget}
  * @param {ol.Extent} extent Extent.
- * @param {number|undefined} resolution Resolution.
+ * @param {Array.<number>|undefined} resolution Resolution, first value
+ *     is the resolution in the x direction, second value is the resolution
+ *     in the y direction.
  * @param {number} pixelRatio Pixel ratio.
  * @param {ol.ImageState} state State.
  * @param {Array.<ol.Attribution>} attributions Attributions.
@@ -53,7 +55,7 @@ ol.ImageBase = function(extent, resolution, pixelRatio, state, attributions) {
 
   /**
    * @protected
-   * @type {number|undefined}
+   * @type {Array.<number>|undefined}
    */
   this.resolution = resolution;
 
@@ -107,7 +109,7 @@ ol.ImageBase.prototype.getPixelRatio = function() {
 
 
 /**
- * @return {number} Resolution.
+ * @return {Array.<number>} Resolution.
  */
 ol.ImageBase.prototype.getResolution = function() {
   goog.asserts.assert(this.resolution !== undefined, 'resolution not yet set');

src/ol/imagecanvas.js

@@ -30,7 +30,8 @@ ol.ImageCanvas = function(extent, resolution, pixelRatio, attributions,
   var state = opt_loader !== undefined ?
       ol.ImageState.IDLE : ol.ImageState.LOADED;
 
-  goog.base(this, extent, resolution, pixelRatio, state, attributions);
+  goog.base(this, extent, [resolution, resolution], pixelRatio, state,
+      attributions);
 
   /**
    * @private

src/ol/interaction/dragboxinteraction.js

@@ -93,17 +93,11 @@ ol.interaction.DragBox = function(opt_options) {
 
   var options = opt_options ? opt_options : {};
 
-  /**
-   * @private
-   * @type {ol.style.Style}
-   */
-  var style = options.style ? options.style : null;
-
   /**
    * @type {ol.render.Box}
    * @private
    */
-  this.box_ = new ol.render.Box(style);
+  this.box_ = new ol.render.Box(options.className || 'ol-dragbox');
 
   /**
    * @type {ol.Pixel}

src/ol/interaction/dragzoominteraction.js

@@ -6,8 +6,6 @@ goog.require('ol.easing');
 goog.require('ol.events.condition');
 goog.require('ol.extent');
 goog.require('ol.interaction.DragBox');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
 
 
 
@@ -17,6 +15,9 @@ goog.require('ol.style.Style');
  * normally combined with an {@link ol.events.condition} that limits
  * it to when a key, shift by default, is held down.
  *
+ * To change the style of the box, use CSS and the `.ol-dragzoom` selector, or
+ * your custom one configured with `className`.
+ *
  * @constructor
  * @extends {ol.interaction.DragBox}
  * @param {olx.interaction.DragZoomOptions=} opt_options Options.
@@ -32,22 +33,11 @@ ol.interaction.DragZoom = function(opt_options) {
    * @private
    * @type {number}
    */
-  this.duration_ = options.duration ? options.duration : 200;
-
-  /**
-   * @private
-   * @type {ol.style.Style}
-   */
-  var style = options.style ?
-      options.style : new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: [0, 0, 255, 1]
-        })
-      });
+  this.duration_ = options.duration !== undefined ? options.duration : 200;
 
   goog.base(this, {
     condition: condition,
-    style: style
+    className: options.className || 'ol-dragzoom'
   });
 
 };

src/ol/interaction/interactiondefaults.js

@@ -103,7 +103,9 @@ ol.interaction.defaults = function(opt_options) {
   var shiftDragZoom = options.shiftDragZoom !== undefined ?
       options.shiftDragZoom : true;
   if (shiftDragZoom) {
-    interactions.push(new ol.interaction.DragZoom());
+    interactions.push(new ol.interaction.DragZoom({
+      duration: options.zoomDuration
+    }));
   }
 
   return interactions;

src/ol/interaction/keyboardzoominteraction.js

@@ -50,7 +50,7 @@ ol.interaction.KeyboardZoom = function(opt_options) {
    * @private
    * @type {number}
    */
-  this.duration_ = options.duration ? options.duration : 100;
+  this.duration_ = options.duration !== undefined ? options.duration : 100;
 
 };
 goog.inherits(ol.interaction.KeyboardZoom, ol.interaction.Interaction);

src/ol/interaction/selectinteraction.js

@@ -33,9 +33,11 @@ ol.interaction.SelectEventType = {
 
 
 /**
- * A function that takes an {@link ol.Feature} and an {@link ol.layer.Layer}
- * and returns `true` if the feature may be selected or `false` otherwise.
- * @typedef {function(ol.Feature, ol.layer.Layer): boolean}
+ * A function that takes an {@link ol.Feature} or {@link ol.render.Feature} and
+ * an {@link ol.layer.Layer} and returns `true` if the feature may be selected
+ * or `false` otherwise.
+ * @typedef {function((ol.Feature|ol.render.Feature), ol.layer.Layer):
+ *     boolean}
  * @api
  */
 ol.interaction.SelectFilterFunction;
@@ -210,7 +212,7 @@ goog.inherits(ol.interaction.Select, ol.interaction.Interaction);
 
 
 /**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
  * @param {ol.layer.Layer} layer Layer.
  * @private
  */
@@ -234,7 +236,7 @@ ol.interaction.Select.prototype.getFeatures = function() {
 /**
  * Returns the associated {@link ol.layer.Vector vectorlayer} of
  * the (last) selected feature.
- * @param {ol.Feature} feature Feature
+ * @param {ol.Feature|ol.render.Feature} feature Feature
  * @return {ol.layer.Vector} Layer.
  * @api
  */
@@ -273,7 +275,7 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
     // the pixel.
     map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
         /**
-         * @param {ol.Feature} feature Feature.
+         * @param {ol.Feature|ol.render.Feature} feature Feature.
          * @param {ol.layer.Layer} layer Layer.
          */
         function(feature, layer) {
@@ -308,7 +310,7 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
     // Modify the currently selected feature(s).
     map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
         /**
-         * @param {ol.Feature} feature Feature.
+         * @param {ol.Feature|ol.render.Feature} feature Feature.
          * @param {ol.layer.Layer} layer Layer.
          */
         function(feature, layer) {
@@ -412,7 +414,7 @@ ol.interaction.Select.prototype.removeFeature_ = function(evt) {
 
 
 /**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
  * @private
  */
 ol.interaction.Select.prototype.removeFeatureLayerAssociation_ =

src/ol/interaction/translateinteraction.js

@@ -1,9 +1,72 @@
 goog.provide('ol.interaction.Translate');
+goog.provide('ol.interaction.TranslateEvent');
 
+goog.require('goog.events');
+goog.require('goog.events.Event');
 goog.require('ol.array');
 goog.require('ol.interaction.Pointer');
 
 
+/**
+ * @enum {string}
+ */
+ol.interaction.TranslateEventType = {
+  /**
+   * Triggered upon feature translation start.
+   * @event ol.interaction.TranslateEvent#translatestart
+   * @api
+   */
+  TRANSLATESTART: 'translatestart',
+  /**
+   * Triggered upon feature translation.
+   * @event ol.interaction.TranslateEvent#translating
+   * @api
+   */
+  TRANSLATING: 'translating',
+  /**
+   * Triggered upon feature translation end.
+   * @event ol.interaction.TranslateEvent#translateend
+   * @api
+   */
+  TRANSLATEEND: 'translateend'
+};
+
+
+
+/**
+ * @classdesc
+ * Events emitted by {@link ol.interaction.Translate} instances are instances of
+ * this type.
+ *
+ * @constructor
+ * @extends {goog.events.Event}
+ * @implements {oli.interaction.TranslateEvent}
+ * @param {ol.interaction.TranslateEventType} type Type.
+ * @param {ol.Collection.<ol.Feature>} features The features translated.
+ * @param {ol.Coordinate} coordinate The event coordinate.
+ */
+ol.interaction.TranslateEvent = function(type, features, coordinate) {
+
+  goog.base(this, type);
+
+  /**
+   * The features being translated.
+   * @type {ol.Collection.<ol.Feature>}
+   * @api
+   */
+  this.features = features;
+
+  /**
+   * The coordinate of the drag event.
+   * @const
+   * @type {ol.Coordinate}
+   * @api
+   */
+  this.coordinate = coordinate;
+};
+goog.inherits(ol.interaction.TranslateEvent, goog.events.Event);
+
+
 
 /**
  * @classdesc
@@ -11,6 +74,7 @@ goog.require('ol.interaction.Pointer');
  *
  * @constructor
  * @extends {ol.interaction.Pointer}
+ * @fires ol.interaction.TranslateEvent
  * @param {olx.interaction.TranslateOptions} options Options.
  * @api
  */
@@ -64,6 +128,10 @@ ol.interaction.Translate.handleDownEvent_ = function(event) {
   if (!this.lastCoordinate_ && this.lastFeature_) {
     this.lastCoordinate_ = event.coordinate;
     ol.interaction.Translate.handleMoveEvent_.call(this, event);
+    this.dispatchEvent(
+        new ol.interaction.TranslateEvent(
+            ol.interaction.TranslateEventType.TRANSLATESTART, this.features_,
+            event.coordinate));
     return true;
   }
   return false;
@@ -80,6 +148,10 @@ ol.interaction.Translate.handleUpEvent_ = function(event) {
   if (this.lastCoordinate_) {
     this.lastCoordinate_ = null;
     ol.interaction.Translate.handleMoveEvent_.call(this, event);
+    this.dispatchEvent(
+        new ol.interaction.TranslateEvent(
+            ol.interaction.TranslateEventType.TRANSLATEEND, this.features_,
+            event.coordinate));
     return true;
   }
   return false;
@@ -110,6 +182,10 @@ ol.interaction.Translate.handleDragEvent_ = function(event) {
     }
 
     this.lastCoordinate_ = newCoordinate;
+    this.dispatchEvent(
+        new ol.interaction.TranslateEvent(
+            ol.interaction.TranslateEventType.TRANSLATING, this.features_,
+            newCoordinate));
   }
 };
 

src/ol/layer/vectortilelayer.js

@@ -0,0 +1,99 @@
+goog.provide('ol.layer.VectorTile');
+
+goog.require('goog.object');
+goog.require('ol.layer.Vector');
+
+
+/**
+ * @enum {string}
+ */
+ol.layer.VectorTileProperty = {
+  PRELOAD: 'preload',
+  USE_INTERIM_TILES_ON_ERROR: 'useInterimTilesOnError'
+};
+
+
+
+/**
+ * @classdesc
+ * Layer for vector tile data that is rendered client-side.
+ * Note that any property set in the options is set as a {@link ol.Object}
+ * property on the layer object; for example, setting `title: 'My Title'` in the
+ * options means that `title` is observable, and has get/set accessors.
+ *
+ * @constructor
+ * @extends {ol.layer.Vector}
+ * @param {olx.layer.VectorTileOptions=} opt_options Options.
+ * @api
+ */
+ol.layer.VectorTile = function(opt_options) {
+  var options = opt_options ? opt_options : {};
+
+  var baseOptions = goog.object.clone(options);
+
+  delete baseOptions.preload;
+  delete baseOptions.useInterimTilesOnError;
+  goog.base(this,  /** @type {olx.layer.VectorOptions} */ (baseOptions));
+
+  this.setPreload(options.preload ? options.preload : 0);
+  this.setUseInterimTilesOnError(options.useInterimTilesOnError ?
+      options.useInterimTilesOnError : true);
+
+};
+goog.inherits(ol.layer.VectorTile, ol.layer.Vector);
+
+
+/**
+ * Return the level as number to which we will preload tiles up to.
+ * @return {number} The level to preload tiles up to.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.getPreload = function() {
+  return /** @type {number} */ (this.get(ol.layer.VectorTileProperty.PRELOAD));
+};
+
+
+/**
+ * Return the associated {@link ol.source.VectorTile source} of the layer.
+ * @function
+ * @return {ol.source.VectorTile} Source.
+ * @api
+ */
+ol.layer.VectorTile.prototype.getSource;
+
+
+/**
+ * Whether we use interim tiles on error.
+ * @return {boolean} Use interim tiles on error.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.getUseInterimTilesOnError = function() {
+  return /** @type {boolean} */ (
+      this.get(ol.layer.VectorTileProperty.USE_INTERIM_TILES_ON_ERROR));
+};
+
+
+/**
+ * Set the level as number to which we will preload tiles up to.
+ * @param {number} preload The level to preload tiles up to.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.setPreload = function(preload) {
+  this.set(ol.layer.TileProperty.PRELOAD, preload);
+};
+
+
+/**
+ * Set whether we use interim tiles on error.
+ * @param {boolean} useInterimTilesOnError Use interim tiles on error.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.setUseInterimTilesOnError =
+    function(useInterimTilesOnError) {
+  this.set(
+      ol.layer.TileProperty.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
+};

src/ol/map.js

@@ -11,7 +11,6 @@ goog.require('goog.async.AnimationDelay');
 goog.require('goog.async.nextTick');
 goog.require('goog.debug.Console');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.dom.ViewportSizeMonitor');
 goog.require('goog.dom.classlist');
 goog.require('goog.events');
@@ -261,7 +260,7 @@ ol.Map = function(options) {
    * @private
    * @type {Element}
    */
-  this.viewport_ = goog.dom.createDom(goog.dom.TagName.DIV, 'ol-viewport');
+  this.viewport_ = goog.dom.createDom('DIV', 'ol-viewport');
   this.viewport_.style.position = 'relative';
   this.viewport_.style.overflow = 'hidden';
   this.viewport_.style.width = '100%';
@@ -277,7 +276,7 @@ ol.Map = function(options) {
    * @private
    * @type {Element}
    */
-  this.overlayContainer_ = goog.dom.createDom(goog.dom.TagName.DIV,
+  this.overlayContainer_ = goog.dom.createDom('DIV',
       'ol-overlaycontainer');
   this.viewport_.appendChild(this.overlayContainer_);
 
@@ -285,7 +284,7 @@ ol.Map = function(options) {
    * @private
    * @type {Element}
    */
-  this.overlayContainerStopEvent_ = goog.dom.createDom(goog.dom.TagName.DIV,
+  this.overlayContainerStopEvent_ = goog.dom.createDom('DIV',
       'ol-overlaycontainer-stopevent');
   goog.events.listen(this.overlayContainerStopEvent_, [
     goog.events.EventType.CLICK,
@@ -343,6 +342,13 @@ ol.Map = function(options) {
    */
   this.overlays_ = optionsInternal.overlays;
 
+  /**
+   * A lookup of overlays by id.
+   * @private
+   * @type {Object.<string, ol.Overlay>}
+   */
+  this.overlayIdIndex_ = {};
+
   /**
    * @type {ol.renderer.Map}
    * @private
@@ -461,21 +467,14 @@ ol.Map = function(options) {
         event.element.setMap(null);
       }, false, this);
 
-  this.overlays_.forEach(
-      /**
-       * @param {ol.Overlay} overlay Overlay.
-       * @this {ol.Map}
-       */
-      function(overlay) {
-        overlay.setMap(this);
-      }, this);
+  this.overlays_.forEach(this.addOverlayInternal_, this);
 
   goog.events.listen(this.overlays_, ol.CollectionEventType.ADD,
       /**
        * @param {ol.CollectionEvent} event Collection event.
        */
       function(event) {
-        event.element.setMap(this);
+        this.addOverlayInternal_(/** @type {ol.Overlay} */ (event.element));
       }, false, this);
 
   goog.events.listen(this.overlays_, ol.CollectionEventType.REMOVE,
@@ -483,6 +482,10 @@ ol.Map = function(options) {
        * @param {ol.CollectionEvent} event Collection event.
        */
       function(event) {
+        var id = event.element.getId();
+        if (id !== undefined) {
+          delete this.overlayIdIndex_[id.toString()];
+        }
         event.element.setMap(null);
       }, false, this);
 
@@ -540,6 +543,20 @@ ol.Map.prototype.addOverlay = function(overlay) {
 };
 
 
+/**
+ * This deals with map's overlay collection changes.
+ * @param {ol.Overlay} overlay Overlay.
+ * @private
+ */
+ol.Map.prototype.addOverlayInternal_ = function(overlay) {
+  var id = overlay.getId();
+  if (id !== undefined) {
+    this.overlayIdIndex_[id.toString()] = overlay;
+  }
+  overlay.setMap(this);
+};
+
+
 /**
  * Add functions to be called before rendering. This can be used for attaching
  * animations before updating the map's view.  The {@link ol.animation}
@@ -577,9 +594,11 @@ ol.Map.prototype.disposeInternal = function() {
  * callback with each intersecting feature. Layers included in the detection can
  * be configured through `opt_layerFilter`.
  * @param {ol.Pixel} pixel Pixel.
- * @param {function(this: S, ol.Feature, ol.layer.Layer): T} callback Feature
- *     callback. The callback will be called with two arguments. The first
- *     argument is one {@link ol.Feature feature} at the pixel, the second is
+ * @param {function(this: S, (ol.Feature|ol.render.Feature),
+ *     ol.layer.Layer): T} callback Feature callback. The callback will be
+ *     called with two arguments. The first argument is one
+ *     {@link ol.Feature feature} or
+ *     {@link ol.render.Feature render feature} at the pixel, the second is
  *     the {@link ol.layer.Layer layer} of the feature. To stop detection,
  *     callback functions can return a truthy value.
  * @param {S=} opt_this Value to use as `this` when executing `callback`.
@@ -768,6 +787,20 @@ ol.Map.prototype.getOverlays = function() {
 };
 
 
+/**
+ * Get an overlay by its identifier (the value returned by overlay.getId()).
+ * Note that the index treats string and numeric identifiers as the same. So
+ * `map.getOverlayById(2)` will return an overlay with id `'2'` or `2`.
+ * @param {string|number} id Overlay identifier.
+ * @return {ol.Overlay} Overlay.
+ * @api
+ */
+ol.Map.prototype.getOverlayById = function(id) {
+  var overlay = this.overlayIdIndex_[id.toString()];
+  return overlay !== undefined ? overlay : null;
+};
+
+
 /**
  * Get the map interactions. Modifying this collection changes the interactions
  * associated with the map.

src/ol/math.js

@@ -17,31 +17,30 @@ ol.math.clamp = function(value, min, max) {
 
 
 /**
+ * Return the hyperbolic cosine of a given number. The method will use the
+ * native `Math.cosh` function if it is available, otherwise the hyperbolic
+ * cosine will be calculated via the reference implementation of the Mozilla
+ * developer network.
+ *
  * @param {number} x X.
  * @return {number} Hyperbolic cosine of x.
  */
-ol.math.cosh = function(x) {
-  return (Math.exp(x) + Math.exp(-x)) / 2;
-};
-
-
-/**
- * @param {number} x X.
- * @return {number} Hyperbolic cotangent of x.
- */
-ol.math.coth = function(x) {
-  var expMinusTwoX = Math.exp(-2 * x);
-  return (1 + expMinusTwoX) / (1 - expMinusTwoX);
-};
-
-
-/**
- * @param {number} x X.
- * @return {number} Hyperbolic cosecant of x.
- */
-ol.math.csch = function(x) {
-  return 2 / (Math.exp(x) - Math.exp(-x));
-};
+ol.math.cosh = (function() {
+  // Wrapped in a iife, to save the overhead of checking for the native
+  // implementation on every invocation.
+  var cosh;
+  if ('cosh' in Math) {
+    // The environment supports the native Math.cosh function, use it…
+    cosh = Math.cosh;
+  } else {
+    // … else, use the reference implementation of MDN:
+    cosh = function(x) {
+      var y = Math.exp(x);
+      return (y + 1 / y) / 2;
+    };
+  }
+  return cosh;
+}());
 
 
 /**
@@ -54,24 +53,6 @@ ol.math.roundUpToPowerOfTwo = function(x) {
 };
 
 
-/**
- * @param {number} x X.
- * @return {number} Hyperbolic secant of x.
- */
-ol.math.sech = function(x) {
-  return 2 / (Math.exp(x) + Math.exp(-x));
-};
-
-
-/**
- * @param {number} x X.
- * @return {number} Hyperbolic sine of x.
- */
-ol.math.sinh = function(x) {
-  return (Math.exp(x) - Math.exp(-x)) / 2;
-};
-
-
 /**
  * Returns the square of the closest distance between the point (x, y) and the
  * line segment (x1, y1) to (x2, y2).
@@ -116,10 +97,85 @@ ol.math.squaredDistance = function(x1, y1, x2, y2) {
 
 
 /**
- * @param {number} x X.
- * @return {number} Hyperbolic tangent of x.
+ * Solves system of linear equations using Gaussian elimination method.
+ *
+ * @param {Array.<Array.<number>>} mat Augmented matrix (n x n + 1 column)
+ *                                     in row-major order.
+ * @return {Array.<number>} The resulting vector.
  */
-ol.math.tanh = function(x) {
-  var expMinusTwoX = Math.exp(-2 * x);
-  return (1 - expMinusTwoX) / (1 + expMinusTwoX);
+ol.math.solveLinearSystem = function(mat) {
+  var n = mat.length;
+
+  if (goog.asserts.ENABLE_ASSERTS) {
+    for (var row = 0; row < n; row++) {
+      goog.asserts.assert(mat[row].length == n + 1,
+                          'every row should have correct number of columns');
+    }
+  }
+
+  for (var i = 0; i < n; i++) {
+    // Find max in the i-th column (ignoring i - 1 first rows)
+    var maxRow = i;
+    var maxEl = Math.abs(mat[i][i]);
+    for (var r = i + 1; r < n; r++) {
+      var absValue = Math.abs(mat[r][i]);
+      if (absValue > maxEl) {
+        maxEl = absValue;
+        maxRow = r;
+      }
+    }
+
+    if (maxEl === 0) {
+      return null; // matrix is singular
+    }
+
+    // Swap max row with i-th (current) row
+    var tmp = mat[maxRow];
+    mat[maxRow] = mat[i];
+    mat[i] = tmp;
+
+    // Subtract the i-th row to make all the remaining rows 0 in the i-th column
+    for (var j = i + 1; j < n; j++) {
+      var coef = -mat[j][i] / mat[i][i];
+      for (var k = i; k < n + 1; k++) {
+        if (i == k) {
+          mat[j][k] = 0;
+        } else {
+          mat[j][k] += coef * mat[i][k];
+        }
+      }
+    }
+  }
+
+  // Solve Ax=b for upper triangular matrix A (mat)
+  var x = new Array(n);
+  for (var l = n - 1; l >= 0; l--) {
+    x[l] = mat[l][n] / mat[l][l];
+    for (var m = l - 1; m >= 0; m--) {
+      mat[m][n] -= mat[m][l] * x[l];
+    }
+  }
+  return x;
+};
+
+
+/**
+ * Converts radians to to degrees.
+ *
+ * @param {number} angleInRadians Angle in radians.
+ * @return {number} Angle in degrees.
+ */
+ol.math.toDegrees = function(angleInRadians) {
+  return angleInRadians * 180 / Math.PI;
+};
+
+
+/**
+ * Converts degrees to radians.
+ *
+ * @param {number} angleInDegrees Angle in degrees.
+ * @return {number} Angle in radians.
+ */
+ol.math.toRadians = function(angleInDegrees) {
+  return angleInDegrees * Math.PI / 180;
 };

src/ol/observable.js

@@ -61,6 +61,18 @@ ol.Observable.prototype.changed = function() {
  */
 
 
+/**
+ * Dispatches an event and calls all listeners listening for events
+ * of this type. The event parameter can either be a string or an
+ * Object with a `type` property.
+ *
+ * @param {goog.events.EventLike} event Event object.
+ * @function
+ * @api
+ */
+ol.Observable.prototype.dispatchEvent;
+
+
 /**
  * Get the version number for this object.  Each time the object is modified,
  * its version number will be incremented.

src/ol/ol.js

@@ -28,6 +28,13 @@ ol.DEFAULT_MAX_ZOOM = 42;
 ol.DEFAULT_MIN_ZOOM = 0;
 
 
+/**
+ * @define {number} Default maximum allowed threshold  (in pixels) for
+ *     reprojection triangulation. Default is `0.5`.
+ */
+ol.DEFAULT_RASTER_REPROJECTION_ERROR_THRESHOLD = 0.5;
+
+
 /**
  * @define {number} Default high water mark.
  */
@@ -94,6 +101,13 @@ ol.ENABLE_NAMED_COLORS = false;
 ol.ENABLE_PROJ4JS = true;
 
 
+/**
+ * @define {boolean} Enable automatic reprojection of raster sources. Default is
+ *     `true`.
+ */
+ol.ENABLE_RASTER_REPROJECTION = true;
+
+
 /**
  * @define {boolean} Enable rendering of ol.layer.Tile based layers.  Default is
  *     `true`. Setting this to false at compile time in advanced mode removes
@@ -110,6 +124,14 @@ ol.ENABLE_TILE = true;
 ol.ENABLE_VECTOR = true;
 
 
+/**
+ * @define {boolean} Enable rendering of ol.layer.VectorTile based layers.
+ *     Default is `true`. Setting this to false at compile time in advanced mode
+ *     removes all code supporting VectorTile layers from the build.
+ */
+ol.ENABLE_VECTOR_TILE = true;
+
+
 /**
  * @define {boolean} Enable the WebGL renderer.  Default is `true`. Setting
  *     this to false at compile time in advanced mode removes all code
@@ -159,6 +181,41 @@ ol.OVERVIEWMAP_MAX_RATIO = 0.75;
 ol.OVERVIEWMAP_MIN_RATIO = 0.1;
 
 
+/**
+ * @define {number} Maximum number of source tiles for raster reprojection of
+ *     a single tile.
+ *     If too many source tiles are determined to be loaded to create a single
+ *     reprojected tile the browser can become unresponsive or even crash.
+ *     This can happen if the developer defines projections improperly and/or
+ *     with unlimited extents.
+ *     If too many tiles are required, no tiles are loaded and
+ *     `ol.TileState.ERROR` state is set. Default is `100`.
+ */
+ol.RASTER_REPROJECTION_MAX_SOURCE_TILES = 100;
+
+
+/**
+ * @define {number} Maximum number of subdivision steps during raster
+ *     reprojection triangulation. Prevents high memory usage and large
+ *     number of proj4 calls (for certain transformations and areas).
+ *     At most `2*(2^this)` triangles are created for each triangulated
+ *     extent (tile/image). Default is `10`.
+ */
+ol.RASTER_REPROJECTION_MAX_SUBDIVISION = 10;
+
+
+/**
+ * @define {number} Maximum allowed size of triangle relative to world width.
+ *     When transforming corners of world extent between certain projections,
+ *     the resulting triangulation seems to have zero error and no subdivision
+ *     is performed.
+ *     If the triangle width is more than this (relative to world width; 0-1),
+ *     subdivison is forced (up to `ol.RASTER_REPROJECTION_MAX_SUBDIVISION`).
+ *     Default is `0.25`.
+ */
+ol.RASTER_REPROJECTION_MAX_TRIANGLE_WIDTH = 0.25;
+
+
 /**
  * @define {number} Tolerance for geometry simplification in device pixels.
  */