4.3.0-beta.3

Use fractional coordinates for CSS positioning

.eslintignore

@@ -1,2 +1,3 @@
 examples/Jugl.js
 examples/resources/
+build/package/**/*webgl*

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,7 @@
+This issue tracker is for reporting bugs or feature requests, not for asking questions. For usage questions, refer to the (documentation)[http://openlayers.org/en/latest/doc/].
+
+Ready to submit your bug or feature request? Make sure these boxes are checked before submitting your issue. Thank you!
+
+- [ ] I have searched GitHub to see if a similar bug or feature request has already been reported.
+- [ ] If reporting a bug, I have tried with the latest version of OpenLayers (see 'LATEST' on https://openlayers.org/)
+- [ ] If reporting a bug, I have created a [CodePen](https://codepen.io) or prepared a stack trace (using the latest version and unminified code, so e.g. `ol-debug.js`, not `ol.js`) that shows the issue.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+Make sure these boxes are checked before submitting your pull request. Thank you!
+
+- [ ] This pull request addresses an issue that has been marked with the 'Pull request accepted' label.
+- [ ] It contains one or more small, incremental, logically separate commits, with no merge commits.
+- [ ] I have used clear commit messages.

.travis.yml

@@ -3,7 +3,10 @@ sudo: false
 language: node_js
 
 node_js:
-  - "6"
+  - "6.1"
+
+addons:
+  firefox: "52.0"
 
 cache:
   directories:
@@ -17,7 +20,7 @@ before_install:
 before_script:
   - "rm src/ol/renderer/webgl/*shader.js"
   - "sh -e /etc/init.d/xvfb start"
-  - "npm ls"
+  - "npm ls || true"
 
 script: "make ci"
 

Makefile

@@ -86,7 +86,7 @@ check-deps:
 	done ;\
 
 .PHONY: ci
-ci: lint build test test-rendering compile-examples check-examples apidoc
+ci: lint build test test-rendering package compile-examples check-examples apidoc
 
 .PHONY: compile-examples
 compile-examples: build/compiled-examples/all.combined.js
@@ -253,7 +253,7 @@ build/timestamps/eslint-timestamp: $(SRC_JS) $(SPEC_JS) $(SPEC_RENDERING_JS) \
                                    build/timestamps/node-modules-timestamp
 	@mkdir -p $(@D)
 	@echo "Running eslint..."
-	@./node_modules/.bin/eslint --quiet tasks test test_rendering src examples
+	@./node_modules/.bin/eslint tasks test test_rendering src examples
 	@touch $@
 
 build/timestamps/node-modules-timestamp: package.json
@@ -308,4 +308,6 @@ package:
 	@cp -r package build
 	@cd ./src && cp -r ol/* ../build/package
 	@rm build/package/typedefs.js
+	@cp css/ol.css build/package
 	./node_modules/.bin/jscodeshift --transform transforms/module.js build/package
+	npm run lint-package

README.md

@@ -9,9 +9,13 @@
 
 ## Getting Started
 
+Use one of the following methods to use OpenLayers in your project:
+
+- For use with mainstream bundlers and minifiers, install the [ol](https://www.npmjs.com/package/ol) npm package: `npm install ol`
+- Use `ol.js` and `ol.css` from (cdnjs)[https://cdnjs.com/libraries/openlayers]
 - Download the [latest release](https://openlayers.org/download/)
-- Install with npm: `npm install openlayers`
 - Clone the repo: `git clone git@github.com:openlayers/openlayers.git`
+- For use with Closure Library, install the [openlayers](https://npmjs.com/package/openlayers) npm package and read the [tutorial](http://openlayers.org/en/latest/doc/tutorials/closure.html).
 
 ## Supported Browsers
 
@@ -33,4 +37,3 @@ Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in
 
 - Need help? Find it on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers)
 - Follow [@openlayers](https://twitter.com/openlayers) on Twitter
-- Discuss with openlayers users on IRC in `#openlayers` at `chat.freenode`

changelog/upgrade-notes.md

@@ -2,6 +2,84 @@
 
 ### Next release
 
+#### `ol.interaction.Modify` deletes with `alt` key only
+
+To delete features with the modify interaction, press the `alt` key while clicking on an existing vertex.  If you want to configure the modify interaction with a different delete condition, use the `deleteCondition` option.  For example, to allow deletion on a single click with no modifier keys, configure the interaction like this:
+```js
+var interaction = new ol.interaction.Modify({
+  source: source,
+  deleteCondition: function(event) {
+    return ol.events.condition.noModifierKeys(event) && ol.events.condition.singleClick(event);
+  }
+});
+```
+
+The motivation for this change is to make the modify, draw, and snap interactions all work well together.  Previously, the use of these interactions with the default configuration would make it so you couldn't reliably add new vertices (click with no modifier) and delete existing vertices (click with no modifier).
+
+#### `ol.source.VectorTile` no longer has a `tilePixelRatio` option
+
+The `tilePixelRatio` option was only used for tiles in projections with `tile-pixels` as units. For tiles read with `ol.format.MVT` and the default tile loader, or tiles with the default pixel size of 4096 pixels, no changes are necessary. For the very rare cases that do not fall under these categories, a custom `tileLoadFunction` now needs to be configured on the `ol.source.VectorTile`. In addition to calling `tile.setFeatures()` and `tile.setProjection()`, it also needs to contain code like the following:
+```js
+var extent = tile.getFormat() instanceof ol.format.MVT ?
+  tile.getLastExtent() :
+  [0, 0, tilePixelRatio * tileSize, tilePixelRatio * tileSize];
+tile.setExtent(extent);
+```
+
+#### `ol.animate` now takes the shortest arc for rotation animation
+
+Usually rotation animations should animate along the shortest arc. There are rare occasions where a spinning animation effect is desired. So if you previously had something like
+```js
+map.getView().animate({
+  rotation: 2 * Math.PI,
+  duration: 2000
+});
+```
+we recommend to split the animation into two parts and use different easing functions. The code below results in the same effect as the snippet above did with previous versions:
+```js
+map.getView().animate({
+  rotation: Math.PI,
+  easing: ol.easing.easeIn
+}, {
+  rotation: 2 * Math.PI,
+  easing: ol.easing.easeOut
+});
+```
+
+### v4.2.0
+
+#### Return values of two `ol.style.RegularShape` getters have changed
+
+To provide a more consistent behaviour the following getters now return the same value that was given to constructor:
+
+`ol.style.RegularShape#getPoints` does not return the double amount of points anymore if a radius2 is set.
+
+`ol.style.RegularShape#getRadius2` will return `undefined` if no radius2 is set.
+
+### v4.1.0
+
+#### Adding duplicate layers to a map throws
+
+Previously, you could do this:
+```js
+map.addLayer(layer);
+map.addLayer(layer);
+```
+
+However, after adding a duplicate layer, things failed if you tried to remove that layer.
+
+Now, `map.addLayer()` throws if you try adding a layer that has already been added to the map.
+
+#### Simpler `constrainResolution` configuration
+
+The `constrainResolution` configuration for `ol.interaction.PinchZoom` and `ol.interaction.MouseWheelZoom`
+can now be set directly with an option in `ol.interaction.defaults`:
+```js
+ol.interaction.defaults({
+  constrainResolution: true
+});
+```
+
 ### v4.0.0
 
 #### Simpler `ol.source.Zoomify` `url` configuration

changelog/v4.1.0.md

@@ -0,0 +1,127 @@
+# 4.1.0
+
+## Summary
+
+The v4.1.0 release includes features and fixes from 91 pull requests.
+
+#### Interactive overview map
+
+The extent rectangle on the overview map can now be dragged to control the view for the main map.
+
+#### Setting min and max zoom for a view
+
+You can now change the min or max zoom for a view after it has been created.  This can be useful if you want to limit how far out users can zoom based on changes in viewport width (use `view.setMinZoom()` for this).
+
+#### Adding duplicate layers to a map throws
+
+Previously, you could do this:
+```js
+map.addLayer(layer);
+map.addLayer(layer);
+```
+
+However, after adding a duplicate layer, things failed if you tried to remove that layer.
+
+Now, `map.addLayer()` throws if you try adding a layer that has already been added to the map.
+
+#### Simpler `constrainResolution` configuration
+
+The `constrainResolution` configuration for `ol.interaction.PinchZoom` and `ol.interaction.MouseWheelZoom`
+can now be set directly with an option in `ol.interaction.defaults`:
+```js
+ol.interaction.defaults({
+  constrainResolution: true
+});
+```
+
+## Detailed changes
+
+ * [#6675](https://github.com/openlayers/openlayers/pull/6675) - Reset cursor when translate interaction is removed or deactivated ([@tchandelle](https://github.com/tchandelle))
+ * [#6707](https://github.com/openlayers/openlayers/pull/6707) - Set version when building ol package ([@tschaub](https://github.com/tschaub))
+ * [#6706](https://github.com/openlayers/openlayers/pull/6706) - Add ol.source.Cluster#getDistance function ([@fredj](https://github.com/fredj))
+ * [#6695](https://github.com/openlayers/openlayers/pull/6695) - Unique layers ([@tschaub](https://github.com/tschaub))
+ * [#6704](https://github.com/openlayers/openlayers/pull/6704) - Include typedefs.js in closure compiler tutorial build configurations ([@openlayers](https://github.com/openlayers))
+ * [#6702](https://github.com/openlayers/openlayers/pull/6702) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6693](https://github.com/openlayers/openlayers/pull/6693) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6691](https://github.com/openlayers/openlayers/pull/6691) - Move eslint globals to to test/.eslintrc ([@fredj](https://github.com/fredj))
+ * [#6689](https://github.com/openlayers/openlayers/pull/6689) - Add new constrainResolution option to olx.interaction.DefaultsOptions ([@fredj](https://github.com/fredj))
+ * [#6692](https://github.com/openlayers/openlayers/pull/6692) - Improve docs for MouseWheelZoom constrainResolution ([@ahocevar](https://github.com/ahocevar))
+ * [#6687](https://github.com/openlayers/openlayers/pull/6687) - Clip image only if the layer extent intersects the view extent ([@tchandelle](https://github.com/tchandelle))
+ * [#6686](https://github.com/openlayers/openlayers/pull/6686) - Update finishCoordinate in ol.interaction.Draw#removeLastPoint ([@fredj](https://github.com/fredj))
+ * [#6682](https://github.com/openlayers/openlayers/pull/6682) - Add example, docs and typedef for MouseWheelZoom's constrainResolution option ([@ahocevar](https://github.com/ahocevar))
+ * [#6683](https://github.com/openlayers/openlayers/pull/6683) - Add this jsdoc tag to ol.interaction.DragBox.defaultBoxEndCondition ([@fredj](https://github.com/fredj))
+ * [#6681](https://github.com/openlayers/openlayers/pull/6681) - Add constrainResolution in olx.interaction.PinchZoomOptions typedef ([@fredj](https://github.com/fredj))
+ * [#6671](https://github.com/openlayers/openlayers/pull/6671) - Add constraintResolution option to MouseWheelZoom for zoom with trackpad ([@kaiCu](https://github.com/kaiCu))
+ * [#6680](https://github.com/openlayers/openlayers/pull/6680) - Remove ol.DRAG_BOX_HYSTERESIS_PIXELS define and add option ([@fredj](https://github.com/fredj))
+ * [#6666](https://github.com/openlayers/openlayers/pull/6666) - Use the optional extent in ol.structs.RBush#getExtent ([@fredj](https://github.com/fredj))
+ * [#6670](https://github.com/openlayers/openlayers/pull/6670) - fix(package): update browserify to version 14.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#6664](https://github.com/openlayers/openlayers/pull/6664) - Update async to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6659](https://github.com/openlayers/openlayers/pull/6659) - Add crossOrigin to examples using ol.style.Icon ([@openlayers](https://github.com/openlayers))
+ * [#6658](https://github.com/openlayers/openlayers/pull/6658) - Fixes for raster source rendering ([@tschaub](https://github.com/tschaub))
+ * [#6620](https://github.com/openlayers/openlayers/pull/6620) - Fix the parsing of flat coordinates in GML2 for 3D geometies ([@Jenselme](https://github.com/Jenselme))
+ * [#6657](https://github.com/openlayers/openlayers/pull/6657) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6644](https://github.com/openlayers/openlayers/pull/6644) - Allow minZoom and maxZoom to be set on a view ([@tschaub](https://github.com/tschaub))
+ * [#6636](https://github.com/openlayers/openlayers/pull/6636) - Add test for the metric unit displayed in the scaleline ([@fredj](https://github.com/fredj))
+ * [#6598](https://github.com/openlayers/openlayers/pull/6598) - Add support of micrometers to scaleline ([@hajjimurad](https://github.com/hajjimurad))
+ * [#6643](https://github.com/openlayers/openlayers/pull/6643) - Add common transforms by default ([@tschaub](https://github.com/tschaub))
+ * [#6567](https://github.com/openlayers/openlayers/pull/6567) - Overlay visible before updating render position ([@nagytech](https://github.com/nagytech))
+ * [#6634](https://github.com/openlayers/openlayers/pull/6634) - Fix custom build when openlayers is installed from yarn package manager ([@Toilal](https://github.com/Toilal))
+ * [#6639](https://github.com/openlayers/openlayers/pull/6639) - Update async to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6635](https://github.com/openlayers/openlayers/pull/6635) - Add missing externs to custom builds examples ([@Toilal](https://github.com/Toilal))
+ * [#6631](https://github.com/openlayers/openlayers/pull/6631) - Fix request image size caclulation ([@ahocevar](https://github.com/ahocevar))
+ * [#6627](https://github.com/openlayers/openlayers/pull/6627) - Change css selector for user-select none ([@bartvde](https://github.com/bartvde))
+ * [#6626](https://github.com/openlayers/openlayers/pull/6626) - Respect cacheSize for reprojected caches ([@ahocevar](https://github.com/ahocevar))
+ * [#6623](https://github.com/openlayers/openlayers/pull/6623) - Fix outerWidth and outerHeight calculation in IE ([@ahocevar](https://github.com/ahocevar))
+ * [#6625](https://github.com/openlayers/openlayers/pull/6625) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6622](https://github.com/openlayers/openlayers/pull/6622) - Fix proj4 type ([@gberaudo](https://github.com/gberaudo))
+ * [#6617](https://github.com/openlayers/openlayers/pull/6617) - Use GeoServer/GWC caching when possible ([@ahocevar](https://github.com/ahocevar))
+ * [#6614](https://github.com/openlayers/openlayers/pull/6614) - Filter write util method ([@adube](https://github.com/adube))
+ * [#6616](https://github.com/openlayers/openlayers/pull/6616) - Fix closing tag in gml tests ([@fredj](https://github.com/fredj))
+ * [#6612](https://github.com/openlayers/openlayers/pull/6612) - Add support for WFS 1.0.0 to ol.format.WFS#writeTransaction ([@Jenselme](https://github.com/Jenselme))
+ * [#5887](https://github.com/openlayers/openlayers/pull/5887) - Interactive overview map ([@felixveysseyre](https://github.com/felixveysseyre))
+ * [#6610](https://github.com/openlayers/openlayers/pull/6610) - Fix event type case of MSPointerDown ([@ahocevar](https://github.com/ahocevar))
+ * [#6611](https://github.com/openlayers/openlayers/pull/6611) - Update jquery to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6609](https://github.com/openlayers/openlayers/pull/6609) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6606](https://github.com/openlayers/openlayers/pull/6606) - Reset dragSegments after vertex deletion ([@ahocevar](https://github.com/ahocevar))
+ * [#6523](https://github.com/openlayers/openlayers/pull/6523) - Add Gml2 serializers to support WFS-T 1.0.0 ([@Jenselme](https://github.com/Jenselme))
+ * [#6579](https://github.com/openlayers/openlayers/pull/6579) - Update slimerjs to v0.10.3 ([@fredj](https://github.com/fredj))
+ * [#6577](https://github.com/openlayers/openlayers/pull/6577) - Adding crossOrigin to optionsFromCapabilities ([@fredj](https://github.com/fredj))
+ * [#6604](https://github.com/openlayers/openlayers/pull/6604) - Fix RegularShape documentation ([@ahocevar](https://github.com/ahocevar))
+ * [#6603](https://github.com/openlayers/openlayers/pull/6603) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6601](https://github.com/openlayers/openlayers/pull/6601) - Update jquery to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6600](https://github.com/openlayers/openlayers/pull/6600) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6578](https://github.com/openlayers/openlayers/pull/6578) - Add ol.RenderOrderFunction typedef ([@icholy](https://github.com/icholy))
+ * [#6589](https://github.com/openlayers/openlayers/pull/6589) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6592](https://github.com/openlayers/openlayers/pull/6592) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6594](https://github.com/openlayers/openlayers/pull/6594) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6580](https://github.com/openlayers/openlayers/pull/6580) - Remove unused esprima package ([@fredj](https://github.com/fredj))
+ * [#6570](https://github.com/openlayers/openlayers/pull/6570) - Don't use deprecated sinon.stub(obj, 'meth', fn) ([@openlayers](https://github.com/openlayers))
+ * [#6569](https://github.com/openlayers/openlayers/pull/6569) - Return null if the layer was not found in the WMTS capabilities ([@fredj](https://github.com/fredj))
+ * [#6551](https://github.com/openlayers/openlayers/pull/6551) - Use the default fill and stroke color ([@fredj](https://github.com/fredj))
+ * [#6560](https://github.com/openlayers/openlayers/pull/6560) - Don’t crash if feature loader xhr response returns 500 ([@geosense](https://github.com/geosense))
+ * [#6559](https://github.com/openlayers/openlayers/pull/6559) - Remove unneeded type cast ([@fredj](https://github.com/fredj))
+ * [#6558](https://github.com/openlayers/openlayers/pull/6558) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6553](https://github.com/openlayers/openlayers/pull/6553) - Update proj4 to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6554](https://github.com/openlayers/openlayers/pull/6554) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6549](https://github.com/openlayers/openlayers/pull/6549) - Make getAnimating and cancelAnimations @api ([@bartvde](https://github.com/bartvde))
+ * [#6547](https://github.com/openlayers/openlayers/pull/6547) - Clean up left-over code from animation changes ([@bartvde](https://github.com/bartvde))
+ * [#6540](https://github.com/openlayers/openlayers/pull/6540) - More precise ol.Geolocation#getAccuracyGeometry return type ([@openlayers](https://github.com/openlayers))
+ * [#6539](https://github.com/openlayers/openlayers/pull/6539) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6535](https://github.com/openlayers/openlayers/pull/6535) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6529](https://github.com/openlayers/openlayers/pull/6529) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6530](https://github.com/openlayers/openlayers/pull/6530) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6515](https://github.com/openlayers/openlayers/pull/6515) - Add view methods for getting max zoom, min zoom, and any zoom for a resolution ([@tschaub](https://github.com/tschaub))
+ * [#6520](https://github.com/openlayers/openlayers/pull/6520) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6518](https://github.com/openlayers/openlayers/pull/6518) - Fix olx.style.IconOptions.prototype.src type ([@fredj](https://github.com/fredj))
+ * [#6513](https://github.com/openlayers/openlayers/pull/6513) - Update async to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6512](https://github.com/openlayers/openlayers/pull/6512) - Complete animations at target values ([@tschaub](https://github.com/tschaub))
+ * [#6511](https://github.com/openlayers/openlayers/pull/6511) - Revert accidently committed example change ([@ahocevar](https://github.com/ahocevar))
+ * [#6507](https://github.com/openlayers/openlayers/pull/6507) - ol.DEBUG no longer needed in transforms/module.js ([@probins](https://github.com/probins))
+ * [#6505](https://github.com/openlayers/openlayers/pull/6505) - Update ol package to include Browserify config ([@tschaub](https://github.com/tschaub))
+ * [#6504](https://github.com/openlayers/openlayers/pull/6504) - Determine if we should handle the drawing while the pointer is moving ([@tchandelle](https://github.com/tchandelle))
+ * [#6499](https://github.com/openlayers/openlayers/pull/6499) - Be more tolerant when comparing vertices when modifying a circle ([@tchandelle](https://github.com/tchandelle))
+ * [#6498](https://github.com/openlayers/openlayers/pull/6498) - Travis failing on master - use Node v6.1.x ([@ahocevar](https://github.com/ahocevar))
+ * [#6493](https://github.com/openlayers/openlayers/pull/6493) - Vector tile cleanup ([@ahocevar](https://github.com/ahocevar))
+ * [#6483](https://github.com/openlayers/openlayers/pull/6483) - Fix renderer.canvas.TileLayer to calculate correct canvas height for drawing. ([@nearmap](https://github.com/nearmap))
+ * [#6488](https://github.com/openlayers/openlayers/pull/6488) - Do not draw circle when pointer not moved and freehand is on ([@tchandelle](https://github.com/tchandelle))
+ * [#6491](https://github.com/openlayers/openlayers/pull/6491) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))

changelog/v4.1.1.md

@@ -0,0 +1,13 @@
+# 4.1.1
+
+## Summary
+
+This is a patch release to fix several minor issues and two regressions in the [4.1.0 release](https://github.com/openlayers/openlayers/releases/tag/v4.1.0).
+
+## Changes
+
+ * [#6711](https://github.com/openlayers/openlayers/pull/6711) - Correct path to cleancss ([@tschaub](https://github.com/tschaub))
+ * [#6728](https://github.com/openlayers/openlayers/pull/6728) - Fix tissot examples docs ([@fredj](https://github.com/fredj))
+ * [#6732](https://github.com/openlayers/openlayers/pull/6732) - Use firefox < 53 in travis ([@fredj](https://github.com/fredj))
+ * [#6741](https://github.com/openlayers/openlayers/pull/6741) - Allow user selection in overlay container ([@fredj](https://github.com/fredj))
+ * [#6755](https://github.com/openlayers/openlayers/pull/6755) - Add missing goog.require ([@fredj](https://github.com/fredj))

changelog/v4.2.0.md

@@ -0,0 +1,151 @@
+# 4.2.0
+
+## Summary
+
+The v4.2.0 release includes features and fixes from 87 pull requests.
+
+#### New `movestart` event on `ol.Map`
+
+The map now has a `movestart` event, as countarpart to the already existing `moveend` event.
+
+#### New `moveTolerance` option in `ol.Map`
+
+Some touch devices do not play well with OpenLayers's way of detecting clicks. To overcome this, a new `moveTolerance` option was introduced, so users can override the 1 pixel threshold above which a touch-release sequence won't be considered a click any more.
+
+#### Support for multiple layers in `ol.format.TopoJSON`
+
+With the new `layerName` and `layers` options, applications can extract the layer as additional attribute for vector features from `ol.format.TopoJSON`. This can especially be useful for styling vector tile layers.
+
+#### New `tileJSON` option for `ol.source.TileJSON`
+
+Like `ol.source.TileUTFGrid`, `ol.source.TileJSON` now also has a `tileJSON` option to configue it with inline TileJSON instead of a TileJSON URL.
+
+#### New `ol.format.filter.during` filter
+
+Although OpenLayers has no support for WFS v2.0, we added `ol.format.filter.during` for the `During` temporal operator.
+
+#### Improved vector tile rendering at non-native resolutions
+
+The vector tile renderer now uses an internal tile grid for all resolutions to cache pre-rendered tiles, even if the tile source does not have tiles for the viewed resolution. This improves rendering quality and performance.
+
+#### New `insertVertexCondition` for `ol.interaction.Modify`
+
+Applications can now control whether a vertex will be inserted into the modified geometry. This makes it easier to modify custom geometries.
+
+#### New `callback` option for `ol.View#fit()`
+
+To allow applications to perform custom actions when an animation associated with `ol.View#fit()` is completed, that method now has a new `callback` option.
+
+#### New `ol.View#getInteracting()` getter
+
+Like `ol.View#getAnimating()` returns `true` during a view animation, `ol.View#getInteracting()` returns `true` while users are interacting with the view.
+
+#### New `hasZ` option for `ol.format.WFS#writeTransaction()`
+
+When the new `hasZ` option is set to `true`, 3D coordinates will be preserved and encoded when writing a WFS transaction.
+
+#### New `wrapX` option for `ol.source.Stamen`
+
+Like other tile sources, `ol.source.Stamen` now also has a `wrapX` option, which allows applications to turn off wrapping the world in x direction.
+
+#### Label support for `ol.Graticule`
+
+The `ol.Graticule` component has several new options to add and control the output of labels. To turn on labelling, configure `ol.Graticule` with `showLabels: true`. The new options to control label formatting are `lonLabelFormatter`, `latLabelFormatter`, `lonLabelPosition` and `latLabelPosition`.
+
+#### Return values of two `ol.style.RegularShape` getters have changed
+
+To provide a more consistent behaviour the following getters now return the same value that was given to constructor:
+
+`ol.style.RegularShape#getPoints` does not return the double amount of points anymore if a radius2 is set.
+
+`ol.style.RegularShape#getRadius2` will return `undefined` if no radius2 is set.
+
+## Detailed changes
+
+ * [#6912](https://github.com/openlayers/openlayers/pull/6912) - Use class instead of style for Translate cursor ([@ahocevar](https://github.com/ahocevar))
+ * [#6858](https://github.com/openlayers/openlayers/pull/6858) - Webgl vector improvements ([@GaborFarkas](https://github.com/GaborFarkas))
+ * [#6890](https://github.com/openlayers/openlayers/pull/6890) - Add a movestart event ([@ahocevar](https://github.com/ahocevar))
+ * [#6910](https://github.com/openlayers/openlayers/pull/6910) - Avoid duplicates in Observables list ([@ahocevar](https://github.com/ahocevar))
+ * [#6902](https://github.com/openlayers/openlayers/pull/6902) - Require minimum duration for kinetic animation ([@ahocevar](https://github.com/ahocevar))
+ * [#6904](https://github.com/openlayers/openlayers/pull/6904) - chore(package): update sinon to version 2.3.4 ([@openlayers](https://github.com/openlayers))
+ * [#6901](https://github.com/openlayers/openlayers/pull/6901) - Added release note for changed methods of ol.style.regularShape ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#6886](https://github.com/openlayers/openlayers/pull/6886) - Make ol.source.Cluster extensible ([@gberaudo](https://github.com/gberaudo))
+ * [#6887](https://github.com/openlayers/openlayers/pull/6887) - Disable rotation for views with enableRotation: false ([@ahocevar](https://github.com/ahocevar))
+ * [#6900](https://github.com/openlayers/openlayers/pull/6900) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6897](https://github.com/openlayers/openlayers/pull/6897) - ProjectionLike in proj.getPointResolution ([@probins](https://github.com/probins))
+ * [#6888](https://github.com/openlayers/openlayers/pull/6888) - Add note about custom functions to getPointResolution ([@probins](https://github.com/probins))
+ * [#6893](https://github.com/openlayers/openlayers/pull/6893) - Fix decimals options when writing features ([@tchandelle](https://github.com/tchandelle))
+ * [#6759](https://github.com/openlayers/openlayers/pull/6759) - Regular shape points ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#6892](https://github.com/openlayers/openlayers/pull/6892) - Accept a ol.ProjectionLike instead of ol.proj.Projection ([@fredj](https://github.com/fredj))
+ * [#6883](https://github.com/openlayers/openlayers/pull/6883) - Remove unused ol.pointer.EventSource#getMapping function ([@fredj](https://github.com/fredj))
+ * [#6870](https://github.com/openlayers/openlayers/pull/6870) - Center map on proper earth, not one to the left ([@kannes](https://github.com/kannes))
+ * [#6872](https://github.com/openlayers/openlayers/pull/6872) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6876](https://github.com/openlayers/openlayers/pull/6876) - Only test ol.interaction.DragAndDrop if FileReader is supported ([@fredj](https://github.com/fredj))
+ * [#6874](https://github.com/openlayers/openlayers/pull/6874) - Remove unused var from ol.proj ([@probins](https://github.com/probins))
+ * [#6875](https://github.com/openlayers/openlayers/pull/6875) - chore(package): update sinon to version 2.3.2 ([@openlayers](https://github.com/openlayers))
+ * [#6867](https://github.com/openlayers/openlayers/pull/6867) - add getArea to api ([@cs09g](https://github.com/cs09g))
+ * [#6863](https://github.com/openlayers/openlayers/pull/6863) - change size to optional ([@cs09g](https://github.com/cs09g))
+ * [#6864](https://github.com/openlayers/openlayers/pull/6864) - fix(package): update closure-util to version 1.21.0 ([@openlayers](https://github.com/openlayers))
+ * [#6834](https://github.com/openlayers/openlayers/pull/6834) - Move tolerance option ([@notnotse](https://github.com/notnotse))
+ * [#6856](https://github.com/openlayers/openlayers/pull/6856) - Fix creation of new URL in readSharedStyle_ and readSharedStyleMap_ ([@oterral](https://github.com/oterral))
+ * [#6852](https://github.com/openlayers/openlayers/pull/6852) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6851](https://github.com/openlayers/openlayers/pull/6851) - Register/unregister listeners in setActive ([@ahocevar](https://github.com/ahocevar))
+ * [#6832](https://github.com/openlayers/openlayers/pull/6832) - Force state of error tiles when usInterimTilesOnError is false ([@oterral](https://github.com/oterral))
+ * [#6849](https://github.com/openlayers/openlayers/pull/6849) - Create URL object only when we can ([@oterral](https://github.com/oterral))
+ * [#6845](https://github.com/openlayers/openlayers/pull/6845) - Snap on circles ([@tchandelle](https://github.com/tchandelle))
+ * [#6842](https://github.com/openlayers/openlayers/pull/6842) - add condition to check if active ([@cs09g](https://github.com/cs09g))
+ * [#6844](https://github.com/openlayers/openlayers/pull/6844) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6841](https://github.com/openlayers/openlayers/pull/6841) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6839](https://github.com/openlayers/openlayers/pull/6839) - Update async to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6838](https://github.com/openlayers/openlayers/pull/6838) - fix(package): update handlebars to version 4.0.10 ([@openlayers](https://github.com/openlayers))
+ * [#6817](https://github.com/openlayers/openlayers/pull/6817) - Multiple layers in TopoJSON vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#6833](https://github.com/openlayers/openlayers/pull/6833) - Fix geojson-vt example for line and point geometries ([@oterral](https://github.com/oterral))
+ * [#6829](https://github.com/openlayers/openlayers/pull/6829) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6819](https://github.com/openlayers/openlayers/pull/6819) - Adjust/fix API for working with vector tile features ([@ahocevar](https://github.com/ahocevar))
+ * [#6818](https://github.com/openlayers/openlayers/pull/6818) - Add tileJSON option to ol.source.TileJSON ([@ahocevar](https://github.com/ahocevar))
+ * [#6805](https://github.com/openlayers/openlayers/pull/6805) - Display country name on click select ([@fredj](https://github.com/fredj))
+ * [#6813](https://github.com/openlayers/openlayers/pull/6813) - Prepend the version with a v ([@tschaub](https://github.com/tschaub))
+ * [#6814](https://github.com/openlayers/openlayers/pull/6814) - Re-add ol.render.Feature#getGeometry() ([@ahocevar](https://github.com/ahocevar))
+ * [#6812](https://github.com/openlayers/openlayers/pull/6812) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6786](https://github.com/openlayers/openlayers/pull/6786) - Add ol.format.filter.during ([@fredj](https://github.com/fredj))
+ * [#6806](https://github.com/openlayers/openlayers/pull/6806) - Add note about features with the same id ([@drnextgis](https://github.com/drnextgis))
+ * [#6802](https://github.com/openlayers/openlayers/pull/6802) - Remove unused setFeatures and getFormat methods ([@ahocevar](https://github.com/ahocevar))
+ * [#6801](https://github.com/openlayers/openlayers/pull/6801) - Add getId method for ol.render.Feature ([@ahocevar](https://github.com/ahocevar))
+ * [#6778](https://github.com/openlayers/openlayers/pull/6778) - Add a small tolerance when testing pointer event positions ([@fredj](https://github.com/fredj))
+ * [#6796](https://github.com/openlayers/openlayers/pull/6796) - Re-add accidently dropped condition ([@ahocevar](https://github.com/ahocevar))
+ * [#6798](https://github.com/openlayers/openlayers/pull/6798) - chore(package): update clean-css-cli to version 4.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#6795](https://github.com/openlayers/openlayers/pull/6795) - Fix ol.DrawGeometryFunctionType coordinates argument type ([@fredj](https://github.com/fredj))
+ * [#6797](https://github.com/openlayers/openlayers/pull/6797) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6779](https://github.com/openlayers/openlayers/pull/6779) - Decouple source and rendered tile grid of vector tile sources ([@ahocevar](https://github.com/ahocevar))
+ * [#6785](https://github.com/openlayers/openlayers/pull/6785) - Add insertVertexCondition to ol.interaction.Modify options ([@fredj](https://github.com/fredj))
+ * [#6792](https://github.com/openlayers/openlayers/pull/6792) - Create intermediate canvas when resolutions have changed ([@ahocevar](https://github.com/ahocevar))
+ * [#6790](https://github.com/openlayers/openlayers/pull/6790) - Update resemblejs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6784](https://github.com/openlayers/openlayers/pull/6784) - chore(package): update clean-css-cli to version 4.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#6556](https://github.com/openlayers/openlayers/pull/6556) - Reading kml xunits/yunits insetPixels ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#6775](https://github.com/openlayers/openlayers/pull/6775) - Update closure-util to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6774](https://github.com/openlayers/openlayers/pull/6774) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6770](https://github.com/openlayers/openlayers/pull/6770) - Enforce the "no missing requires" rule ([@tschaub](https://github.com/tschaub))
+ * [#6772](https://github.com/openlayers/openlayers/pull/6772) - Remove html tag from shortdesc ([@fredj](https://github.com/fredj))
+ * [#6769](https://github.com/openlayers/openlayers/pull/6769) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6757](https://github.com/openlayers/openlayers/pull/6757) - Fix crashing on creation of snap-interaction, if Circle is among the features to snap to. ([@hajjimurad](https://github.com/hajjimurad))
+ * [#6766](https://github.com/openlayers/openlayers/pull/6766) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6765](https://github.com/openlayers/openlayers/pull/6765) - Add new callback function to view.FitOptions ([@fredj](https://github.com/fredj))
+ * [#6764](https://github.com/openlayers/openlayers/pull/6764) - Added View#getInteracting() to the api ([@mblinsitu](https://github.com/mblinsitu))
+ * [#6760](https://github.com/openlayers/openlayers/pull/6760) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6761](https://github.com/openlayers/openlayers/pull/6761) - Update async to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6755](https://github.com/openlayers/openlayers/pull/6755) - Add missing goog.require ([@fredj](https://github.com/fredj))
+ * [#6751](https://github.com/openlayers/openlayers/pull/6751) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6750](https://github.com/openlayers/openlayers/pull/6750) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6741](https://github.com/openlayers/openlayers/pull/6741) - Allow user selection in overlay container ([@fredj](https://github.com/fredj))
+ * [#6744](https://github.com/openlayers/openlayers/pull/6744) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6737](https://github.com/openlayers/openlayers/pull/6737) - Graticule labels ([@ahocevar](https://github.com/ahocevar))
+ * [#6740](https://github.com/openlayers/openlayers/pull/6740) - Fix spelling ([@fredj](https://github.com/fredj))
+ * [#6730](https://github.com/openlayers/openlayers/pull/6730) - Update metalsmith-layouts to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#6732](https://github.com/openlayers/openlayers/pull/6732) - Use firefox < 53 in travis ([@fredj](https://github.com/fredj))
+ * [#6677](https://github.com/openlayers/openlayers/pull/6677) - Add an option to writeTransaction to support 3D geometries ([@Jenselme](https://github.com/Jenselme))
+ * [#6524](https://github.com/openlayers/openlayers/pull/6524) - Don't append feature prefix twice in WFS requests ([@Jenselme](https://github.com/Jenselme))
+ * [#6727](https://github.com/openlayers/openlayers/pull/6727) - Add default value in doc for the hitTolerance option ([@fredj](https://github.com/fredj))
+ * [#6724](https://github.com/openlayers/openlayers/pull/6724) - Add wrapX option to Stamen source ([@fredj](https://github.com/fredj))
+ * [#6728](https://github.com/openlayers/openlayers/pull/6728) - Fix tissot examples docs ([@fredj](https://github.com/fredj))
+ * [#6725](https://github.com/openlayers/openlayers/pull/6725) - Update dependencies to enable Greenkeeper 🌴 ([@openlayers](https://github.com/openlayers))
+ * [#6711](https://github.com/openlayers/openlayers/pull/6711) - Correct path to cleancss ([@tschaub](https://github.com/tschaub))

config/jsdoc/api/conf.json

@@ -1,7 +1,7 @@
 {
     "opts": {
         "recurse": true,
-        "template": "config/jsdoc/api/template"
+        "template": "../../config/jsdoc/api/template"
     },
     "tags": {
         "allowUnknownTags": true
@@ -16,12 +16,12 @@
         ]
     },
     "plugins": [
-        "node_modules/jsdoc/plugins/markdown",
-        "config/jsdoc/api/plugins/inheritdoc",
-        "config/jsdoc/api/plugins/typedefs",
-        "config/jsdoc/api/plugins/events",
-        "config/jsdoc/api/plugins/observable",
-        "config/jsdoc/api/plugins/api"
+        "plugins/markdown",
+        "../../config/jsdoc/api/plugins/inheritdoc",
+        "../../config/jsdoc/api/plugins/typedefs",
+        "../../config/jsdoc/api/plugins/events",
+        "../../config/jsdoc/api/plugins/observable",
+        "../../config/jsdoc/api/plugins/api"
     ],
     "markdown": {
         "parser": "gfm"

config/jsdoc/api/plugins/observable.js

@@ -41,7 +41,7 @@ exports.handlers = {
           cls.observables = [];
         }
         observable = observables[doclet.observable];
-        if (cls.observables.indexOf(observable) == -1) {
+        if (observable.type && cls.observables.indexOf(observable) == -1) {
           cls.observables.push(observable);
         }
         if (!cls.fires) {

config/jsdoc/api/template/tmpl/observables.tmpl

@@ -16,8 +16,10 @@
   <tbody>
   <?js
       var self = this;
+      var propsByName = {};
       props.forEach(function(prop) {
-        if (!prop) { return; }
+        if (!prop || propsByName[prop.name]) { return; }
+        propsByName[prop.name] = prop;
         var setter = prop.readonly ? 'no' : 'yes';
   ?>
 

config/jsdoc/info/conf.json

@@ -1,7 +1,7 @@
 {
     "opts": {
         "recurse": true,
-        "template": "config/jsdoc/info"
+        "template": "../../config/jsdoc/info"
     },
     "tags": {
         "allowUnknownTags": true
@@ -10,8 +10,8 @@
         "includePattern": "\\.js$"
     },
     "plugins": [
-        "config/jsdoc/info/api-plugin",
-        "config/jsdoc/info/define-plugin",
-        "config/jsdoc/info/virtual-plugin"
+        "../../config/jsdoc/info/api-plugin",
+        "../../config/jsdoc/info/define-plugin",
+        "../../config/jsdoc/info/virtual-plugin"
     ]
 }

config/jsdoc/info/publish.js

@@ -3,7 +3,6 @@
  * an api tag) and boolean defines (with a define tag and a default value).
  */
 var assert = require('assert');
-var fs = require('fs');
 var path = require('path');
 
 
@@ -89,7 +88,6 @@ exports.publish = function(data, opts) {
         types: getTypes(doc.type.names)
       });
     } else {
-      var types;
       var symbol = {
         name: doc.longname,
         kind: doc.kind,
@@ -169,13 +167,15 @@ 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));
+  });
 
 };

