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

@@ -1,7 +1,57 @@
 ## Upgrade notes
 
+### 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
+
+The experimental `setHue`, `setContrast`, `setBrightness`, `setSaturation`, and the corresponding getter methods have been removed.  These properties only worked with the WebGL renderer.  If are interested in applying color transforms, look for the `postcompose` event in the API docs.  In addition, the `ol.source.Raster` source provides a way to create new raster data based on arbitrary transforms run on any number of input sources.
+
 ### v3.9.0
 
 #### `ol.style.Circle` changes

changelog/v3.10.0.md

@@ -0,0 +1,93 @@
+# v3.10.0
+
+
+## Summary
+
+The v3.10.0 release includes features and fixes from 66 pull requests since the v3.9.0 release. New features and improvements include:
+
+* Full touch gesture support for the Microsoft Edge browser.
+* Improved API docs - required constructor options are now marked as such.
+* Text styles (vector labels) now work with defaults instead of failing when only a label text is set.
+* Write support for GML3 features with multiple geometries
+
+See the complete list below for details. And see the following notes to know how to upgrade from v3.9.0 to v3.10.0.
+
+
+## Upgrade notes
+
+#### `ol.layer.Layer` changes
+
+The experimental `setHue`, `setContrast`, `setBrightness`, `setSaturation`, and the corresponding getter methods have been removed.  These properties only worked with the WebGL renderer.  If you are interested in applying color transforms, look for the `postcompose` event in the API docs.  In addition, the `ol.source.Raster` source provides a way to create new raster data based on arbitrary transforms run on any number of input sources.
+
+#### Removal of legacy Internet Explorer support
+
+If you are building an appliction that supports Internet Explorer 8 or older, you'll need to use ES5 shims to make OpenLayers work. As before, support for such old browsers is very basic, and we recommend to not support them.
+
+
+## New features and fixes
+
+ * [#4237](https://github.com/openlayers/ol3/pull/4237) - #3328: GML3 - Writing features with multiple geometries ([@awaterme](https://github.com/awaterme))
+ * [#4218](https://github.com/openlayers/ol3/pull/4218) - Add 'getLayer()' method to 'ol.interaction.Select' ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4036](https://github.com/openlayers/ol3/pull/4036) - Fix modify interaction event order ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#4036](https://github.com/openlayers/ol3/pull/4036) - Fix modify interaction event order ([@alvinlindstam](https://github.com/alvinlindstam))
+ * [#4116](https://github.com/openlayers/ol3/pull/4116) - Make ol.control.OverviewMap's view configurable ([@ahocevar](https://github.com/ahocevar))
+ * [#4234](https://github.com/openlayers/ol3/pull/4234) - Support OGC WKT proj4 def.units and def.to_meter ([@tbarsballe](https://github.com/tbarsballe))
+ * [#4224](https://github.com/openlayers/ol3/pull/4224) - Don't transform the angle into degrees to rotate the element ([@fredj](https://github.com/fredj))
+ * [#4231](https://github.com/openlayers/ol3/pull/4231) - Revert "Merge pull request #4217 from ThomasG77/clipboardjs-replacement" ([@ahocevar](https://github.com/ahocevar))
+ * [#4217](https://github.com/openlayers/ol3/pull/4217) - Replace ZeroClipboard with Clipboard.js to remove flash dependency ([@ThomasG77](https://github.com/ThomasG77))
+ * [#4223](https://github.com/openlayers/ol3/pull/4223) - Remove goog.fx.easing ([@fredj](https://github.com/fredj))
+ * [#4222](https://github.com/openlayers/ol3/pull/4222) - Remove unnecessary cast ([@fredj](https://github.com/fredj))
+ * [#4209](https://github.com/openlayers/ol3/pull/4209) - Remove goog.string.remove ([@gberaudo](https://github.com/gberaudo))
+ * [#4207](https://github.com/openlayers/ol3/pull/4207) - Remove goog.string.startsWith ([@gberaudo](https://github.com/gberaudo))
+ * [#4208](https://github.com/openlayers/ol3/pull/4208) - Remove goog.string.trim() ([@gberaudo](https://github.com/gberaudo))
+ * [#4216](https://github.com/openlayers/ol3/pull/4216) - Fix canvas replay which broke with 31a68e2 ([@ahocevar](https://github.com/ahocevar))
+ * [#4202](https://github.com/openlayers/ol3/pull/4202) - Remove use of goog.dom.appendChild ([@fredj](https://github.com/fredj))
+ * [#4205](https://github.com/openlayers/ol3/pull/4205) - Minor cleanup ([@fredj](https://github.com/fredj))
+ * [#4203](https://github.com/openlayers/ol3/pull/4203) - Cosmetic changes to example html / css ([@marcjansen](https://github.com/marcjansen))
+ * [#4184](https://github.com/openlayers/ol3/pull/4184) - Adjust iframe's position of GetFeatureInfo examples ([@jonataswalker](https://github.com/jonataswalker))
+ * [#4192](https://github.com/openlayers/ol3/pull/4192) - Remove use of goog.isNull in favor of simple truthy checks ([@marcjansen](https://github.com/marcjansen))
+ * [#4187](https://github.com/openlayers/ol3/pull/4187) - Fix {-y} template calculation for custom (TMS) tile grids ([@ahocevar](https://github.com/ahocevar))
+ * [#4176](https://github.com/openlayers/ol3/pull/4176) - Remove use of goog.isDefAndNotNull().
+ ([@tschaub](https://github.com/tschaub))
+ * [#4200](https://github.com/openlayers/ol3/pull/4200) - Do not use goog.object.get ([@marcjansen](https://github.com/marcjansen))
+ * [#4198](https://github.com/openlayers/ol3/pull/4198) - Improve 

ol.control.Rotate.prototype.resetNorth_ performance ([@denilsonsa](https://github.com/denilsonsa))
+ * [#4197](https://github.com/openlayers/ol3/pull/4197) - Remove blur action on MOUSEOUT on Zoom Out button ([@denilsonsa](https://github.com/denilsonsa))
+ * [#4195](https://github.com/openlayers/ol3/pull/4195) - #4171: Prefer current layout as default on MultiLineString.setLineStrings() ([@awaterme](https://github.com/awaterme))
+ * [#4172](https://github.com/openlayers/ol3/pull/4172) - #4171: Prefer current layout as default on Multipolygon.setPolygons() ([@awaterme](https://github.com/awaterme))
+ * [#4190](https://github.com/openlayers/ol3/pull/4190) - Remove use of goog.functions.constant ([@marcjansen](https://github.com/marcjansen))
+ * [#4188](https://github.com/openlayers/ol3/pull/4188) - Remove use of goog.object.getKeys ([@fredj](https://github.com/fredj))
+ * [#4189](https://github.com/openlayers/ol3/pull/4189) - Replace goog.nullFunction with ol.nullFunction ([@marcjansen](https://github.com/marcjansen))
+ * [#4165](https://github.com/openlayers/ol3/pull/4165) - Use ECMAScript 5.1 Array functions instead of goog.array ([@fredj](https://github.com/fredj))
+ * [#4181](https://github.com/openlayers/ol3/pull/4181) - Remove use of goog.array.contains ([@fredj](https://github.com/fredj))
+ * [#4162](https://github.com/openlayers/ol3/pull/4162) - Remove ol.LEGACY_IE_SUPPORT ([@fredj](https://github.com/fredj))
+ * [#4174](https://github.com/openlayers/ol3/pull/4174) - Remove hue, saturation, contrast, and brightness as layer properties. ([@tschaub](https://github.com/tschaub))
+ * [#4183](https://github.com/openlayers/ol3/pull/4183) - Remove @api on getHitDetectionFramebuffer ([@elemoine](https://github.com/elemoine))
+ * [#4179](https://github.com/openlayers/ol3/pull/4179) - Use Date.now() instead of goog.now() ([@marcjansen](https://github.com/marcjansen))
+ * [#4175](https://github.com/openlayers/ol3/pull/4175) - Remove use of goog.math.clamp(). ([@tschaub](https://github.com/tschaub))
+ * [#4173](https://github.com/openlayers/ol3/pull/4173) - Only animate when resolution is about to be changed ([@ahocevar](https://github.com/ahocevar))
+ * [#4129](https://github.com/openlayers/ol3/pull/4129) - Remove use of goog.isDef. ([@openlayers](https://github.com/openlayers))
+ * [#4168](https://github.com/openlayers/ol3/pull/4168) - Tile preload example wording (fixes #4147) ([@wlerner](https://github.com/wlerner))
+ * [#4167](https://github.com/openlayers/ol3/pull/4167) - Remove externs in externs/closure-compiler.js ([@fredj](https://github.com/fredj))
+ * [#4166](https://github.com/openlayers/ol3/pull/4166) - Use version 20150920 of Closure Compiler ([@elemoine](https://github.com/elemoine))
+ * [#4159](https://github.com/openlayers/ol3/pull/4159) - Remove use of goog.object.containsKey ([@fredj](https://github.com/fredj))
+ * [#4157](https://github.com/openlayers/ol3/pull/4157) - Fix typo in doc ([@elemoine](https://github.com/elemoine))
+ * [#4138](https://github.com/openlayers/ol3/pull/4138) - Enhanced documentation for ol.style.Text ([@ekargee](https://github.com/ekargee))
+ * [#4151](https://github.com/openlayers/ol3/pull/4151) - Remove bogus assertion ([@elemoine](https://github.com/elemoine))
+ * [#4110](https://github.com/openlayers/ol3/pull/4110) - Minor cleanups ([@fredj](https://github.com/fredj))
+ * [#4156](https://github.com/openlayers/ol3/pull/4156) - Rename drag-features example to custom-interactions ([@elemoine](https://github.com/elemoine))
+ * [#4150](https://github.com/openlayers/ol3/pull/4150) - Remove use of goog.object.remove ([@fredj](https://github.com/fredj))
+ * [#4145](https://github.com/openlayers/ol3/pull/4145) - API method for simplifying geometries. ([@tschaub](https://github.com/tschaub))
+ * [#4153](https://github.com/openlayers/ol3/pull/4153) - Add a "features" option to ol.interaction.Select ([@elemoine](https://github.com/elemoine))
+ * [#4144](https://github.com/openlayers/ol3/pull/4144) - Set context.fillStyle to a string ([@elemoine](https://github.com/elemoine))
+ * [#4149](https://github.com/openlayers/ol3/pull/4149) - Remove use of goog.array.isEmpty ([@fredj](https://github.com/fredj))
+ * [#4139](https://github.com/openlayers/ol3/pull/4139) - Add turf.js and JSTS example ([@tsauerwein](https://github.com/tsauerwein))
+ * [#4136](https://github.com/openlayers/ol3/pull/4136) - Fix the 'click-to-fork' link in contributer notes ([@marcjansen](https://github.com/marcjansen))
+ * [#4132](https://github.com/openlayers/ol3/pull/4132) - Update quickstart tutorial ([@tsauerwein](https://github.com/tsauerwein))
+ * [#4111](https://github.com/openlayers/ol3/pull/4111) - Use a blackish default for filling texts ([@marcjansen](https://github.com/marcjansen))
+ * [#4120](https://github.com/openlayers/ol3/pull/4120) - Remove invalid link to featureOverlay in API doc ([@kalbermattenm](https://github.com/kalbermattenm))
+ * [#4117](https://github.com/openlayers/ol3/pull/4117) - forEachFeatureAtPixel shouldn't fail if layer has no source ([@pgiraud](https://github.com/pgiraud))
+ * [#4106](https://github.com/openlayers/ol3/pull/4106) - Focus to search field on page load ([@elemoine](https://github.com/elemoine))
+ * [#4079](https://github.com/openlayers/ol3/pull/4079) - Automatically mark required options in API-docs ([@marcjansen](https://github.com/marcjansen))
+ * [#4108](https://github.com/openlayers/ol3/pull/4108) - Add missing CSSProperties.prototype.touchAction extern ([@fredj](https://github.com/fredj))
+ * [#4107](https://github.com/openlayers/ol3/pull/4107) - Prevent page zoom on IE Edge ([@fredj](https://github.com/fredj))
+ * [#3969](https://github.com/openlayers/ol3/pull/3969) - Add an option to use the mouse's location as an anchor when zooming ([@samuellapointe](https://github.com/samuellapointe))

changelog/v3.10.1.md

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

closure-util.json

@@ -1,3 +1,3 @@
 {
-  "library_url": "https://github.com/google/closure-library/archive/a5f9b8a.zip"
+  "library_url": "https://github.com/google/closure-library/archive/5b25e65.zip"
 }

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/index.md

@@ -35,6 +35,5 @@ Interactions for [vector features](ol.Feature.html)
 <td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.ObjectEvent](ol.ObjectEvent.html) with information on the changed property and old value.</p>
 <td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
 [ol.Geolocation](ol.Geolocation.html)<br>
-[ol.Overlay](ol.Overlay.html)<br>
-[ol.FeatureOverlay](ol.FeatureOverlay.html)<br></td>
+[ol.Overlay](ol.Overlay.html)<br></td>
 </tr></table>

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/plugins/typedefs.js

@@ -5,6 +5,10 @@
 
 var lastOlxTypedef = null;
 var olxTypes = {};
+// names of the olx typenames
+var olxTypeNames = [];
+// types that are undefined or typedefs containing undefined
+var undefinedLikes = null;
 
 function addSubparams(params) {
   for (var j = 0, jj = params.length; j < jj; ++j) {
@@ -23,6 +27,63 @@ function addSubparams(params) {
   }
 }
 
+/**
+ * Changes the description of the param, if it is found to be a required
+ * option of an olxTypeName.
+ */
+function markRequiredIfNeeded(doclet){
+  var memberof = doclet.memberof;
+  // only check doclets that belong to an olxTypeName
+  if (!memberof || olxTypeNames.indexOf(memberof) == -1) {
+    return doclet;
+  }
+
+  var types = doclet.type.names;
+  var isRequiredParam = true;
+
+  // iterate over all types that are like-undefined (see above for explanation)
+  for (var idx = undefinedLikes.length - 1; idx >= 0; idx--) {
+    var undefinedLike = undefinedLikes[idx];
+    // … if the current types contains a type that is undefined-like,
+    // it is not required.
+    if (types.indexOf(undefinedLike) != -1) {
+      isRequiredParam = false;
+    }
+  }
+
+  if (isRequiredParam) {
+    var reqSnippet = '<span class="required-option">Required.</span></p>';
+    var endsWithP = /<\/p>$/i;
+    var description = doclet.description;
+    if (description && endsWithP.test(description)) {
+      description = description.replace(endsWithP, ' ' + reqSnippet);
+    } else if (doclet.description === undefined) {
+      description = '<p>' + reqSnippet;
+    }
+    doclet.description = description;
+  }
+  return doclet;
+}
+
+/**
+ * Iterates over all doclets and finds the names of types that contain
+ * undefined. Stores the names in the global variable undefinedLikes, so
+ * that e.g. markRequiredIfNeeded can use these.
+ */
+function findTypesLikeUndefined(doclets) {
+  undefinedLikes = ['undefined']; // include type 'undefined' explicitly
+  for (var i = doclets.length - 1; i >= 0; --i) {
+    var doclet = doclets[i];
+    if(doclet.kind === 'typedef') {
+      var types = doclet.type.names;
+      if (types.indexOf('undefined') !== -1) {
+        // the typedef contains 'undefined', so it self is undefinedLike.
+        undefinedLikes.push(doclet.longname);
+      }
+    }
+  }
+}
+
 exports.handlers = {
 
   newDoclet: function(e) {
@@ -34,6 +95,7 @@ exports.handlers = {
       }
       if (doclet.kind == 'typedef') {
         lastOlxTypedef = doclet;
+        olxTypeNames.push(doclet.longname);
         olxTypes[doclet.longname] = [];
         doclet.properties = [];
       } else if (lastOlxTypedef && doclet.memberof == lastOlxTypedef.longname) {
@@ -51,12 +113,14 @@ exports.handlers = {
 
   parseComplete: function(e) {
     var doclets = e.doclets;
+    findTypesLikeUndefined(doclets);
     for (var i = doclets.length - 1; i >= 0; --i) {
       var doclet = doclets[i];
       var params = doclet.params;
       if (params) {
         addSubparams(params);
       }
+      markRequiredIfNeeded(doclet);
     }
   }
 

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,
@@ -29,9 +29,9 @@ function getAncestorLinks(doclet) {
 
 function hashToLink(doclet, hash) {
     if ( !/^(#.+)/.test(hash) ) { return hash; }
-    
+
     var url = helper.createLink(doclet);
-    
+
     url = url.replace(/(#.+|$)/, hash);
     return '<a href="' + url + '">' + hash + '</a>';
 }
@@ -59,15 +59,15 @@ function needsSignature(doclet) {
 
 function addSignatureParams(f) {
     var params = helper.getSignatureParams(f, 'optional');
-    
+
     f.signature = (f.signature || '') + '('+params.join(', ')+')';
 }
 
 function addSignatureReturns(f) {
     var returnTypes = helper.getSignatureReturns(f);
-    
+
     f.signature = '<span class="signature">'+(f.signature || '') + '</span>';
-    
+
     if (returnTypes.length) {
         f.signature += '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">'+(returnTypes.length ? '{'+returnTypes.join('|')+'}' : '')+'</span>';
     }
@@ -75,7 +75,7 @@ function addSignatureReturns(f) {
 
 function addSignatureTypes(f) {
     var types = helper.getSignatureTypes(f);
-    
+
     f.signature = (f.signature || '') + '<span class="type-signature">'+(types.length? ' :'+types.join('|') : '')+' </span>';
 }
 
@@ -106,7 +106,7 @@ function getPathFromDoclet(doclet) {
 
     return filepath;
 }
-    
+
 function generate(title, docs, filename, resolveLinks) {
     resolveLinks = resolveLinks === false ? false : true;
 
@@ -115,14 +115,14 @@ function generate(title, docs, filename, resolveLinks) {
         title: title,
         docs: docs
     };
-    
+
     var outpath = path.join(outdir, filename),
         html = view.render('container.tmpl', docData);
-    
+
     if (resolveLinks) {
         html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
     }
-    
+
     fs.writeFileSync(outpath, html, 'utf8');
 }
 
@@ -153,7 +153,7 @@ function generateSourceFiles(sourceFiles) {
  * exports only that class or function), then attach the classes or functions to the `module`
  * property of the appropriate module doclets. The name of each class or function is also updated
  * for display purposes. This function mutates the original arrays.
- * 
+ *
  * @private
  * @param {Array.<module:jsdoc/doclet.Doclet>} doclets - The array of classes and functions to
  * check.
@@ -268,7 +268,7 @@ exports.publish = function(taffyData, opts, tutorials) {
 
     var templatePath = opts.template;
     view = new template.Template(templatePath + '/tmpl');
-    
+
     // claim some special filenames in advance, so the All-Powerful Overseer of Filename Uniqueness
     // doesn't try to hand them out later
     var indexUrl = helper.getUniqueFilename('index');
@@ -291,16 +291,16 @@ exports.publish = function(taffyData, opts, tutorials) {
     var sourceFilePaths = [];
     data().each(function(doclet) {
          doclet.attribs = '';
-        
+
         if (doclet.examples) {
             doclet.examples = doclet.examples.map(function(example) {
                 var caption, code;
-                
+
                 if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
                     caption = RegExp.$1;
                     code    = RegExp.$3;
                 }
-                
+
                 return {
                     caption: caption || '',
                     code: code || example
@@ -326,7 +326,7 @@ exports.publish = function(taffyData, opts, tutorials) {
             sourceFilePaths.push(resolvedSourcePath);
         }
     });
-    
+
     // update outdir if necessary, then create outdir
     var packageInfo = ( find({kind: 'package'}) || [] ) [0];
     if (packageInfo && packageInfo.name) {
@@ -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);
@@ -365,7 +365,7 @@ exports.publish = function(taffyData, opts, tutorials) {
             });
         });
     }
-    
+
     if (sourceFilePaths.length) {
         sourceFiles = shortenPaths( sourceFiles, path.commonPrefix(sourceFilePaths) );
     }
@@ -383,7 +383,7 @@ exports.publish = function(taffyData, opts, tutorials) {
             }
         }
     });
-    
+
     data().each(function(doclet) {
         var url = helper.longnameToUrl[doclet.longname];
 
@@ -393,13 +393,13 @@ exports.publish = function(taffyData, opts, tutorials) {
         else {
             doclet.id = doclet.name;
         }
-        
+
         if ( needsSignature(doclet) ) {
             addSignatureParams(doclet);
             addSignatureReturns(doclet);
         }
     });
-    
+
     // do this after the urls have all been generated
     data().each(function(doclet) {
         doclet.ancestors = getAncestorLinks(doclet);
@@ -407,13 +407,13 @@ exports.publish = function(taffyData, opts, tutorials) {
         if (doclet.kind === 'member') {
             addSignatureTypes(doclet);
         }
-        
+
         if (doclet.kind === 'constant') {
             addSignatureTypes(doclet);
             doclet.kind = 'member';
         }
     });
-    
+
     var members = helper.getMembers(data);
     members.tutorials = tutorials.children;
 
@@ -437,7 +437,7 @@ exports.publish = function(taffyData, opts, tutorials) {
     }
 
     if (members.globals.length) { generate('Global', [{kind: 'globalobj'}], globalUrl); }
-    
+
     // index page displays information from package.json and lists files
     var files = find({kind: 'file'}),
         packages = find({kind: 'package'});
@@ -454,14 +454,14 @@ exports.publish = function(taffyData, opts, tutorials) {
     var namespaces = taffy(members.namespaces);
     var mixins = taffy(members.mixins);
     var externals = taffy(members.externals);
-    
+
     for (var longname in helper.longnameToUrl) {
         if ( hasOwnProp.call(helper.longnameToUrl, longname) ) {
             var myClasses = helper.find(classes, {longname: longname});
             if (myClasses.length) {
                 generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]);
             }
-            
+
             var myModules = helper.find(modules, {longname: longname});
             if (myModules.length) {
                 generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
@@ -471,7 +471,7 @@ exports.publish = function(taffyData, opts, tutorials) {
             if (myNamespaces.length) {
                 generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
             }
-            
+
             var myMixins = helper.find(mixins, {longname: longname});
             if (myMixins.length) {
                 generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
@@ -492,16 +492,16 @@ exports.publish = function(taffyData, opts, tutorials) {
             content: tutorial.parse(),
             children: tutorial.children
         };
-        
+
         var tutorialPath = path.join(outdir, filename),
             html = view.render('tutorial.tmpl', tutorialData);
-        
+
         // yes, you can use {@link} in tutorials too!
         html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
-        
+
         fs.writeFileSync(tutorialPath, html, 'utf8');
     }
-    
+
     // tutorials can have only one parent so there is no risk for loops
     function saveChildren(node) {
         node.children.forEach(function(child) {

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,13 +171,17 @@ exports.publish = function(data, opts) {
     return (symbol.name in augments || symbol.virtual);
   });
 
-  process.stdout.write(
-      JSON.stringify({
-        symbols: symbols,
-        defines: defines,
-        typedefs: typedefs,
-        externs: externs,
-        base: base
-      }, null, 2));
+  return new Promise(function(resolve, reject) {
+
+    process.stdout.write(
+        JSON.stringify({
+          symbols: symbols,
+          defines: defines,
+          typedefs: typedefs,
+          externs: externs,
+          base: base
+        }, 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 {

doc/quickstart.hbs

@@ -35,7 +35,7 @@ Below you'll find a complete working example.  Create a new file, copy in the co
           })
         ],
         view: new ol.View({
-          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+          center: ol.proj.fromLonLat([37.41, 8.82]),
           zoom: 4
         })
       });
@@ -89,7 +89,7 @@ The map in the application is contained in a [`<div>` HTML element](http://en.wi
       })
     ],
     view: new ol.View({
-      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      center: ol.proj.fromLonLat([37.41, 8.82]),
       zoom: 4
     })
   });
@@ -125,9 +125,9 @@ The next part of the `Map` object is the `View`. The view allow to specify the c
 
 ```js
     view: new ol.View({
-      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      center: ol.proj.fromLonLat([37.41, 8.82]),
       zoom: 4
     })
 ```
 
-You will notice that the `center` specified is in lat/lon coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.
+You will notice that the `center` specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

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/brightness-contrast.css

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

examples/brightness-contrast.html

@@ -1,27 +0,0 @@
----
-template: example.html
-title: Brightness/contrast example
-shortdesc: Example of brightness/contrast control on the client (WebGL only).
-docs: >
-  This example shows how to control brightness/contrast on the client,
-  the example is limited to WebGL.
-tags: "brightness, contrast, webgl"
----
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div id="no-webgl" class="alert alert-danger" style="display: none">
-      This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-    </div>
-    <div class="btn-group">
-      <button id="increase-brightness"><i class="fa fa-plus"></i></button>
-      <button id="reset-brightness">Brightness</button>
-      <button id="decrease-brightness"><i class="fa fa-minus"></i></button>
-    </div>
-    <div class="btn-group">
-      <button id="increase-contrast"><i class="fa fa-plus"></i></button>
-      <button id="reset-contrast">Contrast</button>
-      <button id="decrease-contrast"><i class="fa fa-minus"></i></button>
-    </div>
-  </div>
-</div>

examples/brightness-contrast.js

@@ -1,75 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.has');
-goog.require('ol.layer.Tile');
-goog.require('ol.source.MapQuest');
-
-
-function setResetBrightnessButtonHTML() {
-  resetBrightness.innerHTML = 'Brightness (' +
-      layer.getBrightness().toFixed(3) + ')';
-}
-
-function setResetContrastButtonHTML() {
-  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
-}
-
-if (!ol.has.WEBGL) {
-  var info = document.getElementById('no-webgl');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-} else {
-  var layer = new ol.layer.Tile({
-    source: new ol.source.MapQuest({layer: 'sat'})
-  });
-
-  var map = new ol.Map({
-    layers: [layer],
-    renderer: 'webgl',
-    target: 'map',
-    view: new ol.View({
-      center: [0, 0],
-      zoom: 2
-    })
-  });
-
-  var increaseBrightness = document.getElementById('increase-brightness');
-  var resetBrightness = document.getElementById('reset-brightness');
-  var decreaseBrightness = document.getElementById('decrease-brightness');
-
-  setResetBrightnessButtonHTML();
-
-  increaseBrightness.addEventListener('click', function() {
-    layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
-    setResetBrightnessButtonHTML();
-  }, false);
-  resetBrightness.addEventListener('click', function() {
-    layer.setBrightness(0);
-    setResetBrightnessButtonHTML();
-  }, false);
-  decreaseBrightness.addEventListener('click', function() {
-    layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
-    setResetBrightnessButtonHTML();
-  }, false);
-
-  var increaseContrast = document.getElementById('increase-contrast');
-  var resetContrast = document.getElementById('reset-contrast');
-  var decreaseContrast = document.getElementById('decrease-contrast');
-
-  setResetContrastButtonHTML();
-
-  increaseContrast.addEventListener('click', function() {
-    layer.setContrast(layer.getContrast() + 0.125);
-    setResetContrastButtonHTML();
-  }, false);
-  resetContrast.addEventListener('click', function() {
-    layer.setContrast(1);
-    setResetContrastButtonHTML();
-  }, false);
-  decreaseContrast.addEventListener('click', function() {
-    layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
-    setResetContrastButtonHTML();
-  }, false);
-}

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/custom-interactions.html

@@ -1,9 +1,9 @@
 ---
 template: example.html
 title: Custom interaction example
-shortdesc: Example of a custom drag features interaction.
+shortdesc: Example of a custom interaction.
 docs: >
-  This example demonstrates using a custom interaction with OpenLayers, by subclassing `ol.interaction.Pointer`.
+  This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
   Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
 ---

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

@@ -72,8 +72,7 @@ function flash(feature) {
       snapToPixel: false,
       stroke: new ol.style.Stroke({
         color: 'rgba(255, 0, 0, ' + opacity + ')',
-        width: 1,
-        opacity: opacity
+        width: 1
       })
     });
 

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/getfeatureinfo-image.html

@@ -9,10 +9,12 @@ tags: "getfeatureinfo, forEachLayerAtPixel"
 <div class="row-fluid">
   <div class="span12">
     <div id="map" class="map"></div>
-    <div class="span4 offset4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span4 offset4 iframe-info">
+    <div id="info" class="alert alert-success">
+      &nbsp;
     </div>
   </div>
 </div>

examples/getfeatureinfo-tile.html

@@ -9,10 +9,12 @@ tags: "getfeatureinfo, forEachLayerAtPixel"
 <div class="row-fluid">
   <div class="span12">
     <div id="map" class="map"></div>
-    <div class="span4 offset4 pull-right">
-      <div id="info" class="alert alert-success">
-        &nbsp;
-      </div>
+  </div>
+</div>
+<div class="row-fluid">
+  <div class="span4 offset4 iframe-info">
+    <div id="info" class="alert alert-success">
+      &nbsp;
     </div>
   </div>
 </div>

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/hue-saturation.css

@@ -1,6 +0,0 @@
-#reset-hue {
-  min-width: 90px;
-}
-#reset-saturation {
-  min-width: 124px;
-}

examples/hue-saturation.html

@@ -1,26 +0,0 @@
----
-template: example.html
-title: Hue/saturation example
-shortdesc: Example of hue/saturation control on the client (WebGL only).
-docs: >
-  Example of hue/saturation control on the client (WebGL only).
-tags: "custom, control"
----
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-    <div id="no-webgl" class="alert alert-danger" style="display: none">
-      This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
-    </div>
-    <div class="btn-group">
-      <button id="increase-hue"><i class="fa fa-plus"></i></button>
-      <button id="reset-hue">Hue</button>
-      <button id="decrease-hue"><i class="fa fa-minus"></i></button>
-    </div>
-    <div class="btn-group">
-      <button id="increase-saturation"><i class="fa fa-plus"></i></button>
-      <button id="reset-saturation">Saturation</button>
-      <button id="decrease-saturation"><i class="fa fa-minus"></i></button>
-    </div>
-  </div>
-</div>

examples/hue-saturation.js

@@ -1,79 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.has');
-goog.require('ol.layer.Tile');
-goog.require('ol.proj');
-goog.require('ol.source.BingMaps');
-
-
-function setResetHueButtonHTML() {
-  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
-}
-
-function setResetSaturationButtonHTML() {
-  resetSaturation.innerHTML = 'Saturation (' +
-      layer.getSaturation().toFixed(2) + ')';
-}
-
-if (!ol.has.WEBGL) {
-  var info = document.getElementById('no-webgl');
-  /**
-   * display error message
-   */
-  info.style.display = '';
-} else {
-  var layer = new ol.layer.Tile({
-    source: new ol.source.BingMaps({
-      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
-      imagerySet: 'Aerial'
-    })
-  });
-
-  var map = new ol.Map({
-    layers: [layer],
-    renderer: 'webgl',
-    target: 'map',
-    view: new ol.View({
-      center: ol.proj.fromLonLat([-9.375, 51.483333]),
-      zoom: 15
-    })
-  });
-
-  var increaseHue = document.getElementById('increase-hue');
-  var resetHue = document.getElementById('reset-hue');
-  var decreaseHue = document.getElementById('decrease-hue');
-
-  setResetHueButtonHTML();
-
-  increaseHue.addEventListener('click', function() {
-    layer.setHue(layer.getHue() + 0.25);
-    setResetHueButtonHTML();
-  }, false);
-  resetHue.addEventListener('click', function() {
-    layer.setHue(0);
-    setResetHueButtonHTML();
-  }, false);
-  decreaseHue.addEventListener('click', function() {
-    layer.setHue(layer.getHue() - 0.25);
-    setResetHueButtonHTML();
-  }, false);
-
-  var increaseSaturation = document.getElementById('increase-saturation');
-  var resetSaturation = document.getElementById('reset-saturation');
-  var decreaseSaturation = document.getElementById('decrease-saturation');
-
-  setResetSaturationButtonHTML();
-
-  increaseSaturation.addEventListener('click', function() {
-    layer.setSaturation(layer.getSaturation() + 0.25);
-    setResetSaturationButtonHTML();
-  }, false);
-  resetSaturation.addEventListener('click', function() {
-    layer.setSaturation(1);
-    setResetSaturationButtonHTML();
-  }, false);
-  decreaseSaturation.addEventListener('click', function() {
-    layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
-    setResetSaturationButtonHTML();
-  }, false);
-}

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;
@@ -170,13 +171,13 @@
         for (var i = 0; i < info.examples.length; ++i) {
           info.examples[i].link += window.location.search;
         }
-        // document.getElementById('keywords').focus();
         template = new jugl.Template("template");
         target = document.getElementById("examples");
         listExamples(info.examples);
         document.getElementById("keywords").onkeyup = inputChange;
         parseQuery();
       };
+
     </script>
 
     <title>OpenLayers 3 Examples</title>
@@ -187,7 +188,7 @@
       <div class="container">
         <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
         <form class="navbar-form navbar-left" role="search">
-          <input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
+          <input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus>
           <span id="count"></span>
         </form>
       </div>
@@ -198,13 +199,13 @@
       <div style="display: none;">
         <div id="template" class="row">
           <div class="col-md-4 col-sm-4" jugl:repeat="example examples">
-            <div class="example">
-              <a jugl:attributes="href example.link" class="mainlink">
+            <a jugl:attributes="href example.link" class="example">
+              <span class="mainlink">
                 <strong><span jugl:replace="example.title">title</span></strong><br>
                 <small jugl:content="'(' + example.example + ')'"></small>
-              </a>
+              </span>
               <p class="description" jugl:content="example.shortdesc"></p>
-            </div>
+            </a>
           </div>
         </div>
       </div>

examples/jsts.html

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

examples/jsts.js

@@ -0,0 +1,53 @@
+// NOCOMPILE
+// this example uses JSTS for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response,
+      {featureProjection: 'EPSG:3857'});
+
+  var parser = new jsts.io.olParser();
+
+  for (var i = 0; i < features.length; i++) {
+    var feature = features[i];
+    // convert the OpenLayers geometry to a JSTS geometry
+    var jstsGeom = parser.read(feature.getGeometry());
+
+    // create a buffer of 40 meters around each line
+    var buffered = jstsGeom.buffer(40);
+
+    // convert back from JSTS and replace the geometry on the feature
+    feature.setGeometry(parser.write(buffered));
+  }
+
+  source.addFeatures(features);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.979293, 37.528787]),
+    zoom: 15
+  })
+});

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

@@ -20,14 +20,6 @@ tags: "tilejson, input, bind, group, layergroup"
           </label>
           <label>opacity</label>
           <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-          <label>hue</label>
-          <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-          <label>saturation</label>
-          <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-          <label>contrast</label>
-          <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-          <label>brightness</label>
-          <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
         </fieldset>
       </li>
       <li><span>Layer group</span>
@@ -37,14 +29,6 @@ tags: "tilejson, input, bind, group, layergroup"
           </label>
           <label>opacity</label>
           <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-          <label>hue</label>
-          <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-          <label>saturation</label>
-          <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-          <label>contrast</label>
-          <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-          <label>brightness</label>
-          <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
         </fieldset>
         <ul>
           <li><span>Food insecurity layer</span>
@@ -54,14 +38,6 @@ tags: "tilejson, input, bind, group, layergroup"
               </label>
               <label>opacity</label>
               <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-              <label>hue</label>
-              <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-              <label>saturation</label>
-              <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-              <label>contrast</label>
-              <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-              <label>brightness</label>
-              <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </li>
           <li><span>World borders layer</span>
@@ -71,14 +47,6 @@ tags: "tilejson, input, bind, group, layergroup"
               </label>
               <label>opacity</label>
               <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-              <label>hue</label>
-              <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-              <label>saturation</label>
-              <input class="saturation" type="range" min="0" max="5" step="0.01"/>
-              <label>contrast</label>
-              <input class="contrast" type="range" min="0" max="2" step="0.01"/>
-              <label>brightness</label>
-              <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </li>
         </ul>

examples/layer-group.js

@@ -44,15 +44,11 @@ function bindInputs(layerid, layer) {
   });
   visibilityInput.prop('checked', layer.getVisible());
 
-  $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
-      function(i, v) {
-        var input = $(layerid + ' input.' + v);
-        input.on('input change', function() {
-          layer.set(v, parseFloat(this.value));
-        });
-        input.val(String(layer.get(v)));
-      }
-  );
+  var opacityInput = $(layerid + ' input.opacity');
+  opacityInput.on('input change', function() {
+    layer.setOpacity(parseFloat(this.value));
+  });
+  opacityInput.val(String(layer.getOpacity()));
 }
 map.getLayers().forEach(function(layer, i) {
   bindInputs('#layer' + i, layer);

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

@@ -3,8 +3,10 @@ template: example.html
 title: Preload example
 shortdesc: Example of tile preloading.
 docs: >
-  <p>The map on the left preloads low resolution tiles.  The map on the right does not use any preloading.  Try zooming out and panning to see the difference.</p>
+  <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/layout.css

@@ -58,6 +58,9 @@ ol.inline>li {
 .ol-control button, .ol-attribution, .ol-scale-line-inner {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
 }
+.iframe-info iframe {
+  width: 100%;
+}
 
 pre[class*="language-"] {
   margin-top: 20px;

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

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: turf.js Example
+shortdesc: Example on how to use turf.js with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="http://turfjs.org">turf.js</a>
+  with OpenLayers 3. The turf.js function <code>along</code> is used to
+  display a marker every 200 meters along a street.
+tags: "vector, turfjs, along, distance"
+resources:
+  - https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/turf.js

@@ -0,0 +1,57 @@
+// NOCOMPILE
+// this example uses turf.js for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response);
+  var street = features[0];
+
+  // convert to a turf.js feature
+  var turfLine = format.writeFeatureObject(street);
+
+  // show a marker every 200 meters
+  var distance = 0.2;
+
+  // get the line length in kilometers
+  var length = turf.lineDistance(turfLine, 'kilometers');
+  for (var i = 1; i <= length / distance; i++) {
+    var turfPoint = turf.along(turfLine, i * distance, 'kilometers');
+
+    // convert the generated point to a OpenLayers feature
+    var marker = format.readFeature(turfPoint);
+    marker.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+    source.addFeature(marker);
+  }
+
+  street.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+  source.addFeature(street);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.980366, 37.526540]),
+    zoom: 15
+  })
+});

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

@@ -8,25 +8,10 @@
  * @externs
  */
 
-/** @type {number} */
-Touch.prototype.force;
+// see https://github.com/google/closure-compiler/pull/1206
 
-
-/** @type {number} */
-Touch.prototype.radiusX;
-
-
-/** @type {number} */
-Touch.prototype.radiusY;
-
-
-/** @type {number} */
-Touch.prototype.webkitForce;
-
-
-/** @type {number} */
-Touch.prototype.webkitRadiusX;
-
-
-/** @type {number} */
-Touch.prototype.webkitRadiusY;
+/**
+ * @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}
  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "3.9.0",
+  "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.7.0",
+    "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": {
@@ -55,7 +63,7 @@
     "mocha-phantomjs": "3.5.1",
     "mustache": "2.1.3",
     "phantomjs": "1.9.10",
-    "proj4": "2.3.6",
+    "proj4": "2.3.12",
     "resemblejs": "1.2.0",
     "sinon": "1.10.3",
     "slimerjs-edge": "0.10.0-pre-2",
@@ -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/animation.js

@@ -1,5 +1,6 @@
 goog.provide('ol.animation');
 
+goog.require('ol');
 goog.require('ol.PreRenderFunction');
 goog.require('ol.ViewHint');
 goog.require('ol.coordinate');
@@ -15,9 +16,9 @@ goog.require('ol.easing');
  */
 ol.animation.bounce = function(options) {
   var resolution = options.resolution;
-  var start = goog.isDef(options.start) ? options.start : goog.now();
-  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easing = goog.isDef(options.easing) ?
+  var start = options.start ? options.start : Date.now();
+  var duration = options.duration !== undefined ? options.duration : 1000;
+  var easing = options.easing ?
       options.easing : ol.easing.upAndDown;
   return (
       /**
@@ -51,11 +52,11 @@ ol.animation.bounce = function(options) {
  */
 ol.animation.pan = function(options) {
   var source = options.source;
-  var start = goog.isDef(options.start) ? options.start : goog.now();
+  var start = options.start ? options.start : Date.now();
   var sourceX = source[0];
   var sourceY = source[1];
-  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easing = goog.isDef(options.easing) ?
+  var duration = options.duration !== undefined ? options.duration : 1000;
+  var easing = options.easing ?
       options.easing : ol.easing.inAndOut;
   return (
       /**
@@ -90,12 +91,12 @@ ol.animation.pan = function(options) {
  * @api
  */
 ol.animation.rotate = function(options) {
-  var sourceRotation = goog.isDef(options.rotation) ? options.rotation : 0;
-  var start = goog.isDef(options.start) ? options.start : goog.now();
-  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easing = goog.isDef(options.easing) ?
+  var sourceRotation = options.rotation ? options.rotation : 0;
+  var start = options.start ? options.start : Date.now();
+  var duration = options.duration !== undefined ? options.duration : 1000;
+  var easing = options.easing ?
       options.easing : ol.easing.inAndOut;
-  var anchor = goog.isDef(options.anchor) ?
+  var anchor = options.anchor ?
       options.anchor : null;
 
   return (
@@ -114,7 +115,7 @@ ol.animation.rotate = function(options) {
               (sourceRotation - frameState.viewState.rotation) * delta;
           frameState.animate = true;
           frameState.viewState.rotation += deltaRotation;
-          if (!goog.isNull(anchor)) {
+          if (anchor) {
             var center = frameState.viewState.center;
             ol.coordinate.sub(center, anchor);
             ol.coordinate.rotate(center, deltaRotation);
@@ -137,9 +138,9 @@ ol.animation.rotate = function(options) {
  */
 ol.animation.zoom = function(options) {
   var sourceResolution = options.resolution;
-  var start = goog.isDef(options.start) ? options.start : goog.now();
-  var duration = goog.isDef(options.duration) ? options.duration : 1000;
-  var easing = goog.isDef(options.easing) ?
+  var start = options.start ? options.start : Date.now();
+  var duration = options.duration !== undefined ? options.duration : 1000;
+  var easing = options.easing ?
       options.easing : ol.easing.inAndOut;
   return (
       /**

src/ol/array.js

@@ -37,6 +37,17 @@ ol.array.binaryFindNearest = function(arr, target) {
 };
 
 
+/**
+ * Whether the array contains the given object.
+ * @param {Array.<*>} arr The array to test for the presence of the element.
+ * @param {*} obj The object for which to test.
+ * @return {boolean} The object is in the array.
+ */
+ol.array.includes = function(arr, obj) {
+  return arr.indexOf(obj) >= 0;
+};
+
+
 /**
  * @param {Array.<number>} arr Array.
  * @param {number} target Target.

src/ol/attribution.js

@@ -38,8 +38,7 @@ ol.Attribution = function(options) {
    * @private
    * @type {Object.<string, Array.<ol.TileRange>>}
    */
-  this.tileRanges_ = goog.isDef(options.tileRanges) ?
-      options.tileRanges : null;
+  this.tileRanges_ = options.tileRanges ? options.tileRanges : null;
 
 };
 
@@ -62,7 +61,7 @@ ol.Attribution.prototype.getHTML = function() {
  */
 ol.Attribution.prototype.intersectsAnyTileRange =
     function(tileRanges, tileGrid, projection) {
-  if (goog.isNull(this.tileRanges_)) {
+  if (!this.tileRanges_) {
     return true;
   }
   var i, ii, tileRange, zKey;

src/ol/centerconstraint.js

@@ -1,7 +1,7 @@
 goog.provide('ol.CenterConstraint');
 goog.provide('ol.CenterConstraintType');
 
-goog.require('goog.math');
+goog.require('ol.math');
 
 
 /**
@@ -21,10 +21,10 @@ ol.CenterConstraint.createExtent = function(extent) {
        * @return {ol.Coordinate|undefined} Center.
        */
       function(center) {
-        if (goog.isDef(center)) {
+        if (center) {
           return [
-            goog.math.clamp(center[0], extent[0], extent[2]),
-            goog.math.clamp(center[1], extent[1], extent[3])
+            ol.math.clamp(center[0], extent[0], extent[2]),
+            ol.math.clamp(center[1], extent[1], extent[3])
           ];
         } else {
           return undefined;

src/ol/collection.js

@@ -91,7 +91,7 @@ ol.Collection = function(opt_array) {
    * @private
    * @type {!Array.<T>}
    */
-  this.array_ = goog.isDef(opt_array) ? opt_array : [];
+  this.array_ = opt_array ? opt_array : [];
 
   this.updateLength_();
 
@@ -136,7 +136,7 @@ ol.Collection.prototype.extend = function(arr) {
  * @api stable
  */
 ol.Collection.prototype.forEach = function(f, opt_this) {
-  goog.array.forEach(this.array_, f, opt_this);
+  this.array_.forEach(f, opt_this);
 };
 
 

src/ol/color/color.js

@@ -9,9 +9,9 @@ goog.provide('ol.color');
 goog.require('goog.asserts');
 goog.require('goog.color');
 goog.require('goog.color.names');
-goog.require('goog.math');
 goog.require('goog.vec.Mat4');
 goog.require('ol');
+goog.require('ol.math');
 
 
 /**
@@ -62,7 +62,7 @@ ol.color.rgbaColorRe_ =
 ol.color.blend = function(dst, src, opt_color) {
   // http://en.wikipedia.org/wiki/Alpha_compositing
   // FIXME do we need to scale by 255?
-  var out = goog.isDef(opt_color) ? opt_color : [];
+  var out = opt_color ? opt_color : [];
   var dstA = dst[3];
   var srcA = src[3];
   if (dstA == 1) {
@@ -271,11 +271,11 @@ ol.color.isValid = function(color) {
  * @return {ol.Color} Clamped color.
  */
 ol.color.normalize = function(color, opt_color) {
-  var result = goog.isDef(opt_color) ? opt_color : [];
-  result[0] = goog.math.clamp((color[0] + 0.5) | 0, 0, 255);
-  result[1] = goog.math.clamp((color[1] + 0.5) | 0, 0, 255);
-  result[2] = goog.math.clamp((color[2] + 0.5) | 0, 0, 255);
-  result[3] = goog.math.clamp(color[3], 0, 1);
+  var result = opt_color || [];
+  result[0] = ol.math.clamp((color[0] + 0.5) | 0, 0, 255);
+  result[1] = ol.math.clamp((color[1] + 0.5) | 0, 0, 255);
+  result[2] = ol.math.clamp((color[2] + 0.5) | 0, 0, 255);
+  result[3] = ol.math.clamp(color[3], 0, 1);
   return result;
 };
 
@@ -309,7 +309,7 @@ ol.color.toString = function(color) {
  * @return {ol.Color} Transformed color.
  */
 ol.color.transform = function(color, transform, opt_color) {
-  var result = goog.isDef(opt_color) ? opt_color : [];
+  var result = opt_color ? opt_color : [];
   result = goog.vec.Mat4.multVec3(transform, color, result);
   goog.asserts.assert(goog.isArray(result), 'result should be an array');
   result[3] = color[3];

src/ol/color/colormatrix.js

@@ -1,205 +0,0 @@
-goog.provide('ol.color.Matrix');
-
-goog.require('goog.vec.Mat4');
-
-
-
-/**
- * @constructor
- */
-ol.color.Matrix = function() {
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Number}
-   */
-  this.colorMatrix_ = goog.vec.Mat4.createNumber();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.brightness_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Number}
-   */
-  this.brightnessMatrix_ = goog.vec.Mat4.createNumber();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.contrast_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Number}
-   */
-  this.contrastMatrix_ = goog.vec.Mat4.createNumber();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.hue_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Number}
-   */
-  this.hueMatrix_ = goog.vec.Mat4.createNumber();
-
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.saturation_ = undefined;
-
-  /**
-   * @private
-   * @type {!goog.vec.Mat4.Number}
-   */
-  this.saturationMatrix_ = goog.vec.Mat4.createNumber();
-
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Number} matrix Matrix.
- * @param {number} value Brightness value.
- * @return {!goog.vec.Mat4.Number} Matrix.
- */
-ol.color.Matrix.makeBrightness = function(matrix, value) {
-  goog.vec.Mat4.makeTranslate(matrix, value, value, value);
-  return matrix;
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Number} matrix Matrix.
- * @param {number} value Contrast value.
- * @return {!goog.vec.Mat4.Number} Matrix.
- */
-ol.color.Matrix.makeContrast = function(matrix, value) {
-  goog.vec.Mat4.makeScale(matrix, value, value, value);
-  var translateValue = (-0.5 * value + 0.5);
-  goog.vec.Mat4.setColumnValues(matrix, 3,
-      translateValue, translateValue, translateValue, 1);
-  return matrix;
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Number} matrix Matrix.
- * @param {number} value Hue value.
- * @return {!goog.vec.Mat4.Number} Matrix.
- */
-ol.color.Matrix.makeHue = function(matrix, value) {
-  var cosHue = Math.cos(value);
-  var sinHue = Math.sin(value);
-  var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
-  var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
-  var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
-  var v03 = 0;
-  var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
-  var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
-  var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
-  var v13 = 0;
-  var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
-  var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
-  var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
-  var v23 = 0;
-  var v30 = 0;
-  var v31 = 0;
-  var v32 = 0;
-  var v33 = 1;
-  goog.vec.Mat4.setFromValues(matrix,
-      v00, v10, v20, v30,
-      v01, v11, v21, v31,
-      v02, v12, v22, v32,
-      v03, v13, v23, v33);
-  return matrix;
-};
-
-
-/**
- * @param {!goog.vec.Mat4.Number} matrix Matrix.
- * @param {number} value Saturation value.
- * @return {!goog.vec.Mat4.Number} Matrix.
- */
-ol.color.Matrix.makeSaturation = function(matrix, value) {
-  var v00 = 0.213 + 0.787 * value;
-  var v01 = 0.715 - 0.715 * value;
-  var v02 = 0.072 - 0.072 * value;
-  var v03 = 0;
-  var v10 = 0.213 - 0.213 * value;
-  var v11 = 0.715 + 0.285 * value;
-  var v12 = 0.072 - 0.072 * value;
-  var v13 = 0;
-  var v20 = 0.213 - 0.213 * value;
-  var v21 = 0.715 - 0.715 * value;
-  var v22 = 0.072 + 0.928 * value;
-  var v23 = 0;
-  var v30 = 0;
-  var v31 = 0;
-  var v32 = 0;
-  var v33 = 1;
-  goog.vec.Mat4.setFromValues(matrix,
-      v00, v10, v20, v30,
-      v01, v11, v21, v31,
-      v02, v12, v22, v32,
-      v03, v13, v23, v33);
-  return matrix;
-};
-
-
-/**
- * @param {number|undefined} brightness Brightness.
- * @param {number|undefined} contrast Contrast.
- * @param {number|undefined} hue Hue.
- * @param {number|undefined} saturation Saturation.
- * @return {!goog.vec.Mat4.Number} Matrix.
- */
-ol.color.Matrix.prototype.getMatrix = function(
-    brightness, contrast, hue, saturation) {
-  var colorMatrixDirty = false;
-  if (goog.isDef(brightness) && brightness !== this.brightness_) {
-    ol.color.Matrix.makeBrightness(this.brightnessMatrix_, brightness);
-    this.brightness_ = brightness;
-    colorMatrixDirty = true;
-  }
-  if (goog.isDef(contrast) && contrast !== this.contrast_) {
-    ol.color.Matrix.makeContrast(this.contrastMatrix_, contrast);
-    this.contrast_ = contrast;
-    colorMatrixDirty = true;
-  }
-  if (goog.isDef(hue) && hue !== this.hue_) {
-    ol.color.Matrix.makeHue(this.hueMatrix_, hue);
-    this.hue_ = hue;
-    colorMatrixDirty = true;
-  }
-  if (goog.isDef(saturation) && saturation !== this.saturation_) {
-    ol.color.Matrix.makeSaturation(this.saturationMatrix_, saturation);
-    this.saturation_ = saturation;
-    colorMatrixDirty = true;
-  }
-  if (colorMatrixDirty) {
-    var colorMatrix = this.colorMatrix_;
-    goog.vec.Mat4.makeIdentity(colorMatrix);
-    if (goog.isDef(contrast)) {
-      goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
-    }
-    if (goog.isDef(brightness)) {
-      goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
-    }
-    if (goog.isDef(saturation)) {
-      goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
-    }
-    if (goog.isDef(hue)) {
-      goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
-    }
-  }
-  return this.colorMatrix_;
-};

src/ol/control/attributioncontrol.js

@@ -4,12 +4,12 @@ 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');
 goog.require('goog.object');
 goog.require('goog.style');
+goog.require('ol');
 goog.require('ol.Attribution');
 goog.require('ol.control.Control');
 goog.require('ol.css');
@@ -31,70 +31,67 @@ goog.require('ol.source.Tile');
  */
 ol.control.Attribution = function(opt_options) {
 
-  var options = goog.isDef(opt_options) ? opt_options : {};
+  var options = opt_options ? 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');
 
-  goog.dom.appendChild(this.ulElement_, this.logoLi_);
+  this.ulElement_.appendChild(this.logoLi_);
   goog.style.setElementShown(this.logoLi_, false);
 
   /**
    * @private
    * @type {boolean}
    */
-  this.collapsed_ = goog.isDef(options.collapsed) ? options.collapsed : true;
+  this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;
 
   /**
    * @private
    * @type {boolean}
    */
-  this.collapsible_ = goog.isDef(options.collapsible) ?
+  this.collapsible_ = options.collapsible !== undefined ?
       options.collapsible : true;
 
   if (!this.collapsible_) {
     this.collapsed_ = false;
   }
 
-  var className = goog.isDef(options.className) ?
-      options.className : 'ol-attribution';
+  var className = options.className ? options.className : 'ol-attribution';
 
-  var tipLabel = goog.isDef(options.tipLabel) ?
-      options.tipLabel : 'Attributions';
+  var tipLabel = options.tipLabel ? options.tipLabel : 'Attributions';
 
-  var collapseLabel = goog.isDef(options.collapseLabel) ?
-      options.collapseLabel : '\u00BB';
+  var collapseLabel = options.collapseLabel ? options.collapseLabel : '\u00BB';
 
   /**
    * @private
    * @type {Node}
    */
-  this.collapseLabel_ = /** @type {Node} */ (goog.isString(collapseLabel) ?
-      goog.dom.createDom(goog.dom.TagName.SPAN, {}, collapseLabel) :
-      collapseLabel);
+  this.collapseLabel_ = goog.isString(collapseLabel) ?
+      goog.dom.createDom('SPAN', {}, collapseLabel) :
+      collapseLabel;
 
-  var label = goog.isDef(options.label) ? options.label : 'i';
+  var label = options.label ? options.label : 'i';
 
   /**
    * @private
    * @type {Node}
    */
-  this.label_ = /** @type {Node} */ (goog.isString(label) ?
-      goog.dom.createDom(goog.dom.TagName.SPAN, {}, label) :
-      label);
+  this.label_ = goog.isString(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);
@@ -113,11 +110,10 @@ 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 = goog.isDef(options.render) ?
-      options.render : ol.control.Attribution.render;
+  var render = options.render ? options.render : ol.control.Attribution.render;
 
   goog.base(this, {
     element: element,
@@ -167,15 +163,15 @@ ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
   /** @type {Object.<string, ol.Attribution>} */
   var hiddenAttributions = {};
   var projection = frameState.viewState.projection;
-  goog.asserts.assert(!goog.isNull(projection), 'projection cannot be null');
+  goog.asserts.assert(projection, 'projection of viewState required');
   for (i = 0, ii = layerStatesArray.length; i < ii; i++) {
     source = layerStatesArray[i].layer.getSource();
-    if (goog.isNull(source)) {
+    if (!source) {
       continue;
     }
     sourceKey = goog.getUid(source).toString();
     sourceAttributions = source.getAttributions();
-    if (goog.isNull(sourceAttributions)) {
+    if (!sourceAttributions) {
       continue;
     }
     for (j = 0, jj = sourceAttributions.length; j < jj; j++) {
@@ -185,11 +181,11 @@ ol.control.Attribution.prototype.getSourceAttributions = function(frameState) {
         continue;
       }
       tileRanges = frameState.usedTiles[sourceKey];
-      if (goog.isDef(tileRanges)) {
+      if (tileRanges) {
         goog.asserts.assertInstanceof(source, ol.source.Tile,
             'source should be an ol.source.Tile');
         var tileGrid = source.getTileGridForProjection(projection);
-        goog.asserts.assert(!goog.isNull(tileGrid), 'tileGrid cannot be null');
+        goog.asserts.assert(tileGrid, 'tileGrid required for projection');
         intersectsTileRange = sourceAttribution.intersectsAnyTileRange(
             tileRanges, tileGrid, projection);
       } else {
@@ -226,7 +222,7 @@ ol.control.Attribution.render = function(mapEvent) {
  */
 ol.control.Attribution.prototype.updateElement_ = function(frameState) {
 
-  if (goog.isNull(frameState)) {
+  if (!frameState) {
     if (this.renderedVisible_) {
       goog.style.setElementShown(this.element, false);
       this.renderedVisible_ = false;
@@ -265,19 +261,19 @@ 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();
-    goog.dom.appendChild(this.ulElement_, attributionElement);
+    this.ulElement_.appendChild(attributionElement);
     this.attributionElements_[attributionKey] = attributionElement;
     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);
-    goog.dom.appendChild(this.ulElement_, attributionElement);
+    this.ulElement_.appendChild(attributionElement);
     this.attributionElements_[attributionKey] = attributionElement;
   }
 
@@ -326,12 +322,12 @@ 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);
       }
-      goog.dom.appendChild(this.logoLi_, logoElement);
+      this.logoLi_.appendChild(logoElement);
       logoElements[logoKey] = logoElement;
     }
   }

src/ol/control/control.js

@@ -1,8 +1,8 @@
 goog.provide('ol.control.Control');
 
-goog.require('goog.array');
 goog.require('goog.dom');
 goog.require('goog.events');
+goog.require('ol');
 goog.require('ol.MapEventType');
 goog.require('ol.Object');
 
@@ -45,7 +45,7 @@ ol.control.Control = function(options) {
    * @protected
    * @type {Element}
    */
-  this.element = goog.isDef(options.element) ? options.element : null;
+  this.element = options.element ? options.element : null;
 
   /**
    * @private
@@ -68,9 +68,9 @@ ol.control.Control = function(options) {
   /**
    * @type {function(ol.MapEvent)}
    */
-  this.render = goog.isDef(options.render) ? options.render : goog.nullFunction;
+  this.render = options.render ? options.render : ol.nullFunction;
 
-  if (goog.isDef(options.target)) {
+  if (options.target) {
     this.setTarget(options.target);
   }
 
@@ -105,19 +105,19 @@ ol.control.Control.prototype.getMap = function() {
  * @api stable
  */
 ol.control.Control.prototype.setMap = function(map) {
-  if (!goog.isNull(this.map_)) {
+  if (this.map_) {
     goog.dom.removeNode(this.element);
   }
-  if (!goog.array.isEmpty(this.listenerKeys)) {
-    goog.array.forEach(this.listenerKeys, goog.events.unlistenByKey);
+  if (this.listenerKeys.length > 0) {
+    this.listenerKeys.forEach(goog.events.unlistenByKey);
     this.listenerKeys.length = 0;
   }
   this.map_ = map;
-  if (!goog.isNull(this.map_)) {
-    var target = !goog.isNull(this.target_) ?
+  if (this.map_) {
+    var target = this.target_ ?
         this.target_ : map.getOverlayContainerStopEvent();
-    goog.dom.appendChild(target, this.element);
-    if (this.render !== goog.nullFunction) {
+    target.appendChild(this.element);
+    if (this.render !== ol.nullFunction) {
       this.listenerKeys.push(goog.events.listen(map,
           ol.MapEventType.POSTRENDER, this.render, false, this));
     }

src/ol/control/controldefaults.js

@@ -1,5 +1,6 @@
 goog.provide('ol.control');
 
+goog.require('ol');
 goog.require('ol.Collection');
 goog.require('ol.control.Attribution');
 goog.require('ol.control.Rotate');
@@ -20,23 +21,21 @@ goog.require('ol.control.Zoom');
  */
 ol.control.defaults = function(opt_options) {
 
-  var options = goog.isDef(opt_options) ? opt_options : {};
+  var options = opt_options ? opt_options : {};
 
   var controls = new ol.Collection();
 
-  var zoomControl = goog.isDef(options.zoom) ?
-      options.zoom : true;
+  var zoomControl = options.zoom !== undefined ? options.zoom : true;
   if (zoomControl) {
     controls.push(new ol.control.Zoom(options.zoomOptions));
   }
 
-  var rotateControl = goog.isDef(options.rotate) ?
-      options.rotate : true;
+  var rotateControl = options.rotate !== undefined ? options.rotate : true;
   if (rotateControl) {
     controls.push(new ol.control.Rotate(options.rotateOptions));
   }
 
-  var attributionControl = goog.isDef(options.attribution) ?
+  var attributionControl = options.attribution !== undefined ?
       options.attribution : true;
   if (attributionControl) {
     controls.push(new ol.control.Attribution(options.attributionOptions));

src/ol/control/fullscreencontrol.js

@@ -2,12 +2,12 @@ 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');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
+goog.require('ol');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 
@@ -28,37 +28,34 @@ goog.require('ol.css');
  */
 ol.control.FullScreen = function(opt_options) {
 
-  var options = goog.isDef(opt_options) ? opt_options : {};
+  var options = opt_options ? opt_options : {};
 
   /**
    * @private
    * @type {string}
    */
-  this.cssClassName_ = goog.isDef(options.className) ?
-      options.className : 'ol-full-screen';
+  this.cssClassName_ = options.className ? options.className : 'ol-full-screen';
 
-  var label = goog.isDef(options.label) ? options.label : '\u2194';
+  var label = options.label ? options.label : '\u2194';
 
   /**
    * @private
    * @type {Node}
    */
-  this.labelNode_ = /** @type {Node} */ (goog.isString(label) ?
-          goog.dom.createTextNode(label) : label);
+  this.labelNode_ = goog.isString(label) ?
+      goog.dom.createTextNode(label) : label;
 
-  var labelActive = goog.isDef(options.labelActive) ?
-      options.labelActive : '\u00d7';
+  var labelActive = options.labelActive ? options.labelActive : '\u00d7';
 
   /**
    * @private
    * @type {Node}
    */
-  this.labelActiveNode_ = /** @type {Node} */ (goog.isString(labelActive) ?
-          goog.dom.createTextNode(labelActive) : labelActive);
+  this.labelActiveNode_ = goog.isString(labelActive) ?
+      goog.dom.createTextNode(labelActive) : labelActive;
 
-  var tipLabel = goog.isDef(options.tipLabel) ?
-      options.tipLabel : 'Toggle full-screen';
-  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+  var tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
+  var button = goog.dom.createDom('BUTTON', {
     'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen(),
     'type': 'button',
     'title': tipLabel
@@ -74,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,
@@ -85,7 +82,7 @@ ol.control.FullScreen = function(opt_options) {
    * @private
    * @type {boolean}
    */
-  this.keys_ = goog.isDef(options.keys) ? options.keys : false;
+  this.keys_ = options.keys !== undefined ? options.keys : false;
 
 };
 goog.inherits(ol.control.FullScreen, ol.control.Control);
@@ -109,18 +106,16 @@ ol.control.FullScreen.prototype.handleFullScreen_ = function() {
     return;
   }
   var map = this.getMap();
-  if (goog.isNull(map)) {
+  if (!map) {
     return;
   }
   if (goog.dom.fullscreen.isFullScreen()) {
     goog.dom.fullscreen.exitFullScreen();
   } else {
     var target = map.getTarget();
-    goog.asserts.assert(goog.isDefAndNotNull(target),
-        'target should be defined');
+    goog.asserts.assert(target, 'target should be defined');
     var element = goog.dom.getElement(target);
-    goog.asserts.assert(goog.isDefAndNotNull(element),
-        'element should be defined');
+    goog.asserts.assert(element, 'element should be defined');
     if (this.keys_) {
       goog.dom.fullscreen.requestFullScreenWithKeys(element);
     } else {
@@ -145,7 +140,7 @@ ol.control.FullScreen.prototype.handleFullScreenChange_ = function() {
     goog.dom.classlist.swap(button, opened, closed);
     goog.dom.replaceNode(this.labelNode_, this.labelActiveNode_);
   }
-  if (!goog.isNull(map)) {
+  if (map) {
     map.updateSize();
   }
 };

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');
@@ -40,14 +39,13 @@ ol.control.MousePositionProperty = {
  */
 ol.control.MousePosition = function(opt_options) {
 
-  var options = goog.isDef(opt_options) ? opt_options : {};
+  var options = opt_options ? opt_options : {};
 
-  var className = goog.isDef(options.className) ?
-      options.className : 'ol-mouse-position';
+  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 = goog.isDef(options.render) ?
+  var render = options.render ?
       options.render : ol.control.MousePosition.render;
 
   goog.base(this, {
@@ -60,10 +58,10 @@ ol.control.MousePosition = function(opt_options) {
       ol.Object.getChangeEventType(ol.control.MousePositionProperty.PROJECTION),
       this.handleProjectionChanged_, false, this);
 
-  if (goog.isDef(options.coordinateFormat)) {
+  if (options.coordinateFormat) {
     this.setCoordinateFormat(options.coordinateFormat);
   }
-  if (goog.isDef(options.projection)) {
+  if (options.projection) {
     this.setProjection(ol.proj.get(options.projection));
   }
 
@@ -71,8 +69,7 @@ ol.control.MousePosition = function(opt_options) {
    * @private
    * @type {string}
    */
-  this.undefinedHTML_ = goog.isDef(options.undefinedHTML) ?
-      options.undefinedHTML : '';
+  this.undefinedHTML_ = options.undefinedHTML ? options.undefinedHTML : '';
 
   /**
    * @private
@@ -110,7 +107,7 @@ goog.inherits(ol.control.MousePosition, ol.control.Control);
  */
 ol.control.MousePosition.render = function(mapEvent) {
   var frameState = mapEvent.frameState;
-  if (goog.isNull(frameState)) {
+  if (!frameState) {
     this.mapProjection_ = null;
   } else {
     if (this.mapProjection_ != frameState.viewState.projection) {
@@ -184,7 +181,7 @@ ol.control.MousePosition.prototype.handleMouseOut = function(browserEvent) {
  */
 ol.control.MousePosition.prototype.setMap = function(map) {
   goog.base(this, 'setMap', map);
-  if (!goog.isNull(map)) {
+  if (map) {
     var viewport = map.getViewport();
     this.listenerKeys.push(
         goog.events.listen(viewport, goog.events.EventType.MOUSEMOVE,
@@ -226,10 +223,10 @@ ol.control.MousePosition.prototype.setProjection = function(projection) {
  */
 ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
   var html = this.undefinedHTML_;
-  if (!goog.isNull(pixel) && !goog.isNull(this.mapProjection_)) {
-    if (goog.isNull(this.transform_)) {
+  if (pixel && this.mapProjection_) {
+    if (!this.transform_) {
       var projection = this.getProjection();
-      if (goog.isDef(projection)) {
+      if (projection) {
         this.transform_ = ol.proj.getTransformFromProjections(
             this.mapProjection_, projection);
       } else {
@@ -238,17 +235,17 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
     }
     var map = this.getMap();
     var coordinate = map.getCoordinateFromPixel(pixel);
-    if (!goog.isNull(coordinate)) {
+    if (coordinate) {
       this.transform_(coordinate, coordinate);
       var coordinateFormat = this.getCoordinateFormat();
-      if (goog.isDef(coordinateFormat)) {
+      if (coordinateFormat) {
         html = coordinateFormat(coordinate);
       } else {
         html = coordinate.toString();
       }
     }
   }
-  if (!goog.isDef(this.renderedHTML_) || html != this.renderedHTML_) {
+  if (!this.renderedHTML_ || html != this.renderedHTML_) {
     this.element.innerHTML = html;
     this.renderedHTML_ = html;
   }