6.0 notes and version bump

uploading local resources to codesandbox

.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - name: Install dependencies
+        run: npm ci
+      - name: Publish
+        run: |
+          VERSION=$(node tasks/next-dev-version.js)
+          npm --no-git-tag-version version ${VERSION}
+          npm run build-package
+          cd build/ol
+          npm publish --tag dev
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

changelog/upgrade-notes.md

@@ -1,10 +1,27 @@
 ## Upgrade notes
 
-### Next version
+### v6.0.0
 
 #### Backwards incompatible changes
 
-#### Removal of `TOUCH` constant from `ol/has`
+##### Usage of `map.forEachLayerAtPixel`
+
+Due to performance considerations, the layers in a map will sometimes be rendered into one
+single canvas instead of separate elements.
+This means `map.forEachLayerAtPixel` will bring up false positives.
+
+The easiest solution to avoid that is to assign different `className` properties to each layer like so:
+```js
+new Layer({
+   // ...
+   className: 'my-layer'
+})
+```
+
+Please note that this may incur a significant performance loss when dealing with many layers and/or
+targetting mobile devices.
+
+##### Removal of `TOUCH` constant from `ol/has`
 
 If you were previously using this constant, you can check if `'ontouchstart'` is defined in `window` instead.
 
@@ -14,7 +31,7 @@ if ('ontouchstart' in window) {
 }
 ```
 
-#### Removal of `GEOLOCATION` constant from `ol/has`
+##### Removal of `GEOLOCATION` constant from `ol/has`
 
 If you were previously using this constant, you can check if `'geolocation'` is defined in `navigator` instead.
 
@@ -24,7 +41,7 @@ if ('geolocation' in navigator) {
 }
 ```
 
-#### Removal of CSS print rules
+##### Removal of CSS print rules
 
 The CSS media print rules were removed from the `ol.css` file. To get the previous behavior, use the following CSS:
 
@@ -36,7 +53,7 @@ The CSS media print rules were removed from the `ol.css` file. To get the previo
 }
 ```
 
-#### Removal of optional this arguments
+##### Removal of optional this arguments
 
 The optional this (i.e. opt_this) arguments were removed from the following methods.
 Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here:
@@ -254,6 +271,18 @@ The `ol/source/Vector#clear()` method no longer triggers a reload of the data fr
 
 The `ol/source/Vector#refresh()` method now removes all features from the source and triggers a reload of the data from the server. If you were previously using the `refresh()` method to re-render a vector layer, you should instead call `ol/layer/Vector#changed()`.
 
+##### Renaming of `getGetFeatureInfoUrl` to `getFeatureInfoUrl`
+
+The `getGetFeatureInfoUrl` of `ol/source/ImageWMS` and `ol/source/TileWMS` is now called `getFeatureInfoUrl`.
+
+##### `getFeaturesAtPixel` always returns an array
+
+`getFeaturesAtPixel` now returns an empty array instead of null if no features were found.
+
+##### Hit detection with unfilled styles
+
+Hit detection over styled Circle geometry and Circle and RegularShape styles is now consistent with that for styled Polygon geometry. There is no hit detection over the interior of unfilled shapes. To get the previous behavior, specify a Fill style with transparent color.
+
 #### Other changes
 
 ##### Allow declutter in image render mode

changelog/v6.0.0.md