css/ol.css

@@ -34,16 +34,32 @@
 .ol-unsupported {
   display: none;
 }
-.ol-viewport .ol-unselectable {
+.ol-viewport, .ol-unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
-
+.ol-selectable {
+  -webkit-touch-callout: default;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+.ol-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+.ol-grab {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
 .ol-control {
   position: absolute;
   background-color: rgba(255,255,255,0.4);
@@ -239,3 +255,7 @@
 .ol-overviewmap-box {
   border: 2px dotted rgba(0,60,136,0.7);
 }
+
+.ol-overviewmap .ol-overviewmap-box:hover {
+  cursor: move;
+}

doc/errors/index.md

@@ -220,3 +220,7 @@ The `{-y}` placeholder requires a tile grid with extent.
 ### 57
 
 At least 2 conditions are required.
+
+### 58
+
+Duplicate item added to a unique collection.  For example, it may be that you tried to add the same layer to a map twice.  Check for calls to `map.addLayer()` or other places where the map's layer collection is modified.

doc/index.hbs

@@ -11,7 +11,7 @@ For a more in-depth overview of OpenLayers core concepts, check out the [tutoria
 
 Make sure to also check out the [OpenLayers workshop](/workshop/).
 
-Find additional reference material in the [API docs](../apidoc).
+Find additional reference material in the [API docs](../apidoc) and [examples](../examples).
 
 # Frequently Asked Questions (FAQ)
 
@@ -19,4 +19,4 @@ We have put together a document that lists [Frequently Asked Questions (FAQ)](fa
 
 # More questions?
 
-If you cannot find an answer in the documentation or the FAQ, you can ask your question on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers).
+If you cannot find an answer in the documentation or the FAQ, you can search [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers). If you cannot find an answer there, ask a new question there, using the tag 'openlayers'.

doc/tutorials/browserify.md

@@ -5,57 +5,56 @@ layout: doc.hbs
 
 # Introduction
 
-When going beyond modifying existing examples you might be looking for a
-way to setup your own code with dependency management together with external
-dependencies like OpenLayers.
+When going beyond modifying existing examples you might be looking for a way to setup your own code with dependency management together with external dependencies like OpenLayers.
 
-This tutorial serves as a suggested project setup using NPM and Browserify
-for the most basic needs. There are several other options and in particular
-you might be interested in 
-[compiling your own code together with OpenLayers](closure.html).
+This tutorial serves as a suggested project setup using NPM and Browserify for the most basic needs. There are several other options, and in particular you might be interested in a more modern one (ES2015) [using Webpack with OpenLayers](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8).
 
 ## Initial steps
 
-Create a new empty directory for your project and navigate to it by running
-`mkdir new-project && cd new-project`. Initialize your project using `npm init`
-and answer the questions asked.
+Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
 
-At this point you can ask NPM to add required dependencies by running
-`npm install --save-dev openlayers browserify watchify uglify-js`. Watchify and
-Uglify will be used to monitor for changes and to build into a minified
-bundle.
+Add OpenLayers as dependency to your application with `npm install --save ol`.
+
+At this point you can ask NPM to add required development dependencies by running
+```
+npm install --save-dev cssify browserify cssify http-server uglify-js watchify
+npm install --save-dev babelify babel-plugin-transform-es2015-modules-commonjs
+```
+We will be using `cssify` to include the css definitions required by OpenLayers in our bundle. `watchify`, `http-server` and `uglify-js` are used to monitor for changes and to build into a minified bundle. `babelify` and `babel-plugin-transform-es2015-modules-commonjs` are used to make the `ol` package, which was created using ES2015 modules, work with CommonJS.
 
 ## Application code and index.html
 
 Place your application code in `index.js`. Here is a simple starting point:
 
 ```js
-var ol = require('openlayers');
- 
-var map = new ol.Map({
+require('ol/ol.css');
+var ol_Map = require('ol/map').default;
+var ol_layer_Tile = require('ol/layer/tile').default;
+var ol_source_OSM = require('ol/source/osm').default;
+var ol_View = require('ol/view').default;
+
+var map = new ol_Map({
   target: 'map',
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new ol_layer_Tile({
+      source: new ol_source_OSM()
     })
   ],
-  view: new ol.View({
+  view: new ol_View({
     center: [0, 0],
     zoom: 0
   })
 });
 ```
 
-You will also need an `ìndex.html` file that will use your bundle. Here is a simple
-example:
+You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Using Browserify with OpenLayers</title>
-    <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css" type="text/css">
     <style>
       #map {
         width: 400px;
@@ -72,18 +71,17 @@ example:
 
 ## Creating a bundle
 
-With simple scripts you can introduce the commands `npm run build` and `npm start` to
-manually build your bundle and watch for changes, respectively. Add the following
-to the script section in `package.json`:
+With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
 
 ```json
 "scripts": {
-  "start": "watchify index.js --outfile bundle.js",
-  "build": "browserify index.js | uglifyjs --compress --output bundle.js"
+  "start": "watchify index.js -g cssify --outfile bundle.js & http-server",
+  "build": "browserify -g cssify index.js | uglifyjs --compress --output bundle.js"
 }
 ```
+Now to test your application open http://localhost:8080/ in your browser. `watchify` will update `bundle.js` whenever you change something. You simply need to reload the page in your browser to see the changes.
+```
+$ npm start
+```
 
-Note that `bundle.js` will contain your application code and all dependencies
-used in your application, in this case the official full build of OpenLayers.
-If you only need parts of OpenLayers you can create
-[custom builds](../../builder).
+Note that `bundle.js` will contain your application code and all dependencies used in your application. From OpenLayers, it only contains the required components.

doc/tutorials/closure.md

@@ -5,11 +5,15 @@ layout: doc.hbs
 
 # Compiling Application with Closure Compiler
 
+**Note**: When building an application with dependencies that are available as [npm](https://npmjs.com/) packages, it will probably be easier to use the [ol](https://npmjs.com/package/ol) package and follow the instructions there.
+
 The OpenLayers code uses the Closure Library, and it is compiled with the
 Closure Compiler. Using OpenLayers in an application does not require using
 Closure. But using Closure in an OpenLayers application is possible. And this
 is what this tutorial is about.
 
+When you want to include OpenLayers as separate script without bundling with your application, follow the [Creating custom builds](./custom-builds.html) tutorial instead.
+
 This tutorial will teach you how to set up an OpenLayers application based on
 the [`closure-util`](https://github.com/openlayers/closure-util) node package,
 which provides utilities for working with Closure. Using `closure-util` is one
@@ -172,6 +176,7 @@ The minimum config file looks like this:
       "ol.ENABLE_WEBGL=false"
     ],
     "js": [
+      "node_modules/openlayers/src/ol/typedefs.js",
       "node_modules/openlayers/externs/olx.js",
       "node_modules/openlayers/externs/oli.js"
     ],
@@ -223,6 +228,7 @@ Here is a version of `config.json` with more compilation checks enabled:
       "ol.ENABLE_WEBGL=false"
     ],
     "js": [
+      "node_modules/openlayers/src/ol/typedefs.js",
       "node_modules/openlayers/externs/olx.js",
       "node_modules/openlayers/externs/oli.js"
     ],

doc/tutorials/custom-builds.md

@@ -51,7 +51,9 @@ Creating a custom build requires writing a build configuration file. The format
   "compile": {
     "externs": [
       "externs/bingmaps.js",
+      "externs/cartodb.js",
       "externs/closure-compiler.js",
+      "externs/esrijson.js",
       "externs/geojson.js",
       "externs/oli.js",
       "externs/olx.js",
@@ -201,9 +203,16 @@ Now let's try a more complicated example: [`heatmaps-earthquakes`](https://openl
   ],
   "compile": {
     "externs": [
+      "externs/bingmaps.js",
+      "externs/cartodb.js",
       "externs/closure-compiler.js",
+      "externs/esrijson.js",
+      "externs/geojson.js",
       "externs/olx.js",
-      "externs/oli.js"
+      "externs/oli.js",
+      "externs/proj4js.js",
+      "externs/tilejson.js",
+      "externs/topojson.js"
     ],
     "define": [
       "ol.ENABLE_WEBGL=false",

doc/tutorials/raster-reprojection.md

@@ -45,7 +45,7 @@ The easiest way to use a custom projection is to add the [Proj4js](http://proj4j
 Following example shows definition of a [British National Grid](https://epsg.io/27700):
 
 ``` html
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
 ```
 
 ``` javascript

examples/animation.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.easing');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
@@ -73,9 +74,16 @@ onClick('rotate-right', function() {
 });
 
 onClick('rotate-around-rome', function() {
+  // Rotation animation takes the shortest arc, so animate in two parts
+  var rotation = view.getRotation();
   view.animate({
-    rotation: view.getRotation() + 2 * Math.PI,
-    anchor: rome
+    rotation: rotation + Math.PI,
+    anchor: rome,
+    easing: ol.easing.easeIn
+  }, {
+    rotation: rotation + 2 * Math.PI,
+    anchor: rome,
+    easing: ol.easing.easeOut
   });
 });
 
@@ -103,10 +111,19 @@ onClick('bounce-to-istanbul', function() {
 });
 
 onClick('spin-to-rome', function() {
+  // Rotation animation takes the shortest arc, so animate in two parts
+  var center = view.getCenter();
   view.animate({
+    center: [
+      center[0] + (rome[0] - center[0]) / 2,
+      center[1] + (rome[1] - center[1]) / 2
+    ],
+    rotation: Math.PI,
+    easing: ol.easing.easeIn
+  }, {
     center: rome,
     rotation: 2 * Math.PI,
-    duration: 2000
+    easing: ol.easing.easeOut
   });
 });
 

examples/bing-maps.html

@@ -12,7 +12,8 @@ cloak:
  <select id="layer-select">
    <option value="Aerial">Aerial</option>
    <option value="AerialWithLabels" selected>Aerial with labels</option>
-   <option value="Road">Road</option>
+   <option value="Road">Road (static)</option>
+   <option value="RoadOnDemand">Road (dynamic)</option>
    <option value="collinsBart">Collins Bart</option>
    <option value="ordnanceSurvey">Ordnance Survey</option>
  </select>

examples/bing-maps.js

@@ -6,6 +6,7 @@ goog.require('ol.source.BingMaps');
 
 var styles = [
   'Road',
+  'RoadOnDemand',
   'Aerial',
   'AerialWithLabels',
   'collinsBart',

examples/box-selection.js

@@ -45,29 +45,29 @@ var dragBox = new ol.interaction.DragBox({
 
 map.addInteraction(dragBox);
 
-var infoBox = document.getElementById('info');
-
 dragBox.on('boxend', function() {
   // features that intersect the box are added to the collection of
-  // selected features, and their names are displayed in the "info"
-  // div
-  var info = [];
+  // selected features
   var extent = dragBox.getGeometry().getExtent();
   vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
     selectedFeatures.push(feature);
-    info.push(feature.get('name'));
   });
-  if (info.length > 0) {
-    infoBox.innerHTML = info.join(', ');
-  }
 });
 
 // clear selection when drawing a new box and when clicking on the map
 dragBox.on('boxstart', function() {
   selectedFeatures.clear();
-  infoBox.innerHTML = ' ';
 });
-map.on('click', function() {
-  selectedFeatures.clear();
-  infoBox.innerHTML = ' ';
+
+var infoBox = document.getElementById('info');
+
+selectedFeatures.on(['add', 'remove'], function() {
+  var names = selectedFeatures.getArray().map(function(feature) {
+    return feature.get('name');
+  });
+  if (names.length > 0) {
+    infoBox.innerHTML = names.join(', ');
+  } else {
+    infoBox.innerHTML = 'No countries selected';
+  }
 });

examples/cluster.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Clustered Features
-shortdesc: Example of using <code>ol.source.Cluster</code>.
+shortdesc: Example of using ol.source.Cluster.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"

examples/color-manipulation.js

@@ -97,7 +97,7 @@ function rgb2xyz(x) {
 
 function xyz2rgb(x) {
   return 255 * (x <= 0.0031308 ?
-      12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
+    12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
 }
 
 var raster = new ol.source.Raster({

examples/custom-interactions.js

@@ -142,7 +142,7 @@ var lineFeature = new ol.Feature(
 
 var polygonFeature = new ol.Feature(
     new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
-        [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
+      [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
 
 
 var map = new ol.Map({

examples/draw-and-modify-features.js

@@ -1,9 +1,8 @@
-goog.require('ol.Collection');
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.events.condition');
 goog.require('ol.interaction.Draw');
 goog.require('ol.interaction.Modify');
+goog.require('ol.interaction.Snap');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.OSM');
@@ -17,18 +16,9 @@ var raster = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
 
-var map = new ol.Map({
-  layers: [raster],
-  target: 'map',
-  view: new ol.View({
-    center: [-11000000, 4600000],
-    zoom: 4
-  })
-});
-
-var features = new ol.Collection();
-var featureOverlay = new ol.layer.Vector({
-  source: new ol.source.Vector({features: features}),
+var source = new ol.source.Vector();
+var vector = new ol.layer.Vector({
+  source: source,
   style: new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 255, 0.2)'
@@ -45,38 +35,40 @@ var featureOverlay = new ol.layer.Vector({
     })
   })
 });
-featureOverlay.setMap(map);
 
-var modify = new ol.interaction.Modify({
-  features: features,
-  // the SHIFT key must be pressed to delete vertices, so
-  // that new vertices can be drawn at the same position
-  // of existing vertices
-  deleteCondition: function(event) {
-    return ol.events.condition.shiftKeyOnly(event) &&
-        ol.events.condition.singleClick(event);
-  }
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new ol.View({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
 });
+
+var modify = new ol.interaction.Modify({source: source});
 map.addInteraction(modify);
 
-var draw; // global so we can remove it later
+var draw, snap; // global so we can remove them later
 var typeSelect = document.getElementById('type');
 
-function addInteraction() {
+function addInteractions() {
   draw = new ol.interaction.Draw({
-    features: features,
+    source: source,
     type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
   });
   map.addInteraction(draw);
-}
+  snap = new ol.interaction.Snap({source: source});
+  map.addInteraction(snap);
 
+}
 
 /**
  * Handle change event.
  */
 typeSelect.onchange = function() {
   map.removeInteraction(draw);
-  addInteraction();
+  map.removeInteraction(snap);
+  addInteractions();
 };
 
-addInteraction();
+addInteractions();

examples/earthquake-clusters.js

@@ -144,7 +144,7 @@ var map = new ol.Map({
   layers: [raster, vector],
   interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
     condition: function(evt) {
-      return evt.originalEvent.type == 'mousemove' ||
+      return  evt.type == 'pointermove' ||
           evt.type == 'singleclick';
     },
     style: selectStyleFunction

examples/epsg-4326.js

@@ -11,7 +11,8 @@ var layers = [
     source: new ol.source.TileWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {
-        'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+        'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
+        'TILED': true
       }
     })
   })

examples/feature-move-animation.js

@@ -198,7 +198,7 @@ function stopAnimation(ended) {
   // 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);
+      .setCoordinates(coord);
   //remove listener
   map.un('postcompose', moveFeature);
 }

examples/geojson-vt.js

@@ -17,18 +17,30 @@ var replacer = function(key, value) {
     var geometry = value.geometry;
 
     if (rawType === 1) {
-      type = geometry.length === 1 ? 'Point' : 'MultiPoint';
+      type = 'MultiPoint';
+      if (geometry.length == 1) {
+        type = 'Point';
+        geometry = geometry[0];
+      }
     } else if (rawType === 2) {
-      type = geometry.length === 1 ? 'LineString' : 'MultiLineString';
+      type = 'MultiLineString';
+      if (geometry.length == 1) {
+        type = 'LineString';
+        geometry = geometry[0];
+      }
     } else if (rawType === 3) {
-      type = geometry.length === 1 ? 'Polygon' : 'MultiPolygon';
+      type = 'Polygon';
+      if (geometry.length > 1) {
+        type = 'MultiPolygon';
+        geometry = [geometry];
+      }
     }
 
     return {
       'type': 'Feature',
       'geometry': {
         'type': type,
-        'coordinates': geometry.length == 1 ? geometry : [geometry]
+        'coordinates': geometry
       },
       'properties': value.tags
     };
@@ -66,17 +78,16 @@ fetch(url).then(function(response) {
   var vectorSource = new ol.source.VectorTile({
     format: new ol.format.GeoJSON(),
     tileGrid: ol.tilegrid.createXYZ(),
-    tilePixelRatio: 16,
     tileLoadFunction: function(tile) {
       var format = tile.getFormat();
       var tileCoord = tile.getTileCoord();
       var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
 
       var features = format.readFeatures(
-        JSON.stringify({
-          type: 'FeatureCollection',
-          features: data ? data.features : []
-        }, replacer));
+          JSON.stringify({
+            type: 'FeatureCollection',
+            features: data ? data.features : []
+          }, replacer));
       tile.setLoader(function() {
         tile.setFeatures(features);
         tile.setProjection(tilePixels);

examples/geolocation.js

@@ -83,7 +83,7 @@ positionFeature.setStyle(new ol.style.Style({
 geolocation.on('change:position', function() {
   var coordinates = geolocation.getPosition();
   positionFeature.setGeometry(coordinates ?
-      new ol.geom.Point(coordinates) : null);
+    new ol.geom.Point(coordinates) : null);
 });
 
 new ol.layer.Vector({

examples/getfeatureinfo-tile.js

@@ -6,7 +6,7 @@ goog.require('ol.source.TileWMS');
 
 var wmsSource = new ol.source.TileWMS({
   url: 'https://ahocevar.com/geoserver/wms',
-  params: {'LAYERS': 'ne:ne'},
+  params: {'LAYERS': 'ne:ne', 'TILED': true},
   serverType: 'geoserver',
   crossOrigin: 'anonymous'
 });

examples/graticule.js

@@ -27,6 +27,8 @@ var graticule = new ol.Graticule({
     color: 'rgba(255,120,0,0.9)',
     width: 2,
     lineDash: [0.5, 4]
-  })
+  }),
+  showLabels: true
 });
+
 graticule.setMap(map);

examples/here-maps.js

@@ -81,11 +81,11 @@ var map = new ol.Map({
 
 function createUrl(tpl, layerDesc) {
   return tpl
-    .replace('{base}', layerDesc.base)
-    .replace('{type}', layerDesc.type)
-    .replace('{scheme}', layerDesc.scheme)
-    .replace('{app_id}', layerDesc.app_id)
-    .replace('{app_code}', layerDesc.app_code);
+      .replace('{base}', layerDesc.base)
+      .replace('{type}', layerDesc.type)
+      .replace('{scheme}', layerDesc.scheme)
+      .replace('{app_id}', layerDesc.app_id)
+      .replace('{app_code}', layerDesc.app_code);
 }
 
 var select = document.getElementById('layer-select');

examples/icon-color.js

@@ -26,6 +26,7 @@ var madrid = new ol.Feature({
 rome.setStyle(new ol.style.Style({
   image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
     color: '#8959A8',
+    crossOrigin: 'anonymous',
     src: 'data/dot.png'
   }))
 }));
@@ -33,6 +34,7 @@ rome.setStyle(new ol.style.Style({
 london.setStyle(new ol.style.Style({
   image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
     color: '#4271AE',
+    crossOrigin: 'anonymous',
     src: 'data/dot.png'
   }))
 }));
@@ -40,6 +42,7 @@ london.setStyle(new ol.style.Style({
 madrid.setStyle(new ol.style.Style({
   image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
     color: [113, 140, 0],
+    crossOrigin: 'anonymous',
     src: 'data/dot.png'
   }))
 }));

examples/icon-negative.js

@@ -15,6 +15,7 @@ function createStyle(src, img) {
   return new ol.style.Style({
     image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
       anchor: [0.5, 0.96],
+      crossOrigin: 'anonymous',
       src: src,
       img: img,
       imgSize: img ? [img.width, img.height] : undefined

examples/icon-sprite-webgl.js

@@ -51,6 +51,7 @@ for (i = 0; i < iconCount; ++i) {
     rotation: info.rotation,
     scale: info.scale,
     size: info.size,
+    crossOrigin: 'anonymous',
     src: 'data/Butterfly.png'
   });
 }

examples/mapbox-vector-tiles-advanced.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Advanced Mapbox Vector Tiles
 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.
+  A vector tiles map which reuses the same source tiles for subsequent zoom levels to save bandwidth 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

examples/mapbox-vector-tiles-advanced.js

@@ -15,25 +15,16 @@ 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
+// Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 var resolutions = [];
-for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
-  resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
+for (var i = 0; i <= 8; ++i) {
+  resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
 }
+// Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 function tileUrlFunction(tileCoord) {
   return ('https://{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('{z}', String(tileCoord[0] * 2 - 1))
       .replace('{x}', String(tileCoord[1]))
       .replace('{y}', String(-tileCoord[2] - 1))
       .replace('{a-d}', 'abcd'.substr(
@@ -43,8 +34,6 @@ function tileUrlFunction(tileCoord) {
 var map = new ol.Map({
   layers: [
     new ol.layer.VectorTile({
-      renderMode: 'vector',
-      preload: Infinity,
       source: new ol.source.VectorTile({
         attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
           '© <a href="https://www.openstreetmap.org/copyright">' +
@@ -52,9 +41,9 @@ var map = new ol.Map({
         format: new ol.format.MVT(),
         tileGrid: new ol.tilegrid.TileGrid({
           extent: ol.proj.get('EPSG:3857').getExtent(),
-          resolutions: resolutions
+          resolutions: resolutions,
+          tileSize: 512
         }),
-        tilePixelRatio: 16,
         tileUrlFunction: tileUrlFunction
       }),
       style: createMapboxStreetsV6Style()

examples/mapbox-vector-tiles.js

@@ -23,8 +23,7 @@ var map = new ol.Map({
           '© <a href="https://www.openstreetmap.org/copyright">' +
           'OpenStreetMap contributors</a>',
         format: new ol.format.MVT(),
-        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
-        tilePixelRatio: 16,
+        tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22}),
         url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
             '{z}/{x}/{y}.vector.pbf?access_token=' + key
       }),

examples/min-zoom.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: View Min-Zoom
+shortdesc: Demonstrates how the view's minimum zoom level can be changed.
+docs: >
+  The <code>minZoom</code> option for a view limits how far out you can
+  zoom.  This property can be updated by calling <code>view.setMinZoom(newMinZoom)</code>.
+  In this example, the minimum zoom level is set so that you only see one
+  world at a time.  Resize your browser window to change the threshold.
+tags: "min, zoom"
+---
+<div id="map" class="map"></div>

examples/min-zoom.js

@@ -0,0 +1,36 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+var viewport = document.getElementById('map');
+
+function getMinZoom() {
+  var width = viewport.clientWidth;
+  return Math.ceil(Math.LOG2E * Math.log(width / 256));
+}
+
+var initialZoom = getMinZoom();
+
+var view = new ol.View({
+  center: [0, 0],
+  minZoom: initialZoom,
+  zoom: initialZoom
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: view
+});
+
+window.addEventListener('resize', function() {
+  var minZoom = getMinZoom();
+  if (minZoom !== view.getMinZoom()) {
+    view.setMinZoom(minZoom);
+  }
+});

examples/modify-test.js

@@ -96,8 +96,8 @@ var geojsonObject = {
     'geometry': {
       'type': 'Polygon',
       'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
-          [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
-          [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
+        [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
+        [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
     }
   }, {
     'type': 'Feature',
@@ -117,11 +117,11 @@ var geojsonObject = {
       'type': 'MultiPolygon',
       'coordinates': [
         [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-            [-3e6, 6e6], [-5e6, 6e6]]],
+          [-3e6, 6e6], [-5e6, 6e6]]],
         [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
-            [0, 6e6], [-3e6, 6e6]]],
+          [0, 6e6], [-3e6, 6e6]]],
         [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-            [3e6, 6e6], [1e6, 6e6]]]
+          [3e6, 6e6], [1e6, 6e6]]]
       ]
     }
   }, {
@@ -222,7 +222,13 @@ var select = new ol.interaction.Select({
 
 var modify = new ol.interaction.Modify({
   features: select.getFeatures(),
-  style: overlayStyle
+  style: overlayStyle,
+  insertVertexCondition: function() {
+    // prevent new vertices to be added to the polygons
+    return !this.features_.getArray().every(function(feature) {
+      return feature.getGeometry().getType().match(/Polygon/);
+    });
+  }
 });
 
 var map = new ol.Map({

examples/mouse-position.js

@@ -4,7 +4,6 @@ goog.require('ol.control');
 goog.require('ol.control.MousePosition');
 goog.require('ol.coordinate');
 goog.require('ol.layer.Tile');
-goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
 var mousePositionControl = new ol.control.MousePosition({
@@ -37,7 +36,7 @@ var map = new ol.Map({
 
 var projectionSelect = document.getElementById('projection');
 projectionSelect.addEventListener('change', function(event) {
-  mousePositionControl.setProjection(ol.proj.get(event.target.value));
+  mousePositionControl.setProjection(event.target.value);
 });
 
 var precisionInput = document.getElementById('precision');

examples/mousewheel-zoom.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Mousewheel/Trackpad Zoom
+shortdesc: Restrict wheel/trackpad zooming to integer zoom levels.
+docs: >
+  By default, the `ol.interaction.MouseWheelZoom` can leave the map at
+  fractional zoom levels. If instead you want to constrain wheel/trackpad
+  zooming to integer zoom levels, set <code>constrainResolution: true</code>
+  when constructing the interaction.
+tags: "trackpad, mousewheel, zoom, interaction"
+---
+<div id="map" class="map"></div>

examples/mousewheel-zoom.js

@@ -0,0 +1,25 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.interaction');
+goog.require('ol.interaction.MouseWheelZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults({mouseWheelZoom: false}).extend([
+    new ol.interaction.MouseWheelZoom({
+      constrainResolution: true // force zooming to a integer zoom
+    })
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/osm-vector-tiles.html

@@ -3,7 +3,7 @@ layout: example.html
 title: OSM Vector Tiles
 shortdesc: Using OpenStreetMap vector tiles.
 docs: >
-  A simple vector tiles map with Mapzen vector tiles. **Note**: TopoJSON vector tiles are not optimized for rendering - they might clip geometries exactly at the tile boundary instead of adding a buffer, and use geographic coordinates instead of tile relative pixel coordinates in view projection.
+  A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol.format.MVT`](../apidoc/ol.format.MVT.html) is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
   vector-tiles-5eJz6JX: Your Mapzen API key from https://mapzen.com/developers

examples/osm-vector-tiles.js

@@ -1,4 +1,3 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.TopoJSON');
@@ -13,11 +12,6 @@ goog.require('ol.tilegrid');
 
 var key = 'vector-tiles-5eJz6JX';
 
-var attribution = [new ol.Attribution({
-  html: '© OpenStreetMap contributors, Who’s On First, Natural Earth, and openstreetmapdata.com'
-})];
-var format = new ol.format.TopoJSON();
-var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
 var roadStyleCache = {};
 var roadColor = {
   'major_road': '#776',
@@ -34,65 +28,58 @@ var buildingStyle = new ol.style.Style({
     width: 1
   })
 });
+var waterStyle = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: '#9db9e8'
+  })
+});
+var roadStyle = function(feature) {
+  var kind = feature.get('kind');
+  var railway = feature.get('railway');
+  var sort_key = feature.get('sort_key');
+  var styleKey = kind + '/' + railway + '/' + sort_key;
+  var style = roadStyleCache[styleKey];
+  if (!style) {
+    var color, width;
+    if (railway) {
+      color = '#7de';
+      width = 1;
+    } else {
+      color = roadColor[kind];
+      width = kind == 'highway' ? 1.5 : 1;
+    }
+    style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: color,
+        width: width
+      }),
+      zIndex: sort_key
+    });
+    roadStyleCache[styleKey] = style;
+  }
+  return style;
+};
 
 var map = new ol.Map({
   layers: [
     new ol.layer.VectorTile({
       source: new ol.source.VectorTile({
-        attributions: attribution,
-        format: format,
-        tileGrid: tileGrid,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/water/{z}/{x}/{y}.topojson?api_key=' + key
+        attributions: '© OpenStreetMap contributors, Who’s On First, ' +
+            'Natural Earth, and openstreetmapdata.com',
+        format: new ol.format.TopoJSON({
+          layerName: 'layer',
+          layers: ['water', 'roads', 'buildings']
+        }),
+        tileGrid: ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 19}),
+        url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
       }),
-      style: new ol.style.Style({
-        fill: new ol.style.Fill({
-          color: '#9db9e8'
-        })
-      })
-    }),
-    new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        attributions: attribution,
-        format: format,
-        tileGrid: tileGrid,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/roads/{z}/{x}/{y}.topojson?api_key=' + key
-      }),
-      style: function(feature) {
-        var kind = feature.get('kind');
-        var railway = feature.get('railway');
-        var sort_key = feature.get('sort_key');
-        var styleKey = kind + '/' + railway + '/' + sort_key;
-        var style = roadStyleCache[styleKey];
-        if (!style) {
-          var color, width;
-          if (railway) {
-            color = '#7de';
-            width = 1;
-          } else {
-            color = roadColor[kind];
-            width = kind == 'highway' ? 1.5 : 1;
-          }
-          style = new ol.style.Style({
-            stroke: new ol.style.Stroke({
-              color: color,
-              width: width
-            }),
-            zIndex: sort_key
-          });
-          roadStyleCache[styleKey] = style;
+      style: function(feature, resolution) {
+        switch (feature.get('layer')) {
+          case 'water': return waterStyle;
+          case 'roads': return roadStyle(feature);
+          case 'buildings': return (resolution < 10) ? buildingStyle : null;
+          default: return null;
         }
-        return style;
-      }
-    }),
-    new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        attributions: attribution,
-        format: format,
-        tileGrid: tileGrid,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=' + key
-      }),
-      style: function(f, resolution) {
-        return (resolution < 10) ? buildingStyle : null;
       }
     })
   ],

examples/polygon-styles.js

@@ -54,28 +54,28 @@ var geojsonObject = {
     'geometry': {
       'type': 'Polygon',
       'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
-          [-3e6, 6e6], [-5e6, 6e6]]]
+        [-3e6, 6e6], [-5e6, 6e6]]]
     }
   }, {
     'type': 'Feature',
     'geometry': {
       'type': 'Polygon',
       'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
-          [0, 6e6], [-2e6, 6e6]]]
+        [0, 6e6], [-2e6, 6e6]]]
     }
   }, {
     'type': 'Feature',
     'geometry': {
       'type': 'Polygon',
       'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
-          [3e6, 6e6], [1e6, 6e6]]]
+        [3e6, 6e6], [1e6, 6e6]]]
     }
   }, {
     'type': 'Feature',
     'geometry': {
       'type': 'Polygon',
       'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
-          [0, -1e6], [-2e6, -1e6]]]
+        [0, -1e6], [-2e6, -1e6]]]
     }
   }]
 };

examples/raster.js

@@ -162,13 +162,13 @@ function plot(resolution, counts, threshold) {
     var value = counts.min + (index * counts.delta);
     return 'bar' + (value >= threshold ? ' selected' : '');
   })
-  .attr('width', barWidth - 2);
+      .attr('width', barWidth - 2);
 
   bar.transition().attr('transform', function(value, index) {
     return 'translate(' + (index * barWidth) + ', ' +
         (plotHeight - yScale(value)) + ')';
   })