@@ -0,0 +1,857 @@
+# 6.0.0
+
+Wow.  The 6.0 release includes changes from 1780 commits in 544 pull requests since the 5.3 release.  Thanks to all who contributed to this effort.
+
+A major feature in this release is the ability to compose layers with different renderer types.  Previously, the map used a single rendering strategy, and all layers in your map had to implement that strategy.  Now it is possible to have a map with layers that use different rendering technologies.  This makes it possible, for example, to have Canvas (2D) layer composed together with a WebGL based layer in the same map.  It is also possible to create layers with custom renderers.  So you could have a map that uses another library (like d3) to render one layer and use OpenLayers to render the other layers.  We will continue to take advantage of this new flexibility in future releases.
+
+In addition, the 6.0 release includes a number of vector tile rendering improvements, and should have a lower memory footprint overall.  The release also includes a number of experimental features that are not yet part of the stable API.  Take a look through the examples for a new WebGL based renderer and the experimental `useGeographic()` function.  Watch upcoming releases for more detail on these.
+
+This release includes a number of backwards incompatible changes.  Take a careful look at the notes below when upgrading your application from the 5.3 release.
+
+#### Backwards incompatible changes
+
+##### Usage of `map.forEachLayerAtPixel`
+
+Due to performance considerations, the layers in a map will sometimes be rendered into one
+single canvas instead of separate elements.
+This means `map.forEachLayerAtPixel` will bring up false positives.
+
+The easiest solution to avoid that is to assign different `className` properties to each layer like so:
+```js
+new Layer({
+   // ...
+   className: 'my-layer'
+})
+```
+
+Please note that this may incur a significant performance loss when dealing with many layers and/or
+targetting mobile devices.
+
+##### Removal of `TOUCH` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'ontouchstart'` is defined in `window` instead.
+
+```js
+if ('ontouchstart' in window) {
+  // ...
+}
+```
+
+##### Removal of `GEOLOCATION` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'geolocation'` is defined in `navigator` instead.
+
+```js
+if ('geolocation' in navigator) {
+  // ...
+}
+```
+
+##### Removal of CSS print rules
+
+The CSS media print rules were removed from the `ol.css` file. To get the previous behavior, use the following CSS:
+
+```css
+@media print {
+  .ol-control {
+    display: none;
+  }
+}
+```
+
+##### Removal of optional this arguments
+
+The optional this (i.e. opt_this) arguments were removed from the following methods.
+Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+* `forEachCorner` in `ol/extent`
+* `LRUCache#forEach`
+* `RBush#forEach` and `RBush#forEachInExtent`
+
+##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
+
+Previously, these methods allowed setting values that were inconsistent with the given view constraints.
+This is no longer the case and all changes to the view state now follow the same logic:
+target values are provided and constraints are applied on these to determine the actual values to be used.
+
+##### Removal of the `constrainResolution` option on `View.fit`, `PinchZoom`, `MouseWheelZoom` and `ol/interaction.js`
+
+The `constrainResolution` option is now only supported by the `View` class. A `View.setConstrainResolution` method was added as well.
+
+Generally, the responsibility of applying center/rotation/resolutions constraints was moved from interactions and controls to the `View` class.
+
+##### The view `extent` option now applies to the whole viewport
+
+Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
+
+As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
+
+##### The view is constrained so only one world is visible
+
+Previously, maps showed multiple worlds at low zoom levels. In addition, it used to be possible to pan off the north or south edge of the world.  Now, the view is restricted to show only one world, and you cannot pan off the edge. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
+
+##### Removal of deprecated methods
+
+The `inherits` function that was used to inherit the prototype methods from one constructor into another has been removed.
+The standard ECMAScript classes should be used instead.
+
+The deprecated `getSnapToPixel` and `setSnapToPixel` functions from the `ImageStyle` class have been removed.
+
+##### New internal tile coordinates
+
+Previously, the internal tile coordinates used in the library had an unusual row order – the origin of the tile coordinate system was at the top left as expected, but the rows increased upwards.  This meant that all tile coordinates within a tile grid's extent had negative `y` values.
+
+Now, the internal tile coordinates used in the library have the same row order as standard (e.g. XYZ) tile coordinates.  The origin is at the top left (as before), and rows or `y` values increase downward.  So the top left tile of a tile grid is now `0, 0`, whereas it was `0, -1` before.
+
+```
+x, y values for tile coordinates
+
+origin
+  *__________________________
+  |        |        |        |
+  |  0, 0  |  1, 0  |  2, 0  |
+  |________|________|________|
+  |        |        |        |
+  |  0, 1  |  1, 1  |  2, 1  |
+  |________|________|________|
+  |        |        |        |
+  |  0, 2  |  1, 2  |  2, 2  |
+  |________|________|________|
+```
+
+This change should only affect you if you were using a custom `tileLoadFunction` or `tileUrlFunction`.  For example, if you used to have a `tileUrlFunction` that looked like this:
+
+```js
+// before
+function tileUrlFunction(tileCoord) {
+  const z = tileCoord[0];
+  const x = tileCoord[1];
+  const y = -tileCoord[2] - 1;
+  // do something with z, x, y
+}
+```
+
+You would now do something like this:
+```js
+// after
+function tileUrlFunction(tileCoord) {
+  const z = tileCoord[0];
+  const x = tileCoord[1];
+  const y = tileCoord[2];
+  // do something with z, x, y
+}
+```
+
+In addition (this should be exceedingly rare), if you previously created a `ol/tilegrid/WMTS` by hand and you were providing an array of `sizes`, you no longer have to provide a negative height if your tile origin is the top-left corner (the common case).  On the other hand, if you are providing a custom array of `sizes` and your origin is the bottom of the grid (this is uncommon), your height values must now be negative.
+
+##### Removal of the "vector" render mode for vector tile layers
+
+If you were previously using `VectorTile` layers with `renderMode: 'vector'`, you have to remove this configuration option. That mode was removed. `'hybrid'` (default) and `'image'` are still available.
+
+##### Removal of the "renderMode" option for vector layers
+
+If you were previously using `Vector` layers with `renderMode: 'image'`, you have to remove this configuration option. Instead, use the new `ol/layer/VectorImage` layer with your `ol/source/Vector`.
+
+##### New declutter behavior
+
+If a map has more than one layer with `declutter` set to true, decluttering now considers all `Vector` and `VectorTile` layers, instead of decluttering each layer separately. Only `VectorImage` layers continue to be decluttered separately. The higher the z-index of a layer, the higher the priority of its decluttered items.
+
+Within a layer, the declutter order has changed. Previously, styles with a lower `zIndex` were prioritized over those with a higher `zIndex`. Now the opposite order is used.
+
+On vector layers, even if decluttered images or texts have a lower z-Index than polygons or lines, they will now be rendered on top of the polygons or lines. For vector tile layers, this was the case already in previous releases.
+
+##### New `prerender` and `postrender` layer events replace old `precompose`, `render` and `postcompose` events
+
+If you were previously registering for `precompose` and `postcompose` events, you should now register for `prerender` and `postrender` events on layers.  Instead of the previous `render` event, you should now listen for `postrender`. Layers are no longer composed to a single Canvas element.  Instead, they are added to the map viewport as individual elements.
+
+##### New `getVectorContext` function provides access to the immediate vector rendering API
+
+Previously, render events included a `vectorContext` property that allowed you to render features or geometries directly to the map.  This is still possible, but you now have to explicitly create a vector context with the `getVectorContext` function.  This change makes the immediate rendering API an explicit dependency if your application uses it.  If you don't use this API, your application bundle will not include the vector rendering modules (as it did before).
+
+Here is an abbreviated example of how to use the `getVectorContext` function:
+
+```js
+import {getVectorContext} from 'ol/render';
+
+// construct your map and layers as usual
+
+layer.on('postrender', function(event) {
+  const vectorContext = getVectorContext(event);
+  // use any of the drawing methods on the vector context
+});
+```
+
+##### Layers can only be added to a single map
+
+Previously, it was possible to render a single layer in two maps.  Now, each layer can only belong to a single map (in the same way that a single DOM element can only have one parent).
+
+##### The `OverviewMap` requires a list of layers.
+
+Due to the constraint above (layers can only be added to a single map), the overview map needs to be constructed with a list of layers.
+
+##### The `ol/Graticule` has been replaced by `ol/layer/Graticule`
+
+Previously, a graticule was not a layer.  Now it is.  See the graticule example for details on how to add a graticule layer to your map.
+
+##### `ol/format/Feature` API change
+
+The `getLastExtent()` method, which was required for custom `tileLoadFunction`s in `ol/source/Vector`, has been removed because it is no longer needed (see below).
+
+##### `ol/VectorTile` API changes
+
+* Removal of the `getProjection()` and `setProjection()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
+* Removal of the `getExtent()` and `setExtent()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
+
+##### Custom tileLoadFunction on a VectorTile source needs changes
+
+Previously, applications needed to call `setProjection()` and `setExtent()` on the tile in a custom `tileLoadFunction` on `ol/source/VectorTile`. The format's `getLastExtent()` method was used to get the extent. All this is no longer needed. Instead, the `extent` (first argument to the loader function) and `projection` (third argument to the loader function) are simply passed as `extent` and `featureProjection` options to the format's `readFeatures()` method.
+
+Example for an old `tileLoadFunction`:
+
+```js
+function(tile, url) {
+  tile.setLoader(function() {
+    fetch(url).then(function(response) {
+      response.arrayBuffer().then(function(data) {
+        var format = tile.getFormat();
+        tile.setProjection(format.readProjection(data));
+        tile.setFeatures(format.readFeatures(data, {
+          // featureProjection is not required for ol/format/MVT
+          featureProjection: map.getView().getProjection()
+        }));
+        tile.setExtent(format.getLastExtent());
+      })
+    })
+  }
+});
+```
+
+This function needs to be changed to:
+
+```js
+function(tile, url) {
+  tile.setLoader(function(extent, resolution, projection) {
+    fetch(url).then(function(response) {
+      response.arrayBuffer().then(function(data) {
+        var format = tile.getFormat();
+        tile.setFeatures(format.readFeatures(data, {
+          // extent is only required for ol/format/MVT
+          extent: extent,
+          featureProjection: projection
+        }));
+      })
+    })
+  }
+});
+```
+
+##### Drop of support for the experimental WebGL renderer
+
+The WebGL map and layers renderers are gone, replaced by a `WebGLHelper` function that provides a lightweight,
+low-level access to the WebGL API. This is implemented in a new `WebGLPointsLayer` which does simple rendering of large number
+of points with custom shaders.
+
+This is now used in the `Heatmap` layer.
+
+The removed classes and components are:
+* `WebGLMap` and `WebGLMapRenderer`
+* `WebGLLayerRenderer`
+* `WebGLImageLayer` and `WebGLImageLayerRenderer`
+* `WebGLTileLayer` and `WebGLTileLayerRenderer`
+* `WebGLVectorLayer` and `WebGLVectorLayerRenderer`
+* `WebGLReplay` and derived classes, along with associated shaders
+* `WebGLReplayGroup`
+* `WebGLImmediateRenderer`
+* `WebGLMap`
+* The shader build process using `mustache` and the `Makefile` at the root
+
+##### Removal of the AtlasManager
+
+Following the removal of the experimental WebGL renderer, the AtlasManager has been removed as well. The atlas was only used by this renderer.
+The non API `getChecksum` functions of the style is also removed.
+
+##### Change of the behavior of the vector source's clear() and refresh() methods
+
+The `ol/source/Vector#clear()` method no longer triggers a reload of the data from the server. If you were previously using `clear()` to refetch from the server, you now have to use `refresh()`.
+
+The `ol/source/Vector#refresh()` method now removes all features from the source and triggers a reload of the data from the server. If you were previously using the `refresh()` method to re-render a vector layer, you should instead call `ol/layer/Vector#changed()`.
+
+##### Renaming of `getGetFeatureInfoUrl` to `getFeatureInfoUrl`
+
+The `getGetFeatureInfoUrl` of `ol/source/ImageWMS` and `ol/source/TileWMS` is now called `getFeatureInfoUrl`.
+
+##### `getFeaturesAtPixel` always returns an array
+
+`getFeaturesAtPixel` now returns an empty array instead of null if no features were found.
+
+##### Hit detection with unfilled styles
+
+Hit detection over styled Circle geometry and Circle and RegularShape styles is now consistent with that for styled Polygon geometry. There is no hit detection over the interior of unfilled shapes. To get the previous behavior, specify a Fill style with transparent color.
+
+#### Other changes
+
+##### Allow declutter in image render mode
+
+It is now possible to configure vector tile layers with `declutter: true` and `renderMode: 'image'`. However, note that decluttering will be done per tile, resulting in labels and point symbols getting cut off at tile boundaries.
+Until now, using both options forced the render mode to be `hybrid`.
+
+##### Always load tiles while animating or interacting
+
+`ol/PluggableMap` and subclasses no longer support the `loadTilesWhileAnimating` and `loadTilesWhileInteracting` options. These options were used to enable tile loading during animations and interactions. With the new DOM composition render strategy, it is no longer necessary to postpone tile loading until after animations or interactions.
+
+## Changes
+
+ * [#10036](https://github.com/openlayers/openlayers/pull/10036) - uploading local resources to codesandbox ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#10035](https://github.com/openlayers/openlayers/pull/10035) - Support building the legacy build on windows ([@tschaub](https://github.com/tschaub))
+ * [#10034](https://github.com/openlayers/openlayers/pull/10034) - Mark experimental examples as experimental ([@openlayers](https://github.com/openlayers))
+ * [#10009](https://github.com/openlayers/openlayers/pull/10009) - Geometry editing with a user projection ([@tschaub](https://github.com/tschaub))
+ * [#10024](https://github.com/openlayers/openlayers/pull/10024) - Allow EventTarget to use a different default target ([@ahocevar](https://github.com/ahocevar))
+ * [#10031](https://github.com/openlayers/openlayers/pull/10031) - Cache starting coordinates and add mapBrowserEvent to translateEvent ([@flexjoly](https://github.com/flexjoly))
+ * [#10029](https://github.com/openlayers/openlayers/pull/10029) - Fix link to map default controls ([@ahocevar](https://github.com/ahocevar))
+ * [#10032](https://github.com/openlayers/openlayers/pull/10032) - Do not remove listeners that do not exist ([@ahocevar](https://github.com/ahocevar))
+ * [#10030](https://github.com/openlayers/openlayers/pull/10030) - Add a rule to disallow describe.only() and it.only() in tests ([@tschaub](https://github.com/tschaub))
+ * [#10023](https://github.com/openlayers/openlayers/pull/10023) - Enhance regular shape example docs ([@marcjansen](https://github.com/marcjansen))
+ * [#10025](https://github.com/openlayers/openlayers/pull/10025) - Bugfix for vector-tile-selection example ([@KaiVolland](https://github.com/KaiVolland))
+ * [#10007](https://github.com/openlayers/openlayers/pull/10007) - Changes for #9395 CircleStyle inconsistency ([@mike-000](https://github.com/mike-000))
+ * [#10027](https://github.com/openlayers/openlayers/pull/10027) - Confirm zoomByDelta calls view.animate() ([@tschaub](https://github.com/tschaub))
+ * [#10016](https://github.com/openlayers/openlayers/pull/10016) - WebGL Points Layer: allow expressions in literal style ([@jahow](https://github.com/jahow))
+ * [#10017](https://github.com/openlayers/openlayers/pull/10017) - updated jsdoc-plugin-typescript ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#10012](https://github.com/openlayers/openlayers/pull/10012) - Use the user projection for the map event coordinate ([@tschaub](https://github.com/tschaub))
+ * [#10018](https://github.com/openlayers/openlayers/pull/10018) - Recover from skip feature removal regressions ([@ahocevar](https://github.com/ahocevar))
+ * [#10013](https://github.com/openlayers/openlayers/pull/10013) - Minor reworking of the modify interaction ([@tschaub](https://github.com/tschaub))
+ * [#10015](https://github.com/openlayers/openlayers/pull/10015) - Fix hit detection test for wrapped geometries ([@jahow](https://github.com/jahow))
+ * [#10011](https://github.com/openlayers/openlayers/pull/10011) - Fix a type checking error on the WebGL points renderer ([@jahow](https://github.com/jahow))
+ * [#10010](https://github.com/openlayers/openlayers/pull/10010) - Require type and listener for addEventListener/removeEventListener ([@ahocevar](https://github.com/ahocevar))
+ * [#9994](https://github.com/openlayers/openlayers/pull/9994) - Add a new layer type: WebGLPointsLayer ([@jahow](https://github.com/jahow))
+ * [#10006](https://github.com/openlayers/openlayers/pull/10006) - Check hits for wrapped around geometries ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#10004](https://github.com/openlayers/openlayers/pull/10004) - Return a new simplified geometry after modification ([@tschaub](https://github.com/tschaub))
+ * [#10005](https://github.com/openlayers/openlayers/pull/10005) - Fix some cosmetics on Select interaction ([@tkohr](https://github.com/tkohr))
+ * [#10003](https://github.com/openlayers/openlayers/pull/10003) - Add back Select interaction without overlay ([@tkohr](https://github.com/tkohr))
+ * [#10000](https://github.com/openlayers/openlayers/pull/10000) - Adopt JSDoc annotations to allow '.d.ts' generation ([@KaiVolland](https://github.com/KaiVolland))
+ * [#10001](https://github.com/openlayers/openlayers/pull/10001) - reduced typecasts in layerrenderer ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9986](https://github.com/openlayers/openlayers/pull/9986) - Make Circle geometry hit detection consistent with Polygon ([@mike-000](https://github.com/mike-000))
+ * [#9999](https://github.com/openlayers/openlayers/pull/9999) - fixed typescript issues ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9997](https://github.com/openlayers/openlayers/pull/9997) - Avoid error from tsc ([@tschaub](https://github.com/tschaub))
+ * [#9993](https://github.com/openlayers/openlayers/pull/9993) - Add geographic tests for hasFeatureAtPixel and getFeaturesAtPixel ([@tschaub](https://github.com/tschaub))
+ * [#9992](https://github.com/openlayers/openlayers/pull/9992) - Rendering test instructions ([@tschaub](https://github.com/tschaub))
+ * [#9982](https://github.com/openlayers/openlayers/pull/9982) - Don't use vendor prefixes for the transform property ([@fredj](https://github.com/fredj))
+ * [#9989](https://github.com/openlayers/openlayers/pull/9989) - Correct getFeaturesAtPixel spelling and grammar ([@mike-000](https://github.com/mike-000))
+ * [#9988](https://github.com/openlayers/openlayers/pull/9988) - Additional changes to work with user projection ([@tschaub](https://github.com/tschaub))
+ * [#9973](https://github.com/openlayers/openlayers/pull/9973) - Make map work with user projected coordinates ([@tkohr](https://github.com/tkohr))
+ * [#9981](https://github.com/openlayers/openlayers/pull/9981) - Remove simplified geometry cache ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9980](https://github.com/openlayers/openlayers/pull/9980) - Get simplified transformed geometry ([@tschaub](https://github.com/tschaub))
+ * [#9984](https://github.com/openlayers/openlayers/pull/9984) - Don't attempt to render when there is no source ([@ahocevar](https://github.com/ahocevar))
+ * [#9983](https://github.com/openlayers/openlayers/pull/9983) - getFeaturesAtPixel always returns array ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9960](https://github.com/openlayers/openlayers/pull/9960) - Always dispatch pointermove events, but calculate event pixel and coordinate lazily ([@ahocevar](https://github.com/ahocevar))
+ * [#9978](https://github.com/openlayers/openlayers/pull/9978) - Handle empty source tiles and queue them properly ([@ahocevar](https://github.com/ahocevar))
+ * [#9974](https://github.com/openlayers/openlayers/pull/9974) - Introduces the _withCredentials flag ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9966](https://github.com/openlayers/openlayers/pull/9966) - Document how to circumvent the canvas reuse optimization ([@jahow](https://github.com/jahow))
+ * [#9961](https://github.com/openlayers/openlayers/pull/9961) - SelectInteraction removal ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9957](https://github.com/openlayers/openlayers/pull/9957) - Get hasOverlay from child element count ([@ahocevar](https://github.com/ahocevar))
+ * [#9969](https://github.com/openlayers/openlayers/pull/9969) - Dev version based on time ([@tschaub](https://github.com/tschaub))
+ * [#9965](https://github.com/openlayers/openlayers/pull/9965) - Transform the layer extent when a user projection is set ([@tschaub](https://github.com/tschaub))
+ * [#9967](https://github.com/openlayers/openlayers/pull/9967) - Enable HTTPS on Mapbox tile layer in webgl sprite example ([@jahow](https://github.com/jahow))
+ * [#9964](https://github.com/openlayers/openlayers/pull/9964) - Update various examples to use the Mapbox v4-API ([@marcjansen](https://github.com/marcjansen))
+ * [#9963](https://github.com/openlayers/openlayers/pull/9963) - Update to work with globby@10 ([@tschaub](https://github.com/tschaub))
+ * [#9962](https://github.com/openlayers/openlayers/pull/9962) - Improve the API description for "multiWorld" ([@mike-000](https://github.com/mike-000))
+ * [#9710](https://github.com/openlayers/openlayers/pull/9710) - Additional Typescript compliance fixes ([@jahow](https://github.com/jahow))
+ * [#9400](https://github.com/openlayers/openlayers/pull/9400) - Changes to parsing of KML displayName ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9959](https://github.com/openlayers/openlayers/pull/9959) - Set frame state extent when creating frame state ([@tschaub](https://github.com/tschaub))
+ * [#9899](https://github.com/openlayers/openlayers/pull/9899) - Add hidpi option for ol.source.TileArcGISRest ([@LevN0](https://github.com/LevN0))
+ * [#9723](https://github.com/openlayers/openlayers/pull/9723) - Pass the opt_direction value to the getConstrainedResolution function ([@fredj](https://github.com/fredj))
+ * [#9903](https://github.com/openlayers/openlayers/pull/9903) - Respect multiWorld: false when an explicit extent constraint would be respected ([@mike-000](https://github.com/mike-000))
+ * [#9846](https://github.com/openlayers/openlayers/pull/9846) - Make API work with user projected coordinates ([@tschaub](https://github.com/tschaub))
+ * [#9935](https://github.com/openlayers/openlayers/pull/9935) - Add missing import for LinearRing ([@Abdullah0991](https://github.com/Abdullah0991))
+ * [#9931](https://github.com/openlayers/openlayers/pull/9931) - Custom Overview Map CSS fix and rotateWithView option ([@mike-000](https://github.com/mike-000))
+ * [#9951](https://github.com/openlayers/openlayers/pull/9951) - New test for Image layer with extent and rotation ([@mike-000](https://github.com/mike-000))
+ * [#9831](https://github.com/openlayers/openlayers/pull/9831) - Support a LAYER param in getLegendUrl ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9942](https://github.com/openlayers/openlayers/pull/9942) - Renaming getGetFeatureInfoUrl ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9930](https://github.com/openlayers/openlayers/pull/9930) - Correct extent clipping in ImageLayer ([@mike-000](https://github.com/mike-000))
+ * [#9923](https://github.com/openlayers/openlayers/pull/9923) - Cancel postrender before disposing renderer ([@ahocevar](https://github.com/ahocevar))
+ * [#9925](https://github.com/openlayers/openlayers/pull/9925) - Workflow to publish a dev release ([@openlayers](https://github.com/openlayers))
+ * [#9919](https://github.com/openlayers/openlayers/pull/9919) - Revise and correct OverviewMap rotation ([@mike-000](https://github.com/mike-000))
+ * [#9908](https://github.com/openlayers/openlayers/pull/9908) - LineString.forEachSegment callback API description ([@mike-000](https://github.com/mike-000))
+ * [#9909](https://github.com/openlayers/openlayers/pull/9909) - Clone the text's padding ([@oterral](https://github.com/oterral))
+ * [#9907](https://github.com/openlayers/openlayers/pull/9907) - Prevent endless cycles observed in OverviewMap ([@mike-000](https://github.com/mike-000))
+ * [#9897](https://github.com/openlayers/openlayers/pull/9897) - Use pointer events everywhere ([@ahocevar](https://github.com/ahocevar))
+ * [#9888](https://github.com/openlayers/openlayers/pull/9888) - Use PointerEvent polyfill instead of our own abstraction ([@ahocevar](https://github.com/ahocevar))
+ * [#9896](https://github.com/openlayers/openlayers/pull/9896) - Misc. WebGL fixes ([@jahow](https://github.com/jahow))
+ * [#9889](https://github.com/openlayers/openlayers/pull/9889) - Event performance improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#9882](https://github.com/openlayers/openlayers/pull/9882) - Handle rotation in the Box Selection example ([@mike-000](https://github.com/mike-000))
+ * [#9877](https://github.com/openlayers/openlayers/pull/9877) - Fix -1 pixel buffer for vector tile extent ([@ahocevar](https://github.com/ahocevar))
+ * [#9873](https://github.com/openlayers/openlayers/pull/9873) - Only check extent when a url tile coordinate is available ([@ahocevar](https://github.com/ahocevar))
+ * [#9871](https://github.com/openlayers/openlayers/pull/9871) - Properly handle tile source key change ([@ahocevar](https://github.com/ahocevar))
+ * [#9870](https://github.com/openlayers/openlayers/pull/9870) - Declutter multi geometries per geometry instead of per feature ([@ahocevar](https://github.com/ahocevar))
+ * [#9872](https://github.com/openlayers/openlayers/pull/9872) - Check extent for wrapped tile coordinate ([@ahocevar](https://github.com/ahocevar))
+ * [#9869](https://github.com/openlayers/openlayers/pull/9869) - Only get squared tolerance once per render ([@MoonE](https://github.com/MoonE))
+ * [#9389](https://github.com/openlayers/openlayers/pull/9389) - Replaces listener test in tile.tests.js and removes artifacts ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9855](https://github.com/openlayers/openlayers/pull/9855) - Make sure vector tile load handler is called ([@tschaub](https://github.com/tschaub))
+ * [#9864](https://github.com/openlayers/openlayers/pull/9864) - Properly update frameState.animate and deal with non-numeric layer opacity ([@tschaub](https://github.com/tschaub))
+ * [#9858](https://github.com/openlayers/openlayers/pull/9858) - Run npm audit fix ([@tschaub](https://github.com/tschaub))
+ * [#9844](https://github.com/openlayers/openlayers/pull/9844) - Set initial tile state to EMPTY when outside source extent ([@ahocevar](https://github.com/ahocevar))
+ * [#9839](https://github.com/openlayers/openlayers/pull/9839) - Enable correct display of side-by-side example when not using the examples template ([@mike-000](https://github.com/mike-000))
+ * [#9838](https://github.com/openlayers/openlayers/pull/9838) - Make WMSServerType appear in API docs ([@ahocevar](https://github.com/ahocevar))
+ * [#9754](https://github.com/openlayers/openlayers/pull/9754) - Export PDF example extent corrections ([@mike-000](https://github.com/mike-000))
+ * [#9834](https://github.com/openlayers/openlayers/pull/9834) - Use nextzen for osm-vector-tiles example ([@ahocevar](https://github.com/ahocevar))
+ * [#9833](https://github.com/openlayers/openlayers/pull/9833) - Remove accidentally added package-lock.json ([@ahocevar](https://github.com/ahocevar))
+ * [#9826](https://github.com/openlayers/openlayers/pull/9826) - Accept additional args when publishing ([@tschaub](https://github.com/tschaub))
+ * [#9812](https://github.com/openlayers/openlayers/pull/9812) - Make zDirection configurable on tile source ([@ahocevar](https://github.com/ahocevar))
+ * [#9824](https://github.com/openlayers/openlayers/pull/9824) - Support zoom limits for layers ([@tschaub](https://github.com/tschaub))
+ * [#9804](https://github.com/openlayers/openlayers/pull/9804) - Replacement for the Shared Views example ([@mike-000](https://github.com/mike-000))
+ * [#9803](https://github.com/openlayers/openlayers/pull/9803) - Remove unused variable in MousePosition control ([@openlayers](https://github.com/openlayers))
+ * [#9802](https://github.com/openlayers/openlayers/pull/9802) - Introduce EMPTY image state to deal with images outside the view extent ([@ahocevar](https://github.com/ahocevar))
+ * [#9797](https://github.com/openlayers/openlayers/pull/9797) - Avoid false positives for line and polygon hit detection ([@ahocevar](https://github.com/ahocevar))
+ * [#9794](https://github.com/openlayers/openlayers/pull/9794) - Fix linting error (import extension missing) ([@marcjansen](https://github.com/marcjansen))
+ * [#9792](https://github.com/openlayers/openlayers/pull/9792) - Improve documentation of getGetLegendGraphicUrl ([@marcjansen](https://github.com/marcjansen))
+ * [#9375](https://github.com/openlayers/openlayers/pull/9375) - Replaces reproj image.tests.js and tile.tests.js ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9762](https://github.com/openlayers/openlayers/pull/9762) - Get legend request ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9789](https://github.com/openlayers/openlayers/pull/9789) - Use Image.prototype.decode only when src is already set ([@ahocevar](https://github.com/ahocevar))
+ * [#9778](https://github.com/openlayers/openlayers/pull/9778) - Return existing source tiles if at target resolution ([@ahocevar](https://github.com/ahocevar))
+ * [#9622](https://github.com/openlayers/openlayers/pull/9622) - Avoid mutating input in EsriJSON format ([@kekel87](https://github.com/kekel87))
+ * [#9755](https://github.com/openlayers/openlayers/pull/9755) - Font loading improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#9767](https://github.com/openlayers/openlayers/pull/9767) - Fix hit detection for webgl layers on retina devices ([@jahow](https://github.com/jahow))
+ * [#9774](https://github.com/openlayers/openlayers/pull/9774) - Fix observable properties documentation ([@ahocevar](https://github.com/ahocevar))
+ * [#9757](https://github.com/openlayers/openlayers/pull/9757) - Use CanvasLineJoin and CanvasLienCap types instead of string ([@fredj](https://github.com/fredj))
+ * [#9745](https://github.com/openlayers/openlayers/pull/9745) - Simplify heatmap's shaders ([@fredj](https://github.com/fredj))
+ * [#9748](https://github.com/openlayers/openlayers/pull/9748) - Remove hit detection transforms from ol/renderer/webgl/PointsLayer ([@fredj](https://github.com/fredj))
+ * [#9752](https://github.com/openlayers/openlayers/pull/9752) - Custom Animation example and the multiWorld view constraint ([@mike-000](https://github.com/mike-000))
+ * [#9751](https://github.com/openlayers/openlayers/pull/9751) - Add minArea typedef and ctor prop in DragZoom ([@logan-bounet](https://github.com/logan-bounet))
+ * [#9747](https://github.com/openlayers/openlayers/pull/9747) - Set world projection only for tile-pixels units ([@ahocevar](https://github.com/ahocevar))
+ * [#9743](https://github.com/openlayers/openlayers/pull/9743) - Finalize IIIF Image API version 3 ([@lutzhelm](https://github.com/lutzhelm))
+ * [#9733](https://github.com/openlayers/openlayers/pull/9733) - Get rid of JSDoc warnings and fix fires arguments ([@ahocevar](https://github.com/ahocevar))
+ * [#9732](https://github.com/openlayers/openlayers/pull/9732) - Fix EMPTY state and source key handling ([@ahocevar](https://github.com/ahocevar))
+ * [#9724](https://github.com/openlayers/openlayers/pull/9724) - Fix wrong import in tutorial ([@fredj](https://github.com/fredj))
+ * [#9722](https://github.com/openlayers/openlayers/pull/9722) - Remove unused param in getState function ([@fredj](https://github.com/fredj))
+ * [#9655](https://github.com/openlayers/openlayers/pull/9655) - Add hit detection on the WebGL points renderer ([@jahow](https://github.com/jahow))
+ * [#9728](https://github.com/openlayers/openlayers/pull/9728) - Remove accidently added package-lock.json ([@ahocevar](https://github.com/ahocevar))
+ * [#9719](https://github.com/openlayers/openlayers/pull/9719) - Use special MapTiler API key dedicated for OpenLayers examples ([@petrsloup](https://github.com/petrsloup))
+ * [#9714](https://github.com/openlayers/openlayers/pull/9714) - Update the circle style after setRadius calls ([@fredj](https://github.com/fredj))
+ * [#9718](https://github.com/openlayers/openlayers/pull/9718) - Remove unused variable in ol/renderer/webgl/PointsLayer ([@fredj](https://github.com/fredj))
+ * [#9711](https://github.com/openlayers/openlayers/pull/9711) - Remove extra space for the 'viewParams' attribute ([@fredj](https://github.com/fredj))
+ * [#9712](https://github.com/openlayers/openlayers/pull/9712) - Allow an arbitrary tag to be used as feature id ([@tschaub](https://github.com/tschaub))
+ * [#9709](https://github.com/openlayers/openlayers/pull/9709) - Try to make rendering tests run again in puppeteer ([@ahocevar](https://github.com/ahocevar))
+ * [#9705](https://github.com/openlayers/openlayers/pull/9705) - Vector tile renderer optimizations and fixes ([@ahocevar](https://github.com/ahocevar))
+ * [#9706](https://github.com/openlayers/openlayers/pull/9706) - Do not use self to check browser features ([@ahocevar](https://github.com/ahocevar))
+ * [#9704](https://github.com/openlayers/openlayers/pull/9704) - Handle container reuse properly when layers are added/removed ([@ahocevar](https://github.com/ahocevar))
+ * [#9701](https://github.com/openlayers/openlayers/pull/9701) - Remove will-change CSS rule for Overlay container ([@fredj](https://github.com/fredj))
+ * [#9702](https://github.com/openlayers/openlayers/pull/9702) - Fix several TypeScript type check problems ([@lutzhelm](https://github.com/lutzhelm))
+ * [#9700](https://github.com/openlayers/openlayers/pull/9700) - Solves typescript related issues ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9699](https://github.com/openlayers/openlayers/pull/9699) - Fix MapTiler API usage ([@petrsloup](https://github.com/petrsloup))
+ * [#9636](https://github.com/openlayers/openlayers/pull/9636) - Remove and move code from ol/webgl ([@fredj](https://github.com/fredj))
+ * [#9684](https://github.com/openlayers/openlayers/pull/9684) - List complete classes in doc navigation ([@ahocevar](https://github.com/ahocevar))
+ * [#9685](https://github.com/openlayers/openlayers/pull/9685) - Remove glContext from RenderEvent ([@fredj](https://github.com/fredj))
+ * [#9681](https://github.com/openlayers/openlayers/pull/9681) - Remove duplicates from api docs and make navigation more usable ([@ahocevar](https://github.com/ahocevar))
+ * [#9677](https://github.com/openlayers/openlayers/pull/9677) - Add support for tile pixel projection in feature formats ([@ahocevar](https://github.com/ahocevar))
+ * [#9679](https://github.com/openlayers/openlayers/pull/9679) - Set pixelTransform and inversePixelTransform as protected ([@fredj](https://github.com/fredj))
+ * [#9678](https://github.com/openlayers/openlayers/pull/9678) - Update geography class urls ([@ahocevar](https://github.com/ahocevar))
+ * [#9658](https://github.com/openlayers/openlayers/pull/9658) - Don't use HTMLImageElement.decode method on Safari ([@fredj](https://github.com/fredj))
+ * [#9657](https://github.com/openlayers/openlayers/pull/9657) - Better documentation for getFeaturesInExtent function ([@fredj](https://github.com/fredj))
+ * [#9562](https://github.com/openlayers/openlayers/pull/9562) - Optimize the WebGL points renderer using a worker ([@jahow](https://github.com/jahow))
+ * [#9394](https://github.com/openlayers/openlayers/pull/9394) - Introduces import snippets for static functions ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9638](https://github.com/openlayers/openlayers/pull/9638) - #9625: Add filter function to translate interaction ([@agpixdev](https://github.com/agpixdev))
+ * [#9644](https://github.com/openlayers/openlayers/pull/9644) - Use compose function from ol/transform ([@fredj](https://github.com/fredj))
+ * [#9645](https://github.com/openlayers/openlayers/pull/9645) - Handle case of no used tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#9640](https://github.com/openlayers/openlayers/pull/9640) - Import options directly instead of importing a typedef ([@ahocevar](https://github.com/ahocevar))
+ * [#9641](https://github.com/openlayers/openlayers/pull/9641) - Only import what's needed from projections ([@ahocevar](https://github.com/ahocevar))
+ * [#9637](https://github.com/openlayers/openlayers/pull/9637) - Detach label cache on Map#setTarget() ([@ahocevar](https://github.com/ahocevar))
+ * [#9633](https://github.com/openlayers/openlayers/pull/9633) -  Mark the `layers` property as optional in OverviewMap constructor ([@fredj](https://github.com/fredj))
+ * [#9634](https://github.com/openlayers/openlayers/pull/9634) - Remove old Android workaround ([@ahocevar](https://github.com/ahocevar))
+ * [#9629](https://github.com/openlayers/openlayers/pull/9629) - Clear overlay canvas when reusing containers ([@ahocevar](https://github.com/ahocevar))
+ * [#9626](https://github.com/openlayers/openlayers/pull/9626) - Remove TOUCH, POINTER and MSPOINTER from ol/has ([@fredj](https://github.com/fredj))
+ * [#9624](https://github.com/openlayers/openlayers/pull/9624) - Remove typecasts in ol/control/OverviewMap ([@fredj](https://github.com/fredj))
+ * [#9615](https://github.com/openlayers/openlayers/pull/9615) - Include full filename in import specifier ([@tschaub](https://github.com/tschaub))
+ * [#9592](https://github.com/openlayers/openlayers/pull/9592) - Remove `layerState` param from `prepareFrame` and `renderFrame` function ([@fredj](https://github.com/fredj))
+ * [#9289](https://github.com/openlayers/openlayers/pull/9289) - Vector source geom ([@sbrunner](https://github.com/sbrunner))
+ * [#9608](https://github.com/openlayers/openlayers/pull/9608) - Use markdown link syntax in jsdoc ([@fredj](https://github.com/fredj))
+ * [#9596](https://github.com/openlayers/openlayers/pull/9596) - Vector source / prevent adding features with duplicate id in the collection ([@jahow](https://github.com/jahow))
+ * [#9604](https://github.com/openlayers/openlayers/pull/9604) - Use window instead of global in addEventListener ([@bartvde](https://github.com/bartvde))
+ * [#9599](https://github.com/openlayers/openlayers/pull/9599) - Create FUNDING.yml ([@openlayers](https://github.com/openlayers))
+ * [#9601](https://github.com/openlayers/openlayers/pull/9601) - Use global addEventListener in PluggableMap ([@bartvde](https://github.com/bartvde))
+ * [#9584](https://github.com/openlayers/openlayers/pull/9584) - Reuse render target ([@ahocevar](https://github.com/ahocevar))
+ * [#6217](https://github.com/openlayers/openlayers/pull/6217) - Add primaryAction condition to DragPan ([@fredj](https://github.com/fredj))
+ * [#9569](https://github.com/openlayers/openlayers/pull/9569) - Fix for change in Zoomify.js/CustomTile signature ([@engsterhold](https://github.com/engsterhold))
+ * [#9582](https://github.com/openlayers/openlayers/pull/9582) - Add app to mark inactive issues as stale ([@tschaub](https://github.com/tschaub))
+ * [#9581](https://github.com/openlayers/openlayers/pull/9581) - Update webpack and use mode in the loader ([@tschaub](https://github.com/tschaub))
+ * [#9576](https://github.com/openlayers/openlayers/pull/9576) - Remove geolocation detection from ol/has ([@fredj](https://github.com/fredj))
+ * [#9575](https://github.com/openlayers/openlayers/pull/9575) - Rework exports for getUid and control defaults ([@tschaub](https://github.com/tschaub))
+ * [#9574](https://github.com/openlayers/openlayers/pull/9574) - Update OL MapGuide example to point to my demo MapGuide Server. ([@jumpinjackie](https://github.com/jumpinjackie))
+ * [#9571](https://github.com/openlayers/openlayers/pull/9571) - Small examples improvements ([@fredj](https://github.com/fredj))
+ * [#9572](https://github.com/openlayers/openlayers/pull/9572) - Add a note about CSS removal in upgrade-notes.md ([@fredj](https://github.com/fredj))
+ * [#9570](https://github.com/openlayers/openlayers/pull/9570) - Remove CSS print rules in ol.css ([@fredj](https://github.com/fredj))
+ * [#9563](https://github.com/openlayers/openlayers/pull/9563) - Fix @abstract and @module annotations ([@tschaub](https://github.com/tschaub))
+ * [#9560](https://github.com/openlayers/openlayers/pull/9560) - Simplify loading detection loop ([@ahocevar](https://github.com/ahocevar))
+ * [#9561](https://github.com/openlayers/openlayers/pull/9561) - Remove memory leak caused by label cache listeners ([@ahocevar](https://github.com/ahocevar))
+ * [#9559](https://github.com/openlayers/openlayers/pull/9559) - Minify worker ([@tschaub](https://github.com/tschaub))
+ * [#9558](https://github.com/openlayers/openlayers/pull/9558) - Stop listening for image decoding ([@tschaub](https://github.com/tschaub))
+ * [#9550](https://github.com/openlayers/openlayers/pull/9550) - Setup for building workers ([@tschaub](https://github.com/tschaub))
+ * [#9555](https://github.com/openlayers/openlayers/pull/9555) - Remove unused roundUpToPowerOfTwo function ([@fredj](https://github.com/fredj))
+ * [#9551](https://github.com/openlayers/openlayers/pull/9551) - Use HTMLImageElement.decode if available ([@fredj](https://github.com/fredj))
+ * [#9500](https://github.com/openlayers/openlayers/pull/9500) - KML string validation with extendedData ([@edellucien](https://github.com/edellucien))
+ * [#9534](https://github.com/openlayers/openlayers/pull/9534) - Remove unnecessary parts from the Mapbox layer example ([@tschaub](https://github.com/tschaub))
+ * [#9548](https://github.com/openlayers/openlayers/pull/9548) - Avoid cut off labels for italic fonts ([@ahocevar](https://github.com/ahocevar))
+ * [#9549](https://github.com/openlayers/openlayers/pull/9549) - Remove unused getReplayTransform_ function in VectorTileLayer ([@fredj](https://github.com/fredj))
+ * [#9545](https://github.com/openlayers/openlayers/pull/9545) - Avoid panning off the edge of the world ([@tschaub](https://github.com/tschaub))
+ * [#9539](https://github.com/openlayers/openlayers/pull/9539) - Document existing error event type ([@tschaub](https://github.com/tschaub))
+ * [#9541](https://github.com/openlayers/openlayers/pull/9541) - Upgrade to rbush@3 ([@tschaub](https://github.com/tschaub))
+ * [#9543](https://github.com/openlayers/openlayers/pull/9543) - Update jsdoc-plugin-typescript to version 2.0.1 ([@tschaub](https://github.com/tschaub))
+ * [#9536](https://github.com/openlayers/openlayers/pull/9536) - More font cache hits ([@ahocevar](https://github.com/ahocevar))
+ * [#9537](https://github.com/openlayers/openlayers/pull/9537) - WebGL / Points renderer refactoring ([@jahow](https://github.com/jahow))
+ * [#9546](https://github.com/openlayers/openlayers/pull/9546) - Lazily create the hit detection context ([@fredj](https://github.com/fredj))
+ * [#9533](https://github.com/openlayers/openlayers/pull/9533) - Canvas optimizations ([@fredj](https://github.com/fredj))
+ * [#9538](https://github.com/openlayers/openlayers/pull/9538) - Correct the module annotation for the vector image layer renderer ([@tschaub](https://github.com/tschaub))
+ * [#9532](https://github.com/openlayers/openlayers/pull/9532) - Remove unused 'container' property in mapbox-layer example ([@fredj](https://github.com/fredj))
+ * [#9530](https://github.com/openlayers/openlayers/pull/9530) - Fix spelling ([@fredj](https://github.com/fredj))
+ * [#9489](https://github.com/openlayers/openlayers/pull/9489) - Fix Zoomify to display retina tiles ([@crubier](https://github.com/crubier))
+ * [#9525](https://github.com/openlayers/openlayers/pull/9525) - Support a custom render function for the Layer class ([@jahow](https://github.com/jahow))
+ * [#9522](https://github.com/openlayers/openlayers/pull/9522) - Use https urls for mapbox.com ([@fredj](https://github.com/fredj))
+ * [#9520](https://github.com/openlayers/openlayers/pull/9520) - [WIP] Improve IIIF tile source and parser documentation ([@lutzhelm](https://github.com/lutzhelm))
+ * [#9523](https://github.com/openlayers/openlayers/pull/9523) - Make the code simpler in the Mapbox example ([@jahow](https://github.com/jahow))
+ * [#9519](https://github.com/openlayers/openlayers/pull/9519) - Use synchronous render in Mapbox example ([@jahow](https://github.com/jahow))
+ * [#9518](https://github.com/openlayers/openlayers/pull/9518) - Fix hit detection for multiple layers when decluttering is off ([@ahocevar](https://github.com/ahocevar))
+ * [#9516](https://github.com/openlayers/openlayers/pull/9516) - Upgrade ol-mapbox-style to v5 ([@ahocevar](https://github.com/ahocevar))
+ * [#9505](https://github.com/openlayers/openlayers/pull/9505) - Avoid blurry vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#9430](https://github.com/openlayers/openlayers/pull/9430) - Adds IIIF Image API tile source ([@lutzhelm](https://github.com/lutzhelm))
+ * [#9512](https://github.com/openlayers/openlayers/pull/9512) - Mapbox layer example improvement ([@fredj](https://github.com/fredj))
+ * [#9511](https://github.com/openlayers/openlayers/pull/9511) - Update devDependencies ([@fredj](https://github.com/fredj))
+ * [#9504](https://github.com/openlayers/openlayers/pull/9504) - Minor examples fixes ([@fredj](https://github.com/fredj))
+ * [#9466](https://github.com/openlayers/openlayers/pull/9466) - Declutter in correct order and for all layers ([@ahocevar](https://github.com/ahocevar))
+ * [#9497](https://github.com/openlayers/openlayers/pull/9497) - Fix earth radius in documentation ([@simonseyock](https://github.com/simonseyock))
+ * [#9493](https://github.com/openlayers/openlayers/pull/9493) - Upgrade jsdoc to v3.6.1 ([@ahocevar](https://github.com/ahocevar))
+ * [#9490](https://github.com/openlayers/openlayers/pull/9490) - Misc. API doc improvements ([@jahow](https://github.com/jahow))
+ * [#9492](https://github.com/openlayers/openlayers/pull/9492) - Fix zIndex handling for unmanaged layers ([@ahocevar](https://github.com/ahocevar))
+ * [#9388](https://github.com/openlayers/openlayers/pull/9388) - Restore code coverage report ([@jahow](https://github.com/jahow))
+ * [#9487](https://github.com/openlayers/openlayers/pull/9487) - Avoid header expanding over examples ([@tschaub](https://github.com/tschaub))
+ * [#9488](https://github.com/openlayers/openlayers/pull/9488) - Set the 'lang' attribute to the html tag in examples ([@openlayers](https://github.com/openlayers))
+ * [#9484](https://github.com/openlayers/openlayers/pull/9484) - Build API docs in CI job ([@tschaub](https://github.com/tschaub))
+ * [#9476](https://github.com/openlayers/openlayers/pull/9476) - Document events fired by interactions ([@tschaub](https://github.com/tschaub))
+ * [#9475](https://github.com/openlayers/openlayers/pull/9475) - Call the color callback once per feature ([@tschaub](https://github.com/tschaub))
+ * [#9477](https://github.com/openlayers/openlayers/pull/9477) - Tidy up the JSDoc events plugin ([@tschaub](https://github.com/tschaub))
+ * [#9469](https://github.com/openlayers/openlayers/pull/9469) - Use nearest lower resolution of vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#9452](https://github.com/openlayers/openlayers/pull/9452) - Fewer calls to the WebGL color callback ([@tschaub](https://github.com/tschaub))
+ * [#9453](https://github.com/openlayers/openlayers/pull/9453) - Remove unnecessary closure and fix uniform type ([@tschaub](https://github.com/tschaub))
+ * [#9459](https://github.com/openlayers/openlayers/pull/9459) - Use html-to-image instead of dom-to-image-more ([@fredj](https://github.com/fredj))
+ * [#9450](https://github.com/openlayers/openlayers/pull/9450) - Set the interacting flag on pointerdrag instead of pointerdown ([@ahocevar](https://github.com/ahocevar))
+ * [#9439](https://github.com/openlayers/openlayers/pull/9439) - Add attributionsCollapsible option to source/VectorTile ([@ahocevar](https://github.com/ahocevar))
+ * [#9440](https://github.com/openlayers/openlayers/pull/9440) - Skip the header and bad data in CSV parsing ([@tschaub](https://github.com/tschaub))
+ * [#9442](https://github.com/openlayers/openlayers/pull/9442) - Disable opacity transition for raster source sources ([@ahocevar](https://github.com/ahocevar))
+ * [#9441](https://github.com/openlayers/openlayers/pull/9441) - Do not round view center to pixels ([@ahocevar](https://github.com/ahocevar))
+ * [#9435](https://github.com/openlayers/openlayers/pull/9435) - Set the default values after the property name ([@fredj](https://github.com/fredj))
+ * [#9433](https://github.com/openlayers/openlayers/pull/9433) - Remove unused private variables, remove trailing whitespace ([@fredj](https://github.com/fredj))
+ * [#9416](https://github.com/openlayers/openlayers/pull/9416) - Implement rotate and translate functions for circle geometry ([@fredj](https://github.com/fredj))
+ * [#9429](https://github.com/openlayers/openlayers/pull/9429) - Update all devDependencies ([@fredj](https://github.com/fredj))
+ * [#9425](https://github.com/openlayers/openlayers/pull/9425) - Remove unused ol/render/webgl module ([@fredj](https://github.com/fredj))
+ * [#9418](https://github.com/openlayers/openlayers/pull/9418) - Re-export GeometryCollection in ol/geom ([@ahocevar](https://github.com/ahocevar))
+ * [#9411](https://github.com/openlayers/openlayers/pull/9411) - Fix tile state condition in raster layer test ([@fredj](https://github.com/fredj))
+ * [#9410](https://github.com/openlayers/openlayers/pull/9410) - Add new maxDelta property to MouseWheelZoom constructor ([@fredj](https://github.com/fredj))
+ * [#9409](https://github.com/openlayers/openlayers/pull/9409) - Remove more opt_this parameters ([@fredj](https://github.com/fredj))
+ * [#9286](https://github.com/openlayers/openlayers/pull/9286) - Disable transition when an interim tile is available ([@ahocevar](https://github.com/ahocevar))
+ * [#9404](https://github.com/openlayers/openlayers/pull/9404) - View / apply constraints when an interaction starts ([@jahow](https://github.com/jahow))
+ * [#9390](https://github.com/openlayers/openlayers/pull/9390) - Add a new WebGL example for filtering features ([@jahow](https://github.com/jahow))
+ * [#9385](https://github.com/openlayers/openlayers/pull/9385) - PointsLayer added clear of the render Buffers on Source Change ([@Kai-W](https://github.com/Kai-W))
+ * [#9379](https://github.com/openlayers/openlayers/pull/9379) - Fix typo in vector tile source docs ([@openlayers](https://github.com/openlayers))
+ * [#9368](https://github.com/openlayers/openlayers/pull/9368) - Show only one world ([@ahocevar](https://github.com/ahocevar))
+ * [#9362](https://github.com/openlayers/openlayers/pull/9362) - Use local font "Ubuntu Regular" for rendering tests ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9357](https://github.com/openlayers/openlayers/pull/9357) - Render vector tiles at the view resolution ([@ahocevar](https://github.com/ahocevar))
+ * [#9374](https://github.com/openlayers/openlayers/pull/9374) - Fix view initialization with min/max resolution constraint ([@jahow](https://github.com/jahow))
+ * [#9364](https://github.com/openlayers/openlayers/pull/9364) - Replace clip.test.js with new tests ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9360](https://github.com/openlayers/openlayers/pull/9360) - Enables attributions for the RasterSource ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9365](https://github.com/openlayers/openlayers/pull/9365) - Fix View method name in upgrade notes ([@jahow](https://github.com/jahow))
+ * [#9361](https://github.com/openlayers/openlayers/pull/9361) -  Add a zDirection option for Zoomify - implements #9343 ([@lutzhelm](https://github.com/lutzhelm))
+ * [#9333](https://github.com/openlayers/openlayers/pull/9333) - Unify rendering tests ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9350](https://github.com/openlayers/openlayers/pull/9350) - Remove unnecessary css in examples ([@fredj](https://github.com/fredj))
+ * [#9351](https://github.com/openlayers/openlayers/pull/9351) - More efficient default styles ([@ahocevar](https://github.com/ahocevar))
+ * [#9346](https://github.com/openlayers/openlayers/pull/9346) - Remove tilePixelRatio options from ol.source.VectorTile ([@fredj](https://github.com/fredj))
+ * [#9345](https://github.com/openlayers/openlayers/pull/9345) - Update all dev dependencies ([@fredj](https://github.com/fredj))
+ * [#9341](https://github.com/openlayers/openlayers/pull/9341) - Remove unused ExecutorGroup methods ([@ahocevar](https://github.com/ahocevar))
+ * [#9337](https://github.com/openlayers/openlayers/pull/9337) - Set map div size in example send to codesandbox ([@fredj](https://github.com/fredj))
+ * [#9335](https://github.com/openlayers/openlayers/pull/9335) - Create codesandbox using the 'parcel' template ([@openlayers](https://github.com/openlayers))
+ * [#9329](https://github.com/openlayers/openlayers/pull/9329) - Don't refresh the layer after addFeatures call ([@fredj](https://github.com/fredj))
+ * [#9328](https://github.com/openlayers/openlayers/pull/9328) - Mark layerFilter in AtPixelOptions as optional ([@fredj](https://github.com/fredj))
+ * [#9325](https://github.com/openlayers/openlayers/pull/9325) - Create a more accurate origin for tile positioning ([@ahocevar](https://github.com/ahocevar))
+ * [#9320](https://github.com/openlayers/openlayers/pull/9320) - enhance tile-debug readability ([@RobertOrthofer](https://github.com/RobertOrthofer))
+ * [#9318](https://github.com/openlayers/openlayers/pull/9318) - Smart cache size ([@ahocevar](https://github.com/ahocevar))
+ * [#9322](https://github.com/openlayers/openlayers/pull/9322) - Use closest lower source resolution for render tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#9321](https://github.com/openlayers/openlayers/pull/9321) - Fixes #9294 (missing documention for methods with `@inheritDoc`) ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9319](https://github.com/openlayers/openlayers/pull/9319) - Add title to license to clarify that it is BSD 2-Clause ([@tschaub](https://github.com/tschaub))
+ * [#9300](https://github.com/openlayers/openlayers/pull/9300) - Fix documentation about zoomDelta for ol.interaction.default function ([@fredj](https://github.com/fredj))
+ * [#9305](https://github.com/openlayers/openlayers/pull/9305) - Fixes failing tests for Chrome v74 ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9315](https://github.com/openlayers/openlayers/pull/9315) - Change CSS class for tooltips in measure example ([@fredj](https://github.com/fredj))
+ * [#9137](https://github.com/openlayers/openlayers/pull/9137) - Refactor the way view constraints are handled & add a view extent constraint ([@jahow](https://github.com/jahow))
+ * [#9313](https://github.com/openlayers/openlayers/pull/9313) - Re-enable and fix disabled tests ([@ahocevar](https://github.com/ahocevar))
+ * [#9314](https://github.com/openlayers/openlayers/pull/9314) - Fix transpilation ([@ahocevar](https://github.com/ahocevar))
+ * [#9308](https://github.com/openlayers/openlayers/pull/9308) - Simplify vector tile projection handling ([@ahocevar](https://github.com/ahocevar))
+ * [#9312](https://github.com/openlayers/openlayers/pull/9312) - Update zoom levels for Stamen source ([@bartvde](https://github.com/bartvde))
+ * [#9310](https://github.com/openlayers/openlayers/pull/9310) - Add transition options to Stamen source ([@fredj](https://github.com/fredj))
+ * [#9307](https://github.com/openlayers/openlayers/pull/9307) - Take line-height into account when measuring text height ([@ahocevar](https://github.com/ahocevar))
+ * [#9306](https://github.com/openlayers/openlayers/pull/9306) - Set the canvas size to 0 on dispose ([@fredj](https://github.com/fredj))
+ * [#9295](https://github.com/openlayers/openlayers/pull/9295) - Update ol-mapbox-style to fix broken mapbox-style example ([@ahocevar](https://github.com/ahocevar))
+ * [#9292](https://github.com/openlayers/openlayers/pull/9292) - Downgrades puppeteer to `~1.11.0` ([@KaiVolland](https://github.com/KaiVolland))
+ * [#9266](https://github.com/openlayers/openlayers/pull/9266) - Full type definition for image vector layer options ([@tschaub](https://github.com/tschaub))
+ * [#9278](https://github.com/openlayers/openlayers/pull/9278) - Update Bing's imagerySet used in examples ([@fredj](https://github.com/fredj))
+ * [#9270](https://github.com/openlayers/openlayers/pull/9270) - Update faq.md ([@bvx89](https://github.com/bvx89))
+ * [#9277](https://github.com/openlayers/openlayers/pull/9277) - Rotate API token ([@ahocevar](https://github.com/ahocevar))
+ * [#9276](https://github.com/openlayers/openlayers/pull/9276) - Use the constructor options instead of changing the private variables ([@fredj](https://github.com/fredj))
+ * [#9275](https://github.com/openlayers/openlayers/pull/9275) - Remove setDeclutter function ([@fredj](https://github.com/fredj))
+ * [#9273](https://github.com/openlayers/openlayers/pull/9273) - Fix WMS GetFeatureInfo examples ([@chrismayer](https://github.com/chrismayer))
+ * [#9246](https://github.com/openlayers/openlayers/pull/9246) - Add missing ol.css in mobile-full-screen example ([@openlayers](https://github.com/openlayers))
+ * [#9264](https://github.com/openlayers/openlayers/pull/9264) - add question about resizing map element ([@tpluscode](https://github.com/tpluscode))
+ * [#9260](https://github.com/openlayers/openlayers/pull/9260) - Remove unused 'geometry' param from ol/render/canvas/Builder ([@fredj](https://github.com/fredj))
+ * [#9254](https://github.com/openlayers/openlayers/pull/9254) - Add tileSize option to ol/source/TileJSON ([@petrsloup](https://github.com/petrsloup))
+ * [#9250](https://github.com/openlayers/openlayers/pull/9250) - Clearer behaviour of clear() and refresh() on sources ([@ahocevar](https://github.com/ahocevar))
+ * [#9251](https://github.com/openlayers/openlayers/pull/9251) - Fix cache size calculation ([@ahocevar](https://github.com/ahocevar))
+ * [#9110](https://github.com/openlayers/openlayers/pull/9110) - Add TilePixelRatio to Zoomify ([@crubier](https://github.com/crubier))
+ * [#9244](https://github.com/openlayers/openlayers/pull/9244) - add stylus only and touch only mode to drawing a shape ([@huyngkh](https://github.com/huyngkh))
+ * [#9240](https://github.com/openlayers/openlayers/pull/9240) - Add setRotateWithView function to ol/style/Text ([@fredj](https://github.com/fredj))
+ * [#9230](https://github.com/openlayers/openlayers/pull/9230) - Consider all tiles for hit detection when decluttering ([@ahocevar](https://github.com/ahocevar))
+ * [#9237](https://github.com/openlayers/openlayers/pull/9237) - Fix zoom after export to PDF is done ([@umbe1987](https://github.com/umbe1987))
+ * [#9239](https://github.com/openlayers/openlayers/pull/9239) - Run tests in Puppeteer and non headless mode ([@ahocevar](https://github.com/ahocevar))
+ * [#9236](https://github.com/openlayers/openlayers/pull/9236) - Move params list to the constructor function ([@fredj](https://github.com/fredj))
+ * [#9233](https://github.com/openlayers/openlayers/pull/9233) - Remove deprecated {get,set}SnapToPixel functions ([@fredj](https://github.com/fredj))
+ * [#9231](https://github.com/openlayers/openlayers/pull/9231) - Set vector tile extent earlier ([@ahocevar](https://github.com/ahocevar))
+ * [#9224](https://github.com/openlayers/openlayers/pull/9224) - Remove vendor prefix for the 'transform' CSS property and fullscreen api ([@fredj](https://github.com/fredj))
+ * [#9222](https://github.com/openlayers/openlayers/pull/9222) - Update all dev dependencies ([@fredj](https://github.com/fredj))
+ * [#9221](https://github.com/openlayers/openlayers/pull/9221) - Remove unused sortByZIndex function ([@ahocevar](https://github.com/ahocevar))
+ * [#9220](https://github.com/openlayers/openlayers/pull/9220) - Don't resize/clear the vector renderer canvas ([@fredj](https://github.com/fredj))
+ * [#9217](https://github.com/openlayers/openlayers/pull/9217) - Don't use loadImage function to avoid infinite loading loop ([@fredj](https://github.com/fredj))
+ * [#9212](https://github.com/openlayers/openlayers/pull/9212) - Remove unnecessary type cast ([@fredj](https://github.com/fredj))
+ * [#9201](https://github.com/openlayers/openlayers/pull/9201) - Only consider child range with drawable tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#9204](https://github.com/openlayers/openlayers/pull/9204) - Add missing 'include' section ([@ahocevar](https://github.com/ahocevar))
+ * [#9203](https://github.com/openlayers/openlayers/pull/9203) - Only promise what we can deliver regarding IntelliSense ([@ahocevar](https://github.com/ahocevar))
+ * [#9200](https://github.com/openlayers/openlayers/pull/9200) - Add upgrade note about renderMode: 'image' for vector layers ([@ahocevar](https://github.com/ahocevar))
+ * [#9197](https://github.com/openlayers/openlayers/pull/9197) - Remove unused opt_this param ([@fredj](https://github.com/fredj))
+ * [#9196](https://github.com/openlayers/openlayers/pull/9196) - getPointResolution returns resolution in projection units ([@ahocevar](https://github.com/ahocevar))
+ * [#9190](https://github.com/openlayers/openlayers/pull/9190) - Fix MultiPolygon area calculation ([@romanzoller](https://github.com/romanzoller))
+ * [#9179](https://github.com/openlayers/openlayers/pull/9179) - Allow declutter with image render mode ([@gberaudo](https://github.com/gberaudo))
+ * [#9187](https://github.com/openlayers/openlayers/pull/9187) -  Remove unnecessary type cast ([@fredj](https://github.com/fredj))
+ * [#9186](https://github.com/openlayers/openlayers/pull/9186) - Simplify typing in EsriJSON format ([@fredj](https://github.com/fredj))
+ * [#9161](https://github.com/openlayers/openlayers/pull/9161) - Use type template for the source type of layers ([@fredj](https://github.com/fredj))
+ * [#9184](https://github.com/openlayers/openlayers/pull/9184) - Update all dev dependencies ([@fredj](https://github.com/fredj))
+ * [#9178](https://github.com/openlayers/openlayers/pull/9178) - Sources in npm package for TypeScript support ([@ahocevar](https://github.com/ahocevar))
+ * [#9181](https://github.com/openlayers/openlayers/pull/9181) - Add test to verify that removefeature is triggered ([@ahocevar](https://github.com/ahocevar))
+ * [#9173](https://github.com/openlayers/openlayers/pull/9173) - Document the correct render events ([@ahocevar](https://github.com/ahocevar))
+ * [#9167](https://github.com/openlayers/openlayers/pull/9167) - JSDoc fixes ([@ahocevar](https://github.com/ahocevar))
+ * [#9164](https://github.com/openlayers/openlayers/pull/9164) - event chain documentation ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#9157](https://github.com/openlayers/openlayers/pull/9157) - Remove deprecated inherits function ([@fredj](https://github.com/fredj))
+ * [#9152](https://github.com/openlayers/openlayers/pull/9152) - Vector tile optimizations ([@ahocevar](https://github.com/ahocevar))
+ * [#9154](https://github.com/openlayers/openlayers/pull/9154) - Safer check for window.screen ([@ahocevar](https://github.com/ahocevar))
+ * [#9150](https://github.com/openlayers/openlayers/pull/9150) - Avoid clipping when rendering to tiles that don't exceed the clip extent ([@ahocevar](https://github.com/ahocevar))
+ * [#9149](https://github.com/openlayers/openlayers/pull/9149) - Keep track of used labels ([@ahocevar](https://github.com/ahocevar))
+ * [#9131](https://github.com/openlayers/openlayers/pull/9131) - Don't use strict comparison with style.opacity ([@fredj](https://github.com/fredj))
+ * [#9013](https://github.com/openlayers/openlayers/pull/9013) - Added scalebar option to ol.control.scaleline ([@weskamm](https://github.com/weskamm))
+ * [#9133](https://github.com/openlayers/openlayers/pull/9133) - Reduce memory footprint of tiles and labels ([@ahocevar](https://github.com/ahocevar))
+ * [#9129](https://github.com/openlayers/openlayers/pull/9129) - Reduce garbage generation ([@fredj](https://github.com/fredj))
+ * [#9128](https://github.com/openlayers/openlayers/pull/9128) - Use less render cycles for vector tile layers ([@ahocevar](https://github.com/ahocevar))
+ * [#9120](https://github.com/openlayers/openlayers/pull/9120) - Update all dev dependencies ([@fredj](https://github.com/fredj))
+ * [#9118](https://github.com/openlayers/openlayers/pull/9118) - Don't dispatch change events when reading features ([@fredj](https://github.com/fredj))
+ * [#9114](https://github.com/openlayers/openlayers/pull/9114) - Faster extent calculation with less garbage ([@ahocevar](https://github.com/ahocevar))
+ * [#9109](https://github.com/openlayers/openlayers/pull/9109) - Make package.json valid json object ([@JosephSamela](https://github.com/JosephSamela))
+ * [#9112](https://github.com/openlayers/openlayers/pull/9112) - Properly unregister prepareTile listeners ([@ahocevar](https://github.com/ahocevar))
+ * [#9103](https://github.com/openlayers/openlayers/pull/9103) - Make examples more user friendly ([@ahocevar](https://github.com/ahocevar))
+ * [#9107](https://github.com/openlayers/openlayers/pull/9107) - Fix cgiar csi URL due to #9106 ([@webgeodatavore](https://github.com/webgeodatavore))
+ * [#9058](https://github.com/openlayers/openlayers/pull/9058) - Move all tile loading from the VectorImageTile to the source ([@ahocevar](https://github.com/ahocevar))
+ * [#9102](https://github.com/openlayers/openlayers/pull/9102) - Use dom-to-image library in export-pdf example ([@openlayers](https://github.com/openlayers))
+ * [#9072](https://github.com/openlayers/openlayers/pull/9072) - Remove 'layerStates' property from the FrameState ([@fredj](https://github.com/fredj))
+ * [#9101](https://github.com/openlayers/openlayers/pull/9101) - Always load tiles while animating and interacting ([@ahocevar](https://github.com/ahocevar))
+ * [#9099](https://github.com/openlayers/openlayers/pull/9099) - Allow users to opt out of tracking ([@ahocevar](https://github.com/ahocevar))
+ * [#9098](https://github.com/openlayers/openlayers/pull/9098) - External types bugfix for jsdoc-plugin-typescript ([@ahocevar](https://github.com/ahocevar))
+ * [#9083](https://github.com/openlayers/openlayers/pull/9083) - Reset lastDragTime when condition is not met ([@ahocevar](https://github.com/ahocevar))
+ * [#9090](https://github.com/openlayers/openlayers/pull/9090) - Add texture & color to the WebGL points renderer ([@jahow](https://github.com/jahow))
+ * [#9091](https://github.com/openlayers/openlayers/pull/9091) - Fix heatmap example in IE ([@jahow](https://github.com/jahow))
+ * [#9089](https://github.com/openlayers/openlayers/pull/9089) - Replace rawgit with jsdelivr due to #9082 comment ([@ThomasG77](https://github.com/ThomasG77))
+ * [#9079](https://github.com/openlayers/openlayers/pull/9079) - Listen to all fullscreen event types ([@ahocevar](https://github.com/ahocevar))
+ * [#9070](https://github.com/openlayers/openlayers/pull/9070) - Modify.removePoint returns true only when a vertex was removed ([@ludvigeriksson](https://github.com/ludvigeriksson))
+ * [#9068](https://github.com/openlayers/openlayers/pull/9068) - Use 'PBF' type instead of 'Object' in ol/format/MVT ([@fredj](https://github.com/fredj))
+ * [#9066](https://github.com/openlayers/openlayers/pull/9066) - Rework transformWithOptions ([@fredj](https://github.com/fredj))
+ * [#9064](https://github.com/openlayers/openlayers/pull/9064) - Remove Atlas, AtlasManager and getChecksum functions ([@fredj](https://github.com/fredj))
+ * [#9060](https://github.com/openlayers/openlayers/pull/9060) - Avoid unexpected behavior when passing string coordinates ([@ahocevar](https://github.com/ahocevar))
+ * [#9063](https://github.com/openlayers/openlayers/pull/9063) - Fix module name ([@oterral](https://github.com/oterral))
+ * [#9056](https://github.com/openlayers/openlayers/pull/9056) - Remove typecast for object literals ([@fredj](https://github.com/fredj))
+ * [#9057](https://github.com/openlayers/openlayers/pull/9057) - Use FeatureLike typedef ([@fredj](https://github.com/fredj))
+ * [#9055](https://github.com/openlayers/openlayers/pull/9055) - Remove type cast in ol.View ([@fredj](https://github.com/fredj))
+ * [#9008](https://github.com/openlayers/openlayers/pull/9008) - Decouple render instruction creation from rendering ([@ahocevar](https://github.com/ahocevar))
+ * [#9045](https://github.com/openlayers/openlayers/pull/9045) - Remove CANVAS_LINE_DASH from ol/has ([@openlayers](https://github.com/openlayers))
+ * [#9044](https://github.com/openlayers/openlayers/pull/9044) - Fix comments indentation ([@openlayers](https://github.com/openlayers))
+ * [#9043](https://github.com/openlayers/openlayers/pull/9043) -  Fix type notation in examples ([@openlayers](https://github.com/openlayers))
+ * [#9041](https://github.com/openlayers/openlayers/pull/9041) - Reworked the Webgl Heatmap layer & associated utilities ([@jahow](https://github.com/jahow))
+ * [#9042](https://github.com/openlayers/openlayers/pull/9042) - Change onBoxEnd property in DragBox options to optional ([@openlayers](https://github.com/openlayers))
+ * [#9039](https://github.com/openlayers/openlayers/pull/9039) - Add ': void' to non returning functions (error TS7014) ([@OSHistory](https://github.com/OSHistory))
+ * [#9024](https://github.com/openlayers/openlayers/pull/9024) - Add prerender and postrender events for Image layer ([@ahocevar](https://github.com/ahocevar))
+ * [#9028](https://github.com/openlayers/openlayers/pull/9028) - Specify the return array as coordinates ([@OSHistory](https://github.com/OSHistory))
+ * [#9036](https://github.com/openlayers/openlayers/pull/9036) -  Remove drag segments of removed features ([@ahocevar](https://github.com/ahocevar))
+ * [#9031](https://github.com/openlayers/openlayers/pull/9031) - Call insertVertexCondition only when a vertex acually can be inserted ([@ludvigeriksson](https://github.com/ludvigeriksson))
+ * [#9029](https://github.com/openlayers/openlayers/pull/9029) - Use camel-cased inheritDoc for consistency ([@OSHistory](https://github.com/OSHistory))
+ * [#9026](https://github.com/openlayers/openlayers/pull/9026) - Update ol-mapbox-style and jsdoc-plugin-typescript ([@ahocevar](https://github.com/ahocevar))
+ * [#9025](https://github.com/openlayers/openlayers/pull/9025) - Remove unused render event ([@ahocevar](https://github.com/ahocevar))
+ * [#9023](https://github.com/openlayers/openlayers/pull/9023) - Fix webgl PointsLayer not rendering anything ([@jahow](https://github.com/jahow))
+ * [#9022](https://github.com/openlayers/openlayers/pull/9022) - Use WebGL even with major performance caveat ([@ahocevar](https://github.com/ahocevar))
+ * [#9020](https://github.com/openlayers/openlayers/pull/9020) - Remove superfluous setTileUrlFunction call ([@ahocevar](https://github.com/ahocevar))
+ * [#9018](https://github.com/openlayers/openlayers/pull/9018) - Duplicate @property for style and renderOrder ([@OSHistory](https://github.com/OSHistory))
+ * [#9012](https://github.com/openlayers/openlayers/pull/9012) - Change projection and urls properties in sources options to optional ([@fredj](https://github.com/fredj))
+ * [#9010](https://github.com/openlayers/openlayers/pull/9010) - Fix ExecutorGroup.js file location in comments ([@fredj](https://github.com/fredj))
+ * [#9009](https://github.com/openlayers/openlayers/pull/9009) -  Revert "Simplify import path in examples" ([@fredj](https://github.com/fredj))
+ * [#9005](https://github.com/openlayers/openlayers/pull/9005) - Simplify import path in examples ([@fredj](https://github.com/fredj))
+ * [#9003](https://github.com/openlayers/openlayers/pull/9003) - Remove unused Builder/Executor functions and members ([@ahocevar](https://github.com/ahocevar))
+ * [#9002](https://github.com/openlayers/openlayers/pull/9002) - Fix module path ([@openlayers](https://github.com/openlayers))
+ * [#8996](https://github.com/openlayers/openlayers/pull/8996) - Add imageRatio option for VectorImage layers ([@fredj](https://github.com/fredj))
+ * [#8995](https://github.com/openlayers/openlayers/pull/8995) - Remove leftover comments and code for 'vector' render mode ([@fredj](https://github.com/fredj))
+ * [#8992](https://github.com/openlayers/openlayers/pull/8992) - Use standard tile coords ([@tschaub](https://github.com/tschaub))
+ * [#8994](https://github.com/openlayers/openlayers/pull/8994) - Set projection property in sources options to optional ([@fredj](https://github.com/fredj))
+ * [#8977](https://github.com/openlayers/openlayers/pull/8977) - Add WebGL rendering tests & improve the WebGLHelper API ([@jahow](https://github.com/jahow))
+ * [#8990](https://github.com/openlayers/openlayers/pull/8990) - [Client] Remove renderFrame ([@nicholas-l](https://github.com/nicholas-l))
+ * [#8988](https://github.com/openlayers/openlayers/pull/8988) - Pass along the ability to measure and cache text width ([@tschaub](https://github.com/tschaub))
+ * [#8987](https://github.com/openlayers/openlayers/pull/8987) - Rendering test updates ([@tschaub](https://github.com/tschaub))
+ * [#8983](https://github.com/openlayers/openlayers/pull/8983) - Add issue templates ([@openlayers](https://github.com/openlayers))
+ * [#8982](https://github.com/openlayers/openlayers/pull/8982) - Stacking context for layers, overlays, and controls ([@tschaub](https://github.com/tschaub))
+ * [#8980](https://github.com/openlayers/openlayers/pull/8980) - Change travis references to circleci in doc ([@fredj](https://github.com/fredj))
+ * [#8976](https://github.com/openlayers/openlayers/pull/8976) - Scale tiles instead of canvas ([@ahocevar](https://github.com/ahocevar))
+ * [#8970](https://github.com/openlayers/openlayers/pull/8970) - Fix zIndex positioning ([@ahocevar](https://github.com/ahocevar))
+ * [#8968](https://github.com/openlayers/openlayers/pull/8968) - Use Object.values if available ([@fredj](https://github.com/fredj))
+ * [#8972](https://github.com/openlayers/openlayers/pull/8972) - Remove unused rollup dependency ([@ahocevar](https://github.com/ahocevar))
+ * [#8967](https://github.com/openlayers/openlayers/pull/8967) - Fix webgl types in ol/webgl/PostProcessingPass ([@fredj](https://github.com/fredj))
+ * [#8969](https://github.com/openlayers/openlayers/pull/8969) - Create and use inverse pixel transforms during render ([@tschaub](https://github.com/tschaub))
+ * [#8964](https://github.com/openlayers/openlayers/pull/8964) - Add index to the Collection events ([@fredj](https://github.com/fredj))
+ * [#8915](https://github.com/openlayers/openlayers/pull/8915) - Use CSS z-index to order layers ([@fredj](https://github.com/fredj))
+ * [#8923](https://github.com/openlayers/openlayers/pull/8923) - Use the composite renderer ([@tschaub](https://github.com/tschaub))
+ * [#8951](https://github.com/openlayers/openlayers/pull/8951) - Remove legacy WebGL code & implement a lightweight API for point rendering ([@jahow](https://github.com/jahow))
+ * [#8926](https://github.com/openlayers/openlayers/pull/8926) - Uncouple replay creation and rendering ([@gberaudo](https://github.com/gberaudo))
+ * [#8952](https://github.com/openlayers/openlayers/pull/8952) - Port polygon-style rendering test ([@fredj](https://github.com/fredj))
+ * [#8939](https://github.com/openlayers/openlayers/pull/8939) - Use ol/layer/Layer instead of ol/source/ImageCanvas in d3 example ([@fredj](https://github.com/fredj))
+ * [#8957](https://github.com/openlayers/openlayers/pull/8957) - Fix JSdoc type cast format ([@fredj](https://github.com/fredj))
+ * [#8934](https://github.com/openlayers/openlayers/pull/8934) - Port layer tiles rendering tests ([@fgravin](https://github.com/fgravin))
+ * [#8944](https://github.com/openlayers/openlayers/pull/8944) - Use a layer for the graticule instead of a control ([@jahow](https://github.com/jahow))
+ * [#8948](https://github.com/openlayers/openlayers/pull/8948) - Add rotation in mapbox-gl example ([@fgravin](https://github.com/fgravin))
+ * [#8953](https://github.com/openlayers/openlayers/pull/8953) - Store rendering artifacts immediately after run tests ([@fredj](https://github.com/fredj))
+ * [#8950](https://github.com/openlayers/openlayers/pull/8950) - Use shx to run unix commands in package.json ([@fredj](https://github.com/fredj))
+ * [#8946](https://github.com/openlayers/openlayers/pull/8946) - Make the map renderer tolerant of layers without renderers ([@tschaub](https://github.com/tschaub))
+ * [#8943](https://github.com/openlayers/openlayers/pull/8943) - Port text style rendering tests ([@fredj](https://github.com/fredj))
+ * [#8940](https://github.com/openlayers/openlayers/pull/8940) - Make layers mandatory in the OverviewMap control ([@jahow](https://github.com/jahow))
+ * [#8938](https://github.com/openlayers/openlayers/pull/8938) - Port render-toContext rendering test ([@fredj](https://github.com/fredj))
+ * [#8941](https://github.com/openlayers/openlayers/pull/8941) - Rendering tests render message ([@fredj](https://github.com/fredj))
+ * [#8933](https://github.com/openlayers/openlayers/pull/8933) - Port icon-symbol-svg rendering test ([@fredj](https://github.com/fredj))
+ * [#8931](https://github.com/openlayers/openlayers/pull/8931) - Add Mapbox-gl-js example ([@fgravin](https://github.com/fgravin))
+ * [#8937](https://github.com/openlayers/openlayers/pull/8937) - Make the tile debug source useful for understanding tiles ([@tschaub](https://github.com/tschaub))
+ * [#8930](https://github.com/openlayers/openlayers/pull/8930) - Give the layers container a CSS class name ([@fredj](https://github.com/fredj))
+ * [#8914](https://github.com/openlayers/openlayers/pull/8914) - Add new className property to ol/layer/Base ([@fredj](https://github.com/fredj))
+ * [#8910](https://github.com/openlayers/openlayers/pull/8910) - Implements containsXY for all geometries ([@fredj](https://github.com/fredj))
+ * [#8922](https://github.com/openlayers/openlayers/pull/8922) - Layer is reponsible for its renderer ([@fgravin](https://github.com/fgravin))
+ * [#8936](https://github.com/openlayers/openlayers/pull/8936) - Serve sourcemaps from webpack during rendering tests ([@tschaub](https://github.com/tschaub))
+ * [#8932](https://github.com/openlayers/openlayers/pull/8932) - Add pbf TypeScript type definitions ([@fredj](https://github.com/fredj))
+ * [#8924](https://github.com/openlayers/openlayers/pull/8924) - Reuse vector tile replays for interim tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#8918](https://github.com/openlayers/openlayers/pull/8918) - Use dom-to-image-more library in export-map ([@fredj](https://github.com/fredj))
+ * [#8928](https://github.com/openlayers/openlayers/pull/8928) - Add vector tile example using ol-mapbox-style ([@ahocevar](https://github.com/ahocevar))
+ * [#8925](https://github.com/openlayers/openlayers/pull/8925) - Don't compute value more that once, remove unneeded type cast ([@fredj](https://github.com/fredj))
+ * [#8927](https://github.com/openlayers/openlayers/pull/8927) - Use local data for rendering tests ([@tschaub](https://github.com/tschaub))
+ * [#8920](https://github.com/openlayers/openlayers/pull/8920) - Remove unneeded 'relative' positioning ([@fredj](https://github.com/fredj))
+ * [#8913](https://github.com/openlayers/openlayers/pull/8913) - Implement renderFrame function for intermediate canvas renderer ([@fgravin](https://github.com/fgravin))
+ * [#8916](https://github.com/openlayers/openlayers/pull/8916) - Move canvas creation to intermediate canvas renderer constructor ([@tschaub](https://github.com/tschaub))
+ * [#8917](https://github.com/openlayers/openlayers/pull/8917) - Apply all transforms in the layer renderer ([@tschaub](https://github.com/tschaub))
+ * [#8912](https://github.com/openlayers/openlayers/pull/8912) - Rotation support in the composite renderer ([@tschaub](https://github.com/tschaub))
+ * [#8908](https://github.com/openlayers/openlayers/pull/8908) - Handle layer opacity in the composite renderer ([@tschaub](https://github.com/tschaub))
+ * [#8848](https://github.com/openlayers/openlayers/pull/8848) - Make layer renderers explicit layer dependencies ([@tschaub](https://github.com/tschaub))
+ * [#8892](https://github.com/openlayers/openlayers/pull/8892) - Use the right device orientation property in example ([@fredj](https://github.com/fredj))
+ * [#8904](https://github.com/openlayers/openlayers/pull/8904) - Add support for a default index page in the rendering tests ([@tschaub](https://github.com/tschaub))
+ * [#8903](https://github.com/openlayers/openlayers/pull/8903) - Additional render tests ([@tschaub](https://github.com/tschaub))
+ * [#8895](https://github.com/openlayers/openlayers/pull/8895) - New rendering tests ([@tschaub](https://github.com/tschaub))
+ * [#8893](https://github.com/openlayers/openlayers/pull/8893) - Add proj.js to the sideEffects list ([@fredj](https://github.com/fredj))
+ * [#8887](https://github.com/openlayers/openlayers/pull/8887) - Changes for 5.3.0 ([@openlayers](https://github.com/openlayers))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#9990](https://github.com/openlayers/openlayers/pull/9990) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9987](https://github.com/openlayers/openlayers/pull/9987) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9972](https://github.com/openlayers/openlayers/pull/9972) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9952](https://github.com/openlayers/openlayers/pull/9952) - Update handlebars to the latest version ([@openlayers](https://github.com/openlayers))
+ * [#9932](https://github.com/openlayers/openlayers/pull/9932) - Greenkeeper/webpack 4.40.2 ([@openlayers](https://github.com/openlayers))
+ * [#9928](https://github.com/openlayers/openlayers/pull/9928) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9926](https://github.com/openlayers/openlayers/pull/9926) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9914](https://github.com/openlayers/openlayers/pull/9914) - Greenkeeper/terser webpack plugin 2.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#9886](https://github.com/openlayers/openlayers/pull/9886) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9880](https://github.com/openlayers/openlayers/pull/9880) - Greenkeeper/karma coverage 2.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#9876](https://github.com/openlayers/openlayers/pull/9876) - Update yargs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9856](https://github.com/openlayers/openlayers/pull/9856) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9857](https://github.com/openlayers/openlayers/pull/9857) - Update karma-chrome-launcher to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9817](https://github.com/openlayers/openlayers/pull/9817) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9827](https://github.com/openlayers/openlayers/pull/9827) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9816](https://github.com/openlayers/openlayers/pull/9816) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9801](https://github.com/openlayers/openlayers/pull/9801) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9795](https://github.com/openlayers/openlayers/pull/9795) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9793](https://github.com/openlayers/openlayers/pull/9793) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9787](https://github.com/openlayers/openlayers/pull/9787) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9786](https://github.com/openlayers/openlayers/pull/9786) - chore(package): update webpack to version 4.36.1 ([@openlayers](https://github.com/openlayers))
+ * [#9775](https://github.com/openlayers/openlayers/pull/9775) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9772](https://github.com/openlayers/openlayers/pull/9772) - Update karma-chrome-launcher to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9769](https://github.com/openlayers/openlayers/pull/9769) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9759](https://github.com/openlayers/openlayers/pull/9759) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9763](https://github.com/openlayers/openlayers/pull/9763) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9744](https://github.com/openlayers/openlayers/pull/9744) - chore(package): update webpack to version 4.35.2 ([@openlayers](https://github.com/openlayers))
+ * [#9738](https://github.com/openlayers/openlayers/pull/9738) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9737](https://github.com/openlayers/openlayers/pull/9737) - Update globby to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9703](https://github.com/openlayers/openlayers/pull/9703) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9698](https://github.com/openlayers/openlayers/pull/9698) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9695](https://github.com/openlayers/openlayers/pull/9695) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9673](https://github.com/openlayers/openlayers/pull/9673) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9660](https://github.com/openlayers/openlayers/pull/9660) - Update pixelmatch to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9653](https://github.com/openlayers/openlayers/pull/9653) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9649](https://github.com/openlayers/openlayers/pull/9649) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9598](https://github.com/openlayers/openlayers/pull/9598) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9594](https://github.com/openlayers/openlayers/pull/9594) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9589](https://github.com/openlayers/openlayers/pull/9589) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9586](https://github.com/openlayers/openlayers/pull/9586) - Update rollup-plugin-terser to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9553](https://github.com/openlayers/openlayers/pull/9553) - chore(package): update ol-mapbox-style to version 5.0.0-beta.2 ([@openlayers](https://github.com/openlayers))
+ * [#9528](https://github.com/openlayers/openlayers/pull/9528) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9517](https://github.com/openlayers/openlayers/pull/9517) - Update jsdoc to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9515](https://github.com/openlayers/openlayers/pull/9515) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9508](https://github.com/openlayers/openlayers/pull/9508) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9486](https://github.com/openlayers/openlayers/pull/9486) - Update jquery to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9468](https://github.com/openlayers/openlayers/pull/9468) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9444](https://github.com/openlayers/openlayers/pull/9444) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9432](https://github.com/openlayers/openlayers/pull/9432) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9431](https://github.com/openlayers/openlayers/pull/9431) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9427](https://github.com/openlayers/openlayers/pull/9427) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9420](https://github.com/openlayers/openlayers/pull/9420) - Update jquery to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9412](https://github.com/openlayers/openlayers/pull/9412) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9408](https://github.com/openlayers/openlayers/pull/9408) - chore(package): update mocha to version 6.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#9406](https://github.com/openlayers/openlayers/pull/9406) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9405](https://github.com/openlayers/openlayers/pull/9405) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9387](https://github.com/openlayers/openlayers/pull/9387) - Update puppeteer to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9342](https://github.com/openlayers/openlayers/pull/9342) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9311](https://github.com/openlayers/openlayers/pull/9311) - Update pbf to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9285](https://github.com/openlayers/openlayers/pull/9285) - Update globby to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9280](https://github.com/openlayers/openlayers/pull/9280) - Update ol-mapbox-style to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9279](https://github.com/openlayers/openlayers/pull/9279) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9268](https://github.com/openlayers/openlayers/pull/9268) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9261](https://github.com/openlayers/openlayers/pull/9261) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9256](https://github.com/openlayers/openlayers/pull/9256) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9247](https://github.com/openlayers/openlayers/pull/9247) - Update copy-webpack-plugin to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9242](https://github.com/openlayers/openlayers/pull/9242) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9238](https://github.com/openlayers/openlayers/pull/9238) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9232](https://github.com/openlayers/openlayers/pull/9232) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9225](https://github.com/openlayers/openlayers/pull/9225) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9207](https://github.com/openlayers/openlayers/pull/9207) - Update yargs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9195](https://github.com/openlayers/openlayers/pull/9195) - Update handlebars to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9194](https://github.com/openlayers/openlayers/pull/9194) - chore(package): update webpack to version 4.29.3 ([@openlayers](https://github.com/openlayers))
+ * [#9185](https://github.com/openlayers/openlayers/pull/9185) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9148](https://github.com/openlayers/openlayers/pull/9148) - Update karma to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9124](https://github.com/openlayers/openlayers/pull/9124) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9127](https://github.com/openlayers/openlayers/pull/9127) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9108](https://github.com/openlayers/openlayers/pull/9108) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9095](https://github.com/openlayers/openlayers/pull/9095) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9092](https://github.com/openlayers/openlayers/pull/9092) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9085](https://github.com/openlayers/openlayers/pull/9085) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9080](https://github.com/openlayers/openlayers/pull/9080) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9076](https://github.com/openlayers/openlayers/pull/9076) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9037](https://github.com/openlayers/openlayers/pull/9037) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9032](https://github.com/openlayers/openlayers/pull/9032) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#9004](https://github.com/openlayers/openlayers/pull/9004) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8989](https://github.com/openlayers/openlayers/pull/8989) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8978](https://github.com/openlayers/openlayers/pull/8978) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8966](https://github.com/openlayers/openlayers/pull/8966) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8963](https://github.com/openlayers/openlayers/pull/8963) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8905](https://github.com/openlayers/openlayers/pull/8905) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8902](https://github.com/openlayers/openlayers/pull/8902) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

config/jsdoc/api/index.md

@@ -15,7 +15,7 @@
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td><a href="module-ol_control_util.html#.defaults">Map default controls</a><br>
+<td><a href="module-ol_control.html#.defaults">Map default controls</a><br>
 <a href="module-ol_control_Control-Control.html">All controls</a>
 </td>
 <td>

doc/errors/index.md

@@ -236,3 +236,16 @@ A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUF
 ### 63
 
 Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.
+
+### 64
+
+Layer opacity must be a number.
+
+### 65
+
+A symbol literal representation must be defined on the style supplied to a `WebGLPointsLayer` instance.
+
+### 66
+
+`forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has not been enabled.
+This is done by providing adequate shaders using the `hitVertexShader` and `hitFragmentShader` properties of `WebGLPointsLayerRenderer`.

examples/box-selection.js

@@ -25,7 +25,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
+    constrainRotation: 16
   })
 });
 
@@ -43,12 +44,39 @@ const dragBox = new DragBox({
 map.addInteraction(dragBox);
 
 dragBox.on('boxend', function() {
-  // features that intersect the box are added to the collection of
-  // selected features
+  // features that intersect the box geometry are added to the
+  // collection of selected features
+
+  // if the view is not obliquely rotated the box geometry and
+  // its extent are equalivalent so intersecting features can
+  // be added directly to the collection
+  const rotation = map.getView().getRotation();
+  const oblique = rotation % (Math.PI / 2) !== 0;
+  const candidateFeatures = oblique ? [] : selectedFeatures;
   const extent = dragBox.getGeometry().getExtent();
   vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
-    selectedFeatures.push(feature);
+    candidateFeatures.push(feature);
   });
+
+  // when the view is obliquely rotated the box extent will
+  // exceed its geometry so both the box and the candidate
+  // feature geometries are rotated around a common anchor
+  // to confirm that, with the box geometry aligned with its
+  // extent, the geometries intersect
+  if (oblique) {
+    const anchor = [0, 0];
+    const geometry = dragBox.getGeometry().clone();
+    geometry.rotate(-rotation, anchor);
+    const extent = geometry.getExtent();
+    candidateFeatures.forEach(function(feature) {
+      const geometry = feature.getGeometry().clone();
+      geometry.rotate(-rotation, anchor);
+      if (geometry.intersectsExtent(extent)) {
+        selectedFeatures.push(feature);
+      }
+    });
+  }
+
 });
 
 // clear selection when drawing a new box and when clicking on the map

examples/custom-interactions.html

@@ -6,5 +6,8 @@ docs: >
   This example demonstrates creating a custom interaction by subclassing `ol/interaction/Pointer`.
   Note that the built in interaction `ol/interaction/Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/custom-interactions.js

@@ -123,13 +123,14 @@ const polygonFeature = new Feature(
   new Polygon([[[-3e6, -1e6], [-3e6, 1e6],
     [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
 
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const map = new Map({
   interactions: defaultInteractions().extend([new Drag()]),
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
+        url: 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + key
       })
     }),
     new VectorLayer({

examples/edit-geographic.html

@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: Geographic Editing
+shortdesc: Editing geometries with geographic coordinates.
+docs: >
+  Calling the <code>useGeographic</code> function in the <code>'ol/proj'</code> module
+  makes it so the map view uses geographic coordinates (even if the view projection is
+  not geographic).
+tags: "geographic"
+experimental: true
+---
+<div id="map" class="map"></div>
+<select id="mode">
+  <option value="modify">select a feature to modify</option>
+  <option value="draw">draw new features</option>
+</select>

examples/edit-geographic.js

@@ -0,0 +1,63 @@
+import {Map, View} from '../src/ol/index.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Modify, Select, Draw} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {useGeographic} from '../src/ol/proj.js';
+
+useGeographic();
+
+const source = new VectorSource({
+  url: 'data/geojson/countries.geojson',
+  format: new GeoJSON()
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    }),
+    new VectorLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+const select = new Select();
+
+const modify = new Modify({
+  features: select.getFeatures()
+});
+
+const draw = new Draw({
+  type: 'Polygon',
+  source: source
+});
+
+const mode = document.getElementById('mode');
+function onChange() {
+  switch (mode.value) {
+    case 'draw': {
+      map.removeInteraction(modify);
+      map.removeInteraction(select);
+      map.addInteraction(draw);
+      break;
+    }
+    case 'modify': {
+      map.removeInteraction(draw);
+      map.addInteraction(select);
+      map.addInteraction(modify);
+      break;
+    }
+    default: {
+      // pass
+    }
+  }
+}
+mode.addEventListener('change', onChange);
+onChange();

examples/export-pdf.js

@@ -65,18 +65,18 @@ exportButton.addEventListener('click', function() {
   const width = Math.round(dim[0] * resolution / 25.4);
   const height = Math.round(dim[1] * resolution / 25.4);
   const size = map.getSize();
-  const extent = map.getView().calculateExtent(size);
+  const viewResolution = map.getView().getResolution();
 
   map.once('rendercomplete', function() {
-    toJpeg(map.getTargetElement(), exportOptions).then(function(dataUrl) {
+    exportOptions.width = width;
+    exportOptions.height = height;
+    toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
       const pdf = new jsPDF('landscape', undefined, format);
       pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
       pdf.save('map.pdf');
       // Reset original map size
       map.setSize(size);
-      map.getView().fit(extent, {
-        size: size
-      });
+      map.getView().setResolution(viewResolution);
       exportButton.disabled = false;
       document.body.style.cursor = 'auto';
     });
@@ -85,6 +85,7 @@ exportButton.addEventListener('click', function() {
   // Set print size
   const printSize = [width, height];
   map.setSize(printSize);
-  map.getView().fit(extent, {size: printSize});
+  const scaling = Math.min(width / size[0], height / size[1]);
+  map.getView().setResolution(viewResolution / scaling);
 
 }, false);

examples/filter-points-webgl.html

@@ -13,6 +13,7 @@ docs: >
     to store the year of impact.
 
 tags: "webgl, icon, sprite, filter, feature"
+experimental: true
 ---
 <div id="map" class="map"></div>
 <form>

examples/filter-points-webgl.js

@@ -7,8 +7,9 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {clamp, lerp} from '../src/ol/math.js';
+import {clamp} from '../src/ol/math.js';
 import Stamen from '../src/ol/source/Stamen.js';
+import {formatColor} from '../src/ol/webgl/ShaderBuilder.js';
 
 const vectorSource = new Vector({
   attributions: 'NASA'
@@ -36,36 +37,58 @@ updateStatusText();
 class WebglPointsLayer extends VectorLayer {
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
-      colorCallback: function(feature, color) {
-        // color is interpolated based on year
-        const ratio = clamp((feature.get('year') - 1800) / (2013 - 1800), 0, 1);
-
-        color[0] = lerp(oldColor[0], newColor[0], ratio) / 255;
-        color[1] = lerp(oldColor[1], newColor[1], ratio) / 255;
-        color[2] = lerp(oldColor[2], newColor[2], ratio) / 255;
-        color[3] = 1;
-
-        return color;
-      },
-      sizeCallback: function(feature) {
+      attributes: [
+        {
+          name: 'size',
+          callback: function(feature) {
             return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8;
+          }
         },
+        {
+          name: 'year',
+          callback: function(feature) {
+            return feature.get('year');
+          }
+        }
+      ],
+      vertexShader: [
+        'precision mediump float;',
+
+        'uniform mat4 u_projectionMatrix;',
+        'uniform mat4 u_offsetScaleMatrix;',
+        'uniform mat4 u_offsetRotateMatrix;',
+        'attribute vec2 a_position;',
+        'attribute float a_index;',
+        'attribute float a_size;',
+        'attribute float a_year;',
+        'varying vec2 v_texCoord;',
+        'varying float v_year;',
+
+        'void main(void) {',
+        '  mat4 offsetMatrix = u_offsetScaleMatrix;',
+        '  float offsetX = a_index == 0.0 || a_index == 3.0 ? -a_size / 2.0 : a_size / 2.0;',
+        '  float offsetY = a_index == 0.0 || a_index == 1.0 ? -a_size / 2.0 : a_size / 2.0;',
+        '  vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);',
+        '  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;',
+        '  float u = a_index == 0.0 || a_index == 3.0 ? 0.0 : 1.0;',
+        '  float v = a_index == 0.0 || a_index == 1.0 ? 0.0 : 1.0;',
+        '  v_texCoord = vec2(u, v);',
+        '  v_year = a_year;',
+        '}'
+      ].join(' '),
       fragmentShader: [
         'precision mediump float;',
 
         'uniform float u_time;',
         'uniform float u_minYear;',
         'uniform float u_maxYear;',
-
         'varying vec2 v_texCoord;',
-        'varying float v_opacity;',
-        'varying vec4 v_color;',
+        'varying float v_year;',
 
         'void main(void) {',
-        '  float impactYear = v_opacity;',
 
         // filter out pixels if the year is outside of the given range
-        '  if (impactYear < u_minYear || v_opacity > u_maxYear) {',
+        '  if (v_year < u_minYear || v_year > u_maxYear) {',
         '    discard;',
         '  }',
 
@@ -74,19 +97,19 @@ class WebglPointsLayer extends VectorLayer {
         '  float value = 2.0 * (1.0 - sqRadius);',
         '  float alpha = smoothstep(0.0, 1.0, value);',
 
-        '  vec3 color = v_color.rgb;',
-        '  float period = 8.0;',
-        '  color.g *= 2.0 * (1.0 - sqrt(mod(u_time + impactYear * 0.025, period) / period));',
+        // color is interpolated based on year
+        '  float ratio = clamp((v_year - 1800.0) / (2013.0 - 1800.0), 0.0, 1.1);',
+        '  vec3 color = mix(vec3(' + formatColor(oldColor) + '),',
+        '    vec3(' + formatColor(newColor) + '), ratio);',
 
-        '  gl_FragColor = vec4(color, v_color.a);',
+        '  float period = 8.0;',
+        '  color.g *= 2.0 * (1.0 - sqrt(mod(u_time + v_year * 0.025, period) / period));',
+
+        '  gl_FragColor = vec4(color, 1.0);',
         '  gl_FragColor.a *= alpha;',
         '  gl_FragColor.rgb *= gl_FragColor.a;',
         '}'
       ].join(' '),
-      opacityCallback: function(feature) {
-        // here the opacity channel of the vertices is used to store the year of impact
-        return feature.get('year');
-      },
       uniforms: {
         u_time: function() {
           return Date.now() * 0.001 - startTime;

examples/geographic.css

@@ -0,0 +1,4 @@
+td {
+  padding: 0 0.5em;
+  text-align: right;
+}

examples/geographic.html

@@ -0,0 +1,18 @@
+---
+layout: example.html
+title: Geographic Coordinates
+shortdesc: Using geographic coordinates for the map view.
+docs: >
+  Calling the <code>useGeographic</code> function in the <code>'ol/proj'</code> module
+  makes it so the map view uses geographic coordinates (even if the view projection is
+  not geographic).
+tags: "geographic"
+experimental: true
+resources:
+  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
+---
+<div id="map" class="map"><div id="popup"></div></div>
+<div id="info"></div>
+

examples/geographic.js

@@ -0,0 +1,89 @@
+import {useGeographic} from '../src/ol/proj.js';
+import {Map, View, Feature, Overlay} from '../src/ol/index.js';
+import {Point} from '../src/ol/geom.js';
+import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Style, Circle, Fill} from '../src/ol/style.js';
+
+useGeographic();
+
+const place = [-110, 45];
+
+const point = new Point(place);
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: place,
+    zoom: 8
+  }),
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    }),
+    new VectorLayer({
+      source: new VectorSource({
+        features: [
+          new Feature(point)
+        ]
+      }),
+      style: new Style({
+        image: new Circle({
+          radius: 9,
+          fill: new Fill({color: 'red'})
+        })
+      })
+    })
+  ]
+});
+
+const element = document.getElementById('popup');
+
+const popup = new Overlay({
+  element: element,
+  positioning: 'bottom-center',
+  stopEvent: false,
+  offset: [0, -10]
+});
+map.addOverlay(popup);
+
+function formatCoordinate(coordinate) {
+  return `
+    <table>
+      <tbody>
+        <tr><th>lon</th><td>${coordinate[0].toFixed(2)}</td></tr>
+        <tr><th>lat</th><td>${coordinate[1].toFixed(2)}</td></tr>
+      </tbody>
+    </table>`;
+}
+
+const info = document.getElementById('info');
+map.on('moveend', function() {
+  const view = map.getView();
+  const center = view.getCenter();
+  info.innerHTML = formatCoordinate(center);
+});
+
+map.on('click', function(event) {
+  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+  if (feature) {
+    const coordinate = feature.getGeometry().getCoordinates();
+    popup.setPosition(coordinate);
+    $(element).popover({
+      placement: 'top',
+      html: true,
+      content: formatCoordinate(coordinate)
+    });
+    $(element).popover('show');
+  } else {
+    $(element).popover('destroy');
+  }
+});
+
+map.on('pointermove', function(event) {
+  if (map.hasFeatureAtPixel(event.pixel)) {
+    map.getViewport().style.cursor = 'pointer';
+  } else {
+    map.getViewport().style.cursor = 'inherit';
+  }
+});

examples/getfeatureinfo-image.js

@@ -29,7 +29,7 @@ const map = new Map({
 map.on('singleclick', function(evt) {
   document.getElementById('info').innerHTML = '';
   const viewResolution = /** @type {number} */ (view.getResolution());
-  const url = wmsSource.getGetFeatureInfoUrl(
+  const url = wmsSource.getFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
   if (url) {

examples/getfeatureinfo-tile.js

@@ -29,7 +29,7 @@ const map = new Map({
 map.on('singleclick', function(evt) {
   document.getElementById('info').innerHTML = '';
   const viewResolution = /** @type {number} */ (view.getResolution());
-  const url = wmsSource.getGetFeatureInfoUrl(
+  const url = wmsSource.getFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
   if (url) {

examples/icon-sprite-webgl.html

@@ -13,6 +13,7 @@ docs: >
 
   The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
 tags: "webgl, icon, sprite, point, ufo"
+experimental: true
 cloak:
   - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
     value: Your Mapbox access token from https://mapbox.com/ here

examples/icon-sprite-webgl.js

@@ -8,7 +8,7 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {lerp} from '../src/ol/math.js';
+import {formatColor, formatNumber} from '../src/ol/webgl/ShaderBuilder.js';
 
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
@@ -17,51 +17,157 @@ const vectorSource = new Vector({
   attributions: 'National UFO Reporting Center'
 });
 
-const texture = document.createElement('img');
+const texture = new Image();
 texture.src = 'data/ufo_shapes.png';
 
 // This describes the content of the associated sprite sheet
-// coords are u0, v0, u1, v1 for a given shape
+// coords are u0, v0 for a given shape (all icons have a size of 0.25 x 0.5)
 const shapeTextureCoords = {
-  'light': [0, 0.5, 0.25, 0],
-  'sphere': [0.25, 0.5, 0.5, 0],
-  'circle': [0.25, 0.5, 0.5, 0],
-  'disc': [0.5, 0.5, 0.75, 0],
-  'oval': [0.5, 0.5, 0.75, 0],
-  'triangle': [0.75, 0.5, 1, 0],
-  'fireball': [0, 1, 0.25, 0.5],
-  'default': [0.75, 1, 1, 0.5]
+  'light': [0, 0],
+  'sphere': [0.25, 0],
+  'circle': [0.25, 0],
+  'disc': [0.5, 0],
+  'oval': [0.5, 0],
+  'triangle': [0.75, 0],
+  'fireball': [0, 0.5],
+  'default': [0.75, 0.5]
 };
 
 const oldColor = [255, 160, 110];
 const newColor = [180, 255, 200];
+const size = 16;
 
 class WebglPointsLayer extends VectorLayer {
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
-      texture: texture,
-      colorCallback: function(feature, color) {
-        // color is interpolated based on year (min is 1910, max is 2013)
-        // please note: most values are between 2000-2013
-        const ratio = (feature.get('year') - 1950) / (2013 - 1950);
-
-        color[0] = lerp(oldColor[0], newColor[0], ratio * ratio) / 255;
-        color[1] = lerp(oldColor[1], newColor[1], ratio * ratio) / 255;
-        color[2] = lerp(oldColor[2], newColor[2], ratio * ratio) / 255;
-        color[3] = 1;
-
-        return color;
+      attributes: [
+        {
+          name: 'year',
+          callback: function(feature) {
+            return feature.get('year');
+          }
         },
-      texCoordCallback: function(feature, component) {
+        {
+          name: 'texCoordU',
+          callback: function(feature) {
             let coords = shapeTextureCoords[feature.get('shape')];
             if (!coords) {
               coords = shapeTextureCoords['default'];
             }
-        return coords[component];
-      },
-      sizeCallback: function() {
-        return 16;
+            return coords[0];
           }
+        },
+        {
+          name: 'texCoordV',
+          callback: function(feature) {
+            let coords = shapeTextureCoords[feature.get('shape')];
+            if (!coords) {
+              coords = shapeTextureCoords['default'];
+            }
+            return coords[1];
+          }
+        }
+      ],
+      uniforms: {
+        u_texture: texture
+      },
+      vertexShader: [
+        'precision mediump float;',
+
+        'uniform mat4 u_projectionMatrix;',
+        'uniform mat4 u_offsetScaleMatrix;',
+        'uniform mat4 u_offsetRotateMatrix;',
+        'attribute vec2 a_position;',
+        'attribute float a_index;',
+        'attribute float a_year;',
+        'attribute float a_texCoordU;',
+        'attribute float a_texCoordV;',
+        'varying vec2 v_texCoord;',
+        'varying float v_year;',
+
+        'void main(void) {',
+        '  mat4 offsetMatrix = u_offsetScaleMatrix;',
+        '  float offsetX = a_index == 0.0 || a_index == 3.0 ? ',
+        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
+        '  float offsetY = a_index == 0.0 || a_index == 1.0 ? ',
+        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
+        '  vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);',
+        '  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;',
+        '  float u = a_index == 0.0 || a_index == 3.0 ? a_texCoordU : a_texCoordU + 0.25;',
+        '  float v = a_index == 2.0 || a_index == 3.0 ? a_texCoordV : a_texCoordV + 0.5;',
+        '  v_texCoord = vec2(u, v);',
+        '  v_year = a_year;',
+        '}'
+      ].join(' '),
+      fragmentShader: [
+        'precision mediump float;',
+
+        'uniform float u_time;',
+        'uniform float u_minYear;',
+        'uniform float u_maxYear;',
+        'uniform sampler2D u_texture;',
+        'varying vec2 v_texCoord;',
+        'varying float v_year;',
+
+        'void main(void) {',
+        '  vec4 textureColor = texture2D(u_texture, v_texCoord);',
+        '  if (textureColor.a < 0.1) {',
+        '    discard;',
+        '  }',
+
+        // color is interpolated based on year
+        '  float ratio = clamp((v_year - 1950.0) / (2013.0 - 1950.0), 0.0, 1.1);',
+        '  vec3 color = mix(vec3(' + formatColor(oldColor) + '),',
+        '    vec3(' + formatColor(newColor) + '), ratio);',
+
+        '  gl_FragColor = vec4(color, 1.0) * textureColor;',
+        '  gl_FragColor.rgb *= gl_FragColor.a;',
+        '}'
+      ].join(' '),
+      hitVertexShader: [
+        'precision mediump float;',
+
+        'uniform mat4 u_projectionMatrix;',
+        'uniform mat4 u_offsetScaleMatrix;',
+        'uniform mat4 u_offsetRotateMatrix;',
+        'attribute vec2 a_position;',
+        'attribute float a_index;',
+        'attribute vec4 a_hitColor;',
+        'attribute float a_texCoordU;',
+        'attribute float a_texCoordV;',
+        'varying vec2 v_texCoord;',
+        'varying vec4 v_hitColor;',
+
+        'void main(void) {',
+        '  mat4 offsetMatrix = u_offsetScaleMatrix;',
+        '  float offsetX = a_index == 0.0 || a_index == 3.0 ? ',
+        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
+        '  float offsetY = a_index == 0.0 || a_index == 1.0 ? ',
+        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
+        '  vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);',
+        '  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;',
+        '  float u = a_index == 0.0 || a_index == 3.0 ? a_texCoordU : a_texCoordU + 0.25;',
+        '  float v = a_index == 2.0 || a_index == 3.0 ? a_texCoordV : a_texCoordV + 0.5;',
+        '  v_texCoord = vec2(u, v);',
+        '  v_hitColor = a_hitColor;',
+        '}'
+      ].join(' '),
+      hitFragmentShader: [
+        'precision mediump float;',
+
+        'uniform sampler2D u_texture;',
+        'varying vec2 v_texCoord;',
+        'varying vec4 v_hitColor;',
+
+        'void main(void) {',
+        '  vec4 textureColor = texture2D(u_texture, v_texCoord);',
+        '  if (textureColor.a < 0.1) {',
+        '    discard;',
+        '  }',
+
+        '  gl_FragColor = v_hitColor;',
+        '}'
+      ].join(' ')
     });
   }
 }
@@ -107,7 +213,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key,
         crossOrigin: 'anonymous'
       })
     }),
@@ -136,3 +242,7 @@ map.on('pointermove', function(evt) {
     info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
   });
 });
+
+texture.addEventListener('load', function() {
+  map.render();
+});

examples/layer-extent.html

@@ -7,6 +7,9 @@ docs: >
   modify the extent of the overlay layer.  Use the controls above
   to limit rendering based on an extent (approximate country bounds).
 tags: "extent, tilejson"
+cloak:
+- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <button type="button" class="btn btn-default" id="India">India</button>

examples/layer-extent.js

@@ -15,9 +15,11 @@ const extents = {
   Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625])
 };
 
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+
 const base = new TileLayer({
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v3/mapbox.world-light.json?secure',
+    url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key,
     crossOrigin: 'anonymous'
   })
 });
@@ -25,7 +27,7 @@ const base = new TileLayer({
 const overlay = new TileLayer({
   extent: extents.India,
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v3/mapbox.world-black.json?secure',
+    url: 'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' + key,
     crossOrigin: 'anonymous'
   })
 });

examples/layer-group.html

@@ -7,6 +7,9 @@ docs: >
 tags: "tilejson, input, bind, group, layergroup"
 resources:
   - https://code.jquery.com/jquery-2.2.3.min.js
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="layertree">

examples/layer-group.js

@@ -5,6 +5,8 @@ import {fromLonLat} from '../src/ol/proj.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -13,13 +15,13 @@ const map = new Map({
       layers: [
         new TileLayer({
           source: new TileJSON({
-            url: 'https://api.tiles.mapbox.com/v3/mapbox.20110804-hoa-foodinsecurity-3month.json?secure',
+            url: 'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' + key,
             crossOrigin: 'anonymous'
           })
         }),
         new TileLayer({
           source: new TileJSON({
-            url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
+            url: 'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' + key,
             crossOrigin: 'anonymous'
           })
         })

examples/mapbox-layer.html

@@ -5,6 +5,7 @@ shortdesc: Example of a Mapbox-gl-js layer integration.
 docs: >
   Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
 tags: "simple, mapbox, vector, tiles, maptiler"
+experimental: true
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css

examples/min-max-resolution.html

@@ -7,5 +7,8 @@ docs: >
   <p>If you continue to zoom in, you'll see the OSM layer also disappear.</p>
   <p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
 tags: "minResolution, maxResolution, resolution"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/min-max-resolution.js

@@ -4,6 +4,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 /**
  * Create the map.
@@ -17,7 +18,7 @@ const map = new Map({
     }),
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' + key,
         crossOrigin: 'anonymous'
       }),
       minResolution: 2000,

examples/osm-vector-tiles.html

@@ -6,7 +6,7 @@ docs: >
   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`] is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
-  - key: vector-tiles-5eJz6JX
-    value: Your Mapzen API key from https://mapzen.com/developers
+  - key: uZNs91nMR-muUTP99MyBSg
+    value: Your Nextzen API key from https://developers.nextzen.org/
 ---
 <div id="map" class="map"></div>

examples/osm-vector-tiles.js

@@ -6,7 +6,7 @@ import {fromLonLat} from '../src/ol/proj.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 
-const key = 'vector-tiles-5eJz6JX';
+const key = 'uZNs91nMR-muUTP99MyBSg';
 
 const roadStyleCache = {};
 const roadColor = {
@@ -67,7 +67,7 @@ const map = new Map({
           layers: ['water', 'roads', 'buildings']
         }),
         maxZoom: 19,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
+        url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
       }),
       style: function(feature, resolution) {
         switch (feature.get('layer')) {

examples/overviewmap-custom.css

@@ -1,32 +1,36 @@
-.ol-custom-overviewmap,
-.ol-custom-overviewmap.ol-uncollapsible {
+.mapcontainer {
+  position: relative;
+}
+
+div.ol-custom-overviewmap,
+div.ol-custom-overviewmap.ol-uncollapsible {
   bottom: auto;
   left: auto;
   right: 0;
   top: 0;
 }
 
-.ol-custom-overviewmap:not(.ol-collapsed)  {
+div.ol-custom-overviewmap:not(.ol-collapsed)  {
   border: 1px solid black;
 }
 
-.ol-custom-overviewmap .ol-overviewmap-map {
+div.ol-custom-overviewmap div.ol-overviewmap-map {
   border: none;
   width: 300px;
 }
 
-.ol-custom-overviewmap .ol-overviewmap-box {
+div.ol-custom-overviewmap div.ol-overviewmap-box {
   border: 2px solid red;
 }
 
-.ol-custom-overviewmap:not(.ol-collapsed) button{
+div.ol-custom-overviewmap:not(.ol-collapsed) button{
   bottom: auto;
   left: auto;
   right: 1px;
   top: 1px;
 }
 
-.ol-rotate {
+div.ol-rotate {
   top: 170px;
   right: 0;
 }

examples/overviewmap-custom.html

@@ -10,4 +10,7 @@ cloak:
     value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
-<div id="map" class="map"></div>
+<div class="mapcontainer">
+  <div id="map" class="map"></div>
+</div>
+<div><input type="checkbox" id="rotateWithView">Rotate with view</div>

examples/overviewmap-custom.js

@@ -6,6 +6,8 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
+const rotateWithView = document.getElementById('rotateWithView');
+
 const overviewMapControl = new OverviewMap({
   // see in overviewmap-custom.html to see the custom CSS used
   className: 'ol-overviewmap ol-custom-overviewmap',
@@ -22,6 +24,10 @@ const overviewMapControl = new OverviewMap({
   collapsed: false
 });
 
+rotateWithView.addEventListener('change', function() {
+  overviewMapControl.setRotateWithView(this.checked);
+});
+
 const map = new Map({
   controls: defaultControls().extend([
     overviewMapControl

examples/readme.md

@@ -8,3 +8,4 @@ The `.html` files in this folder are built by applying the templates in the `tem
 * docs: Documentation of the example. Can be markdown.
 * tags: Tags for the example index
 * resources: Additional js or css resources required by the example. This is a YAML list of URLs.
+* experimental: if true, a warning will appear on the example page mentioning the fact that it uses features not part of the API.

examples/regularshape.html

@@ -3,7 +3,9 @@ layout: example.html
 title: Regular Shapes
 shortdesc: Example of some Regular Shape styles.
 docs: >
-
+  This example shows how several regular shapes
+  or symbols (representing `x`, `cross`, `star`,
+  `triangle` and `square`) can be created.
 tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
 ---
 <div id="map" class="map"></div>

examples/resources/common.js

@@ -20,15 +20,55 @@
     e.clearSelection();
   });
 
+  function fetchResource(resource) {
+    return new Promise((resolve, reject) => {
+      const isImage = /\.(png|jpe?g|gif|tiff)$/.test(resource);
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', resource);
+      if (isImage) {
+        xhr.responseType = 'blob';
+      } else {
+        xhr.responseType = 'text';
+      }
+      xhr.addEventListener('load', () => {
+        if (isImage) {
+          const a = new FileReader();
+          a.addEventListener('load', e => {
+            resolve ({
+              isBinary: true,
+              content: e.target.result
+            })
+          });
+          a.readAsDataURL(xhr.response);
+        } else {
+          resolve ({
+            content: xhr.response
+          })
+        }
+      });
+      xhr.addEventListener('error', reject);
+      xhr.send();
+    })
+  }
+
   var codepenButton = document.getElementsByClassName('codepen-button')[0];
   if (codepenButton) {
     codepenButton.onclick = function(event) {
       event.preventDefault();
-      var form = document.getElementById('codepen-form');
       const html = document.getElementById('example-html-source').innerText;
       const js = document.getElementById('example-js-source').innerText;
       const pkgJson = document.getElementById('example-pkg-source').innerText;
-      form.parameters.value = compress({
+      const form = document.getElementById('codepen-form');
+
+      const localResources = (js.match(/'data\/[^']*/g) || [])
+        .concat(js.match(/'resources\/[^']*/g) || [])
+        .map(f => f.slice(1));
+
+      const promises = localResources.map(resource => fetchResource(resource));
+
+      Promise.all(promises)
+        .then(results => {
+          const data = {
             files: {
               'index.html': {
                 content: html
@@ -43,8 +83,15 @@
                 content: '{"template": "parcel"}'
               }
             }
-      });
+          };
+
+          for (let i = 0; i < localResources.length; i++) {
+            data.files[localResources[i]] = results[i];
+          }
+
+          form.parameters.value = compress(data);
           form.submit();
+        });
     };
   }
 })();

examples/reusable-source.html

@@ -4,6 +4,9 @@ title: Reusable Source
 shortdesc: Updating a tile source by changing the URL.
 docs: >
   You can call <code>source.setUrl()</code> to update the URL for a tile source.  Note that when you change the URL for a tile source, existing tiles will not be replaced until new tiles are loaded.  If you are interested instead in clearing currently rendered tiles, you can call the <code>source.refresh()</code> method.  Alternatively, you can use two separate sources if you want to remove rendered tiles and start over loading new tiles.
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <button class="switcher" value="0">January</button>

examples/reusable-source.js

@@ -3,11 +3,13 @@ import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import XYZ from '../src/ol/source/XYZ.js';
 
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const baseUrl = 'https://{a-c}.tiles.mapbox.com/v4';
 const urls = [
-  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png',
-  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png',
-  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png',
-  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png'
+  baseUrl + '/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png?access_token=' + key,
+  baseUrl + '/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png?access_token=' + key,
+  baseUrl + '/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png?access_token=' + key,
+  baseUrl + '/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png?access_token=' + key
 ];
 
 const source = new XYZ();

examples/sea-level.js

@@ -37,7 +37,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-light.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key,
         crossOrigin: 'anonymous'
       })
     }),

examples/select-features.html

@@ -1,22 +0,0 @@
----
-layout: example.html
-title: Select Features
-shortdesc: Example of using the Select interaction.
-docs: >
-  Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
-  <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
-  <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
-tags: "select, vector"
----
-<div id="map" class="map"></div>
-<form class="form-inline">
-  <label>Action type &nbsp;</label>
-    <select id="type" class="form-control">
-      <option value="click" selected>Click</option>
-      <option value="singleclick">Single-click</option>
-      <option value="pointermove">Hover</option>
-      <option value="altclick">Alt+Click</option>
-      <option value="none">None</option>
-    </select>
-  <span id="status">&nbsp;0 selected features</span>
-</form>

examples/select-hover-features.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Select Features by Hover
+shortdesc: Example of selecting features by hovering.
+docs: >
+  In this example, a listener is registered on the map's <code>pointermove</code> to highlight the currently hovered feature.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<span id="status"></span>

examples/select-hover-features.js

@@ -0,0 +1,61 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+const vector = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  })
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+let selected = null;
+const status = document.getElementById('status');
+
+map.on('pointermove', function(e) {
+  if (selected !== null) {
+    selected.setStyle(undefined);
+    selected = null;
+  }
+
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    selected = f;
+    f.setStyle(highlightStyle);
+    return true;
+  });
+
+  if (selected) {
+    status.innerHTML = ' Hovering: ' + selected.get('name');
+  } else {
+    status.innerHTML = ' ';
+  }
+});

examples/select-multiple-features.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Select multiple Features
+shortdesc: Example of selecting multiple features.
+docs: >
+  In this example, a listener is registered on the map's <code>singleclick</code> event to add and remove features from an array.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<span id="status">&nbsp;0 selected features</span>

examples/select-multiple-features.js

@@ -0,0 +1,59 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Style from '../src/ol/style/Style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+const highlightStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255,255,255,0.7)'
+  }),
+  stroke: new Stroke({
+    color: '#3399CC',
+    width: 3
+  })
+});
+
+const vector = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  })
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    multiWorld: true
+  })
+});
+
+const selected = [];
+
+const status = document.getElementById('status');
+
+map.on('singleclick', function(e) {
+  map.forEachFeatureAtPixel(e.pixel, function(f) {
+    const selIndex = selected.indexOf(f);
+    if (selIndex < 0) {
+      selected.push(f);
+      f.setStyle(highlightStyle);
+    } else {
+      selected.splice(selIndex, 1);
+      f.setStyle(undefined);
+    }
+  });
+
+  status.innerHTML = '&nbsp;' + selected.length + ' selected features';
+});

examples/semi-transparent-layer.html

@@ -3,7 +3,10 @@ layout: example.html
 title: Semi-Transparent Layer
 shortdesc: Example of a map with a semi-transparent layer.
 docs: >
-  This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to back and white by using a CSS filter.
-tags: "transparent, osm, tilejson"
+  This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to black and white by using a CSS filter.
+tags: "transparent, osm, tilejson, css"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/semi-transparent-layer.js

@@ -5,6 +5,7 @@ import {fromLonLat} from '../src/ol/proj.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const map = new Map({
   layers: [
@@ -14,7 +15,7 @@ const map = new Map({
     }),
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.va-quake-aug.json?secure&access_token=' + key,
         crossOrigin: 'anonymous',
         // this layer has transparency, so do not fade tiles:
         transition: 0

examples/side-by-side.css

@@ -1,4 +1,7 @@
 @media (min-width: 800px) {
+  .wrapper {
+    display: flex;
+  }
   .half {
     padding: 0 10px;
     width: 50%;

examples/side-by-side.html

@@ -9,11 +9,13 @@ cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
     value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
-<div class="half">
+<div class="wrapper">
+  <div class="half">
     <h4>Road</h4>
     <div id="roadMap" class="map"></div>
-</div>
-<div class="half">
+  </div>
+  <div class="half">
     <h4>Aerial</h4>
     <div id="aerialMap" class="map"></div>
+  </div>
 </div>

examples/templates/example.html

@@ -99,6 +99,12 @@
         This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
       </div>
 
+      <div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+        <button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        This example uses features that are not part of the stable API and subject to change between releases.  Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a>
+        to see what is supported in the latest release.
+      </div>
+
       <div class="row-fluid">
         <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
         <div class="span12">
@@ -183,6 +189,15 @@
         document.cookie = cookieText;
       }
     }
+
+    var experimentalNotice = document.getElementById('experimental-notice');
+    if (window.experimental) {
+      experimentalNotice.style.display = 'block';
+      document.getElementById('experimental-dismiss').onclick = function() {
+        experimentalNotice.style.display = 'none';
+      }
+    }
+
   });
   </script>
 </html>

examples/tile-load-events.html

@@ -9,6 +9,9 @@ docs: >
   progress.  This example registers listeners for these events and
   renders a tile loading progress bar at the bottom of the map.</p>
 tags: "tile, events, loading"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div class="wrapper">
   <div id="map" class="map"></div>

examples/tile-load-events.js

@@ -77,8 +77,9 @@ Progress.prototype.hide = function() {
 
 const progress = new Progress(document.getElementById('progress'));
 
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 const source = new TileJSON({
-  url: 'https://api.tiles.mapbox.com/v3/mapbox.world-bright.json?secure',
+  url: 'https://api.tiles.mapbox.com/v4/mapbox.world-bright.json?secure&access_token=' + key,
   crossOrigin: 'anonymous'
 });
 

examples/tile-transitions.html

@@ -7,6 +7,9 @@ docs: >
   250 ms.  To disable this behavior, set the <code>transition</code> option
   of the tile source to 0.
 tags: "fade, transition"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <label>

examples/tile-transitions.js

@@ -3,7 +3,8 @@ import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import XYZ from '../src/ol/source/XYZ.js';
 
-const url = 'https://{a-c}.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png';
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+const url = 'https://{a-c}.tiles.mapbox.com/v4/mapbox.world-bright/{z}/{x}/{y}.png?access_token=' + key;
 
 const withTransition = new TileLayer({
   source: new XYZ({url: url})

examples/topojson.html

@@ -5,5 +5,8 @@ shortdesc: Demonstrates rendering of features from a TopoJSON topology.
 docs: >
   This example uses a vector layer with `ol/format/TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
 tags: "topojson, vector, style"
+cloak:
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/topojson.js

@@ -6,10 +6,10 @@ import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 
-
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 const raster = new TileLayer({
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure'
+    url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key
   })
 });
 

examples/vector-label-decluttering.html

@@ -5,7 +5,7 @@ shortdesc: Label decluttering with a custom renderer.
 resources:
   - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
 docs: >
-  Decluttering is used to avoid overlapping labels with `overflow: true` set on the text style. For MultiPolygon geometries, only the widest polygon is selected in a custom `geometry` function.
+  Decluttering is used to avoid overlapping labels. The `overflow: true` setting on the text style makes it so labels that do not fit within the bounds of a polygon are also included.
 tags: "vector, decluttering, labels"
 ---
 <div id="map" class="map"></div>

examples/vector-label-decluttering.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {getWidth} from '../src/ol/extent.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
@@ -15,23 +14,6 @@ const map = new Map({
 });
 
 const labelStyle = new Style({
-  geometry: function(feature) {
-    let geometry = feature.getGeometry();
-    if (geometry.getType() == 'MultiPolygon') {
-      // Only render label for the widest polygon of a multipolygon
-      const polygons = geometry.getPolygons();
-      let widest = 0;
-      for (let i = 0, ii = polygons.length; i < ii; ++i) {
-        const polygon = polygons[i];
-        const width = getWidth(polygon.getExtent());
-        if (width > widest) {
-          widest = width;
-          geometry = polygon;
-        }
-      }
-    }
-    return geometry;
-  },
   text: new Text({
     font: '12px Calibri,sans-serif',
     overflow: true,

examples/vector-tile-selection.js

@@ -53,6 +53,10 @@ map.on('click', function(event) {
     return;
   }
   const feature = features[0];
+  if (!feature) {
+    return;
+  }
+
   const fid = feature.get(idProp);
 
   if (selectElement.value === 'singleselect') {

examples/webgl-points-layer.html

@@ -0,0 +1,38 @@
+---
+layout: example.html
+title: WebGL points layer
+shortdesc: Using a WebGL-optimized layer to render a large quantities of points
+docs: >
+  <p>This example shows how to use a <code>WebGLPointsLayer</code> to show a large amount of points on the map.</p>
+  <p>The layer is given a style in JSON format which allows a certain level of customization of the final reprensentation.</p>
+  <p>
+    The following operators can be used for numerical values:
+    <ul>
+      <li><code>["get", "attributeName"]</code> fetches a numeric attribute value for each feature</li>
+      <li><code>["+", value, value]</code> adds two values (which an either be numeric, or the result of another operator)</li>
+      <li><code>["*", value, value]</code> multiplies two values</li>
+      <li><code>["clamp", value, min, max]</code> outputs a value between <code>min</code> and <code>max</code></li>
+      <li><code>["stretch", value, low1, high1, low2, high2]</code> outputs a value which has been mapped from the
+        <code>low1..high1</code> range to the <code>low2..high2</code> range</li>
+    </ul>
+  </p>
+
+tags: "webgl, point, layer, feature"
+experimental: true
+---
+
+<div id="map" class="map"></div>
+<label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
+<select id="style-select">
+  <option>Predefined styles</option>
+  <option value="icons">Icons</option>
+  <option value="triangles">Triangles, color related to population</option>
+  <option value="circles">Circles, size related to population</option>
+</select>
+<textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
+<small id="style-valid" style="display: none; color: forestgreen">
+  ✓ style is valid
+</small>
+<small id="style-invalid" style="display: none; color: grey">
+  ✗ style not yet valid...
+</small>

examples/webgl-points-layer.js

@@ -0,0 +1,106 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Vector from '../src/ol/source/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+
+const vectorSource = new Vector({
+  url: 'data/geojson/world-cities.geojson',
+  format: new GeoJSON()
+});
+
+const predefinedStyles = {
+  'icons': {
+    symbol: {
+      symbolType: 'image',
+      src: 'data/icon.png',
+      size: [18, 28],
+      color: 'lightyellow',
+      rotateWithView: false,
+      offset: [0, 9]
+    }
+  },
+  'triangles': {
+    symbol: {
+      symbolType: 'triangle',
+      size: 18,
+      color: [
+        ['stretch', ['get', 'population'], 20000, 300000, 0.1, 1.0],
+        ['stretch', ['get', 'population'], 20000, 300000, 0.6, 0.3],
+        0.6,
+        1.0
+      ],
+      rotateWithView: true
+    }
+  },
+  'circles': {
+    symbol: {
+      symbolType: 'circle',
+      size: ['stretch', ['get', 'population'], 40000, 2000000, 8, 28],
+      color: '#006688',
+      rotateWithView: false,
+      offset: [0, 0],
+      opacity: ['stretch', ['get', 'population'], 40000, 2000000, 0.6, 0.92]
+    }
+  }
+};
+let literalStyle = predefinedStyles['circles'];
+let pointsLayer;
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+const editor = document.getElementById('style-editor');
+editor.value = JSON.stringify(literalStyle, null, 2);
+
+function refreshLayer() {
+  if (pointsLayer) {
+    map.removeLayer(pointsLayer);
+  }
+  pointsLayer = new WebGLPointsLayer({
+    source: vectorSource,
+    style: literalStyle
+  });
+  map.addLayer(pointsLayer);
+}
+
+function setStyleStatus(valid) {
+  document.getElementById('style-valid').style.display = valid ? 'initial' : 'none';
+  document.getElementById('style-invalid').style.display = !valid ? 'initial' : 'none';
+}
+
+editor.addEventListener('input', function() {
+  const textStyle = editor.value;
+  if (JSON.stringify(JSON.parse(textStyle)) === JSON.stringify(literalStyle)) {
+    return;
+  }
+
+  try {
+    literalStyle = JSON.parse(textStyle);
+    refreshLayer();
+    setStyleStatus(true);
+  } catch (e) {
+    setStyleStatus(false);
+  }
+});
+refreshLayer();
+
+const select = document.getElementById('style-select');
+select.addEventListener('change', function() {
+  const style = select.value;
+  literalStyle = predefinedStyles[style];
+  editor.value = JSON.stringify(literalStyle, null, 2);
+  refreshLayer();
+});

examples/webpack/example-builder.js

@@ -200,6 +200,12 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
     tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`,
     source: jsSource
   };
+
+  if (data.experimental) {
+    const prelude = '<script>window.experimental = true;</script>';
+    data.js.tag = prelude + data.js.tag;
+  }
+
   data.pkgJson = JSON.stringify({
     name: name,
     dependencies: getDependencies(jsSource),

examples/wms-getlegendgraphic.html

@@ -4,11 +4,11 @@ title: WMS GetLegendGraphic
 shortdesc: Example of a WMS GetLegendGraphic.
 docs: >
   WMS supports the [getLegendGraphic request](https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html).
-  This example demonstrates the use of the `getGetLegendGraphicUrl` method.
+  This example demonstrates the use of the `getLegendUrl` method.
 
 
   As a legend can be responsive to the scale it is updated on every change of the resolution.
-tags: "GetLegendGraphic, getGetLegendGraphicURL, WMS"
+tags: "GetLegendGraphic, getLegendUrl, WMS"
 ---
 <div id="map" class="map"></div>
 Legend:

examples/wms-getlegendgraphic.js

@@ -12,7 +12,7 @@ const wmsSource = new ImageWMS({
 });
 
 const updateLegend = function(resolution) {
-  const graphicUrl = wmsSource.getGetLegendGraphicUrl(resolution);
+  const graphicUrl = wmsSource.getLegendUrl(resolution);
   const img = document.getElementById('legend');
   img.src = graphicUrl;
 };

examples/worker.html

@@ -3,8 +3,9 @@ layout: example.html
 title: Worker
 shortdesc: This example should be deleted.
 docs: >
-  When you move the map, a message is sent to a worker.  In response, the woker sends a
+  When you move the map, a message is sent to a worker.  In response, the worker sends a
   message back with the version identifier.
 tags: "worker"
+experimental: true
 ---
 <div id="map" class="map"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.12",
+  "version": "6.0.0",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -11,7 +11,7 @@
   "homepage": "https://openlayers.org/",
   "scripts": {
     "lint": "eslint tasks test rendering src/ol examples config",
-    "pretest": "npm run lint",
+    "pretest": "npm run lint && npm run typecheck",
     "test-rendering": "node rendering/test.js",
     "test": "npm run karma -- --single-run --log-level error && npm run test-rendering -- --force",
     "karma": "karma start test/karma.config.js",
@@ -36,6 +36,7 @@
     "url": "https://github.com/openlayers/openlayers/issues"
   },
   "dependencies": {
+    "@openlayers/pepjs": "^0.5.3",
     "pbf": "3.2.0",
     "pixelworks": "1.1.0",
     "rbush": "^3.0.0"
@@ -43,7 +44,7 @@
   "devDependencies": {
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.4.4",
-    "@openlayers/eslint-plugin": "^4.0.0-beta.2",
+    "@openlayers/eslint-plugin": "^4.0.0",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.1",
@@ -54,7 +55,7 @@
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.3.0",
     "copy-webpack-plugin": "^5.0.3",
-    "coveralls": "3.0.5",
+    "coveralls": "3.0.6",
     "eslint": "^6.0.0",
     "eslint-config-openlayers": "^12.0.0",
     "expect.js": "0.3.1",
@@ -62,16 +63,16 @@
     "fs-extra": "^8.0.0",
     "glob": "^7.1.4",
     "globby": "^10.0.0",
-    "handlebars": "4.1.2",
+    "handlebars": "4.3.1",
     "html-to-image": "^0.1.0",
     "istanbul": "0.4.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
     "jsdoc": "3.6.3",
-    "jsdoc-plugin-typescript": "^2.0.1",
+    "jsdoc-plugin-typescript": "^2.0.2",
     "karma": "^4.1.0",
-    "karma-chrome-launcher": "3.0.0",
-    "karma-coverage": "^1.1.2",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "^2.0.1",
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "1.3.0",
@@ -84,7 +85,7 @@
     "pixelmatch": "^5.0.0",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.19.0",
+    "puppeteer": "~1.20.0",
     "rollup": "^1.12.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
@@ -93,15 +94,15 @@
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^7.3.2",
-    "terser-webpack-plugin": "^1.2.3",
-    "typescript": "^3.4.5",
+    "terser-webpack-plugin": "^2.0.1",
+    "typescript": "3.5.3",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.39.0",
+    "webpack": "4.41.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1",
-    "yargs": "^13.2.2"
+    "yargs": "^14.0.0"
   },
   "eslintConfig": {
     "extends": "openlayers",
@@ -115,6 +116,12 @@
         {
           "requireReturn": false
         }
+      ],
+      "@openlayers/no-exclusive-tests": [
+        "error",
+        {
+          "include": "test/**/*.test.js"
+        }
       ]
     }
   },

rendering/cases/geometry-geographic/main.js

@@ -0,0 +1,43 @@
+import {Map, View, Feature} from '../../../src/ol/index.js';
+import {Point} from '../../../src/ol/geom.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../../../src/ol/layer.js';
+import {useGeographic} from '../../../src/ol/proj.js';
+import {XYZ, Vector as VectorSource} from '../../../src/ol/source.js';
+import {Style, Circle, Fill} from '../../../src/ol/style.js';
+
+useGeographic();
+
+const center = [8.6, 50.1];
+
+const point = new Point(center);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0
+      })
+    }),
+    new VectorLayer({
+      source: new VectorSource({
+        features: [
+          new Feature(point)
+        ]
+      }),
+      style: new Style({
+        image: new Circle({
+          radius: 5,
+          fill: new Fill({color: 'red'})
+        })
+      })
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();

rendering/cases/layer-image-extent-rotation-geographic/main.js

@@ -0,0 +1,34 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import {
+  get as getProjection,
+  transformExtent,
+  useGeographic
+} from '../../../src/ol/proj.js';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+
+useGeographic();
+
+const center = [-122.416667, 37.783333];
+const extent = [-123.1, 37.1, -122.1, 37.9];
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [new ImageLayer({
+    source: new Static({
+      url: '/data/tiles/osm/5/5/12.png',
+      imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+      projection: getProjection('EPSG:3857')
+    }),
+    extent
+  })],
+  view: new View({
+    center,
+    zoom: 8,
+    rotation: Math.PI / 4
+  })
+});
+
+render();

rendering/cases/layer-image-extent-rotation/main.js

@@ -0,0 +1,31 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import {
+  get as getProjection,
+  transform,
+  transformExtent
+} from '../../../src/ol/proj.js';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
+const extent = transformExtent([-123.1, 37.1, -122.1, 37.9], 'EPSG:4326', 'EPSG:3857');
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [new ImageLayer({
+    source: new Static({
+      url: '/data/tiles/osm/5/5/12.png',
+      imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+      projection: getProjection('EPSG:3857')
+    }),
+    extent
+  })],
+  view: new View({
+    center,
+    zoom: 8,
+    rotation: Math.PI / 4
+  })
+});
+
+render();

rendering/cases/layer-tile-extent-geographic/main.js

@@ -0,0 +1,41 @@
+/**
+ * Tile layers get clipped to their extent.
+ */
+
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import {useGeographic} from '../../../src/ol/proj.js';
+
+useGeographic();
+
+const center = [7, 50];
+const extent = [2, 47, 10, 53];
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  }),
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3
+      }),
+      extent: extent
+    }),
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
+        minZoom: 3,
+        maxZoom: 5
+      }),
+      extent: extent
+    })
+  ]
+});
+
+render();

rendering/cases/layer-tile-render-listener/main.js

@@ -0,0 +1,46 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {transform, fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Point from '../../../src/ol/geom/Point.js';
+import {getVectorContext} from '../../../src/ol/render.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  })
+});
+
+const onRender = function(event) {
+  const context = event.context;
+  context.restore();
+  const vectorContext = getVectorContext(event);
+  vectorContext.setImageStyle(new CircleStyle({
+    radius: 12,
+    fill: new Fill({color: 'yellow'}),
+    stroke: new Stroke({color: 'red', width: 1})
+  }));
+  vectorContext.drawPoint(new Point(
+    transform([13, 37], 'EPSG:4326', 'EPSG:3857')));
+};
+layer.on('postrender', onRender);
+
+const map = new Map({
+  layers: [
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+map.addLayer(layer);
+
+render();

rendering/cases/layer-vector-extent-geographic/main.js

@@ -0,0 +1,27 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import GeoJSON from '../../../src/ol/format/GeoJSON.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import {useGeographic} from '../../../src/ol/proj.js';
+
+useGeographic();
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1
+  }),
+  layers: [
+    new VectorLayer({
+      extent: [-50, -45, 50, 45],
+      source: new VectorSource({
+        url: '/data/countries.json',
+        format: new GeoJSON()
+      })
+    })
+  ]
+});
+
+render();

rendering/cases/layer-vector-multigeometry-decluttering/main.js

@@ -0,0 +1,55 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import GeoJSON from '../../../src/ol/format/GeoJSON.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import {Fill, Stroke, Style, Text} from '../../../src/ol/style.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [-17465028, 2331736],
+    zoom: 5
+  })
+});
+
+const labelStyle = new Style({
+  text: new Text({
+    font: '16px Ubuntu',
+    overflow: true,
+    fill: new Fill({
+      color: '#000'
+    }),
+    stroke: new Stroke({
+      color: '#fff',
+      width: 3
+    })
+  })
+});
+const countryStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)'
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1
+  })
+});
+const style = [countryStyle, labelStyle];
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    url: '/data/countries.json',
+    format: new GeoJSON()
+  }),
+  style: function(feature) {
+    labelStyle.getText().setText(feature.get('name'));
+    return style;
+  },
+  declutter: true
+});
+
+map.addLayer(vectorLayer);
+
+
+render({tolerance: 0.007});

rendering/cases/webgl-points/main.js

@@ -2,28 +2,24 @@ import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
 import XYZ from '../../../src/ol/source/XYZ.js';
-import {Vector as VectorLayer} from '../../../src/ol/layer.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
 import KML from '../../../src/ol/format/KML.js';
-import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer.js';
+import WebGLPointsLayer from '../../../src/ol/layer/WebGLPoints.js';
 
-class CustomLayer extends VectorLayer {
-  createRenderer() {
-    return new WebGLPointsLayerRenderer(this, {
-      sizeCallback: function() {
-        return 4;
-      }
-    });
-  }
-}
-
-const vector = new CustomLayer({
+const vector = new WebGLPointsLayer({
   source: new VectorSource({
     url: '/data/2012_Earthquakes_Mag5.kml',
     format: new KML({
       extractStyles: false
     })
-  })
+  }),
+  style: {
+    symbol: {
+      symbolType: 'square',
+      size: 4,
+      color: 'white'
+    }
+  }
 });
 
 const raster = new TileLayer({

rendering/readme.md

@@ -0,0 +1,34 @@
+# Rendering Tests
+
+The rendering tests use [Puppeteer](https://github.com/GoogleChrome/puppeteer) to take a screenshot of a map and compare it to an expected screenshot.  Each directory in the `cases` directory includes a single test case with the following files:
+
+ * `main.js` - the script that sets up the map and calls the magic `render()` function
+ * `expected.png` - the expected screenshot (this can be generated with the `--fix` flag)
+ * `actual.png` - the screenshot generated when running the tests (ignored by git)
+ * `pass` - a generated marker file that represents the last time the test passed (ignored by git)
+
+## Running the tests
+
+To run all the rendering tests:
+
+```bash
+node rendering/test.js
+```
+
+To run a single rendering test case:
+
+```bash
+node rendering/test.js --match your-test-case-name
+```
+
+## Creating a new test
+
+To create a new test case, add a directory under `cases` and add a `main.js` to it (copied from one of the other cases).  Then to generate the `expected.png` screenshot, run the test script with the `--fix` flag:
+
+```bash
+node rendering/test.js --match your-test-case-name --fix
+```
+
+Note that your `main.js` needs to call the magic `render()` function after setting up the map.  This triggers a snapshot.  The `render()` function can be called with an options object that includes a `tolerance` property.  The tolerance is related to the ratio of mismatched pixels to the total number of pixels in the actual screenshot.
+
+After creating a new test case, commit your `main.js` and `expected.png` files.

rendering/test.js

@@ -184,7 +184,7 @@ async function copyActualToExpected(entry) {
 async function renderEach(page, entries, options) {
   let fail = false;
   for (const entry of entries) {
-    const {tolerance = 0, message = ''} = await renderPage(page, entry, options);
+    const {tolerance = 0.005, message = ''} = await renderPage(page, entry, options);
 
     if (options.fix) {
       await copyActualToExpected(entry);
@@ -204,7 +204,7 @@ async function renderEach(page, entries, options) {
     }
 
     if (mismatch > tolerance) {
-      options.log.error(`${detail}': mismatch ${mismatch.toFixed(3)}`);
+      options.log.error(`${detail}': mismatch ${mismatch}`);
       fail = true;
     } else {
       options.log.info(`${detail}': ok`);
@@ -251,11 +251,11 @@ async function render(entries, options) {
 }
 
 async function getLatest(patterns) {
-  const stats = await globby(patterns, {stats: true});
+  const infoList = await globby(patterns, {stats: true});
   let latest = 0;
-  for (const stat of stats) {
-    if (stat.mtime > latest) {
-      latest = stat.mtime;
+  for (const info of infoList) {
+    if (info.stats.mtime > latest) {
+      latest = info.stats.mtime;
     }
   }
   return latest;

src/ol/Feature.js

@@ -2,7 +2,7 @@
  * @module ol/Feature
  */
 import {assert} from './asserts.js';
-import {listen, unlisten, unlistenByKey} from './events.js';
+import {listen, unlistenByKey} from './events.js';
 import EventType from './events/EventType.js';
 import BaseObject, {getChangeEventType} from './Object.js';
 
@@ -101,9 +101,7 @@ class Feature extends BaseObject {
      */
     this.geometryChangeKey_ = null;
 
-    listen(
-      this, getChangeEventType(this.geometryName_),
-      this.handleGeometryChanged_, this);
+    this.addEventListener(getChangeEventType(this.geometryName_), this.handleGeometryChanged_);
 
     if (opt_geometryOrProperties) {
       if (typeof /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry === 'function') {
@@ -263,13 +261,9 @@ class Feature extends BaseObject {
    * @api
    */
   setGeometryName(name) {
-    unlisten(
-      this, getChangeEventType(this.geometryName_),
-      this.handleGeometryChanged_, this);
+    this.removeEventListener(getChangeEventType(this.geometryName_), this.handleGeometryChanged_);
     this.geometryName_ = name;
-    listen(
-      this, getChangeEventType(this.geometryName_),
-      this.handleGeometryChanged_, this);
+    this.addEventListener(getChangeEventType(this.geometryName_), this.handleGeometryChanged_);
     this.handleGeometryChanged_();
   }
 }

src/ol/Geolocation.js

@@ -2,8 +2,7 @@
  * @module ol/Geolocation
  */
 import BaseObject, {getChangeEventType} from './Object.js';
-import {listen} from './events.js';
-import Event from './events/Event.js';
+import BaseEvent from './events/Event.js';
 import EventType from './events/EventType.js';
 import {circular as circularPolygon} from './geom/Polygon.js';
 import {toRadians} from './math.js';
@@ -31,7 +30,7 @@ const Property = {
  * @classdesc
  * Events emitted on Geolocation error.
  */
-class GeolocationError extends Event {
+class GeolocationError extends BaseEvent {
   /**
    * @param {PositionError} error error object.
    */
@@ -115,12 +114,8 @@ class Geolocation extends BaseObject {
      */
     this.watchId_ = undefined;
 
-    listen(
-      this, getChangeEventType(Property.PROJECTION),
-      this.handleProjectionChanged_, this);
-    listen(
-      this, getChangeEventType(Property.TRACKING),
-      this.handleTrackingChanged_, this);
+    this.addEventListener(getChangeEventType(Property.PROJECTION), this.handleProjectionChanged_);
+    this.addEventListener(getChangeEventType(Property.TRACKING), this.handleTrackingChanged_);
 
     if (options.projection !== undefined) {
       this.setProjection(options.projection);

src/ol/MapBrowserEvent.js

@@ -32,16 +32,14 @@ class MapBrowserEvent extends MapEvent {
     /**
      * The map pixel relative to the viewport corresponding to the original browser event.
      * @type {import("./pixel.js").Pixel}
-     * @api
      */
-    this.pixel = map.getEventPixel(browserEvent);
+    this.pixel_ = null;
 
     /**
-     * The coordinate in view projection corresponding to the original browser event.
+     * The coordinate in the user projection corresponding to the original browser event.
      * @type {import("./coordinate.js").Coordinate}
-     * @api
      */
-    this.coordinate = map.getCoordinateFromPixel(this.pixel);
+    this.coordinate_ = null;
 
     /**
      * Indicates if the map is currently being dragged. Only set for
@@ -54,6 +52,37 @@ class MapBrowserEvent extends MapEvent {
 
   }
 
+  /**
+   * The map pixel relative to the viewport corresponding to the original browser event.
+   * @type {import("./pixel.js").Pixel}
+   * @api
+   */
+  get pixel() {
+    if (!this.pixel_) {
+      this.pixel_ = this.map.getEventPixel(this.originalEvent);
+    }
+    return this.pixel_;
+  }
+  set pixel(pixel) {
+    this.pixel_ = pixel;
+  }
+
+  /**
+   * The coordinate corresponding to the original browser event.  This will be in the user
+   * projection if one is set.  Otherwise it will be in the view projection.
+   * @type {import("./coordinate.js").Coordinate}
+   * @api
+   */
+  get coordinate() {
+    if (!this.coordinate_) {
+      this.coordinate_ = this.map.getCoordinateFromPixel(this.pixel);
+    }
+    return this.coordinate_;
+  }
+  set coordinate(coordinate) {
+    this.coordinate_ = coordinate;
+  }
+
   /**
    * Prevents the default browser action.
    * See https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault.

src/ol/MapBrowserEventHandler.js

@@ -1,13 +1,14 @@
 /**
  * @module ol/MapBrowserEventHandler
  */
+
+import '@openlayers/pepjs';
 import {DEVICE_PIXEL_RATIO} from './has.js';
 import MapBrowserEventType from './MapBrowserEventType.js';
 import MapBrowserPointerEvent from './MapBrowserPointerEvent.js';
 import {listen, unlistenByKey} from './events.js';
 import EventTarget from './events/Target.js';
 import PointerEventType from './pointer/EventType.js';
-import PointerEventHandler from './pointer/PointerEventHandler.js';
 
 class MapBrowserEventHandler extends EventTarget {
 
@@ -17,7 +18,7 @@ class MapBrowserEventHandler extends EventTarget {
    */
   constructor(map, moveTolerance) {
 
-    super();
+    super(map);
 
     /**
      * This is the element that we will listen to the real events on.
@@ -54,12 +55,13 @@ class MapBrowserEventHandler extends EventTarget {
     /**
      * The most recent "down" type event (or null if none have occurred).
      * Set on pointerdown.
-     * @type {import("./pointer/PointerEvent.js").default}
+     * @type {PointerEvent}
      * @private
      */
     this.down_ = null;
 
     const element = this.map_.getViewport();
+    element.setAttribute('touch-action', 'none');
 
     /**
      * @type {number}
@@ -73,29 +75,13 @@ class MapBrowserEventHandler extends EventTarget {
      */
     this.trackedTouches_ = {};
 
-    /**
-     * Event handler which generates pointer events for
-     * the viewport element.
-     *
-     * @type {PointerEventHandler}
-     * @private
-     */
-    this.pointerEventHandler_ = new PointerEventHandler(element);
-
-    /**
-     * Event handler which generates pointer events for
-     * the document (used when dragging).
-     *
-     * @type {PointerEventHandler}
-     * @private
-     */
-    this.documentPointerEventHandler_ = null;
+    this.element_ = element;
 
     /**
      * @type {?import("./events.js").EventsKey}
      * @private
      */
-    this.pointerdownListenerKey_ = listen(this.pointerEventHandler_,
+    this.pointerdownListenerKey_ = listen(element,
       PointerEventType.POINTERDOWN,
       this.handlePointerDown_, this);
 
@@ -103,14 +89,14 @@ class MapBrowserEventHandler extends EventTarget {
      * @type {?import("./events.js").EventsKey}
      * @private
      */
-    this.relayedListenerKey_ = listen(this.pointerEventHandler_,
+    this.relayedListenerKey_ = listen(element,
       PointerEventType.POINTERMOVE,
       this.relayEvent_, this);
 
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -139,7 +125,7 @@ class MapBrowserEventHandler extends EventTarget {
   /**
    * Keeps track on how many pointers are currently active.
    *
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -156,7 +142,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -181,13 +167,11 @@ class MapBrowserEventHandler extends EventTarget {
       this.dragListenerKeys_.length = 0;
       this.dragging_ = false;
       this.down_ = null;
-      this.documentPointerEventHandler_.dispose();
-      this.documentPointerEventHandler_ = null;
     }
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @return {boolean} If the left mouse button was pressed.
    * @private
@@ -197,7 +181,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -210,18 +194,11 @@ class MapBrowserEventHandler extends EventTarget {
     this.down_ = pointerEvent;
 
     if (this.dragListenerKeys_.length === 0) {
-      /* Set up a pointer event handler on the `document`,
-       * which is required when the pointer is moved outside
-       * the viewport when dragging.
-       */
-      this.documentPointerEventHandler_ =
-          new PointerEventHandler(document);
-
       this.dragListenerKeys_.push(
-        listen(this.documentPointerEventHandler_,
+        listen(document,
           MapBrowserEventType.POINTERMOVE,
           this.handlePointerMove_, this),
-        listen(this.documentPointerEventHandler_,
+        listen(document,
           MapBrowserEventType.POINTERUP,
           this.handlePointerUp_, this),
         /* Note that the listener for `pointercancel is set up on
@@ -237,7 +214,7 @@ class MapBrowserEventHandler extends EventTarget {
          * only receive a `touchcancel` from `pointerEventHandler_`, because it is
          * only registered there.
          */
-        listen(this.pointerEventHandler_,
+        listen(this.element_,
           MapBrowserEventType.POINTERCANCEL,
           this.handlePointerUp_, this)
       );
@@ -245,7 +222,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -265,7 +242,7 @@ class MapBrowserEventHandler extends EventTarget {
   /**
    * Wrap and relay a pointer event.  Note that this requires that the type
    * string for the MapBrowserPointerEvent matches the PointerEvent type.
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
@@ -276,7 +253,7 @@ class MapBrowserEventHandler extends EventTarget {
   }
 
   /**
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer
+   * @param {PointerEvent} pointerEvent Pointer
    * event.
    * @return {boolean} Is moving.
    * @private
@@ -303,14 +280,7 @@ class MapBrowserEventHandler extends EventTarget {
     this.dragListenerKeys_.forEach(unlistenByKey);
     this.dragListenerKeys_.length = 0;
 
-    if (this.documentPointerEventHandler_) {
-      this.documentPointerEventHandler_.dispose();
-      this.documentPointerEventHandler_ = null;
-    }
-    if (this.pointerEventHandler_) {
-      this.pointerEventHandler_.dispose();
-      this.pointerEventHandler_ = null;
-    }
+    this.element_ = null;
     super.disposeInternal();
   }
 }

src/ol/MapBrowserPointerEvent.js

@@ -8,17 +8,17 @@ class MapBrowserPointerEvent extends MapBrowserEvent {
   /**
    * @param {string} type Event type.
    * @param {import("./PluggableMap.js").default} map Map.
-   * @param {import("./pointer/PointerEvent.js").default} pointerEvent Pointer event.
+   * @param {PointerEvent} pointerEvent Pointer event.
    * @param {boolean=} opt_dragging Is the map currently being dragged?
    * @param {?import("./PluggableMap.js").FrameState=} opt_frameState Frame state.
    */
   constructor(type, map, pointerEvent, opt_dragging, opt_frameState) {
 
-    super(type, map, pointerEvent.originalEvent, opt_dragging, opt_frameState);
+    super(type, map, pointerEvent, opt_dragging, opt_frameState);
 
     /**
      * @const
-     * @type {import("./pointer/PointerEvent.js").default}
+     * @type {PointerEvent}
      */
     this.pointerEvent = pointerEvent;
 

src/ol/Observable.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/Observable
  */
-import {listen, unlistenByKey, unlisten, listenOnce} from './events.js';
+import {listen, unlistenByKey, listenOnce} from './events.js';
 import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
 
@@ -101,11 +101,10 @@ class Observable extends EventTarget {
   un(type, listener) {
     if (Array.isArray(type)) {
       for (let i = 0, ii = type.length; i < ii; ++i) {
-        unlisten(this, type[i], listener);
+        this.removeEventListener(type[i], listener);
       }
-      return;
     } else {
-      unlisten(this, /** @type {string} */ (type), listener);
+      this.removeEventListener(type, listener);
     }
   }
 }

src/ol/Overlay.js

@@ -178,25 +178,11 @@ class Overlay extends BaseObject {
      */
     this.mapPostrenderListenerKey = null;
 
-    listen(
-      this, getChangeEventType(Property.ELEMENT),
-      this.handleElementChanged, this);
-
-    listen(
-      this, getChangeEventType(Property.MAP),
-      this.handleMapChanged, this);
-
-    listen(
-      this, getChangeEventType(Property.OFFSET),
-      this.handleOffsetChanged, this);
-
-    listen(
-      this, getChangeEventType(Property.POSITION),
-      this.handlePositionChanged, this);
-
-    listen(
-      this, getChangeEventType(Property.POSITIONING),
-      this.handlePositioningChanged, this);
+    this.addEventListener(getChangeEventType(Property.ELEMENT), this.handleElementChanged);
+    this.addEventListener(getChangeEventType(Property.MAP), this.handleMapChanged);
+    this.addEventListener(getChangeEventType(Property.OFFSET), this.handleOffsetChanged);
+    this.addEventListener(getChangeEventType(Property.POSITION), this.handlePositionChanged);
+    this.addEventListener(getChangeEventType(Property.POSITIONING), this.handlePositioningChanged);
 
     if (options.element !== undefined) {
       this.setElement(options.element);
@@ -432,15 +418,15 @@ class Overlay extends BaseObject {
       }
 
       if (delta[0] !== 0 || delta[1] !== 0) {
-        const center = /** @type {import("./coordinate.js").Coordinate} */ (map.getView().getCenter());
-        const centerPx = map.getPixelFromCoordinate(center);
+        const center = /** @type {import("./coordinate.js").Coordinate} */ (map.getView().getCenterInternal());
+        const centerPx = map.getPixelFromCoordinateInternal(center);
         const newCenterPx = [
           centerPx[0] + delta[0],
           centerPx[1] + delta[1]
         ];
 
-        map.getView().animate({
-          center: map.getCoordinateFromPixel(newCenterPx),
+        map.getView().animateInternal({
+          center: map.getCoordinateFromPixelInternal(newCenterPx),
           duration: this.autoPanAnimation.duration,
           easing: this.autoPanAnimation.easing
         });

src/ol/PluggableMap.js

@@ -18,15 +18,16 @@ import View from './View.js';
 import ViewHint from './ViewHint.js';
 import {assert} from './asserts.js';
 import {removeNode} from './dom.js';
-import {listen, unlistenByKey, unlisten} from './events.js';
+import {listen, unlistenByKey} from './events.js';
 import EventType from './events/EventType.js';
-import {createEmpty, clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js';
+import {clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js';
 import {TRUE} from './functions.js';
 import {DEVICE_PIXEL_RATIO, IMAGE_DECODE} from './has.js';
 import LayerGroup from './layer/Group.js';
 import {hasArea} from './size.js';
 import {DROP} from './structs/PriorityQueue.js';
 import {create as createTransform, apply as applyTransform} from './transform.js';
+import {toUserCoordinate, fromUserCoordinate} from './proj.js';
 
 
 /**
@@ -40,14 +41,12 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  * @property {import("./transform.js").Transform} coordinateToPixelTransform
  * @property {null|import("./extent.js").Extent} extent
  * @property {Array<DeclutterItems>} declutterItems
- * @property {import("./coordinate.js").Coordinate} focus
  * @property {number} index
  * @property {Array<import("./layer/Layer.js").State>} layerStatesArray
  * @property {number} layerIndex
  * @property {import("./transform.js").Transform} pixelToCoordinateTransform
  * @property {Array<PostRenderFunction>} postRenderFunctions
  * @property {import("./size.js").Size} size
- * @property {!Object<string, boolean>} skippedFeatureUids
  * @property {TileQueue} tileQueue
  * @property {!Object<string, Object<string, boolean>>} usedTiles
  * @property {Array<number>} viewHints
@@ -76,6 +75,8 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  * will be tested for features. By default, all visible layers will be tested.
  * @property {number} [hitTolerance=0] Hit-detection tolerance in pixels. Pixels
  * inside the radius around the given position will be checked for features.
+ * @property {boolean} [checkWrapped=true] Check-Wrapped Will check for for wrapped geometries inside the range of
+ *   +/- 1 world width. Works only if a projection is used that can be wrapped.
  */
 
 
@@ -149,6 +150,10 @@ class PluggableMap extends BaseObject {
 
     const optionsInternal = createOptionsInternal(options);
 
+    /** @private */
+    this.boundHandleBrowserEvent_ = this.handleBrowserEvent.bind(this);
+
+
     /**
      * @type {number}
      * @private
@@ -162,6 +167,12 @@ class PluggableMap extends BaseObject {
     this.pixelRatio_ = options.pixelRatio !== undefined ?
       options.pixelRatio : DEVICE_PIXEL_RATIO;
 
+    /**
+     * @private
+     * @type {*}
+     */
+    this.postRenderTimeoutHandle_;
+
     /**
      * @private
      * @type {number|undefined}
@@ -268,9 +279,9 @@ class PluggableMap extends BaseObject {
      * @type {MapBrowserEventHandler}
      */
     this.mapBrowserEventHandler_ = new MapBrowserEventHandler(this, options.moveTolerance);
+    const handleMapBrowserEvent = this.handleMapBrowserEvent.bind(this);
     for (const key in MapBrowserEventType) {
-      listen(this.mapBrowserEventHandler_, MapBrowserEventType[key],
-        this.handleMapBrowserEvent, this);
+      this.mapBrowserEventHandler_.addEventListener(MapBrowserEventType[key], handleMapBrowserEvent);
     }
 
     /**
@@ -285,9 +296,9 @@ class PluggableMap extends BaseObject {
      */
     this.keyHandlerKeys_ = null;
 
-    listen(this.viewport_, EventType.CONTEXTMENU, this.handleBrowserEvent, this);
-    listen(this.viewport_, EventType.WHEEL, this.handleBrowserEvent, this);
-    listen(this.viewport_, EventType.MOUSEWHEEL, this.handleBrowserEvent, this);
+    const handleBrowserEvent = this.handleBrowserEvent.bind(this);
+    this.viewport_.addEventListener(EventType.CONTEXTMENU, handleBrowserEvent, false);
+    this.viewport_.addEventListener(EventType.WHEEL, handleBrowserEvent, false);
 
     /**
      * @type {Collection<import("./control/Control.js").default>}
@@ -336,12 +347,6 @@ class PluggableMap extends BaseObject {
      */
     this.handleResize_;
 
-    /**
-     * @private
-     * @type {import("./coordinate.js").Coordinate}
-     */
-    this.focus_ = null;
-
     /**
      * @private
      * @type {!Array<PostRenderFunction>}
@@ -356,22 +361,10 @@ class PluggableMap extends BaseObject {
       this.getTilePriority.bind(this),
       this.handleTileChange_.bind(this));
 
-    /**
-     * Uids of features to skip at rendering time.
-     * @type {Object<string, boolean>}
-     * @private
-     */
-    this.skippedFeatureUids_ = {};
-
-    listen(
-      this, getChangeEventType(MapProperty.LAYERGROUP),
-      this.handleLayerGroupChanged_, this);
-    listen(this, getChangeEventType(MapProperty.VIEW),
-      this.handleViewChanged_, this);
-    listen(this, getChangeEventType(MapProperty.SIZE),
-      this.handleSizeChanged_, this);
-    listen(this, getChangeEventType(MapProperty.TARGET),
-      this.handleTargetChanged_, this);
+    this.addEventListener(getChangeEventType(MapProperty.LAYERGROUP), this.handleLayerGroupChanged_);
+    this.addEventListener(getChangeEventType(MapProperty.VIEW), this.handleViewChanged_);
+    this.addEventListener(getChangeEventType(MapProperty.SIZE), this.handleSizeChanged_);
+    this.addEventListener(getChangeEventType(MapProperty.TARGET), this.handleTargetChanged_);
 
     // setProperties will trigger the rendering of the map if the map
     // is "defined" already.
@@ -386,21 +379,21 @@ class PluggableMap extends BaseObject {
         control.setMap(this);
       }).bind(this));
 
-    listen(this.controls, CollectionEventType.ADD,
+    this.controls.addEventListener(CollectionEventType.ADD,
       /**
        * @param {import("./Collection.js").CollectionEvent} event CollectionEvent.
        */
       function(event) {
         event.element.setMap(this);
-      }, this);
+      }.bind(this));
 
-    listen(this.controls, CollectionEventType.REMOVE,
+    this.controls.addEventListener(CollectionEventType.REMOVE,
       /**
        * @param {import("./Collection.js").CollectionEvent} event CollectionEvent.
        */
       function(event) {
         event.element.setMap(null);
-      }, this);
+      }.bind(this));
 
     this.interactions.forEach(
       /**
@@ -411,33 +404,33 @@ class PluggableMap extends BaseObject {
         interaction.setMap(this);
       }).bind(this));
 
-    listen(this.interactions, CollectionEventType.ADD,
+    this.interactions.addEventListener(CollectionEventType.ADD,
       /**
        * @param {import("./Collection.js").CollectionEvent} event CollectionEvent.
        */
       function(event) {
         event.element.setMap(this);
-      }, this);
+      }.bind(this));
 
-    listen(this.interactions, CollectionEventType.REMOVE,
+    this.interactions.addEventListener(CollectionEventType.REMOVE,
       /**
        * @param {import("./Collection.js").CollectionEvent} event CollectionEvent.
        */
       function(event) {
         event.element.setMap(null);
-      }, this);
+      }.bind(this));
 
     this.overlays_.forEach(this.addOverlayInternal_.bind(this));
 
-    listen(this.overlays_, CollectionEventType.ADD,
+    this.overlays_.addEventListener(CollectionEventType.ADD,
       /**
        * @param {import("./Collection.js").CollectionEvent} event CollectionEvent.
        */
       function(event) {
         this.addOverlayInternal_(/** @type {import("./Overlay.js").default} */ (event.element));
-      }, this);
+      }.bind(this));
 
-    listen(this.overlays_, CollectionEventType.REMOVE,
+    this.overlays_.addEventListener(CollectionEventType.REMOVE,
       /**
        * @param {import("./Collection.js").CollectionEvent} event CollectionEvent.
        */
@@ -448,7 +441,7 @@ class PluggableMap extends BaseObject {
           delete this.overlayIdIndex_[id.toString()];
         }
         event.element.setMap(null);
-      }, this);
+      }.bind(this));
 
   }
 
@@ -522,9 +515,8 @@ class PluggableMap extends BaseObject {
    */
   disposeInternal() {
     this.mapBrowserEventHandler_.dispose();
-    unlisten(this.viewport_, EventType.CONTEXTMENU, this.handleBrowserEvent, this);
-    unlisten(this.viewport_, EventType.WHEEL, this.handleBrowserEvent, this);
-    unlisten(this.viewport_, EventType.MOUSEWHEEL, this.handleBrowserEvent, this);
+    this.viewport_.removeEventListener(EventType.CONTEXTMENU, this.boundHandleBrowserEvent_);
+    this.viewport_.removeEventListener(EventType.WHEEL, this.boundHandleBrowserEvent_);
     if (this.handleResize_ !== undefined) {
       removeEventListener(EventType.RESIZE, this.handleResize_, false);
       this.handleResize_ = undefined;
@@ -556,15 +548,16 @@ class PluggableMap extends BaseObject {
     if (!this.frameState_) {
       return;
     }
-    const coordinate = this.getCoordinateFromPixel(pixel);
+    const coordinate = this.getCoordinateFromPixelInternal(pixel);
     opt_options = opt_options !== undefined ? opt_options :
       /** @type {AtPixelOptions} */ ({});
     const hitTolerance = opt_options.hitTolerance !== undefined ?
       opt_options.hitTolerance * this.frameState_.pixelRatio : 0;
     const layerFilter = opt_options.layerFilter !== undefined ?
       opt_options.layerFilter : TRUE;
+    const checkWrapped = opt_options.checkWrapped !== false;
     return this.renderer_.forEachFeatureAtCoordinate(
-      coordinate, this.frameState_, hitTolerance, callback, null,
+      coordinate, this.frameState_, hitTolerance, checkWrapped, callback, null,
       layerFilter, null);
   }
 
@@ -573,15 +566,12 @@ class PluggableMap extends BaseObject {
    * @param {import("./pixel.js").Pixel} pixel Pixel.
    * @param {AtPixelOptions=} opt_options Optional options.
    * @return {Array<import("./Feature.js").FeatureLike>} The detected features or
-   * `null` if none were found.
+   * an empty array if none were found.
    * @api
    */
   getFeaturesAtPixel(pixel, opt_options) {
-    let features = null;
+    const features = [];
     this.forEachFeatureAtPixel(pixel, function(feature) {
-      if (!features) {
-        features = [];
-      }
       features.push(feature);
     }, opt_options);
     return features;
@@ -591,6 +581,10 @@ class PluggableMap extends BaseObject {
    * Detect layers that have a color value at a pixel on the viewport, and
    * execute a callback with each matching layer. Layers included in the
    * detection can be configured through `opt_layerFilter`.
+   *
+   * Note: this may give false positives unless the map layers have had different `className`
+   * properties assigned to them.
+   *
    * @param {import("./pixel.js").Pixel} pixel Pixel.
    * @param {function(this: S, import("./layer/Layer.js").default, (Uint8ClampedArray|Uint8Array)): T} callback
    *     Layer callback. This callback will receive two arguments: first is the
@@ -627,18 +621,19 @@ class PluggableMap extends BaseObject {
     if (!this.frameState_) {
       return false;
     }
-    const coordinate = this.getCoordinateFromPixel(pixel);
+    const coordinate = this.getCoordinateFromPixelInternal(pixel);
     opt_options = opt_options !== undefined ? opt_options :
       /** @type {AtPixelOptions} */ ({});
     const layerFilter = opt_options.layerFilter !== undefined ? opt_options.layerFilter : TRUE;
     const hitTolerance = opt_options.hitTolerance !== undefined ?
       opt_options.hitTolerance * this.frameState_.pixelRatio : 0;
+    const checkWrapped = opt_options.checkWrapped !== false;
     return this.renderer_.hasFeatureAtCoordinate(
-      coordinate, this.frameState_, hitTolerance, layerFilter, null);
+      coordinate, this.frameState_, hitTolerance, checkWrapped, layerFilter, null);
   }
 
   /**
-   * Returns the coordinate in view projection for a browser event.
+   * Returns the coordinate in user projection for a browser event.
    * @param {Event} event Event.
    * @return {import("./coordinate.js").Coordinate} Coordinate.
    * @api
@@ -647,6 +642,15 @@ class PluggableMap extends BaseObject {
     return this.getCoordinateFromPixel(this.getEventPixel(event));
   }
 
+  /**
+   * Returns the coordinate in view projection for a browser event.
+   * @param {Event} event Event.
+   * @return {import("./coordinate.js").Coordinate} Coordinate.
+   */
+  getEventCoordinateInternal(event) {
+    return this.getCoordinateFromPixelInternal(this.getEventPixel(event));
+  }
+
   /**
    * Returns the map pixel position for a browser event relative to the viewport.
    * @param {Event|TouchEvent} event Event.
@@ -696,12 +700,22 @@ class PluggableMap extends BaseObject {
 
   /**
    * Get the coordinate for a given pixel.  This returns a coordinate in the
-   * map view projection.
+   * user projection.
    * @param {import("./pixel.js").Pixel} pixel Pixel position in the map viewport.
    * @return {import("./coordinate.js").Coordinate} The coordinate for the pixel position.
    * @api
    */
   getCoordinateFromPixel(pixel) {
+    return toUserCoordinate(this.getCoordinateFromPixelInternal(pixel), this.getView().getProjection());
+  }
+
+  /**
+   * Get the coordinate for a given pixel.  This returns a coordinate in the
+   * map view projection.
+   * @param {import("./pixel.js").Pixel} pixel Pixel position in the map viewport.
+   * @return {import("./coordinate.js").Coordinate} The coordinate for the pixel position.
+   */
+  getCoordinateFromPixelInternal(pixel) {
     const frameState = this.frameState_;
     if (!frameState) {
       return null;
@@ -793,13 +807,24 @@ class PluggableMap extends BaseObject {
   }
 
   /**
-   * Get the pixel for a coordinate.  This takes a coordinate in the map view
+   * Get the pixel for a coordinate.  This takes a coordinate in the user
    * projection and returns the corresponding pixel.
    * @param {import("./coordinate.js").Coordinate} coordinate A map coordinate.
    * @return {import("./pixel.js").Pixel} A pixel position in the map viewport.
    * @api
    */
   getPixelFromCoordinate(coordinate) {
+    const viewCoordinate = fromUserCoordinate(coordinate, this.getView().getProjection());
+    return this.getPixelFromCoordinateInternal(viewCoordinate);
+  }
+
+  /**
+   * Get the pixel for a coordinate.  This takes a coordinate in the map view
+   * projection and returns the corresponding pixel.
+   * @param {import("./coordinate.js").Coordinate} coordinate A map coordinate.
+   * @return {import("./pixel.js").Pixel} A pixel position in the map viewport.
+   */
+  getPixelFromCoordinateInternal(coordinate) {
     const frameState = this.frameState_;
     if (!frameState) {
       return null;
@@ -891,12 +916,13 @@ class PluggableMap extends BaseObject {
     }
     // Prioritize the highest zoom level tiles closest to the focus.
     // Tiles at higher zoom levels are prioritized using Math.log(tileResolution).
-    // Within a zoom level, tiles are prioritized by the distance in pixels
-    // between the center of the tile and the focus.  The factor of 65536 means
-    // that the prioritization should behave as desired for tiles up to
+    // Within a zoom level, tiles are prioritized by the distance in pixels between
+    // the center of the tile and the center of the viewport.  The factor of 65536
+    // means that the prioritization should behave as desired for tiles up to
     // 65536 * Math.log(2) = 45426 pixels from the focus.
-    const deltaX = tileCenter[0] - frameState.focus[0];
-    const deltaY = tileCenter[1] - frameState.focus[1];
+    const center = frameState.viewState.center;
+    const deltaX = tileCenter[0] - center[0];
+    const deltaY = tileCenter[1] - center[1];
     return 65536 * Math.log(tileResolution) +
         Math.sqrt(deltaX * deltaX + deltaY * deltaY) / tileResolution;
   }
@@ -927,7 +953,6 @@ class PluggableMap extends BaseObject {
       }
       target = target.parentElement;
     }
-    this.focus_ = mapBrowserEvent.coordinate;
     mapBrowserEvent.frameState = this.frameState_;
     const interactionsArray = this.getInteractions().getArray();
     if (this.dispatchEvent(mapBrowserEvent) !== false) {
@@ -1024,6 +1049,8 @@ class PluggableMap extends BaseObject {
 
     if (!targetElement) {
       if (this.renderer_) {
+        clearTimeout(this.postRenderTimeoutHandle_);
+        this.postRenderFunctions_.length = 0;
         this.renderer_.dispose();
         this.renderer_ = null;
       }
@@ -1214,23 +1241,19 @@ class PluggableMap extends BaseObject {
    * @private
    */
   renderFrame_(time) {
-    let viewState;
-
     const size = this.getSize();
     const view = this.getView();
-    const extent = createEmpty();
     const previousFrameState = this.frameState_;
     /** @type {?FrameState} */
     let frameState = null;
     if (size !== undefined && hasArea(size) && view && view.isDef()) {
       const viewHints = view.getHints(this.frameState_ ? this.frameState_.viewHints : undefined);
-      viewState = view.getState();
+      const viewState = view.getState();
       frameState = {
         animate: false,
         coordinateToPixelTransform: this.coordinateToPixelTransform_,
         declutterItems: previousFrameState ? previousFrameState.declutterItems : [],
-        extent: extent,
-        focus: this.focus_ ? this.focus_ : viewState.center,
+        extent: getForViewAndSize(viewState.center, viewState.resolution, viewState.rotation, size),
         index: this.frameIndex_++,
         layerIndex: 0,
         layerStatesArray: this.getLayerGroup().getLayerStatesArray(),
@@ -1238,7 +1261,6 @@ class PluggableMap extends BaseObject {
         pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
         postRenderFunctions: [],
         size: size,
-        skippedFeatureUids: this.skippedFeatureUids_,
         tileQueue: this.tileQueue_,
         time: time,
         usedTiles: {},
@@ -1248,11 +1270,6 @@ class PluggableMap extends BaseObject {
       };
     }
 
-    if (frameState) {
-      frameState.extent = getForViewAndSize(viewState.center,
-        viewState.resolution, viewState.rotation, frameState.size, extent);
-    }
-
     this.frameState_ = frameState;
     this.renderer_.renderFrame(frameState);
 
@@ -1286,7 +1303,7 @@ class PluggableMap extends BaseObject {
 
     this.dispatchEvent(new MapEvent(MapEventType.POSTRENDER, this, frameState));
 
-    setTimeout(this.handlePostRender.bind(this), 0);
+    this.postRenderTimeoutHandle_ = setTimeout(this.handlePostRender.bind(this), 0);
 
   }
 
@@ -1331,14 +1348,6 @@ class PluggableMap extends BaseObject {
     this.set(MapProperty.VIEW, view);
   }
 
-  /**
-   * @param {import("./Feature.js").default} feature Feature.
-   */
-  skipFeature(feature) {
-    this.skippedFeatureUids_[getUid(feature)] = true;
-    this.render();
-  }
-
   /**
    * Force a recalculation of the map viewport size.  This should be called when
    * third-party code changes the size of the map viewport.
@@ -1365,14 +1374,6 @@ class PluggableMap extends BaseObject {
       ]);
     }
   }
-
-  /**
-   * @param {import("./Feature.js").default} feature Feature.
-   */
-  unskipFeature(feature) {
-    delete this.skippedFeatureUids_[getUid(feature)];
-    this.render();
-  }
 }
 
 

src/ol/TileQueue.js

@@ -2,7 +2,6 @@
  * @module ol/TileQueue
  */
 import TileState from './TileState.js';
-import {listen, unlisten} from './events.js';
 import EventType from './events/EventType.js';
 import PriorityQueue from './structs/PriorityQueue.js';
 
@@ -36,6 +35,9 @@ class TileQueue extends PriorityQueue {
         return (/** @type {import("./Tile.js").default} */ (element[0]).getKey());
       });
 
+    /** @private */
+    this.boundHandleTileChange_ = this.handleTileChange.bind(this);
+
     /**
      * @private
      * @type {function(): ?}
@@ -63,7 +65,7 @@ class TileQueue extends PriorityQueue {
     const added = super.enqueue(element);
     if (added) {
       const tile = element[0];
-      listen(tile, EventType.CHANGE, this.handleTileChange, this);
+      tile.addEventListener(EventType.CHANGE, this.boundHandleTileChange_);
     }
     return added;
   }
@@ -84,7 +86,7 @@ class TileQueue extends PriorityQueue {
     const state = tile.getState();
     if (tile.hifi && state === TileState.LOADED || state === TileState.ERROR ||
         state === TileState.EMPTY || state === TileState.ABORT) {
-      unlisten(tile, EventType.CHANGE, this.handleTileChange, this);
+      tile.removeEventListener(EventType.CHANGE, this.boundHandleTileChange_);
       const tileKey = tile.getKey();
       if (tileKey in this.tilesLoadingKeys_) {
         delete this.tilesLoadingKeys_[tileKey];
@@ -110,10 +112,12 @@ class TileQueue extends PriorityQueue {
       if (state === TileState.ABORT) {
         abortedTiles = true;
       } else if (state === TileState.IDLE && !(tileKey in this.tilesLoadingKeys_)) {
+        tile.load();
+        if (tile.getState() === TileState.LOADING) {
           this.tilesLoadingKeys_[tileKey] = true;
           ++this.tilesLoading_;
           ++newLoads;
-        tile.load();
+        }
       }
     }
     if (newLoads === 0 && abortedTiles) {

src/ol/View.js

@@ -19,7 +19,7 @@ import GeometryType from './geom/GeometryType.js';
 import {fromExtent as polygonFromExtent} from './geom/Polygon.js';
 import {clamp, modulo} from './math.js';
 import {assign} from './obj.js';
-import {createProjection, METERS_PER_UNIT} from './proj.js';
+import {createProjection, METERS_PER_UNIT, toUserCoordinate, toUserExtent, fromUserCoordinate, fromUserExtent, getUserProjection} from './proj.js';
 import Units from './proj/Units.js';
 import {equals} from './coordinate.js';
 import {easeOut} from './easing.js';
@@ -82,9 +82,9 @@ import {createMinMaxResolution} from './resolutionconstraint.js';
 /**
  * @typedef {Object} ViewOptions
  * @property {import("./coordinate.js").Coordinate} [center] The initial center for
- * the view. The coordinate system for the center is specified with the
- * `projection` option. Layer sources will not be fetched if this is not set,
- * but the center can be set later with {@link #setCenter}.
+ * the view. If a user projection is not set, the coordinate system for the center is
+ * specified with the `projection` option. Layer sources will not be fetched if this
+ * is not set, but the center can be set later with {@link #setCenter}.
  * @property {boolean|number} [constrainRotation=true] Rotation constraint.
  * `false` means no constraint. `true` means no constraint, but snap to zero
  * near zero. A number constrains the rotation to that number of values. For
@@ -120,7 +120,10 @@ import {createMinMaxResolution} from './resolutionconstraint.js';
  * resolution constraint. It is used together with `maxZoom` (or
  * `minResolution`) and `zoomFactor`.  Note that if `maxResolution` is also
  * provided, it is given precedence over `minZoom`.
- * @property {boolean} [multiWorld=false] No more than one world is visible.
+ * @property {boolean} [multiWorld=false] If `false` the view is constrained so
+ * only one world is visible, and you cannot pan off the edge.  If `true` the map
+ * may show multiple worlds at low zoom levels.  Only used if the `projection` is
+ * global.  Note that if `extent` is also provided it is given precedence.
  * @property {boolean} [constrainResolution=false] If true, the view will always
  * animate to the closest zoom level after an interaction; false means
  * intermediary zoom levels are allowed.
@@ -198,7 +201,7 @@ const DEFAULT_MIN_ZOOM = 0;
  *
  * ### The view states
  *
- * An View is determined by three states: `center`, `resolution`,
+ * A View is determined by three states: `center`, `resolution`,
  * and `rotation`. Each state has a corresponding getter and setter, e.g.
  * `getCenter` and `setCenter` for the `center` state.
  *
@@ -309,6 +312,13 @@ class View extends BaseObject {
      */
     this.targetRotation_;
 
+    if (options.center) {
+      options.center = fromUserCoordinate(options.center, this.projection_);
+    }
+    if (options.extent) {
+      options.extent = fromUserExtent(options.extent, this.projection_);
+    }
+
     this.applyOptions_(options);
   }
 
@@ -370,7 +380,7 @@ class View extends BaseObject {
     };
 
     this.setRotation(options.rotation !== undefined ? options.rotation : 0);
-    this.setCenter(options.center !== undefined ? options.center : null);
+    this.setCenterInternal(options.center !== undefined ? options.center : null);
     if (options.resolution !== undefined) {
       this.setResolution(options.resolution);
     } else if (options.zoom !== undefined) {
@@ -408,7 +418,7 @@ class View extends BaseObject {
     }
 
     // preserve center
-    options.center = this.getCenter();
+    options.center = this.getCenterInternal();
 
     // preserve rotation
     options.rotation = this.getRotation();
@@ -453,14 +463,26 @@ class View extends BaseObject {
     if (this.isDef() && !this.getAnimating()) {
       this.resolveConstraints(0);
     }
-    this.animate_.apply(this, arguments);
+    const args = new Array(arguments.length);
+    for (let i = 0; i < args.length; ++i) {
+      let options = arguments[i];
+      if (options.center) {
+        options = assign({}, options);
+        options.center = fromUserCoordinate(options.center, this.getProjection());
+      }
+      if (options.anchor) {
+        options = assign({}, options);
+        options.anchor = fromUserCoordinate(options.anchor, this.getProjection());
+      }
+      args[i] = options;
+    }
+    this.animateInternal.apply(this, args);
   }
 
   /**
-   * @private
    * @param {...(AnimationOptions|function(boolean): void)} var_args Animation options.
    */
-  animate_(var_args) {
+  animateInternal(var_args) {
     let animationCount = arguments.length;
     let callback;
     if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') {
@@ -471,7 +493,7 @@ class View extends BaseObject {
       // if view properties are not yet set, shortcut to the final state
       const state = arguments[animationCount - 1];
       if (state.center) {
-        this.setCenter(state.center);
+        this.setCenterInternal(state.center);
       }
       if (state.zoom !== undefined) {
         this.setZoom(state.zoom);
@@ -661,7 +683,7 @@ class View extends BaseObject {
    */
   calculateCenterRotate(rotation, anchor) {
     let center;
-    const currentCenter = this.getCenter();
+    const currentCenter = this.getCenterInternal();
     if (currentCenter !== undefined) {
       center = [currentCenter[0] - anchor[0], currentCenter[1] - anchor[1]];
       rotateCoordinate(center, rotation - this.getRotation());
@@ -677,7 +699,7 @@ class View extends BaseObject {
    */
   calculateCenterZoom(resolution, anchor) {
     let center;
-    const currentCenter = this.getCenter();
+    const currentCenter = this.getCenterInternal();
     const currentResolution = this.getResolution();
     if (currentCenter !== undefined && currentResolution !== undefined) {
       const x = anchor[0] - resolution * (anchor[0] - currentCenter[0]) / currentResolution;
@@ -717,9 +739,19 @@ class View extends BaseObject {
    * @api
    */
   getCenter() {
-    return (
-      /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get(ViewProperty.CENTER))
-    );
+    const center = this.getCenterInternal();
+    if (!center) {
+      return center;
+    }
+    return toUserCoordinate(center, this.getProjection());
+  }
+
+  /**
+   * Get the view center without transforming to user projection.
+   * @return {import("./coordinate.js").Coordinate|undefined} The center of the view.
+   */
+  getCenterInternal() {
+    return /** @type {import("./coordinate.js").Coordinate|undefined} */ (this.get(ViewProperty.CENTER));
   }
 
   /**
@@ -754,8 +786,18 @@ class View extends BaseObject {
    * @api
    */
   calculateExtent(opt_size) {
+    const extent = this.calculateExtentInternal(opt_size);
+    return toUserExtent(extent, this.getProjection());
+  }
+
+  /**
+   * @param {import("./size.js").Size=} opt_size Box pixel size. If not provided, the size of the
+   * first map that uses this view will be used.
+   * @return {import("./extent.js").Extent} Extent.
+   */
+  calculateExtentInternal(opt_size) {
     const size = opt_size || this.getSizeFromViewport_();
-    const center = /** @type {!import("./coordinate.js").Coordinate} */ (this.getCenter());
+    const center = /** @type {!import("./coordinate.js").Coordinate} */ (this.getCenterInternal());
     assert(center, 1); // The view center is not defined
     const resolution = /** @type {!number} */ (this.getResolution());
     assert(resolution !== undefined, 2); // The view resolution is not defined
@@ -866,6 +908,17 @@ class View extends BaseObject {
    * @api
    */
   getResolutionForExtent(extent, opt_size) {
+    return this.getResolutionForExtentInternal(fromUserExtent(extent, this.getProjection()), opt_size);
+  }
+
+  /**
+   * Get the resolution for a provided extent (in map units) and size (in pixels).
+   * @param {import("./extent.js").Extent} extent Extent.
+   * @param {import("./size.js").Size=} opt_size Box pixel size.
+   * @return {number} The resolution at which the provided extent will render at
+   *     the given size.
+   */
+  getResolutionForExtentInternal(extent, opt_size) {
     const size = opt_size || this.getSizeFromViewport_();
     const xResolution = getWidth(extent) / size[0];
     const yResolution = getHeight(extent) / size[1];
@@ -930,7 +983,7 @@ class View extends BaseObject {
    * @return {State} View state.
    */
   getState() {
-    const center = /** @type {import("./coordinate.js").Coordinate} */ (this.getCenter());
+    const center = /** @type {import("./coordinate.js").Coordinate} */ (this.getCenterInternal());
     const projection = this.getProjection();
     const resolution = /** @type {number} */ (this.getResolution());
     const rotation = this.getRotation();
@@ -1014,11 +1067,8 @@ class View extends BaseObject {
    * @api
    */
   fit(geometryOrExtent, opt_options) {
-    const options = opt_options || {};
-    let size = options.size;
-    if (!size) {
-      size = this.getSizeFromViewport_();
-    }
+    const options = assign({size: this.getSizeFromViewport_()}, opt_options || {});
+
     /** @type {import("./geom/SimpleGeometry.js").default} */
     let geometry;
     assert(Array.isArray(geometryOrExtent) || typeof /** @type {?} */ (geometryOrExtent).getSimplifiedGeometry === 'function',
@@ -1026,15 +1076,34 @@ class View extends BaseObject {
     if (Array.isArray(geometryOrExtent)) {
       assert(!isEmpty(geometryOrExtent),
         25); // Cannot fit empty extent provided as `geometry`
-      geometry = polygonFromExtent(geometryOrExtent);
+      const extent = fromUserExtent(geometryOrExtent, this.getProjection());
+      geometry = polygonFromExtent(extent);
     } else if (geometryOrExtent.getType() === GeometryType.CIRCLE) {
-      geometryOrExtent = geometryOrExtent.getExtent();
-      geometry = polygonFromExtent(geometryOrExtent);
-      geometry.rotate(this.getRotation(), getCenter(geometryOrExtent));
+      const extent = fromUserExtent(geometryOrExtent.getExtent(), this.getProjection());
+      geometry = polygonFromExtent(extent);
+      geometry.rotate(this.getRotation(), getCenter(extent));
+    } else {
+      const userProjection = getUserProjection();
+      if (userProjection) {
+        geometry = /** @type {import("./geom/SimpleGeometry.js").default} */ (geometry.clone().transform(userProjection, this.getProjection()));
       } else {
         geometry = geometryOrExtent;
       }
+    }
 
+    this.fitInternal(geometry, options);
+  }
+
+  /**
+   * @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
+   * @param {FitOptions=} opt_options Options.
+   */
+  fitInternal(geometry, opt_options) {
+    const options = opt_options || {};
+    let size = options.size;
+    if (!size) {
+      size = this.getSizeFromViewport_();
+    }
     const padding = options.padding !== undefined ? options.padding : [0, 0, 0, 0];
     const nearest = options.nearest !== undefined ? options.nearest : false;
     let minResolution;
@@ -1066,7 +1135,7 @@ class View extends BaseObject {
     }
 
     // calculate resolution
-    let resolution = this.getResolutionForExtent(
+    let resolution = this.getResolutionForExtentInternal(
       [minRotX, minRotY, maxRotX, maxRotY],
       [size[0] - padding[1] - padding[3], size[1] - padding[0] - padding[2]]);
     resolution = isNaN(resolution) ? minResolution :
@@ -1085,7 +1154,7 @@ class View extends BaseObject {
     const callback = options.callback ? options.callback : VOID;
 
     if (options.duration !== undefined) {
-      this.animate_({
+      this.animateInternal({
         resolution: resolution,
         center: this.getConstrainedCenter(center, resolution),
         duration: options.duration,
@@ -1107,6 +1176,15 @@ class View extends BaseObject {
    * @api
    */
   centerOn(coordinate, size, position) {
+    this.centerOnInternal(fromUserCoordinate(coordinate, this.getProjection()), size, position);
+  }
+
+  /**
+   * @param {import("./coordinate.js").Coordinate} coordinate Coordinate.
+   * @param {import("./size.js").Size} size Box pixel size.
+   * @param {import("./pixel.js").Pixel} position Position on the view to center on.
+   */
+  centerOnInternal(coordinate, size, position) {
     // calculate rotated position
     const rotation = this.getRotation();
     const cosAngle = Math.cos(-rotation);
@@ -1122,14 +1200,14 @@ class View extends BaseObject {
     const centerX = rotX * cosAngle - rotY * sinAngle;
     const centerY = rotY * cosAngle + rotX * sinAngle;
 
-    this.setCenter([centerX, centerY]);
+    this.setCenterInternal([centerX, centerY]);
   }
 
   /**
    * @return {boolean} Is defined.
    */
   isDef() {
-    return !!this.getCenter() && this.getResolution() !== undefined;
+    return !!this.getCenterInternal() && this.getResolution() !== undefined;
   }
 
   /**
@@ -1138,10 +1216,19 @@ class View extends BaseObject {
    * @api
    */
   adjustCenter(deltaCoordinates) {
-    const center = this.targetCenter_;
+    const center = toUserCoordinate(this.targetCenter_, this.getProjection());
     this.setCenter([center[0] + deltaCoordinates[0], center[1] + deltaCoordinates[1]]);
   }
 
+  /**
+   * Adds relative coordinates to the center of the view. Any extent constraint will apply.
+   * @param {import("./coordinate.js").Coordinate} deltaCoordinates Relative value to add.
+   */
+  adjustCenterInternal(deltaCoordinates) {
+    const center = this.targetCenter_;
+    this.setCenterInternal([center[0] + deltaCoordinates[0], center[1] + deltaCoordinates[1]]);
+  }
+
   /**
    * Multiply the view resolution by a ratio, optionally using an anchor. Any resolution
    * constraint will apply.
@@ -1150,6 +1237,17 @@ class View extends BaseObject {
    * @api
    */
   adjustResolution(ratio, opt_anchor) {
+    const anchor = opt_anchor && fromUserCoordinate(opt_anchor, this.getProjection());
+    this.adjustResolutionInternal(ratio, anchor);
+  }
+
+  /**
+   * Multiply the view resolution by a ratio, optionally using an anchor. Any resolution
+   * constraint will apply.
+   * @param {number} ratio The ratio to apply on the view resolution.
+   * @param {import("./coordinate.js").Coordinate=} opt_anchor The origin of the transformation.
+   */
+  adjustResolutionInternal(ratio, opt_anchor) {
     const isMoving = this.getAnimating() || this.getInteracting();
     const size = this.getSizeFromViewport_(this.getRotation());
     const newResolution = this.constraints_.resolution(this.targetResolution_ * ratio, 0, size, isMoving);
@@ -1181,6 +1279,17 @@ class View extends BaseObject {
    * @api
    */
   adjustRotation(delta, opt_anchor) {
+    if (opt_anchor) {
+      opt_anchor = fromUserCoordinate(opt_anchor, this.getProjection());
+    }
+    this.adjustRotationInternal(delta, opt_anchor);
+  }
+
+  /**
+   * @param {number} delta Relative value to add to the zoom rotation, in radians.
+   * @param {import("./coordinate.js").Coordinate=} opt_anchor The rotation center.
+   */
+  adjustRotationInternal(delta, opt_anchor) {
     const isMoving = this.getAnimating() || this.getInteracting();
     const newRotation = this.constraints_.rotation(this.targetRotation_ + delta, isMoving);
     if (opt_anchor !== undefined) {
@@ -1197,6 +1306,14 @@ class View extends BaseObject {
    * @api
    */
   setCenter(center) {
+    this.setCenterInternal(fromUserCoordinate(center, this.getProjection()));
+  }
+
+  /**
+   * Set the center using the view projection (not the user projection).
+   * @param {import("./coordinate.js").Coordinate|undefined} center The center of the view.
+   */
+  setCenterInternal(center) {
     this.targetCenter_ = center;
     this.applyTargetState_();
   }
@@ -1303,14 +1420,14 @@ class View extends BaseObject {
 
     if (this.getResolution() !== newResolution ||
       this.getRotation() !== newRotation ||
-      !this.getCenter() ||
-      !equals(this.getCenter(), newCenter)) {
+      !this.getCenterInternal() ||
+      !equals(this.getCenterInternal(), newCenter)) {
 
       if (this.getAnimating()) {
         this.cancelAnimations();
       }
 
-      this.animate_({
+      this.animateInternal({
         rotation: newRotation,
         center: newCenter,
         resolution: newResolution,
@@ -1342,6 +1459,18 @@ class View extends BaseObject {
    * @api
    */
   endInteraction(opt_duration, opt_resolutionDirection, opt_anchor) {
+    const anchor = opt_anchor && fromUserCoordinate(opt_anchor, this.getProjection());
+    this.endInteractionInternal(opt_duration, opt_resolutionDirection, anchor);
+  }
+
+  /**
+   * Notify the View that an interaction has ended. The view state will be resolved
+   * to a stable one if needed (depending on its constraints).
+   * @param {number=} opt_duration Animation duration in ms.
+   * @param {number=} opt_resolutionDirection Which direction to zoom.
+   * @param {import("./coordinate.js").Coordinate=} opt_anchor The origin of the transformation.
+   */
+  endInteractionInternal(opt_duration, opt_resolutionDirection, opt_anchor) {
     this.setHint(ViewHint.INTERACTING, -1);
 
     this.resolveConstraints(opt_duration, opt_resolutionDirection, opt_anchor);
@@ -1362,22 +1491,24 @@ class View extends BaseObject {
   /**
    * Get a valid zoom level according to the current view constraints.
    * @param {number|undefined} targetZoom Target zoom.
-   * @param {number=} opt_direction Direction. Default is `0`. Specify `-1` or `1` to return
-   * the available value respectively lower or greater than the target one. Leaving `0` will simply choose
-   * the nearest available value.
+   * @param {number=} [opt_direction=0] Indicate which resolution should be used
+   * by a renderer if the view resolution does not match any resolution of the tile source.
+   * If 0, the nearest resolution will be used. If 1, the nearest lower resolution
+   * will be used. If -1, the nearest higher resolution will be used.
    * @return {number|undefined} Valid zoom level.
    */
   getConstrainedZoom(targetZoom, opt_direction) {
     const targetRes = this.getResolutionForZoom(targetZoom);
-    return this.getZoomForResolution(this.getConstrainedResolution(targetRes));
+    return this.getZoomForResolution(this.getConstrainedResolution(targetRes, opt_direction));
   }
 
   /**
    * Get a valid resolution according to the current view constraints.
    * @param {number|undefined} targetResolution Target resolution.
-   * @param {number=} opt_direction Direction. Default is `0`. Specify `-1` or `1` to return
-   * the available value respectively lower or greater than the target one. Leaving `0` will simply choose
-   * the nearest available value.
+   * @param {number=} [opt_direction=0] Indicate which resolution should be used
+   * by a renderer if the view resolution does not match any resolution of the tile source.
+   * If 0, the nearest resolution will be used. If 1, the nearest lower resolution
+   * will be used. If -1, the nearest higher resolution will be used.
    * @return {number|undefined} Valid resolution.
    */
   getConstrainedResolution(targetResolution, opt_direction) {
@@ -1452,6 +1583,15 @@ export function createResolutionConstraint(options) {
   const smooth =
       options.smoothResolutionConstraint !== undefined ? options.smoothResolutionConstraint : true;
 
+  const projection = createProjection(options.projection, 'EPSG:3857');
+  const projExtent = projection.getExtent();
+  let constrainOnlyCenter = options.constrainOnlyCenter;
+  let extent = options.extent;
+  if (!multiWorld && !extent && projection.isGlobal()) {
+    constrainOnlyCenter = false;
+    extent = projExtent;
+  }
+
   if (options.resolutions !== undefined) {
     const resolutions = options.resolutions;
     maxResolution = resolutions[minZoom];
@@ -1460,20 +1600,18 @@ export function createResolutionConstraint(options) {
 
     if (options.constrainResolution) {
       resolutionConstraint = createSnapToResolutions(resolutions, smooth,
-        !options.constrainOnlyCenter && options.extent);
+        !constrainOnlyCenter && extent);
     } else {
       resolutionConstraint = createMinMaxResolution(maxResolution, minResolution, smooth,
-        !options.constrainOnlyCenter && options.extent);
+        !constrainOnlyCenter && extent);
     }
   } else {
     // calculate the default min and max resolution
-    const projection = createProjection(options.projection, 'EPSG:3857');
-    const extent = projection.getExtent();
-    const size = !extent ?
+    const size = !projExtent ?
       // use an extent that can fit the whole world if need be
       360 * METERS_PER_UNIT[Units.DEGREES] /
             projection.getMetersPerUnit() :
-      Math.max(getWidth(extent), getHeight(extent));
+      Math.max(getWidth(projExtent), getHeight(projExtent));
 
     const defaultMaxResolution = size / DEFAULT_TILE_SIZE / Math.pow(
       defaultZoomFactor, DEFAULT_MIN_ZOOM);
@@ -1511,14 +1649,8 @@ export function createResolutionConstraint(options) {
     if (options.constrainResolution) {
       resolutionConstraint = createSnapToPower(
         zoomFactor, maxResolution, minResolution, smooth,
-        !options.constrainOnlyCenter && options.extent);
+        !constrainOnlyCenter && extent);
     } else {
-      let constrainOnlyCenter = options.constrainOnlyCenter;
-      let extent = options.extent;
-      if (!multiWorld && !extent && projection.isGlobal()) {
-        constrainOnlyCenter = false;
-        extent = projection.getExtent();
-      }
       resolutionConstraint = createMinMaxResolution(maxResolution, minResolution, smooth,
         !constrainOnlyCenter && extent);
     }

src/ol/control/Attribution.js

@@ -5,7 +5,6 @@ import {equals} from '../array.js';
 import Control from './Control.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js';
 import {removeChildren, replaceNode} from '../dom.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {inView} from '../layer/Layer.js';
 
@@ -125,7 +124,7 @@ class Attribution extends Control {
     button.title = tipLabel;
     button.appendChild(activeLabel);
 
-    listen(button, EventType.CLICK, this.handleClick_, this);
+    button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
 
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
         (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +

src/ol/control/FullScreen.js

@@ -91,8 +91,7 @@ class FullScreen extends Control {
     this.button_.title = tipLabel;
     this.button_.appendChild(this.labelNode_);
 
-    listen(this.button_, EventType.CLICK,
-      this.handleClick_, this);
+    this.button_.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
 
     const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
         ' ' + CLASS_CONTROL + ' ' +

src/ol/control/MousePosition.js

@@ -2,10 +2,11 @@
  * @module ol/control/MousePosition
  */
 import {listen} from '../events.js';
-import EventType from '../events/EventType.js';
+import EventType from '../pointer/EventType.js';
 import {getChangeEventType} from '../Object.js';
 import Control from './Control.js';
-import {getTransformFromProjections, identityTransform, get as getProjection} from '../proj.js';
+import {getTransformFromProjections, identityTransform, get as getProjection, getUserProjection} from '../proj.js';
+import '@openlayers/pepjs';
 
 
 /**
@@ -67,9 +68,7 @@ class MousePosition extends Control {
       target: options.target
     });
 
-    listen(this,
-      getChangeEventType(PROJECTION),
-      this.handleProjectionChanged_, this);
+    this.addEventListener(getChangeEventType(PROJECTION), this.handleProjectionChanged_);
 
     if (options.coordinateFormat) {
       this.setCoordinateFormat(options.coordinateFormat);
@@ -170,13 +169,11 @@ class MousePosition extends Control {
     if (map) {
       const viewport = map.getViewport();
       this.listenerKeys.push(
-        listen(viewport, EventType.MOUSEMOVE, this.handleMouseMove, this),
-        listen(viewport, EventType.TOUCHSTART, this.handleMouseMove, this)
+        listen(viewport, EventType.POINTERMOVE, this.handleMouseMove, this)
       );
       if (this.renderOnMouseOut_) {
         this.listenerKeys.push(
-          listen(viewport, EventType.MOUSEOUT, this.handleMouseOut, this),
-          listen(viewport, EventType.TOUCHEND, this.handleMouseOut, this)
+          listen(viewport, EventType.POINTEROUT, this.handleMouseOut, this)
         );
       }
     }
@@ -221,8 +218,13 @@ class MousePosition extends Control {
         }
       }
       const map = this.getMap();
-      const coordinate = map.getCoordinateFromPixel(pixel);
+      const coordinate = map.getCoordinateFromPixelInternal(pixel);
       if (coordinate) {
+        const userProjection = getUserProjection();
+        if (userProjection) {
+          this.transform_ = getTransformFromProjections(
+            this.mapProjection_, userProjection);
+        }
         this.transform_(coordinate, coordinate);
         const coordinateFormat = this.getCoordinateFormat();
         if (coordinateFormat) {

src/ol/control/OverviewMap.js

@@ -11,12 +11,12 @@ import Overlay from '../Overlay.js';
 import OverlayPositioning from '../OverlayPositioning.js';
 import ViewProperty from '../ViewProperty.js';
 import Control from './Control.js';
-import {rotate as rotateCoordinate, add as addCoordinate} from '../coordinate.js';
+import {fromExtent as polygonFromExtent} from '../geom/Polygon.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js';
 import {replaceNode} from '../dom.js';
-import {listen, listenOnce, unlisten} from '../events.js';
+import {listen, listenOnce} from '../events.js';
 import EventType from '../events/EventType.js';
-import {containsExtent, getBottomLeft, getBottomRight, getTopLeft, getTopRight, scaleFromCenter} from '../extent.js';
+import {containsExtent, equals as equalsExtent, getBottomRight, getTopLeft, scaleFromCenter} from '../extent.js';
 
 
 /**
@@ -55,6 +55,7 @@ class ControlledMap extends PluggableMap {
  * Layers for the overview map.
  * @property {function(import("../MapEvent.js").default)} [render] Function called when the control
  * should be re-rendered. This is called in a `requestAnimationFrame` callback.
+ * @property {boolean} [rotateWithView=false] Whether the control view should rotate with the main map view.
  * @property {HTMLElement|string} [target] Specify a target if you want the control
  * to be rendered outside of the map's viewport.
  * @property {string} [tipLabel='Overview map'] Text label to use for the button tip.
@@ -64,7 +65,7 @@ class ControlledMap extends PluggableMap {
 
 
 /**
- * Create a new control with a map acting as an overview map for an other
+ * Create a new control with a map acting as an overview map for another
  * defined map.
  *
  * @api
@@ -84,6 +85,11 @@ class OverviewMap extends Control {
       target: options.target
     });
 
+    /**
+     * @private
+     */
+    this.boundHandleRotationChanged_ = this.handleRotationChanged_.bind(this);
+
     /**
      * @type {boolean}
      * @private
@@ -101,6 +107,19 @@ class OverviewMap extends Control {
       this.collapsed_ = false;
     }
 
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.rotateWithView_ = options.rotateWithView !== undefined ?
+      options.rotateWithView : false;
+
+    /**
+     * @private
+     * @type {import("../extent.js").Extent|undefined}
+     */
+    this.viewExtent_ = undefined;
+
     const className = options.className !== undefined ? options.className : 'ol-overviewmap';
 
     const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
@@ -139,8 +158,7 @@ class OverviewMap extends Control {
     button.title = tipLabel;
     button.appendChild(activeLabel);
 
-    listen(button, EventType.CLICK,
-      this.handleClick_, this);
+    button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
 
     /**
      * @type {HTMLElement}
@@ -174,7 +192,7 @@ class OverviewMap extends Control {
      */
     this.boxOverlay_ = new Overlay({
       position: [0, 0],
-      positioning: OverlayPositioning.BOTTOM_LEFT,
+      positioning: OverlayPositioning.CENTER_CENTER,
       element: box
     });
     this.ovmap_.addOverlay(this.boxOverlay_);
@@ -205,15 +223,15 @@ class OverviewMap extends Control {
 
     const move = function(event) {
       const position = /** @type {?} */ (computeDesiredMousePosition(event));
-      const coordinates = ovmap.getEventCoordinate(/** @type {Event} */ (position));
+      const coordinates = ovmap.getEventCoordinateInternal(/** @type {Event} */ (position));
 
       overlay.setPosition(coordinates);
     };
 
     const endMoving = function(event) {
-      const coordinates = ovmap.getEventCoordinate(event);
+      const coordinates = ovmap.getEventCoordinateInternal(event);
 
-      scope.getMap().getView().setCenter(coordinates);
+      scope.getMap().getView().setCenterInternal(coordinates);
 
       window.removeEventListener('mousemove', move);
       window.removeEventListener('mouseup', endMoving);
@@ -225,6 +243,7 @@ class OverviewMap extends Control {
       window.addEventListener('mousemove', move);
       window.addEventListener('mouseup', endMoving);
     });
+
   }
 
   /**
@@ -284,9 +303,7 @@ class OverviewMap extends Control {
    * @private
    */
   bindView_(view) {
-    listen(view,
-      getChangeEventType(ViewProperty.ROTATION),
-      this.handleRotationChanged_, this);
+    view.addEventListener(getChangeEventType(ViewProperty.ROTATION), this.boundHandleRotationChanged_);
   }
 
   /**
@@ -295,20 +312,18 @@ class OverviewMap extends Control {
    * @private
    */
   unbindView_(view) {
-    unlisten(view,
-      getChangeEventType(ViewProperty.ROTATION),
-      this.handleRotationChanged_, this);
+    view.removeEventListener(getChangeEventType(ViewProperty.ROTATION), this.boundHandleRotationChanged_);
   }
 
   /**
    * Handle rotation changes to the main map.
-   * TODO: This should rotate the extent rectrangle instead of the
-   * overview map's view.
    * @private
    */
   handleRotationChanged_() {
+    if (this.rotateWithView_) {
       this.ovmap_.getView().setRotation(this.getMap().getView().getRotation());
     }
+  }
 
   /**
    * Reset the overview map extent if the box size (width or
@@ -332,17 +347,23 @@ class OverviewMap extends Control {
     const mapSize = /** @type {import("../size.js").Size} */ (map.getSize());
 
     const view = map.getView();
-    const extent = view.calculateExtent(mapSize);
+    const extent = view.calculateExtentInternal(mapSize);
+
+    if (this.viewExtent_ && equalsExtent(extent, this.viewExtent_)) {
+      // repeats of the same extent may indicate constraint conflicts leading to an endless cycle
+      return;
+    }
+    this.viewExtent_ = extent;
 
     const ovmapSize = /** @type {import("../size.js").Size} */ (ovmap.getSize());
 
     const ovview = ovmap.getView();
-    const ovextent = ovview.calculateExtent(ovmapSize);
+    const ovextent = ovview.calculateExtentInternal(ovmapSize);
 
     const topLeftPixel =
-        ovmap.getPixelFromCoordinate(getTopLeft(extent));
+        ovmap.getPixelFromCoordinateInternal(getTopLeft(extent));
     const bottomRightPixel =
-        ovmap.getPixelFromCoordinate(getBottomRight(extent));
+        ovmap.getPixelFromCoordinateInternal(getBottomRight(extent));
 
     const boxWidth = Math.abs(topLeftPixel[0] - bottomRightPixel[0]);
     const boxHeight = Math.abs(topLeftPixel[1] - bottomRightPixel[1]);
@@ -376,7 +397,7 @@ class OverviewMap extends Control {
     const mapSize = /** @type {import("../size.js").Size} */ (map.getSize());
 
     const view = map.getView();
-    const extent = view.calculateExtent(mapSize);
+    const extent = view.calculateExtentInternal(mapSize);
 
     const ovview = ovmap.getView();
 
@@ -387,7 +408,7 @@ class OverviewMap extends Control {
       MAX_RATIO / MIN_RATIO) / Math.LN2;
     const ratio = 1 / (Math.pow(2, steps / 2) * MIN_RATIO);
     scaleFromCenter(extent, ratio);
-    ovview.fit(extent);
+    ovview.fitInternal(polygonFromExtent(extent));
   }
 
   /**
@@ -403,7 +424,7 @@ class OverviewMap extends Control {
 
     const ovview = ovmap.getView();
 
-    ovview.setCenter(view.getCenter());
+    ovview.setCenterInternal(view.getCenterInternal());
   }
 
   /**
@@ -424,51 +445,28 @@ class OverviewMap extends Control {
 
     const ovview = ovmap.getView();
 
-    const rotation = view.getRotation();
+    const rotation = this.rotateWithView_ ? 0 : -view.getRotation();
 
     const overlay = this.boxOverlay_;
     const box = this.boxOverlay_.getElement();
-    const extent = view.calculateExtent(mapSize);
+    const center = view.getCenterInternal();
+    const resolution = view.getResolution();
     const ovresolution = ovview.getResolution();
-    const bottomLeft = getBottomLeft(extent);
-    const topRight = getTopRight(extent);
+    const width = mapSize[0] * resolution / ovresolution;
+    const height = mapSize[1] * resolution / ovresolution;
 
-    // set position using bottom left coordinates
-    const rotateBottomLeft = this.calculateCoordinateRotate_(rotation, bottomLeft);
-    overlay.setPosition(rotateBottomLeft);
+    // set position using center coordinates
+    overlay.setPosition(center);
 
     // set box size calculated from map extent size and overview map resolution
     if (box) {
-      box.style.width = Math.abs((bottomLeft[0] - topRight[0]) / ovresolution) + 'px';
-      box.style.height = Math.abs((topRight[1] - bottomLeft[1]) / ovresolution) + 'px';
+      box.style.width = width + 'px';
+      box.style.height = height + 'px';
+      const transform = 'rotate(' + rotation + 'rad)';
+      box.style.transform = transform;
     }
   }
 
-  /**
-   * @param {number} rotation Target rotation.
-   * @param {import("../coordinate.js").Coordinate} coordinate Coordinate.
-   * @return {import("../coordinate.js").Coordinate|undefined} Coordinate for rotation and center anchor.
-   * @private
-   */
-  calculateCoordinateRotate_(rotation, coordinate) {
-    let coordinateRotate;
-
-    const map = this.getMap();
-    const view = map.getView();
-
-    const currentCenter = view.getCenter();
-
-    if (currentCenter) {
-      coordinateRotate = [
-        coordinate[0] - currentCenter[0],
-        coordinate[1] - currentCenter[1]
-      ];
-      rotateCoordinate(coordinateRotate, rotation);
-      addCoordinate(coordinateRotate, currentCenter);
-    }
-    return coordinateRotate;
-  }
-
   /**
    * @param {MouseEvent} event The event to handle
    * @private
@@ -493,7 +491,12 @@ class OverviewMap extends Control {
     // manage overview map if it had not been rendered before and control
     // is expanded
     const ovmap = this.ovmap_;
-    if (!this.collapsed_ && !ovmap.isRendered()) {
+    if (!this.collapsed_) {
+      if (ovmap.isRendered()) {
+        this.viewExtent_ = undefined;
+        ovmap.render();
+        return;
+      }
       ovmap.updateSize();
       this.resetExtent_();
       listenOnce(ovmap, MapEventType.POSTRENDER,
@@ -552,6 +555,37 @@ class OverviewMap extends Control {
     return this.collapsed_;
   }
 
+  /**
+   * Return `true` if the overview map view can rotate, `false` otherwise.
+   * @return {boolean} True if the control view can rotate.
+   * @api
+   */
+  getRotateWithView() {
+    return this.rotateWithView_;
+  }
+
+  /**
+   * Set whether the overview map view should rotate with the main map view.
+   * @param {boolean} rotateWithView True if the control view should rotate.
+   * @api
+   */
+  setRotateWithView(rotateWithView) {
+    if (this.rotateWithView_ === rotateWithView) {
+      return;
+    }
+    this.rotateWithView_ = rotateWithView;
+    if (this.getMap().getView().getRotation() !== 0) {
+      if (this.rotateWithView_) {
+        this.handleRotationChanged_();
+      } else {
+        this.ovmap_.getView().setRotation(0);
+      }
+      this.viewExtent_ = undefined;
+      this.validateExtent_();
+      this.updateBox_();
+    }
+  }
+
   /**
    * Return the overview map.
    * @return {import("../PluggableMap.js").default} Overview map.

src/ol/control/Rotate.js

@@ -4,7 +4,6 @@
 import Control from './Control.js';
 import {CLASS_CONTROL, CLASS_HIDDEN, CLASS_UNSELECTABLE} from '../css.js';
 import {easeOut} from '../easing.js';
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 
 
@@ -75,7 +74,7 @@ class Rotate extends Control {
     button.title = tipLabel;
     button.appendChild(this.label_);
 
-    listen(button, EventType.CLICK, this.handleClick_, this);
+    button.addEventListener(EventType.CLICK, this.handleClick_.bind(this), false);
 
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
     const element = this.element;

src/ol/control/ScaleLine.js

@@ -5,7 +5,6 @@ import {getChangeEventType} from '../Object.js';
 import {assert} from '../asserts.js';
 import Control from './Control.js';
 import {CLASS_UNSELECTABLE} from '../css.js';
-import {listen} from '../events.js';
 import {getPointResolution, METERS_PER_UNIT} from '../proj.js';
 import ProjUnits from '../proj/Units.js';
 
@@ -125,9 +124,7 @@ class ScaleLine extends Control {
      */
     this.renderedHTML_ = '';
 
-    listen(
-      this, getChangeEventType(UNITS_PROP),
-      this.handleUnitsChanged_, this);
+    this.addEventListener(getChangeEventType(UNITS_PROP), this.handleUnitsChanged_);
 
     this.setUnits(/** @type {Units} */ (options.units) || Units.METRIC);
 

src/ol/control/Zoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/Zoom
  */
-import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import Control from './Control.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
@@ -66,7 +65,7 @@ class Zoom extends Control {
       typeof zoomInLabel === 'string' ? document.createTextNode(zoomInLabel) : zoomInLabel
     );
 
-    listen(inElement, EventType.CLICK, this.handleClick_.bind(this, delta));
+    inElement.addEventListener(EventType.CLICK, this.handleClick_.bind(this, delta), false);
 
     const outElement = document.createElement('button');
     outElement.className = className + '-out';
@@ -76,7 +75,7 @@ class Zoom extends Control {
       typeof zoomOutLabel === 'string' ? document.createTextNode(zoomOutLabel) : zoomOutLabel
     );
 
-    listen(outElement, EventType.CLICK, this.handleClick_.bind(this, -delta));
+    outElement.addEventListener(EventType.CLICK, this.handleClick_.bind(this, -delta), false);
 
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
     const element = this.element;