-  .attr('height', yScale);
+      .attr('height', yScale);
 
   bar.on('mousemove', function(count, index) {
     var threshold = counts.min + (index * counts.delta);

examples/reprojection-by-code.html

@@ -8,7 +8,7 @@ docs: >
   in <a href="https://epsg.io/">EPSG.io</a> database.
 tags: "reprojection, projection, proj4js, epsg.io"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">

examples/reprojection-image.html

@@ -6,6 +6,6 @@ docs: >
   This example shows client-side reprojection of single image source.
 tags: "reprojection, projection, proj4js, image, imagestatic"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
 ---
 <div id="map" class="map"></div>

examples/reprojection.html

@@ -6,7 +6,7 @@ docs: >
   This example shows client-side raster reprojection between various projections.
 tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">

examples/reprojection.js

@@ -72,7 +72,8 @@ layers['wms4326'] = new ol.layer.Tile({
     url: 'https://ahocevar.com/geoserver/wms',
     crossOrigin: '',
     params: {
-      'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+      'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
+      'TILED': true
     },
     projection: 'EPSG:4326'
   })
@@ -99,13 +100,15 @@ fetch(url).then(function(response) {
   return response.text();
 }).then(function(text) {
   var result = parser.read(text);
-  var options = ol.source.WMTS.optionsFromCapabilities(result,
-      {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
+  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)
+    source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (options))
   });
 });
 
@@ -131,7 +134,7 @@ layers['states'] = new ol.layer.Tile({
   source: new ol.source.TileWMS({
     url: 'https://ahocevar.com/geoserver/wms',
     crossOrigin: '',
-    params: {'LAYERS': 'topp:states', 'TILED': true},
+    params: {'LAYERS': 'topp:states'},
     serverType: 'geoserver',
     tileGrid: new ol.tilegrid.TileGrid({
       extent: [-13884991, 2870341, -7455066, 6338219],
@@ -174,7 +177,7 @@ function updateViewProjection() {
   });
   map.setView(newView);
 
-  // Example how to prevent double occurence of map by limiting layer extent
+  // Example how to prevent double occurrence of map by limiting layer extent
   if (newProj == ol.proj.get('EPSG:3857')) {
     layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
   } else {

examples/rotation.js

@@ -18,7 +18,7 @@ var map = new ol.Map({
     })
   }),
   view: new ol.View({
-    center: [-25860000, 4130000],
+    center: [14200000, 4130000],
     rotation: Math.PI / 6,
     zoom: 10
   })

examples/scaleline-indiana-east.html

@@ -6,6 +6,6 @@ docs: >
   This example shows client-side reprojection of OpenStreetMap to NAD83 Indiana East, including a ScaleLine control with US units.
 tags: "reprojection, projection, openstreetmap, nad83, tile, scaleline"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
 ---
 <div id="map" class="map"></div>

examples/snap.html

@@ -29,6 +29,7 @@ tags: "draw, edit, modify, vector, snap"
       <option value="Point">Point</option>
       <option value="LineString">LineString</option>
       <option value="Polygon">Polygon</option>
+      <option value="Circle">Circle</option>
     </select>
   </div>
 </form>

examples/snap.js

@@ -81,6 +81,8 @@ var Draw = {
     this.LineString.setActive(false);
     map.addInteraction(this.Polygon);
     this.Polygon.setActive(false);
+    map.addInteraction(this.Circle);
+    this.Circle.setActive(false);
   },
   Point: new ol.interaction.Draw({
     source: vector.getSource(),
@@ -94,6 +96,10 @@ var Draw = {
     source: vector.getSource(),
     type: /** @type {ol.geom.GeometryType} */ ('Polygon')
   }),
+  Circle: new ol.interaction.Draw({
+    source: vector.getSource(),
+    type: /** @type {ol.geom.GeometryType} */ ('Circle')
+  }),
   getActive: function() {
     return this.activeType ? this[this.activeType].getActive() : false;
   },

examples/sphere-mollweide.html

@@ -6,6 +6,6 @@ docs: >
   Example of a Sphere Mollweide map with a Graticule component.
 tags: "graticule, Mollweide, projection, proj4js"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
 ---
 <div id="map" class="map"></div>

examples/street-labels.html

@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Street Labels
+shortdesc: Render street names with a custom render.
+docs: >
+  Example showing the use of a custom renderer to render text along a path. [Labelgun](https://github.com/Geovation/labelgun) is used to avoid label collisions. [label-segment](https://github.com/ahocevar/label-segment) makes sure that labels are placed on suitable street segments. [textpath](https://github.com/ahocevar/textpath) arranges the letters of a label along the geometry. The data is fetched from OSM using the [Overpass API](https://overpass-api.de).
+tags: "vector, label, collision detection, labelgun, linelabel, overpass"
+resources:
+  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
+  - https://unpkg.com/rbush@2.0.1/rbush.min.js
+  - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
+  - https://unpkg.com/textpath@1.0.1/dist/textpath.js
+  - https://unpkg.com/label-segment@1.0.0/dist/label-segment.js
+cloak:
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+---
+<div id="map" class="map"></div>

examples/street-labels.js

@@ -0,0 +1,115 @@
+// NOCOMPILE
+/* global labelgun, labelSegment, textPath */
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.format.OSMXML');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Style');
+
+var emptyFn = function() {};
+var labelEngine = new labelgun['default'](emptyFn, emptyFn);
+
+var context, pixelRatio; // Will be set in the map's postcompose listener
+function measureText(text) {
+  return context.measureText(text).width * pixelRatio;
+}
+
+var extent, letters; // Will be set in the style's renderer function
+function collectDrawData(letter, x, y, angle) {
+  ol.extent.extend(extent, [x, y, x, y]);
+  letters.push([x, y, angle, letter]);
+}
+
+var style = new ol.style.Style({
+  renderer: function(coords, context) {
+    var feature = context.feature;
+    var text = feature.get('name');
+    // Only create label when geometry has a long and straight segment
+    var path = labelSegment(coords, Math.PI / 8, measureText(text));
+    if (path) {
+      extent = ol.extent.createEmpty();
+      letters = [];
+      textPath(text, path, measureText, collectDrawData);
+      ol.extent.buffer(extent, 5 * pixelRatio, extent);
+      var bounds = {
+        bottomLeft: ol.extent.getBottomLeft(extent),
+        topRight: ol.extent.getTopRight(extent)
+      };
+      labelEngine.ingestLabel(bounds, feature.getId(), 1, letters, text, false);
+    }
+  }
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.BingMaps({
+    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    imagerySet: 'Aerial'
+  })
+});
+
+var source = new ol.source.Vector();
+// Request streets from OSM, using the Overpass API
+fetch('https://overpass-api.de/api/interpreter', {
+  method: 'POST',
+  body: '(way["highway"](48.19642,16.32580,48.22050,16.41986));(._;>;);out meta;'
+}).then(function(response) {
+  return response.text();
+}).then(function(responseText) {
+  var features = new ol.format.OSMXML().readFeatures(responseText, {
+    featureProjection: 'EPSG:3857'
+  });
+  source.addFeatures(features);
+});
+
+var vectorLayer = new ol.layer.Vector({
+  source: source,
+  style: function(feature) {
+    if (feature.getGeometry().getType() == 'LineString' && feature.get('name')) {
+      return style;
+    }
+  }
+});
+
+var viewExtent = [1817379, 6139595, 1827851, 6143616];
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: 'map',
+  view: new ol.View({
+    extent: viewExtent,
+    center: ol.extent.getCenter(viewExtent),
+    zoom: 17,
+    minZoom: 14
+  })
+});
+
+vectorLayer.on('precompose', function() {
+  labelEngine.destroy();
+});
+vectorLayer.on('postcompose', function(e) {
+  context = e.context;
+  pixelRatio = e.frameState.pixelRatio;
+  context.save();
+  context.font = 'normal 11px "Open Sans", "Arial Unicode MS"';
+  context.fillStyle = 'white';
+  context.textBaseline = 'middle';
+  context.textAlign = 'center';
+  var labels = labelEngine.getShown();
+  for (var i = 0, ii = labels.length; i < ii; ++i) {
+    // Render label letter by letter
+    var letters = labels[i].labelObject;
+    for (var j = 0, jj = letters.length; j < jj; ++j) {
+      var labelData = letters[j];
+      context.save();
+      context.translate(labelData[0], labelData[1]);
+      context.rotate(labelData[2]);
+      context.scale(pixelRatio, pixelRatio);
+      context.fillText(labelData[3], 0, 0);
+      context.restore();
+    }
+  }
+  context.restore();
+});

examples/tissot.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Tissot Indicatrix
 shortdesc: Draw Tissot's indicatrices on maps.
 docs: >
-  Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
+  Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix) maps. The map on the top is an `EPSG:4326` map. The one on the bottom is `EPSG:3857`.
 tags: "tissot, circle"
 ---
 <h4>EPSG:4326</h4>

examples/tissot.js

@@ -22,7 +22,8 @@ var map4326 = new ol.Map({
       source: new ol.source.TileWMS({
         url: 'https://ahocevar.com/geoserver/wms',
         params: {
-          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
+          'TILED': true
         }
       })
     }),
@@ -42,7 +43,8 @@ var map3857 = new ol.Map({
       source: new ol.source.TileWMS({
         url: 'https://ahocevar.com/geoserver/wms',
         params: {
-          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
+          'TILED': true
         }
       })
     }),

examples/topojson.js

@@ -29,13 +29,14 @@ var style = new ol.style.Style({
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/topojson/world-110m.json',
-    format: new ol.format.TopoJSON(),
+    format: new ol.format.TopoJSON({
+      // don't want to render the full world polygon (stored as 'land' layer),
+      // which repeats all countries
+      layers: ['countries']
+    }),
     overlaps: false
   }),
-  style: function(feature) {
-    // don't want to render the full world polygon, which repeats all countries
-    return feature.getId() !== undefined ? style : null;
-  }
+  style: style
 });
 
 var map = new ol.Map({

examples/vector-label-decluttering.html

@@ -0,0 +1,13 @@
+---
+layout: example.html
+title: Vector Label Decluttering
+shortdesc: Label decluttering with a custom renderer.
+resources:
+  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
+  - https://unpkg.com/rbush@2.0.1/rbush.min.js
+  - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
+docs: >
+  A custom `renderer` function is used instead of an `ol.style.Text` to label the countries of the world. Only texts that are not wider than their country's bounding box are considered and handed over to [Labelgun](https://github.com/Geovation/labelgun) for decluttering.
+tags: "vector, renderer, labelgun, label"
+---
+<div id="map" class="map"></div>

examples/vector-label-decluttering.js

@@ -0,0 +1,125 @@
+// NOCOMPILE
+/* global labelgun */
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+// Style for labels
+function setStyle(context) {
+  context.font = '12px Calibri,sans-serif';
+  context.fillStyle = '#000';
+  context.strokeStyle = '#fff';
+  context.lineWidth = 3;
+  context.textBaseline = 'hanging';
+  context.textAlign = 'start';
+}
+
+// A separate canvas context for measuring label width and height.
+var textMeasureContext = document.createElement('CANVAS').getContext('2d');
+setStyle(textMeasureContext);
+
+// The label height is approximated by the width of the text 'WI'.
+var height = textMeasureContext.measureText('WI').width;
+
+// A cache for reusing label images once they have been created.
+var textCache = {};
+
+var map = new ol.Map({
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+var emptyFn = function() {};
+var labelEngine = new labelgun['default'](emptyFn, emptyFn);
+
+function createLabel(canvas, text, coord) {
+  var halfWidth = canvas.width / 2;
+  var halfHeight = canvas.height / 2;
+  var bounds = {
+    bottomLeft: [Math.round(coord[0] - halfWidth), Math.round(coord[1] - halfHeight)],
+    topRight: [Math.round(coord[0] + halfWidth), Math.round(coord[1] + halfHeight)]
+  };
+  labelEngine.ingestLabel(bounds, coord.toString(), 1, canvas, text, false);
+}
+
+// For multi-polygons, we only label the widest polygon. This is done by sorting
+// by extent width in descending order, and take the first from the array.
+function sortByWidth(a, b) {
+  return ol.extent.getWidth(b.getExtent()) - ol.extent.getWidth(a.getExtent());
+}
+
+var labelStyle = new ol.style.Style({
+  renderer: function(coords, state) {
+    var text = state.feature.get('name');
+    createLabel(textCache[text], text, coords);
+  }
+});
+var countryStyle = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: 'rgba(255, 255, 255, 0.6)'
+  }),
+  stroke: new ol.style.Stroke({
+    color: '#319FD3',
+    width: 1
+  })
+});
+var styleWithLabel = [countryStyle, labelStyle];
+var styleWithoutLabel = [countryStyle];
+
+var pixelRatio; // This is set by the map's precompose listener
+var vectorLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'data/geojson/countries.geojson',
+    format: new ol.format.GeoJSON()
+  }),
+  style: function(feature, resolution) {
+    var text = feature.get('name');
+    var width = textMeasureContext.measureText(text).width;
+    var geometry = feature.getGeometry();
+    if (geometry.getType() == 'MultiPolygon') {
+      geometry = geometry.getPolygons().sort(sortByWidth)[0];
+    }
+    var extentWidth = ol.extent.getWidth(geometry.getExtent());
+    if (extentWidth / resolution > width) {
+      // Only consider label when it fits its geometry's extent
+      if (!(text in textCache)) {
+        // Draw the label to its own canvas and cache it.
+        var canvas = textCache[text] = document.createElement('CANVAS');
+        canvas.width = width * pixelRatio;
+        canvas.height = height * pixelRatio;
+        var context = canvas.getContext('2d');
+        context.scale(pixelRatio, pixelRatio);
+        setStyle(context);
+        context.strokeText(text, 0, 0);
+        context.fillText(text, 0, 0);
+      }
+      labelStyle.setGeometry(geometry.getInteriorPoint());
+      return styleWithLabel;
+    } else {
+      return styleWithoutLabel;
+    }
+  }
+});
+vectorLayer.on('precompose', function(e) {
+  pixelRatio = e.frameState.pixelRatio;
+  labelEngine.destroy();
+});
+vectorLayer.on('postcompose', function(e) {
+  var labels = labelEngine.getShown();
+  for (var i = 0, ii = labels.length; i < ii; ++i) {
+    var label = labels[i];
+    // Draw label to the map canvas
+    e.context.drawImage(label.labelObject, label.minX, label.minY);
+  }
+});
+
+map.addLayer(vectorLayer);

examples/vector-wfs-getfeature.js

@@ -47,8 +47,8 @@ var featureRequest = new ol.format.WFS().writeGetFeature({
   featureTypes: ['water_areas'],
   outputFormat: 'application/json',
   filter: ol.format.filter.and(
-    ol.format.filter.like('name', 'Mississippi*'),
-    ol.format.filter.equalTo('waterway', 'riverbank')
+      ol.format.filter.like('name', 'Mississippi*'),
+      ol.format.filter.equalTo('waterway', 'riverbank')
   )
 });
 

examples/wms-image-custom-proj.html

@@ -6,7 +6,7 @@ docs: >
   With [Proj4js](http://proj4js.org/) integration, OpenLayers can transform coordinates between arbitrary projections.
 tags: "wms, single image, proj4js, projection"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
+  - https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js
   - https://epsg.io/21781-1753.js
 ---
 <div id="map" class="map"></div>

examples/wms-image.js

@@ -15,6 +15,7 @@ var layers = [
     source: new ol.source.ImageWMS({
       url: 'https://ahocevar.com/geoserver/wms',
       params: {'LAYERS': 'topp:states'},
+      ratio: 1,
       serverType: 'geoserver'
     })
   })

examples/wms-time.html

@@ -3,7 +3,7 @@ layout: example.html
 title: WMS Time
 shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer.
 docs: >
-  Demonstrates smooth reloading of layers when changing the time dimension continously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
+  Demonstrates smooth reloading of layers when changing the time dimension continuously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
 tags: "wms, time, dimensions, transition, nexrad"
 ---
 <div id="map" class="map"></div>

examples/wmts-dimensions.html

@@ -3,7 +3,7 @@ layout: example.html
 title: WMTS Tile Transitions
 shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer.
 docs: >
-  Demonstrates smooth reloading of layers when changing a dimension continously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
+  Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
 tags: "wmts, parameter, transition"
 ---
 <div id="map" class="map"></div>

examples/wmts-hidpi.js

@@ -34,6 +34,6 @@ fetch(capabilitiesUrl).then(function(response) {
   });
   options.tilePixelRatio = tilePixelRatio;
   map.addLayer(new ol.layer.Tile({
-    source: new ol.source.WMTS(options)
+    source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (options))
   }));
 });

examples/wmts-ign.html

@@ -5,10 +5,10 @@ shortdesc: Demonstrates displaying IGN (France) WMTS layers.
 docs: >
     In this example an IGN WMTS layer is displayed.
     For more information on IGN's WMTS service see the
-    <a href="http://professionnels.ign.fr/api-sig">IGN Géoportail API web page
-    </a> and
-    <a href="http://www.geoportail.gouv.fr/depot/api/cgu/DT_APIGeoportail.pdf">
-    Descriptif technique des web services du Géoportail</a> (french).
+    [IGN Géoportail API web page](http://api.ign.fr/accueil)
+    and
+    [Descriptif technique des web services du Géoportail](http://www.geoportail.gouv.fr/depot/api/cgu/DT_APIGeoportail.pdf)
+    (french).
 tags: "french, ign, geoportail, wmts"
 ---
 <div id="map" class="map"></div>

examples/wmts-layer-from-capabilities.js

@@ -12,8 +12,10 @@ fetch('data/WMTSCapabilities.xml').then(function(response) {
   return response.text();
 }).then(function(text) {
   var result = parser.read(text);
-  var options = ol.source.WMTS.optionsFromCapabilities(result,
-      {layer: 'layer-7328', matrixSet: 'EPSG:3857'});
+  var options = ol.source.WMTS.optionsFromCapabilities(result, {
+    layer: 'layer-7328',
+    matrixSet: 'EPSG:3857'
+  });
 
   map = new ol.Map({
     layers: [
@@ -23,7 +25,7 @@ fetch('data/WMTSCapabilities.xml').then(function(response) {
       }),
       new ol.layer.Tile({
         opacity: 1,
-        source: new ol.source.WMTS(options)
+        source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (options))
       })
     ],
     target: 'map',

examples/xyz-esri-4326-512.js

@@ -28,8 +28,8 @@ var map = new ol.Map({
         tileSize: tileSize,
         tileUrlFunction: function(tileCoord) {
           return urlTemplate.replace('{z}', (tileCoord[0] - 1).toString())
-                            .replace('{x}', tileCoord[1].toString())
-                            .replace('{y}', (-tileCoord[2] - 1).toString());
+              .replace('{x}', tileCoord[1].toString())
+              .replace('{y}', (-tileCoord[2] - 1).toString());
         },
         wrapX: true
       })

externs/oli.js

@@ -91,6 +91,17 @@ oli.DrawEvent = function() {};
 oli.DrawEvent.prototype.feature;
 
 
+/**
+ * @interface
+ */
+oli.ExtentEvent = function() {};
+
+
+/**
+ * @type {ol.Extent}
+ */
+oli.ExtentEvent.prototype.extent;
+
 /**
  * @interface
  */

externs/olx.js

@@ -8,6 +8,21 @@ var olx;
 /* typedefs for object literals provided by applications */
 
 
+/**
+ * @typedef {{unique: (boolean|undefined)}}
+ */
+olx.CollectionOptions;
+
+
+/**
+ * Disallow the same item from being added to the collection twice.  Default is
+ * false.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.CollectionOptions.prototype.unique;
+
+
 /**
  * @typedef {{html: string,
  *     tileRanges: (Object.<string, Array.<ol.TileRange>>|undefined)}}
@@ -97,7 +112,14 @@ olx.LogoOptions.prototype.src;
  * @typedef {{map: (ol.Map|undefined),
  *     maxLines: (number|undefined),
  *     strokeStyle: (ol.style.Stroke|undefined),
- *     targetSize: (number|undefined)}}
+ *     targetSize: (number|undefined),
+ *     showLabels: (boolean|undefined),
+ *     lonLabelFormatter: (undefined|function(number):string),
+ *     latLabelFormatter: (undefined|function(number):string),
+ *     lonLabelPosition: (number|undefined),
+ *     latLabelPosition: (number|undefined),
+ *     lonLabelStyle: (ol.style.Text|undefined),
+ *     latLabelStyle: (ol.style.Text|undefined)}}
  */
 olx.GraticuleOptions;
 
@@ -142,6 +164,106 @@ olx.GraticuleOptions.prototype.strokeStyle;
 olx.GraticuleOptions.prototype.targetSize;
 
 
+/**
+ * Render a label with the respective latitude/longitude for each graticule
+ * line. Default is false.
+ *
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.showLabels;
+
+
+/**
+ * Label formatter for longitudes. This function is called with the longitude as
+ * argument, and should return a formatted string representing the longitude.
+ * By default, labels are formatted as degrees, minutes, seconds and hemisphere.
+ *
+ * @type {undefined|function(number):string}
+ * @api
+ */
+olx.GraticuleOptions.prototype.lonLabelFormatter;
+
+
+/**
+ * Label formatter for latitudes. This function is called with the latitude as
+ * argument, and should return a formatted string representing the latitude.
+ * By default, labels are formatted as degrees, minutes, seconds and hemisphere.
+ *
+ * @type {undefined|function(number):string}
+ * @api
+ */
+olx.GraticuleOptions.prototype.latLabelFormatter;
+
+
+/**
+ * Longitude label position in fractions (0..1) of view extent. 0 means at the
+ * bottom of the viewport, 1 means at the top. Default is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.lonLabelPosition;
+
+
+/**
+ * Latitude label position in fractions (0..1) of view extent. 0 means at the
+ * left of the viewport, 1 means at the right. Default is 1.
+ * @type {number|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.latLabelPosition;
+
+
+/**
+ * Longitude label text style. The default is
+ * ```js
+ * new ol.style.Text({
+ *   font: '12px Calibri,sans-serif',
+ *   textBaseline: 'bottom',
+ *   fill: new ol.style.Fill({
+ *     color: 'rgba(0,0,0,1)'
+ *   }),
+ *   stroke: new ol.style.Stroke({
+ *     color: 'rgba(255,255,255,1)',
+ *     width: 3
+ *   })
+ * });
+ * ```
+ * Note that the default's `textBaseline` configuration will not work well for
+ * `lonLabelPosition` configurations that position labels close to the top of
+ * the viewport.
+ *
+ * @type {ol.style.Text|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.lonLabelStyle;
+
+
+/**
+ * Latitude label text style. The default is
+ * ```js
+ * new ol.style.Text({
+ *   font: '12px Calibri,sans-serif',
+ *   textAlign: 'end',
+ *   fill: new ol.style.Fill({
+ *     color: 'rgba(0,0,0,1)'
+ *   }),
+ *   stroke: new ol.style.Stroke({
+ *     color: 'rgba(255,255,255,1)',
+ *     width: 3
+ *   })
+ * });
+ * ```
+ * Note that the default's `textAlign` configuration will not work well for
+ * `latLabelPosition` configurations that position labels close to the left of
+ * the viewport.
+ *
+ * @type {ol.style.Text|undefined}
+ * @api
+ */
+olx.GraticuleOptions.prototype.latLabelStyle;
+
+
 /**
  * Object literal with config options for interactions.
  * @typedef {{handleEvent: function(ol.MapBrowserEvent):boolean}}
@@ -170,6 +292,7 @@ olx.interaction.InteractionOptions.prototype.handleEvent;
  *     loadTilesWhileAnimating: (boolean|undefined),
  *     loadTilesWhileInteracting: (boolean|undefined),
  *     logo: (boolean|string|olx.LogoOptions|Element|undefined),
+ *     moveTolerance: (number|undefined),
  *     overlays: (ol.Collection.<ol.Overlay>|Array.<ol.Overlay>|undefined),
  *     renderer: (ol.renderer.Type|Array.<ol.renderer.Type>|undefined),
  *     target: (Element|string|undefined),
@@ -263,6 +386,17 @@ olx.MapOptions.prototype.loadTilesWhileInteracting;
 olx.MapOptions.prototype.logo;
 
 
+/**
+ * The minimum distance in pixels the cursor must move to be detected
+ * as a map move event instead of a click. Increasing this value can make it
+ * easier to click on the map.
+ * Default is `1`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.MapOptions.prototype.moveTolerance;
+
+
 /**
  * Overlays initially added to the map. By default, no overlays are added.
  * @type {ol.Collection.<ol.Overlay>|Array.<ol.Overlay>|undefined}
@@ -546,7 +680,8 @@ olx.ProjectionOptions.prototype.worldExtent;
 /**
  * Function to determine resolution at a point. The function is called with a
  * `{number}` view resolution and an `{ol.Coordinate}` as arguments, and returns
- * the `{number}` resolution at the passed coordinate.
+ * the `{number}` resolution at the passed coordinate. If this is `undefined`,
+ * the default {@link ol.proj#getPointResolution} function will be used.
  * @type {(function(number, ol.Coordinate):number|undefined)}
  * @api
  */
@@ -1859,9 +1994,9 @@ olx.format.MVTOptions;
  * {@link ol.Feature} to get full editing and geometry support at the cost of
  * decreased rendering performance. The default is {@link ol.render.Feature},
  * which is optimized for rendering and hit detection.
- * @type {undefined|function((ol.geom.Geometry|Object.<string, *>)=)|
+ * @type {undefined|function((ol.geom.Geometry|Object.<string,*>)=)|
  *     function(ol.geom.GeometryType,Array.<number>,
- *         (Array.<number>|Array.<Array.<number>>),Object.<string, *>)}
+ *         (Array.<number>|Array.<Array.<number>>),Object.<string,*>,number)}
  * @api
  */
 olx.format.MVTOptions.prototype.featureClass;
@@ -1918,7 +2053,11 @@ olx.format.PolylineOptions.prototype.geometryLayout;
 
 
 /**
- * @typedef {{defaultDataProjection: ol.ProjectionLike}}
+ * @typedef {{
+ *     defaultDataProjection: ol.ProjectionLike,
+ *     layerName: (string|undefined),
+ *     layers: (Array.<string>|undefined)
+ * }}
  */
 olx.format.TopoJSONOptions;
 
@@ -1931,6 +2070,38 @@ olx.format.TopoJSONOptions;
 olx.format.TopoJSONOptions.prototype.defaultDataProjection;
 
 
+/**
+ * Set the name of the TopoJSON topology `objects`'s children as feature
+ * property with the specified name. This means that when set to `'layer'`, a
+ * topology like
+ * ```
+ * {
+ *   "type": "Topology",
+ *   "objects": {
+ *     "example": {
+ *       "type": "GeometryCollection",
+ *       "geometries": []
+ *     }
+ *   }
+ * }
+ * ```
+ * will result in features that have a property `'layer'` set to `'example'`.
+ * When not set, no property will be added to features.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.TopoJSONOptions.prototype.layerName;
+
+
+/**
+ * Names of the TopoJSON topology's `objects`'s children to read features from.
+ * If not provided, features will be read from all children.
+ * @type {Array.<string>|undefined}
+ * @api
+ */
+olx.format.TopoJSONOptions.prototype.layers;
+
+
 /**
  * @typedef {{altitudeMode: (ol.format.IGCZ|undefined)}}
  */
@@ -2284,8 +2455,10 @@ olx.format.WFSWriteGetFeatureOptions.prototype.resultType;
  *     featureType: string,
  *     srsName: (string|undefined),
  *     handle: (string|undefined),
+ *     hasZ: (boolean|undefined),
  *     nativeElements: Array.<Object>,
- *     gmlOptions: (olx.format.GMLOptions|undefined)}}
+ *     gmlOptions: (olx.format.GMLOptions|undefined),
+ *     version: (string|undefined)}}
  */
 olx.format.WFSWriteTransactionOptions;
 
@@ -2331,6 +2504,15 @@ olx.format.WFSWriteTransactionOptions.prototype.srsName;
 olx.format.WFSWriteTransactionOptions.prototype.handle;
 
 
+/**
+ * Must be set to true if the transaction is for a 3D layer. This will allow
+ * the Z coordinate to be included in the transaction.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.format.WFSWriteTransactionOptions.prototype.hasZ;
+
+
 /**
  * Native elements. Currently not supported.
  * @type {Array.<Object>}
@@ -2347,6 +2529,15 @@ olx.format.WFSWriteTransactionOptions.prototype.nativeElements;
 olx.format.WFSWriteTransactionOptions.prototype.gmlOptions;
 
 
+/**
+ * WFS version to use for the transaction. Can be either `1.0.0` or `1.1.0`.
+ * Default is `1.1.0`.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.WFSWriteTransactionOptions.prototype.version;
+
+
 /**
  * @typedef {{splitCollection: (boolean|undefined)}}
  */
@@ -2388,7 +2579,9 @@ olx.interaction;
 
 /**
  * Interactions for the map. Default is `true` for all options.
- * @typedef {{altShiftDragRotate: (boolean|undefined),
+ * @typedef {{
+ *     altShiftDragRotate: (boolean|undefined),
+ *     constrainResolution: (boolean|undefined),
  *     doubleClickZoom: (boolean|undefined),
  *     keyboard: (boolean|undefined),
  *     mouseWheelZoom: (boolean|undefined),
@@ -2397,7 +2590,8 @@ olx.interaction;
  *     pinchRotate: (boolean|undefined),
  *     pinchZoom: (boolean|undefined),
  *     zoomDelta: (number|undefined),
- *     zoomDuration: (number|undefined)}}
+ *     zoomDuration: (number|undefined)
+ * }}
  */
 olx.interaction.DefaultsOptions;
 
@@ -2410,6 +2604,15 @@ olx.interaction.DefaultsOptions;
 olx.interaction.DefaultsOptions.prototype.altShiftDragRotate;
 
 
+/**
+ * Zoom to the closest integer zoom level after the wheel/trackpad or
+ * pinch gesture ends. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.DefaultsOptions.prototype.constrainResolution;
+
+
 /**
  * Whether double click zoom is desired. Default is `true`.
  * @type {boolean|undefined}
@@ -2540,6 +2743,7 @@ olx.interaction.DragAndDropOptions.prototype.target;
 /**
  * @typedef {{className: (string|undefined),
  *     condition: (ol.EventsConditionType|undefined),
+ *     minArea: (number|undefined),
  *     boxEndCondition: (ol.DragBoxEndConditionType|undefined)}}
  */
 olx.interaction.DragBoxOptions;
@@ -2563,19 +2767,19 @@ olx.interaction.DragBoxOptions.prototype.className;
 olx.interaction.DragBoxOptions.prototype.condition;
 
 
+/**
+ * The minimum area of the box in pixel, this value is used by the default
+ * `boxEndCondition` function. Default is `64`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.interaction.DragBoxOptions.prototype.minArea;
+
+
 /**
  * A function that takes a {@link ol.MapBrowserEvent} and two
- * {@link ol.Pixel}s to indicate whether a boxend event should be fired.
- * Default is:
- * ```js
- * function(mapBrowserEvent,
- *     startPixel, endPixel) {
- *   var width = endPixel[0] - startPixel[0];
- *   var height = endPixel[1] - startPixel[1];
- *   return width * width + height * height >=
- *     ol.DRAG_BOX_HYSTERESIS_PIXELS_SQUARED;
- * }
- * ```
+ * {@link ol.Pixel}s to indicate whether a `boxend` event should be fired.
+ * Default is `true` if the area of the box is bigger than the `minArea` option.
  * @type {ol.DragBoxEndConditionType|undefined}
  * @api
  */
@@ -2867,7 +3071,7 @@ olx.interaction.DrawOptions.prototype.wrapX;
 olx.interaction.ExtentOptions;
 
 /**
- * Initial extent. Defaults to no inital extent
+ * Initial extent. Defaults to no initial extent
  * @type {ol.Extent|undefined}
  * @api
  */
@@ -2932,7 +3136,7 @@ olx.interaction.TranslateOptions.prototype.layers;
 /**
  * Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features. This only works for the canvas renderer and
- * not for WebGL.
+ * not for WebGL. Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -3009,12 +3213,16 @@ olx.interaction.KeyboardZoomOptions.prototype.delta;
 
 
 /**
- * @typedef {{condition: (ol.EventsConditionType|undefined),
+ * @typedef {{
+ *     condition: (ol.EventsConditionType|undefined),
  *     deleteCondition: (ol.EventsConditionType|undefined),
+ *     insertVertexCondition: (ol.EventsConditionType|undefined),
  *     pixelTolerance: (number|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
- *     features: ol.Collection.<ol.Feature>,
- *     wrapX: (boolean|undefined)}}
+ *     source: (ol.source.Vector|undefined),
+ *     features: (ol.Collection.<ol.Feature>|undefined),
+ *     wrapX: (boolean|undefined)
+ * }}
  */
 olx.interaction.ModifyOptions;
 
@@ -3041,6 +3249,16 @@ olx.interaction.ModifyOptions.prototype.condition;
 olx.interaction.ModifyOptions.prototype.deleteCondition;
 
 
+/**
+ * A function that takes an {@link ol.MapBrowserEvent} and returns a boolean
+ * to indicate whether a new vertex can be added to the sketch features.
+ * Default is {@link ol.events.condition.always}
+ * @type {ol.EventsConditionType|undefined}
+ * @api
+ */
+olx.interaction.ModifyOptions.prototype.insertVertexCondition;
+
+
 /**
  * Pixel tolerance for considering the pointer close enough to a segment or
  * vertex for editing. Default is `10`.
@@ -3060,8 +3278,18 @@ olx.interaction.ModifyOptions.prototype.style;
 
 
 /**
- * The features the interaction works on.
- * @type {ol.Collection.<ol.Feature>}
+ * The vector source with features to modify.  If a vector source is not
+ * provided, a feature collection must be provided with the features option.
+ * @type {ol.source.Vector|undefined}
+ * @api
+ */
+olx.interaction.ModifyOptions.prototype.source;
+
+
+/**
+ * The features the interaction works on.  If a feature collection is not
+ * provided, a vector source must be provided with the source option.
+ * @type {ol.Collection.<ol.Feature>|undefined}
  * @api
  */
 olx.interaction.ModifyOptions.prototype.features;
@@ -3076,7 +3304,8 @@ olx.interaction.ModifyOptions.prototype.wrapX;
 
 
 /**
- * @typedef {{duration: (number|undefined),
+ * @typedef {{constrainResolution: (boolean|undefined),
+ *     duration: (number|undefined),
  *     timeout: (number|undefined),
  *     useAnchor: (boolean|undefined)}}
  */
@@ -3099,6 +3328,16 @@ olx.interaction.MouseWheelZoomOptions.prototype.duration;
 olx.interaction.MouseWheelZoomOptions.prototype.timeout;
 
 
+/**
+ * When using a trackpad or magic mouse, zoom to the closest integer zoom level
+ * after the scroll gesture ends.
+ * Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.MouseWheelZoomOptions.prototype.constrainResolution;
+
+
 /**
  * Enable zooming using the mouse's location as the anchor. Default is `true`.
  * When set to false, zooming in and out will zoom to the center of the screen
@@ -3133,7 +3372,10 @@ olx.interaction.PinchRotateOptions.prototype.threshold;
 
 
 /**
- * @typedef {{duration: (number|undefined)}}
+ * @typedef {{
+ *     duration: (number|undefined),
+ *     constrainResolution: (boolean|undefined)
+ * }}
  */
 olx.interaction.PinchZoomOptions;
 
@@ -3339,7 +3581,7 @@ olx.interaction.SelectOptions.prototype.wrapX;
 /**
  * Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features. This only works for the canvas renderer and
- * not for WebGL.
+ * not for WebGL. Default is `0`.
  * @type {number|undefined}
  * @api
  */
@@ -3620,7 +3862,8 @@ olx.layer.GroupOptions.prototype.layers;
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
  *     source: (ol.source.Vector|undefined),
- *     visible: (boolean|undefined)}}
+ *     visible: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.HeatmapOptions;
 
@@ -3717,6 +3960,15 @@ olx.layer.HeatmapOptions.prototype.source;
 olx.layer.HeatmapOptions.prototype.visible;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.HeatmapOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{opacity: (number|undefined),
  *     map: (ol.Map|undefined),
@@ -3724,7 +3976,8 @@ olx.layer.HeatmapOptions.prototype.visible;
  *     visible: (boolean|undefined),
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
- *     maxResolution: (number|undefined)}}
+ *     maxResolution: (number|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.ImageOptions;
 
@@ -3789,6 +4042,15 @@ olx.layer.ImageOptions.prototype.minResolution;
 olx.layer.ImageOptions.prototype.maxResolution;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.ImageOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{opacity: (number|undefined),
  *     preload: (number|undefined),
@@ -3798,7 +4060,8 @@ olx.layer.ImageOptions.prototype.maxResolution;
  *     extent: (ol.Extent|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
- *     useInterimTilesOnError: (boolean|undefined)}}
+ *     useInterimTilesOnError: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.TileOptions;
 
@@ -3881,7 +4144,16 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
 
 
 /**
- * @typedef {{renderOrder: (function(ol.Feature, ol.Feature):number|null|undefined),
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.TileOptions.prototype.zIndex;
+
+
+/**
+ * @typedef {{renderOrder: (ol.RenderOrderFunction|null|undefined),
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
@@ -3891,7 +4163,8 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
- *     visible: (boolean|undefined)}}
+ *     visible: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.VectorOptions;
 
@@ -3900,7 +4173,7 @@ olx.layer.VectorOptions;
  * Render order. Function to be used when sorting features before rendering. By
  * default features are drawn in the order that they are created. Use `null` to
  * avoid the sort, but get an undefined draw order.
- * @type {function(ol.Feature, ol.Feature):number|null|undefined}
+ * @type {ol.RenderOrderFunction|null|undefined}
  * @api
  */
 olx.layer.VectorOptions.prototype.renderOrder;
@@ -4006,6 +4279,15 @@ olx.layer.VectorOptions.prototype.updateWhileInteracting;
 olx.layer.VectorOptions.prototype.visible;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.zIndex;
+
+
 /**
  * @typedef {{extent: (ol.Extent|undefined),
  *     map: (ol.Map|undefined),
@@ -4015,12 +4297,13 @@ olx.layer.VectorOptions.prototype.visible;
  *     preload: (number|undefined),
  *     renderBuffer: (number|undefined),
  *     renderMode: (ol.layer.VectorTileRenderType|string|undefined),
- *     renderOrder: (function(ol.Feature, ol.Feature):number|undefined),
+ *     renderOrder: (ol.RenderOrderFunction|undefined),
  *     source: (ol.source.VectorTile|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.StyleFunction|undefined),
  *     updateWhileAnimating: (boolean|undefined),
  *     updateWhileInteracting: (boolean|undefined),
- *     visible: (boolean|undefined)}}
+ *     visible: (boolean|undefined),
+ *     zIndex: (number|undefined)}}
  */
 olx.layer.VectorTileOptions;
 
@@ -4058,7 +4341,7 @@ olx.layer.VectorTileOptions.prototype.renderMode;
 /**
  * Render order. Function to be used when sorting features before rendering. By
  * default features are drawn in the order that they are created.
- * @type {function(ol.Feature, ol.Feature):number|undefined}
+ * @type {ol.RenderOrderFunction|undefined}
  * @api
  */
 olx.layer.VectorTileOptions.prototype.renderOrder;
@@ -4162,6 +4445,15 @@ olx.layer.VectorTileOptions.prototype.updateWhileInteracting;
 olx.layer.VectorTileOptions.prototype.visible;
 
 
+/**
+ * The z-index for layer rendering.  At rendering time, the layers will be
+ * ordered, first by Z-index and then by position. The default Z-index is 0.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.zIndex;
+
+
 /**
  * Namespace.
  * @type {Object}
@@ -4169,6 +4461,50 @@ olx.layer.VectorTileOptions.prototype.visible;
 olx.render;
 
 
+/**
+ * @typedef {{context: CanvasRenderingContext2D,
+ *     feature: (ol.Feature|ol.render.Feature),
+ *     geometry: ol.geom.SimpleGeometry,
+ *     pixelRatio: number,
+ *     resolution: number,
+ *     rotation: number}}
+ */
+olx.render.State;
+
+
+/**
+ * Canvas context that the layer is being rendered to.
+ * @type {CanvasRenderingContext2D}
+ * @api
+ */
+olx.render.State.prototype.context;
+
+
+/**
+ * Pixel ratio used by the layer renderer.
+ * @type {number}
+ * @api
+ */
+olx.render.State.prototype.pixelRatio;
+
+
+/**
+ * Resolution that the render batch was created and optimized for. This is
+ * not the view's resolution that is being rendered.
+ * @type {number}
+ * @api
+ */
+olx.render.State.prototype.resolution;
+
+
+/**
+ * Rotation of the rendered layer in radians.
+ * @type {number}
+ * @api
+ */
+olx.render.State.prototype.rotation;
+
+
 /**
  * @typedef {{size: (ol.Size|undefined),
  *     pixelRatio: (number|undefined)}}
@@ -4625,7 +4961,6 @@ olx.source.TileImageOptions.prototype.wrapX;
  *                 ol.TileLoadFunctionType)|undefined),
  *            tileGrid: (ol.tilegrid.TileGrid|undefined),
  *            tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *            tilePixelRatio: (number|undefined),
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
@@ -4695,7 +5030,7 @@ olx.source.VectorTileOptions.prototype.state;
 
 
 /**
- * Class used to instantiate image tiles. Default is {@link ol.VectorTile}.
+ * Class used to instantiate vector tiles. Default is {@link ol.VectorTile}.
  * @type {function(new: ol.VectorTile, ol.TileCoord,
  *                 ol.TileState, string, ol.format.Feature,
  *                 ol.TileLoadFunctionType)|undefined}
@@ -4721,6 +5056,8 @@ olx.source.VectorTileOptions.prototype.tileGrid;
  *     var format = tile.getFormat();
  *     tile.setFeatures(format.readFeatures(data));
  *     tile.setProjection(format.readProjection(data));
+ *     // uncomment the line below for ol.format.MVT only
+ *     //tile.setExtent(format.getLastExtent());
  *   };
  * });
  * ```
@@ -4730,17 +5067,6 @@ olx.source.VectorTileOptions.prototype.tileGrid;
 olx.source.VectorTileOptions.prototype.tileLoadFunction;
 
 
-/**
- * The pixel ratio used by the tile service. For example, if the tile
- * service advertizes 256px by 256px tiles but actually sends 512px
- * by 512px tiles (for retina/hidpi devices) then `tilePixelRatio`
- * should be set to `2`. Default is `1`.
- * @type {number|undefined}
- * @api
- */
-olx.source.VectorTileOptions.prototype.tilePixelRatio;
-
-
 /**
  * Optional function to get tile URL given a tile coordinate and the projection.
  * @type {ol.TileUrlFunctionType|undefined}
@@ -5506,14 +5832,17 @@ olx.source.ImageWMSOptions.prototype.url;
 
 
 /**
- * @typedef {{cacheSize: (number|undefined),
+ * @typedef {{
+ *     cacheSize: (number|undefined),
  *     layer: string,
  *     minZoom: (number|undefined),
  *     maxZoom: (number|undefined),
  *     opaque: (boolean|undefined),
  *     reprojectionErrorThreshold: (number|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *     url: (string|undefined)}}
+ *     url: (string|undefined),
+ *     wrapX: (boolean|undefined)
+ * }}
  */
 olx.source.StamenOptions;
 
@@ -5587,6 +5916,14 @@ olx.source.StamenOptions.prototype.tileLoadFunction;
 olx.source.StamenOptions.prototype.url;
 
 
+/**
+ * Whether to wrap the world horizontally. Default is `true`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.StamenOptions.prototype.wrapX;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     crossOrigin: (null|string|undefined),
@@ -5811,8 +6148,9 @@ olx.source.TileArcGISRestOptions.prototype.urls;
  *     crossOrigin: (null|string|undefined),
  *     jsonp: (boolean|undefined),
  *     reprojectionErrorThreshold: (number|undefined),
+ *     tileJSON: (TileJSON|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
- *     url: string,
+ *     url: (string|undefined),
  *     wrapX: (boolean|undefined)}}
  */
 olx.source.TileJSONOptions;
@@ -5866,6 +6204,15 @@ olx.source.TileJSONOptions.prototype.jsonp;
 olx.source.TileJSONOptions.prototype.reprojectionErrorThreshold;
 
 
+/**
+ * TileJSON configuration for this source. If not provided, `url` must be
+ * configured.
+ * @type {TileJSON|undefined}
+ * @api
+ */
+olx.source.TileJSONOptions.prototype.tileJSON;
+
+
 /**
  * Optional function to load a tile given a URL. The default is
  * ```js
@@ -5880,8 +6227,8 @@ olx.source.TileJSONOptions.prototype.tileLoadFunction;
 
 
 /**
- * URL to the TileJSON file.
- * @type {string}
+ * URL to the TileJSON file. If not provided, `tileJSON` must be configured.
+ * @type {string|undefined}
  * @api
  */
 olx.source.TileJSONOptions.prototype.url;
@@ -5903,6 +6250,9 @@ olx.source.TileJSONOptions.prototype.wrapX;
  *     gutter: (number|undefined),
  *     hidpi: (boolean|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
+ *     tileClass: (function(new: ol.ImageTile, ol.TileCoord,
+ *                          ol.TileState, string, ?string,
+ *                          ol.TileLoadFunctionType)|undefined),
  *     tileGrid: (ol.tilegrid.TileGrid|undefined),
  *     projection: ol.ProjectionLike,
  *     reprojectionErrorThreshold: (number|undefined),
@@ -5985,6 +6335,16 @@ olx.source.TileWMSOptions.prototype.hidpi;
 olx.source.TileWMSOptions.prototype.logo;
 
 
+/**
+ * Class used to instantiate image tiles. Default is {@link ol.ImageTile}.
+ * @type {function(new: ol.ImageTile, ol.TileCoord,
+ *                 ol.TileState, string, ?string,
+ *                 ol.TileLoadFunctionType)|undefined}
+ * @api
+ */
+olx.source.TileWMSOptions.prototype.tileClass;
+
+
 /**
  * Tile grid. Base this on the resolutions, tilesize and extent supported by the
  * server.
@@ -6986,7 +7346,7 @@ olx.style.IconOptions.prototype.opacity;
 
 
 /**
- * Scale.
+ * Scale. Default is `1`.
  * @type {number|undefined}
  * @api
  */
@@ -7044,7 +7404,7 @@ olx.style.IconOptions.prototype.imgSize;
 
 /**
  * Image source URI.
- * @type {string}
+ * @type {string|undefined}
  * @api
  */
 olx.style.IconOptions.prototype.src;
@@ -7093,7 +7453,7 @@ olx.style.RegularShapeOptions.prototype.radius;
 
 
 /**
- * Inner radius of a star.
+ * Outer radius of a star.
  * @type {number|undefined}
  * @api
  */
@@ -7101,7 +7461,7 @@ olx.style.RegularShapeOptions.prototype.radius1;
 
 
 /**
- * Outer radius of a star.
+ * Inner radius of a star.
  * @type {number|undefined}
  * @api
  */
@@ -7356,6 +7716,7 @@ olx.style.TextOptions.prototype.stroke;
  * @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.StyleGeometryFunction),
  *     fill: (ol.style.Fill|undefined),
  *     image: (ol.style.Image|undefined),
+ *     renderer: (ol.StyleRenderFunction|undefined),
  *     stroke: (ol.style.Stroke|undefined),
  *     text: (ol.style.Text|undefined),
  *     zIndex: (number|undefined)}}
@@ -7388,6 +7749,16 @@ olx.style.StyleOptions.prototype.fill;
 olx.style.StyleOptions.prototype.image;
 
 
+/**
+ * Custom renderer. When configured, `fill`, `stroke` and `image` will be
+ * ignored, and the provided function will be called with each render frame for
+ * each geometry.
+ *
+ * @type {ol.StyleRenderFunction|undefined}
+ */
+olx.style.StyleOptions.prototype.renderer;
+
+
 /**
  * Stroke style.
  * @type {ol.style.Stroke|undefined}
@@ -7669,7 +8040,8 @@ olx.view;
  *     maxZoom: (number|undefined),
  *     minResolution: (number|undefined),
  *     duration: (number|undefined),
- *     easing: (undefined|function(number):number)
+ *     easing: (undefined|function(number):number),
+ *     callback: (undefined|function(boolean))
  * }}
  */
 olx.view.FitOptions;
@@ -7747,6 +8119,16 @@ olx.view.FitOptions.prototype.duration;
 olx.view.FitOptions.prototype.easing;
 
 
+/**
+ * Optional function called when the view is in it's final position. The callback will be
+ * called with `true` if the animation series completed on its own or `false`
+ * if it was cancelled.
+ * @type {undefined|function(boolean)}
+ * @api
+ */
+olx.view.FitOptions.prototype.callback;
+
+
 /* typedefs for object literals exposed by the library */
 
 

externs/proj4js.js

@@ -7,25 +7,31 @@
 /**
  * @constructor
  */
-var proj4 = function() {};
+var Proj4 = function() {};
 
 
 /**
- * @type {function(Array.<number>): Array.<number>}
+ * @param {ol.Coordinate} coordinates
+ * @return {ol.Coordinate}
  */
-proj4.prototype.forward;
+Proj4.prototype.forward = function(coordinates) {};
 
 
 /**
- * @type {function(Array.<number>): Array.<number>}
+ * @param {ol.Coordinate} coordinates
+ * @return {ol.Coordinate}
  */
-proj4.prototype.inverse;
+Proj4.prototype.inverse = function(coordinates) {};
 
 
 /**
  * @param {string} name
  * @param {(string|Object)=} opt_def
- * @return {undefined|Object.<string, Object.<{axis: string, units: string,
- *     to_meter: number}>>}
+ * @return {undefined|Object.<string, Object.<{axis: string, units: string, to_meter: number}>>}
  */
-proj4.defs = function(name, opt_def) {};
+Proj4.prototype.defs = function(name, opt_def) {};
+
+/**
+ * @type {Proj4}
+ */
+var proj4;

externs/tilejson.js

@@ -5,7 +5,6 @@
  */
 
 
-
 /**
  * @constructor
  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openlayers",
-  "version": "4.0.1",
+  "version": "4.3.0-beta.3",
   "description": "Build tools and sources for developing OpenLayers based mapping applications",
   "keywords": [
     "map",
@@ -13,6 +13,7 @@
     "postinstall": "closure-util update",
     "start": "node tasks/serve.js",
     "pretest": "eslint tasks test test_rendering src examples",
+    "lint-package": "eslint --fix build/package",
     "test": "node tasks/test.js",
     "debug-server": "node tasks/serve-lib.js"
   },
@@ -30,47 +31,48 @@
     "css/ol.css"
   ],
   "dependencies": {
-    "async": "2.1.4",
-    "browserify": "14.0.0",
-    "closure-util": "1.17.0",
-    "derequire": "2.0.6",
-    "fs-extra": "2.0.0",
-    "glob": "7.1.1",
-    "handlebars": "4.0.6",
-    "jsdoc": "3.4.3",
-    "marked": "0.3.6",
-    "metalsmith": "2.3.0",
-    "metalsmith-layouts": "1.8.0",
+    "async": "2.5.0",
+    "closure-util": "1.22.0",
+    "fs-extra": "4.0.1",
+    "jsdoc": "3.5.4",
     "nomnom": "1.8.1",
     "pbf": "3.0.5",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
+    "rollup": "^0.45.0",
+    "rollup-plugin-cleanup": "^1.0.0",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "temp": "0.8.3",
-    "vector-tile": "1.3.0",
+    "@mapbox/vector-tile": "1.3.0",
     "walk": "2.3.9"
   },
   "devDependencies": {
-    "clean-css-cli": "4.0.6",
-    "coveralls": "2.11.16",
+    "clean-css-cli": "4.1.6",
+    "coveralls": "2.13.1",
     "debounce": "^1.0.0",
-    "eslint": "3.15.0",
+    "eslint": "4.4.1",
     "eslint-config-openlayers": "7.0.0",
     "eslint-plugin-openlayers-internal": "^3.1.0",
-    "esprima": "2.x",
     "expect.js": "0.3.1",
     "gaze": "^1.0.0",
+    "glob": "7.1.1",
+    "handlebars": "4.0.10",
     "istanbul": "0.4.5",
-    "jquery": "3.1.1",
+    "jquery": "3.2.1",
     "jscodeshift": "^0.3.30",
-    "mocha": "3.2.0",
+    "marked": "0.3.6",
+    "metalsmith": "2.3.0",
+    "metalsmith-layouts": "1.8.1",
+    "mocha": "3.5.0",
     "mocha-phantomjs-core": "^2.1.0",
     "mustache": "2.3.0",
     "phantomjs-prebuilt": "2.1.14",
-    "proj4": "2.3.17",
-    "resemblejs": "2.2.3",
+    "proj4": "2.4.3",
+    "resemblejs": "2.2.4",
     "serve-files": "1.0.1",
-    "sinon": "1.17.7",
-    "slimerjs": "0.906.2"
+    "sinon": "3.1.0",
+    "slimerjs": "0.10.3"
   },
   "eslintConfig": {
     "extends": "openlayers",
@@ -92,31 +94,50 @@
       "no-constant-condition": 0,
       "openlayers-internal/enum": 2,
       "openlayers-internal/no-duplicate-requires": 2,
-      "openlayers-internal/no-missing-requires": 1,
+      "openlayers-internal/no-missing-requires": 2,
       "openlayers-internal/no-unused-requires": 2,
       "openlayers-internal/one-provide": 2,
       "openlayers-internal/requires-first": 2,
       "openlayers-internal/valid-provide": 2,
-      "openlayers-internal/valid-requires": 2
+      "openlayers-internal/valid-requires": 2,
+      "indent": [
+        2,
+        2,
+        {
+          "VariableDeclarator": 2,
+          "SwitchCase": 1,
+          "MemberExpression": 2,
+          "FunctionDeclaration": {
+            "parameters": 2,
+            "body": 1
+          },
+          "FunctionExpression": {
+            "parameters": 2,
+            "body": 1
+          },
+          "CallExpression": {
+            "arguments": 2
+          }
+        }
+      ]
     }
   },
   "ext": [
     {
-      "module": "rbush",
-      "browserify": true
+      "module": "rbush"
     },
     {
       "module": "pbf",
-      "browserify": true
+      "name": "PBF"
     },
     {
       "module": "pixelworks",
-      "browserify": true
+      "import": "Processor"
     },
     {
-      "module": "vector-tile",
+      "module": "@mapbox/vector-tile",
       "name": "vectortile",
-      "browserify": true
+      "import": "VectorTile"
     }
   ]
 }

package/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "4.0.1-beta.1",
+  "version": "4.2.0",
   "description": "OpenLayers as ES2015 modules",
   "main": "index.js",
   "module": "index.js",
@@ -9,6 +9,16 @@
     "pbf": "3.0.5",
     "pixelworks": "1.1.0",
     "rbush": "2.0.1",
-    "vector-tile": "1.3.0"
+    "@mapbox/vector-tile": "1.3.0"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "plugins": ["transform-es2015-modules-commonjs"]
+        }
+      ]
+    ]
   }
 }

package/readme.md

@@ -2,8 +2,6 @@
 
 OpenLayers as ES2015 modules.
 
-**Note: This package is in beta and the API is subject to change before a final stable release.**
-
 ## Usage
 
 Add the `ol` package as a dependency to your project.
@@ -51,5 +49,4 @@ Utility functions are available as properties of the default export from utility
 
 ## Caveats
 
- * Module identifiers and the structure of the exports are subject to change while this package is in beta.
  * The WebGL renderer is not available in this package.

src/ol/assertionerror.js

@@ -13,11 +13,12 @@ goog.require('ol');
  */
 ol.AssertionError = function(code) {
 
+  var path = ol.VERSION ? ol.VERSION.split('-')[0] : 'latest';
+
   /**
    * @type {string}
    */
-  this.message = 'Assertion failed. See ' +
-      (ol.VERSION ? 'https://openlayers.org/en/' + ol.VERSION.split('-')[0] : '') +
+  this.message = 'Assertion failed. See https://openlayers.org/en/' + path +
       '/doc/errors/#' + code + ' for details.';
 
   /**

src/ol/centerconstraint.js

@@ -9,20 +9,20 @@ goog.require('ol.math');
  */
 ol.CenterConstraint.createExtent = function(extent) {
   return (
-      /**
-       * @param {ol.Coordinate|undefined} center Center.
-       * @return {ol.Coordinate|undefined} Center.
-       */
-      function(center) {
-        if (center) {
-          return [
-            ol.math.clamp(center[0], extent[0], extent[2]),
-            ol.math.clamp(center[1], extent[1], extent[3])
-          ];
-        } else {
-          return undefined;
-        }
-      });
+    /**
+     * @param {ol.Coordinate|undefined} center Center.
+     * @return {ol.Coordinate|undefined} Center.
+     */
+    function(center) {
+      if (center) {
+        return [
+          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

@@ -6,6 +6,7 @@
 goog.provide('ol.Collection');
 
 goog.require('ol');
+goog.require('ol.AssertionError');
 goog.require('ol.CollectionEventType');
 goog.require('ol.Object');
 goog.require('ol.events.Event');
@@ -22,20 +23,35 @@ goog.require('ol.events.Event');
  * @constructor
  * @extends {ol.Object}
  * @fires ol.Collection.Event
- * @param {!Array.<T>=} opt_array Array.
+ * @param {Array.<T>=} opt_array Array.
+ * @param {olx.CollectionOptions=} opt_options Collection options.
  * @template T
  * @api
  */
-ol.Collection = function(opt_array) {
+ol.Collection = function(opt_array, opt_options) {
 
   ol.Object.call(this);
 
+  var options = opt_options || {};
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.unique_ = !!options.unique;
+
   /**
    * @private
    * @type {!Array.<T>}
    */
   this.array_ = opt_array ? opt_array : [];
 
+  if (this.unique_) {
+    for (var i = 0, ii = this.array_.length; i < ii; ++i) {
+      this.assertUnique_(this.array_[i], i);
+    }
+  }
+
   this.updateLength_();
 
 };
@@ -79,7 +95,11 @@ ol.Collection.prototype.extend = function(arr) {
  * @api
  */
 ol.Collection.prototype.forEach = function(f, opt_this) {
-  this.array_.forEach(f, opt_this);
+  var fn = (opt_this) ? f.bind(opt_this) : f;
+  var array = this.array_;
+  for (var i = 0, ii = array.length; i < ii; ++i) {
+    fn(array[i], i, array);
+  }
 };
 
 
@@ -125,6 +145,9 @@ ol.Collection.prototype.getLength = function() {
  * @api
  */
 ol.Collection.prototype.insertAt = function(index, elem) {
+  if (this.unique_) {
+    this.assertUnique_(elem);
+  }
   this.array_.splice(index, 0, elem);
   this.updateLength_();
   this.dispatchEvent(
@@ -150,6 +173,9 @@ ol.Collection.prototype.pop = function() {
  * @api
  */
 ol.Collection.prototype.push = function(elem) {
+  if (this.unique_) {
+    this.assertUnique_(elem);
+  }
   var n = this.getLength();
   this.insertAt(n, elem);
   return this.getLength();
@@ -200,6 +226,9 @@ ol.Collection.prototype.removeAt = function(index) {
 ol.Collection.prototype.setAt = function(index, elem) {
   var n = this.getLength();
   if (index < n) {
+    if (this.unique_) {
+      this.assertUnique_(elem, index);
+    }
     var prev = this.array_[index];
     this.array_[index] = elem;
     this.dispatchEvent(
@@ -224,6 +253,20 @@ ol.Collection.prototype.updateLength_ = function() {
 };
 
 
+/**
+ * @private
+ * @param {T} elem Element.
+ * @param {number=} opt_except Optional index to ignore.
+ */
+ol.Collection.prototype.assertUnique_ = function(elem, opt_except) {
+  for (var i = 0, ii = this.array_.length; i < ii; ++i) {
+    if (this.array_[i] === elem && i !== opt_except) {
+      throw new ol.AssertionError(58);
+    }
+  }
+};
+
+
 /**
  * @enum {string}
  * @private

src/ol/color.js

@@ -72,56 +72,56 @@ ol.color.fromNamed = function(color) {
  * @return {ol.Color} Color.
  */
 ol.color.fromString = (
-    function() {
+  function() {
 
-      // We maintain a small cache of parsed strings.  To provide cheap LRU-like
-      // semantics, whenever the cache grows too large we simply delete an
-      // arbitrary 25% of the entries.
+    // We maintain a small cache of parsed strings.  To provide cheap LRU-like
+    // semantics, whenever the cache grows too large we simply delete an
+    // arbitrary 25% of the entries.
 
+    /**
+     * @const
+     * @type {number}
+     */
+    var MAX_CACHE_SIZE = 1024;
+
+    /**
+     * @type {Object.<string, ol.Color>}
+     */
+    var cache = {};
+
+    /**
+     * @type {number}
+     */
+    var cacheSize = 0;
+
+    return (
       /**
-       * @const
-       * @type {number}
+       * @param {string} s String.
+       * @return {ol.Color} Color.
        */
-      var MAX_CACHE_SIZE = 1024;
-
-      /**
-       * @type {Object.<string, ol.Color>}
-       */
-      var cache = {};
-
-      /**
-       * @type {number}
-       */
-      var cacheSize = 0;
-
-      return (
-          /**
-           * @param {string} s String.
-           * @return {ol.Color} Color.
-           */
-          function(s) {
-            var color;
-            if (cache.hasOwnProperty(s)) {
-              color = cache[s];
-            } else {
-              if (cacheSize >= MAX_CACHE_SIZE) {
-                var i = 0;
-                var key;
-                for (key in cache) {
-                  if ((i++ & 3) === 0) {
-                    delete cache[key];
-                    --cacheSize;
-                  }
-                }
+      function(s) {
+        var color;
+        if (cache.hasOwnProperty(s)) {
+          color = cache[s];
+        } else {
+          if (cacheSize >= MAX_CACHE_SIZE) {
+            var i = 0;
+            var key;
+            for (key in cache) {
+              if ((i++ & 3) === 0) {
+                delete cache[key];
+                --cacheSize;
               }
-              color = ol.color.fromStringInternal_(s);
-              cache[s] = color;
-              ++cacheSize;
             }
-            return color;
-          });
+          }
+          color = ol.color.fromStringInternal_(s);
+          cache[s] = color;
+          ++cacheSize;
+        }
+        return color;
+      });
 
-    })();
+  })();
 
 
 /**

src/ol/colorlike.js

@@ -23,8 +23,8 @@ ol.colorlike.asColorLike = function(color) {
  */
 ol.colorlike.isColorLike = function(color) {
   return (
-      typeof color === 'string' ||
-      color instanceof CanvasPattern ||
-      color instanceof CanvasGradient
+    typeof color === 'string' ||
+    color instanceof CanvasPattern ||
+    color instanceof CanvasGradient
   );
 };

src/ol/constraints.js

@@ -1,29 +0,0 @@
-goog.provide('ol.Constraints');
-
-
-/**
- * @constructor
- * @param {ol.CenterConstraintType} centerConstraint Center constraint.
- * @param {ol.ResolutionConstraintType} resolutionConstraint
- *     Resolution constraint.
- * @param {ol.RotationConstraintType} rotationConstraint
- *     Rotation constraint.
- */
-ol.Constraints = function(centerConstraint, resolutionConstraint, rotationConstraint) {
-
-  /**
-   * @type {ol.CenterConstraintType}
-   */
-  this.center = centerConstraint;
-
-  /**
-   * @type {ol.ResolutionConstraintType}
-   */
-  this.resolution = resolutionConstraint;
-
-  /**
-   * @type {ol.RotationConstraintType}
-   */
-  this.rotation = rotationConstraint;
-
-};

src/ol/control.js

@@ -35,7 +35,7 @@ ol.control.defaults = function(opt_options) {
   }
 
   var attributionControl = options.attribution !== undefined ?
-      options.attribution : true;
+    options.attribution : true;
   if (attributionControl) {
     controls.push(new ol.control.Attribution(options.attributionOptions));
   }

src/ol/control/attribution.js

@@ -53,7 +53,7 @@ ol.control.Attribution = function(opt_options) {
    * @type {boolean}
    */
   this.collapsible_ = options.collapsible !== undefined ?
-      options.collapsible : true;
+    options.collapsible : true;
 
   if (!this.collapsible_) {
     this.collapsed_ = false;
@@ -91,7 +91,7 @@ ol.control.Attribution = function(opt_options) {
 
 
   var activeLabel = (this.collapsible_ && !this.collapsed_) ?
-      this.collapseLabel_ : this.label_;
+    this.collapseLabel_ : this.label_;
   var button = document.createElement('button');
   button.setAttribute('type', 'button');
   button.title = tipLabel;

src/ol/control/control.js

@@ -115,7 +115,7 @@ ol.control.Control.prototype.setMap = function(map) {
   this.map_ = map;
   if (this.map_) {
     var target = this.target_ ?
-        this.target_ : map.getOverlayContainerStopEvent();
+      this.target_ : map.getOverlayContainerStopEvent();
     target.appendChild(this.element);
     if (this.render !== ol.nullFunction) {
       this.listenerKeys.push(ol.events.listen(map,

src/ol/control/fullscreen.js

@@ -12,7 +12,7 @@ goog.require('ol.events.EventType');
  * @classdesc
  * Provides a button that when clicked fills up the full screen with the map.
  * The full screen source element is by default the element containing the map viewport unless
- * overriden by providing the `source` option. In which case, the dom
+ * overridden by providing the `source` option. In which case, the dom
  * element introduced using this parameter will be displayed in full screen.
  *
  * When in full screen mode, a close button is shown to exit full screen mode.
@@ -34,7 +34,7 @@ ol.control.FullScreen = function(opt_options) {
    * @type {string}
    */
   this.cssClassName_ = options.className !== undefined ? options.className :
-      'ol-full-screen';
+    'ol-full-screen';
 
   var label = options.label !== undefined ? options.label : '\u2922';
 
@@ -43,7 +43,7 @@ ol.control.FullScreen = function(opt_options) {
    * @type {Node}
    */
   this.labelNode_ = typeof label === 'string' ?
-      document.createTextNode(label) : label;
+    document.createTextNode(label) : label;
 
   var labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7';
 
@@ -52,7 +52,7 @@ ol.control.FullScreen = function(opt_options) {
    * @type {Node}
    */
   this.labelActiveNode_ = typeof labelActive === 'string' ?
-      document.createTextNode(labelActive) : labelActive;
+    document.createTextNode(labelActive) : labelActive;
 
   var tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
   var button = document.createElement('button');

src/ol/control/mouseposition.js

@@ -31,7 +31,7 @@ ol.control.MousePosition = function(opt_options) {
   element.className = options.className !== undefined ? options.className : 'ol-mouse-position';
 
   var render = options.render ?
-      options.render : ol.control.MousePosition.render;
+    options.render : ol.control.MousePosition.render;
 
   ol.control.Control.call(this, {
     element: element,
@@ -47,7 +47,7 @@ ol.control.MousePosition = function(opt_options) {
     this.setCoordinateFormat(options.coordinateFormat);
   }
   if (options.projection) {
-    this.setProjection(ol.proj.get(options.projection));
+    this.setProjection(options.projection);
   }
 
   /**
@@ -122,7 +122,7 @@ ol.control.MousePosition.prototype.handleProjectionChanged_ = function() {
  */
 ol.control.MousePosition.prototype.getCoordinateFormat = function() {
   return /** @type {ol.CoordinateFormatType|undefined} */ (
-      this.get(ol.control.MousePosition.Property_.COORDINATE_FORMAT));
+    this.get(ol.control.MousePosition.Property_.COORDINATE_FORMAT));
 };
 
 
@@ -135,7 +135,7 @@ ol.control.MousePosition.prototype.getCoordinateFormat = function() {
  */
 ol.control.MousePosition.prototype.getProjection = function() {
   return /** @type {ol.proj.Projection|undefined} */ (
-      this.get(ol.control.MousePosition.Property_.PROJECTION));
+    this.get(ol.control.MousePosition.Property_.PROJECTION));
 };
 
 
@@ -192,13 +192,13 @@ ol.control.MousePosition.prototype.setCoordinateFormat = function(format) {
 
 /**
  * Set the projection that is used to report the mouse position.
- * @param {ol.proj.Projection} projection The projection to report mouse
+ * @param {ol.ProjectionLike} projection The projection to report mouse
  *     position in.
  * @observable
  * @api
  */
 ol.control.MousePosition.prototype.setProjection = function(projection) {
-  this.set(ol.control.MousePosition.Property_.PROJECTION, projection);
+  this.set(ol.control.MousePosition.Property_.PROJECTION, ol.proj.get(projection));
 };
 
 

src/ol/control/overviewmap.js

@@ -42,7 +42,7 @@ ol.control.OverviewMap = function(opt_options) {
    * @type {boolean}
    */
   this.collapsible_ = options.collapsible !== undefined ?
-      options.collapsible : true;
+    options.collapsible : true;
 
   if (!this.collapsible_) {
     this.collapsed_ = false;
@@ -80,7 +80,7 @@ ol.control.OverviewMap = function(opt_options) {
   }
 
   var activeLabel = (this.collapsible_ && !this.collapsed_) ?
-      this.collapseLabel_ : this.label_;
+    this.collapseLabel_ : this.label_;
   var button = document.createElement('button');
   button.setAttribute('type', 'button');
   button.title = tipLabel;
@@ -148,6 +148,44 @@ ol.control.OverviewMap = function(opt_options) {
     render: render,
     target: options.target
   });
+
+  /* Interactive map */
+
+  var scope = this;
+
+  var overlay = this.boxOverlay_;
+  var overlayBox = this.boxOverlay_.getElement();
+
+  /* Functions definition */
+
+  var computeDesiredMousePosition = function(mousePosition) {
+    return {
+      clientX: mousePosition.clientX - (overlayBox.offsetWidth / 2),
+      clientY: mousePosition.clientY + (overlayBox.offsetHeight / 2)
+    };
+  };
+
+  var move = function(event) {
+    var coordinates = ovmap.getEventCoordinate(computeDesiredMousePosition(event));
+
+    overlay.setPosition(coordinates);
+  };
+
+  var endMoving = function(event) {
+    var coordinates = ovmap.getEventCoordinate(event);
+
+    scope.getMap().getView().setCenter(coordinates);
+
+    window.removeEventListener('mousemove', move);
+    window.removeEventListener('mouseup', endMoving);
+  };
+
+  /* Binding */
+
+  overlayBox.addEventListener('mousedown', function() {
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', endMoving);
+  });
 };
 ol.inherits(ol.control.OverviewMap, ol.control.Control);
 

src/ol/control/rotate.js

@@ -120,16 +120,8 @@ ol.control.Rotate.prototype.resetNorth_ = function() {
     // upon it
     return;
   }
-  var currentRotation = view.getRotation();
-  if (currentRotation !== undefined) {
+  if (view.getRotation() !== undefined) {
     if (this.duration_ > 0) {
-      currentRotation = currentRotation % (2 * Math.PI);
-      if (currentRotation < -Math.PI) {
-        currentRotation += 2 * Math.PI;
-      }
-      if (currentRotation > Math.PI) {
-        currentRotation -= 2 * Math.PI;
-      }
       view.animate({
         rotation: 0,
         duration: this.duration_,