Merge branch 'main' of https://github.com/openlayers/openlayers into main

2021-03-07 18:31:04 +01:00
parent f3a33bd75a ab17ee2b60
commit d822e4085c
481 changed files with 22380 additions and 6525 deletions
--- a/.github/codeql/config.yml
+++ b/.github/codeql/config.yml
@@ -0,0 +1,4 @@
+name: "OpenLayers CodeQL Config"
+
+paths:
+  - src
--- a/.github/workflows/security.yml
+++ b/.github/workflows/security.yml
@@ -0,0 +1,40 @@
+name: "Security Scan"
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  schedule:
+    - cron: '0 0 * * 0'  # At 00:00 on Sunday
+
+jobs:
+  codeql:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # Must fetch at least the immediate parents so that if this is
+          # a pull request then we can checkout the head of the pull request.
+          # Only include this option if you are running this workflow on pull requests.
+          fetch-depth: 2
+
+      # If this run was triggered by a pull request event then checkout
+      # the head of the pull request instead of the merge commit.
+      # Only include this step if you are running this workflow on pull requests.
+      - run: git checkout HEAD^2
+        if: ${{ github.event_name == 'pull_request' }}
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: javascript
+          config-file: ./.github/codeql/config.yml
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,7 +4,7 @@ Thanks for your interest in contributing to OpenLayers.  Please see the project'

 ## Asking Questions

-Please ask questions about using the library on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers).
+Please ask questions about using the library on [Stack Overflow using the tag 'openlayers'](https://stackoverflow.com/questions/tagged/openlayers).

 When you want to get involved and discuss new features or changes, please use [the mailing list](https://groups.google.com/forum/#!forum/openlayers-dev).

@@ -68,12 +68,12 @@ easily-understandable chunks.  Any individual commit should not add more than
 one new class or one new function.  Do not submit commits that change thousands
 of lines or that contain more than one distinct logical change.  Trivial
 commits, e.g. to fix lint errors, should be merged into the commit that
-introduced the error.  See the [Atomic Commit Convention on Wikipedia](http://en.wikipedia.org/wiki/Atomic_commit#Atomic_Commit_Convention) for more detail.
+introduced the error.  See the [Atomic Commit Convention on Wikipedia](https://en.wikipedia.org/wiki/Atomic_commit#Atomic_Commit_Convention) for more detail.

 `git apply --patch` and `git rebase` can help you create a clean commit
 history.
-[Reviewboard.org](http://www.reviewboard.org/docs/codebase/dev/git/clean-commits/)
-and [Pro GIT](http://git-scm.com/book/en/Git-Tools-Rewriting-History) have
+[Reviewboard.org](https://www.reviewboard.org/docs/codebase/dev/git/clean-commits/)
+and [Pro GIT](https://git-scm.com/book/en/Git-Tools-Rewriting-History) have
 explain how to use them.


@@ -81,7 +81,7 @@ explain how to use them.

 Commit messages should be short, begin with a verb in the imperative, and
 contain no trailing punctuation. We follow
-http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html
+https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html
 for the formatting of commit messages.

 Git commit message should look like:
--- a/DEVELOPING.md
+++ b/DEVELOPING.md
@@ -10,7 +10,7 @@ You will obviously start by
 The minimum requirements are:

 * Git
-* [Node.js](http://nodejs.org/) (version 8 and above)
+* [Node.js](https://nodejs.org/) (version 8 and above)

 The executables `git` and `node` should be in your `PATH`.

--- a/README.md
+++ b/README.md
@@ -108,14 +108,17 @@ TypeScript users may want to use a [third-party types package](https://github.co

 ## Supported Browsers

-OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge.
+OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](https://262.ecma-international.org/5.1/). This includes Chrome, Firefox, Safari and Edge.

 For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and older, Safari v12 and older), polyfills may be needed for the following browser features:

-* [`requestAnimationFrame`](https://caniuse.com/#feat=requestanimationframe): Available from [polyfill.io](https://polyfill.io/).
-* [`element.prototype.classList` (`add`/`remove`)](https://caniuse.com/#feat=classlist): Available from [polyfill.io](https://polyfill.io/).
-* [`URL` API](https://caniuse.com/#feat=url): Available from [polyfill.io](https://polyfill.io/).
-* [Pointer events](https://caniuse.com/#feat=pointer): Use [elm-pep](https://npmjs.com/package/elm-pep) (lightweight) or [@openlayers/pepjs](https://npmjs.com/package/pepjs) (for really, really old browsers).
+* [`fetch`](https://caniuse.com/fetch): Available from [polyfill.io](https://polyfill.io/).
+* [`requestAnimationFrame`](https://caniuse.com/requestanimationframe): Available from [polyfill.io](https://polyfill.io/).
+* [`element.prototype.classList` (`add`/`remove`)](https://caniuse.com/classlist): Available from [polyfill.io](https://polyfill.io/).
+* [`URL` API](https://caniuse.com/url): Available from [polyfill.io](https://polyfill.io/).
+* [`TextDecoder`](https://caniuse.com/textencoder): Available from [polyfill.io](https://polyfill.io/).
+* [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/).
+* [Pointer events](https://caniuse.com/pointer): Use [elm-pep](https://npmjs.com/package/elm-pep) (lightweight) or [pepjs](https://npmjs.com/package/pepjs) (for really, really old browsers).

 ## Documentation

@@ -131,7 +134,7 @@ Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in

 ## Community

- Need help? Find it on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers)
+- Need help? Find it on [Stack Overflow using the tag 'openlayers'](https://stackoverflow.com/questions/tagged/openlayers)
 - Follow [@openlayers](https://twitter.com/openlayers) on Twitter

 ![Test Status](https://github.com/openlayers/openlayers/workflows/Test/badge.svg)
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -1,5 +1,26 @@
 ## Upgrade notes

+### Next version
+
+#### Deprecation of `image` render mode for vector tile layers
+
+`renderMode: 'image'` for vector tile layers has been deprecated. Applications continue to work, but a warning will be issued to the console. To get rid of the warning, simply remove the `renderMode` option.
+
+### v6.5.0
+
+#### Units of the `hitTolerance` option fixed
+
+Previously, the `hitTolerance` option of the map's `getFeaturesAtPixel()`, `forEachFeatureAtPixel()` and `hasFeatureAtPixel()` methods behaved differently depending on the `devicePixelRatio` (or the `pixelRatio` of the map), because the original value was internally multiplied by the device pixel ratio twice instead of just once. Now this is fixed. **Note**: The `hitTolerance`'s units are css pixels. The documentation was updated to reflect this.
+
+If your application adjusts for that with code like
+```js
+{ hitTolerance: 10 / devicePixelRatio, }
+```
+you'll have to change that code to
+```js
+{ hitTolerance: 10, }
+```
+
 ### v6.4.0

 #### Pointer events polyfill removed
--- a/changelog/v6.4.1.md
+++ b/changelog/v6.4.1.md
--- a/changelog/v6.5.0.md
+++ b/changelog/v6.5.0.md
@@ -0,0 +1,279 @@
+# 6.5.0
+
+With more than 110 pull requests, this release not only brings WFS 2.0 support and improved touch support for drawing geometries and querying features. In addition to that, several improvements, many bugs fixes, and nicer API docs and examples have found their way into the 6.5.0 release.
+
+## Upgrade notes
+
+### Units of the `hitTolerance` option fixed
+
+Previously, the `hitTolerance` option of the map's `getFeaturesAtPixel()`, `forEachFeatureAtPixel()` and `hasFeatureAtPixel()` methods behaved differently depending on the `devicePixelRatio` (or the `pixelRatio` of the map), because the original value was internally multiplied by the device pixel ratio twice instead of just once. Now this is fixed. **Note**: The `hitTolerance`'s units are css pixels. The documentation was updated to reflect this.
+
+If your application adjusts for that with code like
+```js
+{ hitTolerance: 10 / devicePixelRatio, }
+```
+you'll have to change that code to
+```js
+{ hitTolerance: 10, }
+```
+## New features and improvements
+
+* New scale option in `RegularShape` and `Circle` style constructors
+* WFS 2.0.0 support
+* Added `preRender` and `postRender` methods to `WebGLLayerRenderer`
+* Added `className` constructor option in `ol/layer/Heatmap`
+* Added load events for `ol/source/Vector`
+* New `iconUrlFunction` option for `ol/format/KML`
+* Added `transition` option to `OSM` and `CartoDB` sources
+* `DragAndDrop` interaction support for formats that read ArrayBuffer sources
+* New `padding` option for `ol/View`
+* New `cancel` event for the `DragBox` interaction
+* When using `hitTolerance`, detect closest features first
+* Ability to draw `Circle` geometries with a custom renderer
+
+
+## List of all changes
+
+ * [#11859](https://github.com/openlayers/openlayers/pull/11859) - Do not fire duplicate postrender events ([@MoonE](https://github.com/MoonE))
+ * [#11858](https://github.com/openlayers/openlayers/pull/11858) - Correct documented event names for VectorSourceEvent ([@MoonE](https://github.com/MoonE))
+ * [#11844](https://github.com/openlayers/openlayers/pull/11844) - Fix Style expressions error message ([@MoonE](https://github.com/MoonE))
+ * [#11838](https://github.com/openlayers/openlayers/pull/11838) - Custom circle render ([@changqingom](https://github.com/changqingom))
+ * [#11811](https://github.com/openlayers/openlayers/pull/11811) - Better getPointResolution default when no transform available ([@mike-000](https://github.com/mike-000))
+ * [#11821](https://github.com/openlayers/openlayers/pull/11821) - Call the finishCondition when drawing points / circles ([@MoonE](https://github.com/MoonE))
+ * [#11824](https://github.com/openlayers/openlayers/pull/11824) - Add Units back to API docs ([@ahocevar](https://github.com/ahocevar))
+ * [#11817](https://github.com/openlayers/openlayers/pull/11817) - stopPropagation support for PluggableMap ([@greggian](https://github.com/greggian))
+ * [#11815](https://github.com/openlayers/openlayers/pull/11815) - Remove unnecessary line that breaks drawing with multi-touch ([@ahocevar](https://github.com/ahocevar))
+ * [#11800](https://github.com/openlayers/openlayers/pull/11800) - Fix removeLastPoint when removing last point ([@ahocevar](https://github.com/ahocevar))
+ * [#11769](https://github.com/openlayers/openlayers/pull/11769) - Modify interaction developer experience improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#11803](https://github.com/openlayers/openlayers/pull/11803) - Modify fix vertex insertion ([@MoonE](https://github.com/MoonE))
+ * [#11783](https://github.com/openlayers/openlayers/pull/11783) - Cache hit detect indexes and check closest pixels first. ([@MoonE](https://github.com/MoonE))
+ * [#11791](https://github.com/openlayers/openlayers/pull/11791) - Now that pepjs was updated, we can point to the official package ([@ahocevar](https://github.com/ahocevar))
+ * [#11790](https://github.com/openlayers/openlayers/pull/11790) - Fix attributions links for WMS layers from swisstopo ([@openlayers](https://github.com/openlayers))
+ * [#11781](https://github.com/openlayers/openlayers/pull/11781) - Pass geometry to forEachFeatureAtPixel callback ([@ahocevar](https://github.com/ahocevar))
+ * [#11778](https://github.com/openlayers/openlayers/pull/11778) - No need to adjust hitTolerance for pixel ratio twice ([@ahocevar](https://github.com/ahocevar))
+ * [#11780](https://github.com/openlayers/openlayers/pull/11780) - Add a cancel event to the DragBox interaction ([@M393](https://github.com/M393))
+ * [#11779](https://github.com/openlayers/openlayers/pull/11779) - Restore Mode.CIRCLE in Draw interaction ([@mike-000](https://github.com/mike-000))
+ * [#11753](https://github.com/openlayers/openlayers/pull/11753) - Use Mode.LINE_STRING in Draw interaction for Circle geometries ([@mike-000](https://github.com/mike-000))
+ * [#11767](https://github.com/openlayers/openlayers/pull/11767) - Improve documentation of geometry rotation ([@mike-000](https://github.com/mike-000))
+ * [#11755](https://github.com/openlayers/openlayers/pull/11755) - Add padding option for View ([@ahocevar](https://github.com/ahocevar))
+ * [#11754](https://github.com/openlayers/openlayers/pull/11754) - Fix typo that prevents Rotate icon from indicating the view rotation ([@ahocevar](https://github.com/ahocevar))
+ * [#11719](https://github.com/openlayers/openlayers/pull/11719) - Clamp EPSG:3857 y to lowest/highest possible value instead of validity extent ([@ahocevar](https://github.com/ahocevar))
+ * [#11737](https://github.com/openlayers/openlayers/pull/11737) - Write the correct SRS code in EsriJSON ([@ahocevar](https://github.com/ahocevar))
+ * [#11749](https://github.com/openlayers/openlayers/pull/11749) - Document that snapTolerance must be greater than 0 ([@ahocevar](https://github.com/ahocevar))
+ * [#11750](https://github.com/openlayers/openlayers/pull/11750) - Update TMS tileUrlFunction example in ol/source/XYZ documentation ([@mike-000](https://github.com/mike-000))
+ * [#11739](https://github.com/openlayers/openlayers/pull/11739) - Fix: Check for layer extent in CanvasLayerRenderer.getDataAtPixel ([@boeckMt](https://github.com/boeckMt))
+ * [#11748](https://github.com/openlayers/openlayers/pull/11748) - Add fetch and TextDecoder to polyfill list in README ([@mike-000](https://github.com/mike-000))
+ * [#11740](https://github.com/openlayers/openlayers/pull/11740) - Wfs bbox per feature type ([@ger-benjamin](https://github.com/ger-benjamin))
+ * [#11722](https://github.com/openlayers/openlayers/pull/11722) - Correct meaning of 'start' and 'end' text align for LTR text ([@ahocevar](https://github.com/ahocevar))
+ * [#11741](https://github.com/openlayers/openlayers/pull/11741) - Include LICENSE.md in built package ([@bz2](https://github.com/bz2))
+ * [#11718](https://github.com/openlayers/openlayers/pull/11718) - Initialize sketch point on Draw#extend() ([@ahocevar](https://github.com/ahocevar))
+ * [#11732](https://github.com/openlayers/openlayers/pull/11732) - Replace readURI with readStyleURL for KML StyleURLs ([@mike-000](https://github.com/mike-000))
+ * [#11723](https://github.com/openlayers/openlayers/pull/11723) - Drag and Drop Interaction support for formats that read ArrayBuffer sources ([@mike-000](https://github.com/mike-000))
+ * [#11724](https://github.com/openlayers/openlayers/pull/11724) - Add transition option to OSM and CartoDB sources, document default ([@MoonE](https://github.com/MoonE))
+ * [#11721](https://github.com/openlayers/openlayers/pull/11721) - Handle empty Z coordinates in KML ([@mike-000](https://github.com/mike-000))
+ * [#11587](https://github.com/openlayers/openlayers/pull/11587) - Determine orientation by actual text start and end x ([@MoonE](https://github.com/MoonE))
+ * [#11720](https://github.com/openlayers/openlayers/pull/11720) - Return to simpler and less efficient winding order algorithm ([@ahocevar](https://github.com/ahocevar))
+ * [#11715](https://github.com/openlayers/openlayers/pull/11715) - Add all symbols to the legacy build ([@ahocevar](https://github.com/ahocevar))
+ * [#11716](https://github.com/openlayers/openlayers/pull/11716) - Treat svg as binary resource ([@mike-000](https://github.com/mike-000))
+ * [#11698](https://github.com/openlayers/openlayers/pull/11698) - Draw pointer improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#11490](https://github.com/openlayers/openlayers/pull/11490) - iconUrlFunction option for ol/format/KML ([@mike-000](https://github.com/mike-000))
+ * [#11628](https://github.com/openlayers/openlayers/pull/11628) - VectorSource load events ([@simonseyock](https://github.com/simonseyock))
+ * [#11691](https://github.com/openlayers/openlayers/pull/11691) - Use Parcel v2 in copy/paste example code ([@ahocevar](https://github.com/ahocevar))
+ * [#11673](https://github.com/openlayers/openlayers/pull/11673) - Do not emulate dblclick and slingleclick on multi-touch ([@ahocevar](https://github.com/ahocevar))
+ * [#11676](https://github.com/openlayers/openlayers/pull/11676) - Fix countries.geojson Antarctica polygon so it wraps correctly ([@mike-000](https://github.com/mike-000))
+ * [#11646](https://github.com/openlayers/openlayers/pull/11646) - Ensure a unique tile key for each tile coordinate ([@ahocevar](https://github.com/ahocevar))
+ * [#11655](https://github.com/openlayers/openlayers/pull/11655) - Fix documentation of image render mode for vector tile layers ([@ahocevar](https://github.com/ahocevar))
+ * [#11668](https://github.com/openlayers/openlayers/pull/11668) - Don't try to get image data for zero sized images ([@tapioko](https://github.com/tapioko))
+ * [#11648](https://github.com/openlayers/openlayers/pull/11648) - Dwithin filter ([@virtualcitySYSTEMS](https://github.com/virtualcitySYSTEMS))
+ * [#11658](https://github.com/openlayers/openlayers/pull/11658) - Make webpack dev server run with current version ([@MoonE](https://github.com/MoonE))
+ * [#11590](https://github.com/openlayers/openlayers/pull/11590) - Export all the Event sub class ([@sbrunner](https://github.com/sbrunner))
+ * [#11594](https://github.com/openlayers/openlayers/pull/11594) - Display current OS copyright date in the Raster Reprojection example ([@mike-000](https://github.com/mike-000))
+ * [#11657](https://github.com/openlayers/openlayers/pull/11657) - Use https to avoid security warnings ([@mike-000](https://github.com/mike-000))
+ * [#11649](https://github.com/openlayers/openlayers/pull/11649) - Deal with undefined units from proj4 longlat projections ([@ahocevar](https://github.com/ahocevar))
+ * [#11403](https://github.com/openlayers/openlayers/pull/11403) - #11402 add CSS class name support for control buttons ([@cazacugmihai](https://github.com/cazacugmihai))
+ * [#11592](https://github.com/openlayers/openlayers/pull/11592) - New decluttering implementation ([@ahocevar](https://github.com/ahocevar))
+ * [#11618](https://github.com/openlayers/openlayers/pull/11618) - Update the Marker Animation example ([@mike-000](https://github.com/mike-000))
+ * [#11620](https://github.com/openlayers/openlayers/pull/11620) - Add charset to the examples html below the map ([@MoonE](https://github.com/MoonE))
+ * [#11613](https://github.com/openlayers/openlayers/pull/11613) - Allow mouse input if map is rendered in an other window ([@elnabo](https://github.com/elnabo))
+ * [#11597](https://github.com/openlayers/openlayers/pull/11597) - Improved performance when removing feature with only one Select ([@MoonE](https://github.com/MoonE))
+ * [#11607](https://github.com/openlayers/openlayers/pull/11607) - Reset attributions control to collapsible when no uncollapsible sources are visible ([@mike-000](https://github.com/mike-000))
+ * [#11609](https://github.com/openlayers/openlayers/pull/11609) - Modify interaction insert only one vertex ([@M393](https://github.com/M393))
+ * [#11605](https://github.com/openlayers/openlayers/pull/11605) - Remove context references when releasing tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#11591](https://github.com/openlayers/openlayers/pull/11591) - Make permalink example less complex ([@kannes](https://github.com/kannes))
+ * [#11569](https://github.com/openlayers/openlayers/pull/11569) - Fix binary data exports to codesandbox in examples ([@mike-000](https://github.com/mike-000))
+ * [#11579](https://github.com/openlayers/openlayers/pull/11579) - Replace Animated GIF example globe gif ([@mike-000](https://github.com/mike-000))
+ * [#11565](https://github.com/openlayers/openlayers/pull/11565) - Animated GIF example ([@mike-000](https://github.com/mike-000))
+ * [#11571](https://github.com/openlayers/openlayers/pull/11571) - Replace countryflags.io with flagcdn.com in the Style Renderer example ([@mike-000](https://github.com/mike-000))
+ * [#11568](https://github.com/openlayers/openlayers/pull/11568) - Fix raster source crash bug when using multiple threads ([@rgroothuijsen](https://github.com/rgroothuijsen))
+ * [#11563](https://github.com/openlayers/openlayers/pull/11563) - Fix end world calculation if projection is not symmetric ([@MoonE](https://github.com/MoonE))
+ * [#11561](https://github.com/openlayers/openlayers/pull/11561) - Constrain resolution when fit called without duration ([@M393](https://github.com/M393))
+ * [#11559](https://github.com/openlayers/openlayers/pull/11559) - Only draw visible worlds ([@MoonE](https://github.com/MoonE))
+ * [#11519](https://github.com/openlayers/openlayers/pull/11519) - Do not draw multipoints outside render extent ([@MoonE](https://github.com/MoonE))
+ * [#11532](https://github.com/openlayers/openlayers/pull/11532) - Make TileGrid behave as documented with extent and sizes options ([@ahocevar](https://github.com/ahocevar))
+ * [#11545](https://github.com/openlayers/openlayers/pull/11545) - Use the className param in ol.layer.Heatmap ([@fredj](https://github.com/fredj))
+ * [#11548](https://github.com/openlayers/openlayers/pull/11548) - Bind tileUrlFunction before returning it from getTileUrlFunction ([@ahocevar](https://github.com/ahocevar))
+ * [#11549](https://github.com/openlayers/openlayers/pull/11549) - Only use elementFromPoint with ShadowRoot ([@ahocevar](https://github.com/ahocevar))
+ * [#11502](https://github.com/openlayers/openlayers/pull/11502) - Fix issue with WMS Capabilities containing a single layer ([@jbelien](https://github.com/jbelien))
+ * [#11540](https://github.com/openlayers/openlayers/pull/11540) - Avoid unnecessary transform in the MVT format ([@gberaudo](https://github.com/gberaudo))
+ * [#11537](https://github.com/openlayers/openlayers/pull/11537) - Add rotation and rotateWithView to ol/style/Circle clone method and options ([@mike-000](https://github.com/mike-000))
+ * [#11543](https://github.com/openlayers/openlayers/pull/11543) - wmts matrixset null pointer fix and improved handling of Identifier ([@sweco-dkjesh](https://github.com/sweco-dkjesh))
+ * [#11509](https://github.com/openlayers/openlayers/pull/11509) - Add urn:x-ogc:def:crs:EPSG:6.6:4326 as WGS84 proj identifier ([@fgravin](https://github.com/fgravin))
+ * [#11521](https://github.com/openlayers/openlayers/pull/11521) - Do not use fractional pixel ratio for rendering vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#11517](https://github.com/openlayers/openlayers/pull/11517) - Make clockwise check work when coordinates are duplicated ([@ahocevar](https://github.com/ahocevar))
+ * [#11501](https://github.com/openlayers/openlayers/pull/11501) - Empty this.canvas_ for all pixel ratios when render() is called ([@mike-000](https://github.com/mike-000))
+ * [#11471](https://github.com/openlayers/openlayers/pull/11471) - Feature: added preRender and postRender methods to WebGLLayerRenderer… ([@MichaelLangbein](https://github.com/MichaelLangbein))
+ * [#11491](https://github.com/openlayers/openlayers/pull/11491) - Cosmetic fix to doc (missing closing quote) ([@mike-000](https://github.com/mike-000))
+ * [#11488](https://github.com/openlayers/openlayers/pull/11488) - "Layer Z-Index" example bugfix ([@michalzielanski](https://github.com/michalzielanski))
+ * [#11486](https://github.com/openlayers/openlayers/pull/11486) - guard for null ([@davidiamaf](https://github.com/davidiamaf))
+ * [#11481](https://github.com/openlayers/openlayers/pull/11481) - Adding original properties to cloned geometry ([@michalzielanski](https://github.com/michalzielanski))
+ * [#11404](https://github.com/openlayers/openlayers/pull/11404) - Add security scan ([@tschaub](https://github.com/tschaub))
+ * [#11470](https://github.com/openlayers/openlayers/pull/11470) - Fix pointer events polyfill link ([@ahocevar](https://github.com/ahocevar))
+ * [#11467](https://github.com/openlayers/openlayers/pull/11467) - Style renderer example ([@ahocevar](https://github.com/ahocevar))
+ * [#11455](https://github.com/openlayers/openlayers/pull/11455) - Apidoc improvements ([@MoonE](https://github.com/MoonE))
+ * [#11474](https://github.com/openlayers/openlayers/pull/11474) - fix: modify rbush package import ([@haasz](https://github.com/haasz))
+ * [#11472](https://github.com/openlayers/openlayers/pull/11472) - Typescript 4.0.2 ([@ahocevar](https://github.com/ahocevar))
+ * [#11454](https://github.com/openlayers/openlayers/pull/11454) - VectorTile source projection has to match the view projection ([@ahocevar](https://github.com/ahocevar))
+ * [#11438](https://github.com/openlayers/openlayers/pull/11438) - Better scroll behaviour for apidocs ([@MoonE](https://github.com/MoonE))
+ * [#11446](https://github.com/openlayers/openlayers/pull/11446) - Checks before calling handleEvent on interactions ([@ahocevar](https://github.com/ahocevar))
+ * [#11305](https://github.com/openlayers/openlayers/pull/11305) - PluggableMap: avoid crash when multiple interactions are removed ([@megawac](https://github.com/megawac))
+ * [#11433](https://github.com/openlayers/openlayers/pull/11433) - Fix typo in module name ([@fredj](https://github.com/fredj))
+ * [#11419](https://github.com/openlayers/openlayers/pull/11419) - WFS 2.0.0 support ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#11418](https://github.com/openlayers/openlayers/pull/11418) - Icon color default to composite operation ([@MoonE](https://github.com/MoonE))
+ * [#11416](https://github.com/openlayers/openlayers/pull/11416) - Examples add labels to inputs ([@MoonE](https://github.com/MoonE))
+ * [#11417](https://github.com/openlayers/openlayers/pull/11417) - Fix sort order of examples search results ([@ahocevar](https://github.com/ahocevar))
+ * [#11413](https://github.com/openlayers/openlayers/pull/11413) - Include scale option in RegularShape and Circle style constructors ([@mike-000](https://github.com/mike-000))
+ * [#11401](https://github.com/openlayers/openlayers/pull/11401) - Ensure image extent is valid when scale is negative ([@mike-000](https://github.com/mike-000))
+ * [#11395](https://github.com/openlayers/openlayers/pull/11395) - Correct inchesPerMeter and add tests for ScaleBar text ([@mike-000](https://github.com/mike-000))
+ * [#11407](https://github.com/openlayers/openlayers/pull/11407) - Support deprecated coordinates element for GML3+ formats ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#11398](https://github.com/openlayers/openlayers/pull/11398) - Fix link to workshop / download ([@MoonE](https://github.com/MoonE))
+ * [#11391](https://github.com/openlayers/openlayers/pull/11391) - Simplify scale calculation used for WMS getLegendUrl() ([@mike-000](https://github.com/mike-000))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#11851](https://github.com/openlayers/openlayers/pull/11851) - Bump @babel/preset-env from 7.12.10 to 7.12.11 ([@openlayers](https://github.com/openlayers))
+ * [#11850](https://github.com/openlayers/openlayers/pull/11850) - Bump marked from 1.2.6 to 1.2.7 ([@openlayers](https://github.com/openlayers))
+ * [#11852](https://github.com/openlayers/openlayers/pull/11852) - Bump rollup from 2.35.0 to 2.35.1 ([@openlayers](https://github.com/openlayers))
+ * [#11853](https://github.com/openlayers/openlayers/pull/11853) - Bump copy-webpack-plugin from 6.4.0 to 6.4.1 ([@openlayers](https://github.com/openlayers))
+ * [#11849](https://github.com/openlayers/openlayers/pull/11849) - Bump eslint from 7.15.0 to 7.16.0 ([@openlayers](https://github.com/openlayers))
+ * [#11848](https://github.com/openlayers/openlayers/pull/11848) - Bump ol-mapbox-style from 6.2.1 to 6.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#11828](https://github.com/openlayers/openlayers/pull/11828) - Bump ol-mapbox-style from 6.1.4 to 6.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#11830](https://github.com/openlayers/openlayers/pull/11830) - Bump jsdoc-plugin-typescript from 2.0.5 to 2.0.6 ([@openlayers](https://github.com/openlayers))
+ * [#11829](https://github.com/openlayers/openlayers/pull/11829) - Bump typescript from 4.1.2 to 4.1.3 ([@openlayers](https://github.com/openlayers))
+ * [#11833](https://github.com/openlayers/openlayers/pull/11833) - Bump rollup from 2.34.2 to 2.35.0 ([@openlayers](https://github.com/openlayers))
+ * [#11834](https://github.com/openlayers/openlayers/pull/11834) - Bump copy-webpack-plugin from 6.3.2 to 6.4.0 ([@openlayers](https://github.com/openlayers))
+ * [#11832](https://github.com/openlayers/openlayers/pull/11832) - Bump @babel/preset-env from 7.12.7 to 7.12.10 ([@openlayers](https://github.com/openlayers))
+ * [#11835](https://github.com/openlayers/openlayers/pull/11835) - Bump sinon from 9.2.1 to 9.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#11831](https://github.com/openlayers/openlayers/pull/11831) - Bump marked from 1.2.5 to 1.2.6 ([@openlayers](https://github.com/openlayers))
+ * [#11827](https://github.com/openlayers/openlayers/pull/11827) - Bump @babel/core from 7.12.9 to 7.12.10 ([@openlayers](https://github.com/openlayers))
+ * [#11820](https://github.com/openlayers/openlayers/pull/11820) - [Security] Bump ini from 1.3.5 to 1.3.7 ([@openlayers](https://github.com/openlayers))
+ * [#11809](https://github.com/openlayers/openlayers/pull/11809) - Bump yargs from 16.1.1 to 16.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11808](https://github.com/openlayers/openlayers/pull/11808) - Bump worker-loader from 3.0.5 to 3.0.6 ([@openlayers](https://github.com/openlayers))
+ * [#11807](https://github.com/openlayers/openlayers/pull/11807) - Bump eslint from 7.14.0 to 7.15.0 ([@openlayers](https://github.com/openlayers))
+ * [#11806](https://github.com/openlayers/openlayers/pull/11806) - Bump rollup from 2.34.0 to 2.34.2 ([@openlayers](https://github.com/openlayers))
+ * [#11786](https://github.com/openlayers/openlayers/pull/11786) - Bump rollup from 2.33.3 to 2.34.0 ([@openlayers](https://github.com/openlayers))
+ * [#11787](https://github.com/openlayers/openlayers/pull/11787) - Bump babel-loader from 8.2.1 to 8.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#11785](https://github.com/openlayers/openlayers/pull/11785) - Bump @babel/core from 7.12.7 to 7.12.9 ([@openlayers](https://github.com/openlayers))
+ * [#11762](https://github.com/openlayers/openlayers/pull/11762) - Bump typescript from 4.0.5 to 4.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#11764](https://github.com/openlayers/openlayers/pull/11764) - Bump copy-webpack-plugin from 6.3.1 to 6.3.2 ([@openlayers](https://github.com/openlayers))
+ * [#11758](https://github.com/openlayers/openlayers/pull/11758) - Bump rollup from 2.33.2 to 2.33.3 ([@openlayers](https://github.com/openlayers))
+ * [#11761](https://github.com/openlayers/openlayers/pull/11761) - Bump @babel/core from 7.12.3 to 7.12.7 ([@openlayers](https://github.com/openlayers))
+ * [#11760](https://github.com/openlayers/openlayers/pull/11760) - Bump proj4 from 2.6.2 to 2.6.3 ([@openlayers](https://github.com/openlayers))
+ * [#11763](https://github.com/openlayers/openlayers/pull/11763) - Bump eslint from 7.13.0 to 7.14.0 ([@openlayers](https://github.com/openlayers))
+ * [#11759](https://github.com/openlayers/openlayers/pull/11759) - Bump @babel/preset-env from 7.12.1 to 7.12.7 ([@openlayers](https://github.com/openlayers))
+ * [#11757](https://github.com/openlayers/openlayers/pull/11757) - Bump marked from 1.2.4 to 1.2.5 ([@openlayers](https://github.com/openlayers))
+ * [#11756](https://github.com/openlayers/openlayers/pull/11756) - Bump puppeteer from 5.4.1 to 5.5.0 ([@openlayers](https://github.com/openlayers))
+ * [#11747](https://github.com/openlayers/openlayers/pull/11747) - Bump rollup from 2.33.1 to 2.33.2 ([@openlayers](https://github.com/openlayers))
+ * [#11746](https://github.com/openlayers/openlayers/pull/11746) - Bump babel-loader from 8.1.0 to 8.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#11745](https://github.com/openlayers/openlayers/pull/11745) - Bump yargs from 16.1.0 to 16.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#11744](https://github.com/openlayers/openlayers/pull/11744) - Bump webpack-dev-middleware from 4.0.0 to 4.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#11743](https://github.com/openlayers/openlayers/pull/11743) - Bump copy-webpack-plugin from 6.3.0 to 6.3.1 ([@openlayers](https://github.com/openlayers))
+ * [#11742](https://github.com/openlayers/openlayers/pull/11742) - Bump marked from 1.2.3 to 1.2.4 ([@openlayers](https://github.com/openlayers))
+ * [#11731](https://github.com/openlayers/openlayers/pull/11731) - Bump mocha from 8.2.0 to 8.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#11730](https://github.com/openlayers/openlayers/pull/11730) - Bump marked from 1.2.2 to 1.2.3 ([@openlayers](https://github.com/openlayers))
+ * [#11729](https://github.com/openlayers/openlayers/pull/11729) - Bump eslint from 7.12.1 to 7.13.0 ([@openlayers](https://github.com/openlayers))
+ * [#11728](https://github.com/openlayers/openlayers/pull/11728) - Bump webpack-cli from 4.1.0 to 4.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11727](https://github.com/openlayers/openlayers/pull/11727) - Bump karma-firefox-launcher from 2.0.0 to 2.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11726](https://github.com/openlayers/openlayers/pull/11726) - Bump copy-webpack-plugin from 6.2.1 to 6.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#11708](https://github.com/openlayers/openlayers/pull/11708) - Bump rollup from 2.32.1 to 2.33.1 ([@openlayers](https://github.com/openlayers))
+ * [#11705](https://github.com/openlayers/openlayers/pull/11705) - Bump webpack-dev-middleware from 3.7.2 to 4.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11706](https://github.com/openlayers/openlayers/pull/11706) - Bump url-polyfill from 1.1.11 to 1.1.12 ([@openlayers](https://github.com/openlayers))
+ * [#11707](https://github.com/openlayers/openlayers/pull/11707) - Bump typescript from 4.0.3 to 4.0.5 ([@openlayers](https://github.com/openlayers))
+ * [#11709](https://github.com/openlayers/openlayers/pull/11709) - Bump sinon from 9.2.0 to 9.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#11710](https://github.com/openlayers/openlayers/pull/11710) - Bump puppeteer from 5.4.0 to 5.4.1 ([@openlayers](https://github.com/openlayers))
+ * [#11711](https://github.com/openlayers/openlayers/pull/11711) - Bump eslint from 7.12.0 to 7.12.1 ([@openlayers](https://github.com/openlayers))
+ * [#11689](https://github.com/openlayers/openlayers/pull/11689) - Bump pngjs from 5.0.0 to 6.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11686](https://github.com/openlayers/openlayers/pull/11686) - Bump shx from 0.3.2 to 0.3.3 ([@openlayers](https://github.com/openlayers))
+ * [#11683](https://github.com/openlayers/openlayers/pull/11683) - Bump puppeteer from 5.3.1 to 5.4.0 ([@openlayers](https://github.com/openlayers))
+ * [#11682](https://github.com/openlayers/openlayers/pull/11682) - Bump karma-firefox-launcher from 1.3.0 to 2.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11684](https://github.com/openlayers/openlayers/pull/11684) - Bump marked from 1.2.0 to 1.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#11685](https://github.com/openlayers/openlayers/pull/11685) - Bump rollup from 2.32.0 to 2.32.1 ([@openlayers](https://github.com/openlayers))
+ * [#11688](https://github.com/openlayers/openlayers/pull/11688) - Bump webpack-cli from 4.0.0 to 4.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11687](https://github.com/openlayers/openlayers/pull/11687) - Bump eslint from 7.11.0 to 7.12.0 ([@openlayers](https://github.com/openlayers))
+ * [#11666](https://github.com/openlayers/openlayers/pull/11666) - Bump worker-loader from 3.0.4 to 3.0.5 ([@openlayers](https://github.com/openlayers))
+ * [#11665](https://github.com/openlayers/openlayers/pull/11665) - Bump url-polyfill from 1.1.10 to 1.1.11 ([@openlayers](https://github.com/openlayers))
+ * [#11664](https://github.com/openlayers/openlayers/pull/11664) - Bump @babel/core from 7.11.6 to 7.12.3 ([@openlayers](https://github.com/openlayers))
+ * [#11663](https://github.com/openlayers/openlayers/pull/11663) - Bump yargs from 16.0.3 to 16.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11662](https://github.com/openlayers/openlayers/pull/11662) - Bump mocha from 8.1.3 to 8.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11661](https://github.com/openlayers/openlayers/pull/11661) - Bump rollup from 2.29.0 to 2.32.0 ([@openlayers](https://github.com/openlayers))
+ * [#11660](https://github.com/openlayers/openlayers/pull/11660) - Bump @babel/preset-env from 7.11.5 to 7.12.1 ([@openlayers](https://github.com/openlayers))
+ * [#11643](https://github.com/openlayers/openlayers/pull/11643) - Bump terser-webpack-plugin from 4.2.2 to 4.2.3 ([@openlayers](https://github.com/openlayers))
+ * [#11645](https://github.com/openlayers/openlayers/pull/11645) - Bump webpack-cli from 3.3.12 to 4.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11644](https://github.com/openlayers/openlayers/pull/11644) - Bump copy-webpack-plugin from 6.2.0 to 6.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#11642](https://github.com/openlayers/openlayers/pull/11642) - Bump sinon from 9.1.0 to 9.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11641](https://github.com/openlayers/openlayers/pull/11641) - Bump rollup from 2.28.2 to 2.29.0 ([@openlayers](https://github.com/openlayers))
+ * [#11640](https://github.com/openlayers/openlayers/pull/11640) - Bump worker-loader from 3.0.3 to 3.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#11639](https://github.com/openlayers/openlayers/pull/11639) - Bump eslint from 7.10.0 to 7.11.0 ([@openlayers](https://github.com/openlayers))
+ * [#11622](https://github.com/openlayers/openlayers/pull/11622) - Bump sinon from 9.0.3 to 9.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11623](https://github.com/openlayers/openlayers/pull/11623) - Bump copy-webpack-plugin from 6.1.1 to 6.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11603](https://github.com/openlayers/openlayers/pull/11603) - Bump rollup from 2.28.1 to 2.28.2 ([@openlayers](https://github.com/openlayers))
+ * [#11602](https://github.com/openlayers/openlayers/pull/11602) - Bump marked from 1.1.1 to 1.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11601](https://github.com/openlayers/openlayers/pull/11601) - Bump puppeteer from 5.3.0 to 5.3.1 ([@openlayers](https://github.com/openlayers))
+ * [#11600](https://github.com/openlayers/openlayers/pull/11600) - Bump eslint from 7.9.0 to 7.10.0 ([@openlayers](https://github.com/openlayers))
+ * [#11599](https://github.com/openlayers/openlayers/pull/11599) - Bump worker-loader from 3.0.2 to 3.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#11598](https://github.com/openlayers/openlayers/pull/11598) - Bump karma from 5.2.2 to 5.2.3 ([@openlayers](https://github.com/openlayers))
+ * [#11578](https://github.com/openlayers/openlayers/pull/11578) - Bump rollup from 2.26.11 to 2.28.1 ([@openlayers](https://github.com/openlayers))
+ * [#11576](https://github.com/openlayers/openlayers/pull/11576) - Bump terser-webpack-plugin from 4.2.0 to 4.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#11575](https://github.com/openlayers/openlayers/pull/11575) - Bump typescript from 4.0.2 to 4.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#11577](https://github.com/openlayers/openlayers/pull/11577) - Bump copy-webpack-plugin from 6.1.0 to 6.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#11574](https://github.com/openlayers/openlayers/pull/11574) - Bump jsdoc from 3.6.5 to 3.6.6 ([@openlayers](https://github.com/openlayers))
+ * [#11573](https://github.com/openlayers/openlayers/pull/11573) - Bump webpack from 4.44.1 to 4.44.2 ([@openlayers](https://github.com/openlayers))
+ * [#11558](https://github.com/openlayers/openlayers/pull/11558) - Bump yargs from 15.4.1 to 16.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#11557](https://github.com/openlayers/openlayers/pull/11557) - Bump eslint from 7.8.1 to 7.9.0 ([@openlayers](https://github.com/openlayers))
+ * [#11556](https://github.com/openlayers/openlayers/pull/11556) - Bump puppeteer from 5.2.1 to 5.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#11555](https://github.com/openlayers/openlayers/pull/11555) - Bump karma from 5.2.1 to 5.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#11554](https://github.com/openlayers/openlayers/pull/11554) - Bump terser-webpack-plugin from 4.1.0 to 4.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#11553](https://github.com/openlayers/openlayers/pull/11553) - Bump rollup from 2.26.10 to 2.26.11 ([@openlayers](https://github.com/openlayers))
+ * [#11531](https://github.com/openlayers/openlayers/pull/11531) - Bump rollup from 2.26.8 to 2.26.10 ([@openlayers](https://github.com/openlayers))
+ * [#11530](https://github.com/openlayers/openlayers/pull/11530) - Bump @babel/preset-env from 7.11.0 to 7.11.5 ([@openlayers](https://github.com/openlayers))
+ * [#11529](https://github.com/openlayers/openlayers/pull/11529) - Bump rollup-plugin-terser from 7.0.1 to 7.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#11528](https://github.com/openlayers/openlayers/pull/11528) - Bump @babel/core from 7.11.4 to 7.11.6 ([@openlayers](https://github.com/openlayers))
+ * [#11526](https://github.com/openlayers/openlayers/pull/11526) - Bump eslint from 7.7.0 to 7.8.1 ([@openlayers](https://github.com/openlayers))
+ * [#11527](https://github.com/openlayers/openlayers/pull/11527) - Bump karma from 5.1.1 to 5.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#11525](https://github.com/openlayers/openlayers/pull/11525) - Bump copy-webpack-plugin from 6.0.4 to 6.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11515](https://github.com/openlayers/openlayers/pull/11515) - [Security] Bump http-proxy from 1.17.0 to 1.18.1 ([@openlayers](https://github.com/openlayers))
+ * [#11504](https://github.com/openlayers/openlayers/pull/11504) - [Security] Bump bl from 4.0.2 to 4.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#11496](https://github.com/openlayers/openlayers/pull/11496) - Bump mocha from 8.1.1 to 8.1.3 ([@openlayers](https://github.com/openlayers))
+ * [#11495](https://github.com/openlayers/openlayers/pull/11495) - Bump rollup-plugin-terser from 7.0.0 to 7.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#11494](https://github.com/openlayers/openlayers/pull/11494) - Bump copy-webpack-plugin from 6.0.3 to 6.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#11493](https://github.com/openlayers/openlayers/pull/11493) - Bump rollup from 2.26.5 to 2.26.8 ([@openlayers](https://github.com/openlayers))
+ * [#11462](https://github.com/openlayers/openlayers/pull/11462) - Bump rollup from 2.26.3 to 2.26.5 ([@openlayers](https://github.com/openlayers))
+ * [#11460](https://github.com/openlayers/openlayers/pull/11460) - Bump karma-sourcemap-loader from 0.3.7 to 0.3.8 ([@openlayers](https://github.com/openlayers))
+ * [#11459](https://github.com/openlayers/openlayers/pull/11459) - Bump ol-mapbox-style from 6.1.3 to 6.1.4 ([@openlayers](https://github.com/openlayers))
+ * [#11458](https://github.com/openlayers/openlayers/pull/11458) - Bump worker-loader from 3.0.1 to 3.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#11457](https://github.com/openlayers/openlayers/pull/11457) - Bump @babel/core from 7.11.1 to 7.11.4 ([@openlayers](https://github.com/openlayers))
+ * [#11443](https://github.com/openlayers/openlayers/pull/11443) - Bump eslint from 7.6.0 to 7.7.0 ([@openlayers](https://github.com/openlayers))
+ * [#11441](https://github.com/openlayers/openlayers/pull/11441) - Bump terser-webpack-plugin from 4.0.0 to 4.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11440](https://github.com/openlayers/openlayers/pull/11440) - Bump rollup from 2.23.1 to 2.26.3 ([@openlayers](https://github.com/openlayers))
+ * [#11439](https://github.com/openlayers/openlayers/pull/11439) - Bump sinon from 9.0.2 to 9.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#11442](https://github.com/openlayers/openlayers/pull/11442) - Bump ol-mapbox-style from 6.1.2 to 6.1.3 ([@openlayers](https://github.com/openlayers))
+ * [#11426](https://github.com/openlayers/openlayers/pull/11426) - Bump @babel/core from 7.11.0 to 7.11.1 ([@openlayers](https://github.com/openlayers))
+ * [#11425](https://github.com/openlayers/openlayers/pull/11425) - Bump rollup from 2.23.0 to 2.23.1 ([@openlayers](https://github.com/openlayers))
+ * [#11424](https://github.com/openlayers/openlayers/pull/11424) - Bump rollup-plugin-terser from 6.1.0 to 7.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11423](https://github.com/openlayers/openlayers/pull/11423) - Bump worker-loader from 3.0.0 to 3.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#11422](https://github.com/openlayers/openlayers/pull/11422) - Bump terser-webpack-plugin from 3.0.8 to 4.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11421](https://github.com/openlayers/openlayers/pull/11421) - Bump mocha from 8.1.0 to 8.1.1 ([@openlayers](https://github.com/openlayers))
+
+
+</details>
--- a/config/jsdoc/api/plugins/inline-options.js
+++ b/config/jsdoc/api/plugins/inline-options.js
@@ -1,5 +1,5 @@
 /**
- * @filedesc
+ * @fileoverview
 * Inlines option params from typedefs
 */

--- a/config/jsdoc/api/plugins/markdown.js
+++ b/config/jsdoc/api/plugins/markdown.js
@@ -1,7 +1,7 @@
 /**
 * Modified from JSDoc's plugins/markdown and lib/jsdoc/util/markdown modules
 * (see https://github.com/jsdoc3/jsdoc/), which are licensed under the Apache 2
- * license (see http://www.apache.org/licenses/LICENSE-2.0).
+ * license (see https://www.apache.org/licenses/LICENSE-2.0).
 *
 * This version does not protect http(s) urls from being turned into links, and
 * works around an issue with `~` characters in module paths by escaping them.
--- a/config/jsdoc/api/readme.md
+++ b/config/jsdoc/api/readme.md
@@ -1,6 +1,6 @@
 # API Documentation

-This directory contains configuration (`conf.json`), static content (`index.md`), template (`template/`) and plugins (`plugins/`) for the [JSDoc3](http://usejsdoc.org/) API generator.
+This directory contains configuration (`conf.json`), static content (`index.md`), template (`template/`) and plugins (`plugins/`) for the [JSDoc3](https://jsdoc.app/) API generator.

 ## Documenting the source code

--- a/config/jsdoc/api/template/README.md
+++ b/config/jsdoc/api/template/README.md
@@ -1,3 +1,3 @@
 This template is based on the [Jaguar](https://github.com/davidshimjs/jaguarjs/tree/master/docs/templates/jaguar) template. [JaguarJS](https://github.com/davidshimjs/jaguarjs) is licensed under the [LGPL license](https://github.com/davidshimjs/jaguarjs/tree/master/LICENSE).

-The default template for JSDoc 3 uses: [the Taffy Database library](http://taffydb.com/) and the [Underscore Template library](http://documentcloud.github.com/underscore/#template).
+The default template for JSDoc 3 uses: [the Taffy Database library](https://taffydb.com/) and the [Underscore Template library](https://underscorejs.org/#template).
--- a/config/jsdoc/api/template/publish.js
+++ b/config/jsdoc/api/template/publish.js
@@ -190,9 +190,9 @@ function generateSourceFiles(sourceFiles) {
 * for display purposes. This function mutates the original arrays.
 *
 * @private
- * @param {Array<module:jsdoc/doclet.Doclet>} doclets - The array of classes and functions to
+ * @param {Array<module:jsdoc/doclet.Doclet>} doclets The array of classes and functions to
 * check.
- * @param {Array<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
+ * @param {Array<module:jsdoc/doclet.Doclet>} modules The array of module doclets to search.
 */
 function attachModuleSymbols(doclets, modules) {
  const symbols = {};
@@ -322,7 +322,7 @@ function buildNav(members) {
 }

 /**
- * @param {Object} taffyData See <http://taffydb.com/>.
+ * @param {Object} taffyData See {@link https://taffydb.com/}.
 * @param {Object} opts Options.
 * @param {Object} tutorials Tutorials.
 */
--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -36,7 +36,7 @@ $(function () {
      }
      // If everything else is equal, prefer shorter names, and prefer classes over modules
      let weight = 10000 + matchedItem.dataset.longname.length - name.length * 100;
-      if (name.match(re.begin)) {
+      if (re.begin.test(name)) {
        weight += 10000;
        if (re.baseName.test(name)) {
          weight += 10000;
@@ -79,6 +79,7 @@ $(function () {
      $currentItem: currentItem ? $(currentItem) : undefined,
      lastSearchTerm: undefined,
      lastState: {},
+      lastClasses: undefined,
      getClassList: function () {
        return $classItems || ($classItems = $navList.find('li.item'));
      },
@@ -143,9 +144,9 @@ $(function () {
      if (state === 'search-empty' && search.$currentItem) {
        search.manualToggle(search.$currentItem, true);
      }
+      search.lastClasses = undefined;
    } else {
      search.changeStateClass('searching');
-      searchTerm = searchTerm.toLowerCase();
      const beginOnly = searchTerm.length < minInputForFullText;
      const getSearchWeight = getWeightFunction(searchTerm, allowRegex);
      const re = constructRegex(searchTerm, function (searchTerm) {
@@ -197,13 +198,14 @@ $(function () {
          li.classList.add('match');
        }
      });
+      classes.sort(function (a, b) {
+        return b.weight - a.weight;
+      });
      clearOldMatches(search.lastState, searchState);
      search.lastState = searchState;
+      search.lastClasses = classes;

-      classes.sort(function (a, b) {
-        return a.weight - b.weight;
-      });
-      for (let i = classes.length - 1; i >= 0; --i) {
+      for (let i = 0, ii = classes.length; i < ii; ++i) {
        navList.appendChild(classes[i].item);
      }
    }
@@ -217,15 +219,24 @@ $(function () {
      key = setTimeout(function () {
        key = undefined;

-        const searchTerm = searchInput.value;
-        doSearch(searchTerm);
+        doSearch(searchInput.value);
      }, 0);
    }
  }

  // Search Items
  searchInput.addEventListener('input', queueSearch);
+  searchInput.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') {
+      doSearch(searchInput.value);
+      const first = search.lastClasses ? search.lastClasses[0].item : null;
+      if (first) {
+        window.location.href = first.querySelector('.title a').href;
+      }
+    }
+  });
  doSearch(searchInput.value);
+  searchInput.focus();

  // Toggle when click an item element
  search.$navList.on('click', '.toggle', function (e) {
@@ -237,33 +248,8 @@ $(function () {
    search.manualToggle(clsItem, show);
  });

-//  Auto resizing on navigation
-  var _onResize = function () {
-    var height_w = $(window).height();
-    var height_s = $('section').height();
-    var $el = $('.navigation');
-    var dif_h = height_w - height_s;
-    if (window.matchMedia("(min-width: 768px)").matches) {
-      if (dif_h >=0){
-         $('.navigation').height(height_s+dif_h+74);
-         $('.navigation-list').height(height_s+dif_h)
-      }
-      else {
-         $('.navigation').height(height_s+74);
-         $('.navigation-list').height(height_s-60);
-      }
-    }
-    else{
-      $('.navigation').height(220);
-      $('.navigation-list').height(140);
-    }
-  }
-  $(window).on('resize', _onResize);
-  _onResize();
-
-  var currentVersion = document.getElementById('package-version').innerHTML;
-
  // warn about outdated version
+  var currentVersion = document.getElementById('package-version').innerHTML;
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
    return response.json();
@@ -288,15 +274,4 @@ $(function () {
      }
    }
  });
-
-  // create source code links to github
-  var srcLinks = $('div.tag-source');
-  srcLinks.each(function(i, el) {
-    var textParts = el.innerHTML.trim().split(', ');
-    var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
-      textParts[0];
-    el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
-      '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
-      textParts[1] + '</a>';
-  });
 });
--- a/config/jsdoc/api/template/static/styles/jaguar.css
+++ b/config/jsdoc/api/template/static/styles/jaguar.css
@@ -18,7 +18,7 @@
 }

 body {
-  padding-top: 55px;
+  padding-top: 54px;
 }
 .nameContainer .anchor {
  padding-top: 70px;
@@ -61,24 +61,43 @@ ol {
 li {
  list-style-type: none;
 }
-::-webkit-scrollbar {
-  width: 8px;
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 4px;
+#wrap {
+  display: flex;
+  flex-flow: row;
 }
 .navigation {
  background-color: #2a2a2a;
 }
-@media (max-width:768px) {
+.navigation-list {
+  padding: 0 15px 0 15px;
+}
+@supports (position: sticky) {
  .navigation {
-      max-height:220px;
-    }
-    .navigation-list{
-      height:140px;
-    }
+    position: sticky;
+    top: 54px;
+    height: calc(100vh - 54px);
+  }
+  .navigation-list {
+    overflow: auto;
+    /* 54px navbar height */
+    /* 4.25rem + 2px  searchbox height */
+    /* 25px navigation padding */
+    height: calc(100vh - 54px - 4.25rem - 2px - 25px);
+  }
+}
+@media (max-width: 768px) {
+  #wrap {
+    flex-flow: column;
+  }
+  .navigation {
+    height: inherit;
+    position: inherit;
+  }
+  .navigation-list {
+    overflow: auto;
+    max-height: 33vh;
+    height: inherit;
+  }
 }

 .navigation .applicationName {
@@ -107,10 +126,8 @@ li {
  color: #fff;
  border-color: #555;
 }
-.navigation .navigation-list {
-  padding: 10px 15px 0 15px;
-  position: relative;
-  overflow: auto;
+.navigation .navigation-list-wrapper {
+  padding: 10px 0 15px 0;
  width: 100%;
 }
 .navigation li.item {
@@ -318,8 +335,8 @@ span.type-signature.static {
 }
 .main .nameContainer {
  position: relative;
-  margin-top: 20px;
-  padding-top: 5px;
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
  border-top: 2px solid #1F6B75;
 }
 .main .nameContainer .inherited {
@@ -337,7 +354,7 @@ span.type-signature.static {
@media (min-width: 768px) {
  .main .nameContainer .tag-source {
    position: absolute;
-    top: 0.2rem;
+    top: 1.2rem;
    right: 0;
    font-size: 0.8rem;
  }
--- a/config/jsdoc/api/template/tmpl/container.tmpl
+++ b/config/jsdoc/api/template/tmpl/container.tmpl
@@ -54,11 +54,15 @@
 <article>
    <div class="container-overview">
    <?js if (doc.kind === 'module' && doc.module) { ?>
-        <?js= self.partial('method.tmpl', doc.module) ?>
+        <dl>
+            <?js= self.partial('method.tmpl', doc.module) ?>
+        </dl>
    <?js } ?>

    <?js if (doc.kind === 'class') { ?>
-        <?js= self.partial('method.tmpl', doc) ?>
+        <dl>
+            <?js= self.partial('method.tmpl', doc) ?>
+        </dl>
    <?js } else { ?>
        <?js if (doc.description) { ?>
            <div class="description"><?js= doc.description ?></div>
--- a/config/jsdoc/api/template/tmpl/layout.tmpl
+++ b/config/jsdoc/api/template/tmpl/layout.tmpl
@@ -4,6 +4,7 @@ var version = obj.packageInfo.version;
 <!DOCTYPE html>
 <html lang="en">
  <head>
+    <meta charset="utf-8">
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
@@ -61,7 +62,6 @@ var version = obj.packageInfo.version;
      })
    });
    </script>
-    <meta charset="utf-8">
    <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
    <script src="scripts/prettify/prettify.js"> </script>
--- a/config/jsdoc/api/template/tmpl/method.tmpl
+++ b/config/jsdoc/api/template/tmpl/method.tmpl
@@ -1,10 +1,16 @@
 <?js
 var data = obj;
 var self = this;
+var version = self.find({kind: 'package' })[0].version;
+if (/-dev$/.test(version)) {
+    version = 'main';
+} else {
+    version = 'v' + version;
+}
 ?>
 <dt class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
+    <?js if (data.stability || kind !== 'class') { ?>
    <div class="nameContainer<?js if (data.inherited) { ?> inherited<?js } ?>">
-        <?js if (data.stability || kind !== 'class') { ?>
        <div class="anchor" id="<?js= id ?>">
        </div>
        <h4 class="name">
@@ -16,11 +22,12 @@ var self = this;
        </h4>
        <?js if (data.meta) {?>
        <div class="tag-source">
-            <?js= self.linkto(meta.filename) ?>, <?js= self.linkto(meta.filename, 'line ' + meta.lineno, null, 'line' + meta.lineno) ?>
+            <a href="https://github.com/openlayers/openlayers/blob/<?js= version ?>/src/ol/<?js= meta.filename ?>"><?js= meta.filename ?></a>,
+            <a href="https://github.com/openlayers/openlayers/blob/<?js= version ?>/src/ol/<?js= meta.filename ?>#L<?js= meta.lineno ?>">line <?js= meta.lineno ?></a>
        </div>
        <?js } ?>
-        <?js } ?>
    </div>
+    <?js } ?>
    <?js if (data.summary) { ?>
    <p class="summary"><?js= summary ?></p>
    <?js } ?>
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -51,20 +51,24 @@ function listContent(item, title, listItemPrinter) {
 }
 ?>
 <div class="navigation col-md-4 col-lg-3">
-    <div class="search">
-        <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
+    <div class="search-wrapper">
+        <div class="search">
+            <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
+        </div>
+    </div>
+    <div class="navigation-list-wrapper">
+        <ul class="navigation-list search-empty"><?js
+            this.nav.forEach(function (item) { ?>
+            <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
+                <span class="title toggle">
+                    <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
+                    <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
+                </span><?js
+                    listContent(item, 'Members', printListItem);
+                    listContent(item, 'Typedefs', printListItemWithStability);
+                    listContent(item, 'Methods', printListItemWithStability);
+                    listContent(item, 'Fires', printFiresListItem);
+            }); ?>
+        </ul>
    </div>
-    <ul class="navigation-list search-empty"><?js
-        this.nav.forEach(function (item) { ?>
-        <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
-            <span class="title toggle">
-                <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
-                <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
-            </span><?js
-                listContent(item, 'Members', printListItem);
-                listContent(item, 'Typedefs', printListItemWithStability);
-                listContent(item, 'Methods', printListItemWithStability);
-                listContent(item, 'Fires', printFiresListItem);
-        }); ?>
-    </ul>
 </div>
--- a/config/jsdoc/info/api-plugin.js
+++ b/config/jsdoc/info/api-plugin.js
@@ -1,11 +0,0 @@
-/**
- * Handle the api annotation.
- * @param {Object} dictionary The tag dictionary.
- */
-exports.defineTags = function (dictionary) {
-  dictionary.defineTag('api', {
-    onTagged: function (doclet, tag) {
-      doclet.api = true;
-    },
-  });
-};
--- a/config/jsdoc/info/conf.json
+++ b/config/jsdoc/info/conf.json
@@ -11,7 +11,6 @@
    },
    "plugins": [
        "jsdoc-plugin-typescript",
-        "config/jsdoc/info/api-plugin",
        "config/jsdoc/info/define-plugin",
        "config/jsdoc/info/virtual-plugin"
    ],
--- a/config/jsdoc/info/publish.js
+++ b/config/jsdoc/info/publish.js
@@ -1,13 +1,12 @@
 /**
- * @fileoverview Generates JSON output based on exportable symbols (those with
- * an api tag) and boolean defines (with a define tag and a default value).
+ * @fileoverview Generates JSON output based on exportable symbols.
 */
 const assert = require('assert');
 const path = require('path');

 /**
 * Publish hook for the JSDoc template.  Writes to JSON stdout.
- * @param {function} data The root of the Taffy DB containing doclet records.
+ * @param {Function} data The root of the Taffy DB containing doclet records.
 * @param {Object} opts Options.
 * @return {Promise} A promise that resolves when writing is complete.
 */
@@ -20,26 +19,27 @@ exports.publish = function (data, opts) {
    return types;
  }

-  // get all doclets with the "api" property or define (excluding events)
+  // get all doclets that have exports
  const classes = {};
  const docs = data(
    [
      {define: {isObject: true}},
      function () {
        if (this.kind == 'class') {
-          if (!('extends' in this) || typeof this.api == 'boolean') {
-            classes[this.longname] = this;
-            return true;
-          }
+          classes[this.longname] = this;
+          return true;
        }
        return (
-          typeof this.api == 'boolean' ||
-          (this.meta && /[\\\/]externs$/.test(this.meta.path))
+          this.meta &&
+          this.meta.path &&
+          this.longname.indexOf('<anonymous>') !== 0 &&
+          this.longname !== 'module:ol'
        );
      },
    ],
    {kind: {'!is': 'file'}},
-    {kind: {'!is': 'event'}}
+    {kind: {'!is': 'event'}},
+    {kind: {'!is': 'module'}}
  ).get();

  // get symbols data, filter out those that are members of private classes
@@ -77,7 +77,7 @@ exports.publish = function (data, opts) {
          path: path.join(doc.meta.path, doc.meta.filename),
          default: doc.define.default,
        });
-      } else if (doc.kind == 'typedef' || doc.isEnum === true) {
+      } else if (doc.type && (doc.kind == 'typedef' || doc.isEnum === true)) {
        typedefs.push({
          name: doc.longname,
          types: getTypes(doc.type.names),
@@ -136,7 +136,7 @@ exports.publish = function (data, opts) {
          });
        }

-        const target = isExterns ? externs : doc.api ? symbols : base;
+        const target = isExterns ? externs : symbols;
        const existingSymbol = symbolsByName[symbol.name];
        if (existingSymbol) {
          const idx = target.indexOf(existingSymbol);
@@ -145,10 +145,9 @@ exports.publish = function (data, opts) {
        target.push(symbol);
        symbolsByName[symbol.name] = symbol;

-        if (doc.api && symbol.extends) {
+        if (symbol.extends) {
          while (
            symbol.extends in classes &&
-            !classes[symbol.extends].api &&
            classes[symbol.extends].augments
          ) {
            symbol.extends = classes[symbol.extends].augments[0];
--- a/config/webpack-config-legacy-build.js
+++ b/config/webpack-config-legacy-build.js
@@ -3,6 +3,28 @@ module.exports = {
  entry: './build/index.js',
  devtool: 'source-map',
  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /^((?!es2015-)[\s\S])*\.js$/,
+        use: {
+          loader: 'buble-loader',
+          options: {
+            transforms: {dangerousForOf: true},
+          },
+        },
+        include: [
+          path.join(
+            __dirname,
+            '..',
+            'node_modules',
+            '@mapbox',
+            'mapbox-gl-style-spec'
+          ),
+        ],
+      },
+    ],
+  },
  resolve: {
    alias: {
      ol: path.resolve('./build/ol'),
--- a/doc/errors/index.md
+++ b/doc/errors/index.md
@@ -47,7 +47,7 @@ The default `geometryFunction` can only handle `ol/geom/Point` geometries.

 ### 11

-`options.featureTypes` should be an Array.
+`options.featureTypes` must be an Array.

 ### 12

@@ -111,7 +111,7 @@ Features for `updates` must have an id set by the feature reader or `ol.Feature#

 ### 28

-`renderMode` must be `'image'`, `'hybrid'` or `'vector'`.
+`renderMode` must be `'hybrid'` or `'vector'`.

 ### 29

@@ -248,4 +248,8 @@ This is done by providing adequate shaders using the `hitVertexShader` and `hitF

 ### 67

-A layer can only be added to the map once. Use either `layer.setMap()` or `map.addLayer()`, not both.
+A layer can only be added to the map once. Use either `layer.setMap()` or `map.addLayer()`, not both.
+
+### 68
+
+Data from this source can only be rendered if it has a projection compatible with the view projection.
--- a/doc/faq.md
+++ b/doc/faq.md
@@ -7,7 +7,7 @@ layout: doc.hbs

 Certain questions arise more often than others when users ask for help. This
 document tries to list some of the common questions that frequently get asked,
-e.g. on [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers).
+e.g. on [Stack Overflow](https://stackoverflow.com/questions/tagged/openlayers).

 If you think a question (and naturally its answer) should be added here, feel
 free to ping us or to send a pull request enhancing this document.
@@ -75,7 +75,7 @@ import {register} from 'ol/proj/proj4';
 import {get as getProjection} from 'ol/proj';

 // To use other projections, you have to register the projection in OpenLayers.
-// This can easily be done with [https://proj4js.org](proj4)
+// This can easily be done with [http://proj4js.org/](proj4)
 //
 // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
 // So we create a projection instance for EPSG:21781 and pass it to
@@ -198,8 +198,8 @@ for English, `en`, as a mnemonic: East before North.
 So you want to center your map on a certain place on the earth and obviously you
 need to have its coordinates for this. Let's assume you want your map centered
 on Schladming, a beautiful place in Austria. Head over to the wikipedia
-page for [Schladming](http://en.wikipedia.org/wiki/Schladming). In the top-right
-corner there is a link to [GeoHack](http://tools.wmflabs.org/geohack/geohack.php?pagename=Schladming&params=47_23_39_N_13_41_21_E_type:city(4565)_region:AT-6),
+page for [Schladming](https://en.wikipedia.org/wiki/Schladming). In the top-right
+corner there is a link to [GeoHack](https://geohack.toolforge.org/geohack.php?pagename=Schladming&params=47_23_39_N_13_41_21_E_type:city(4565)_region:AT-6),
 which effectively tells you the coordinates are:

    WGS84:
--- a/doc/index.hbs
+++ b/doc/index.hbs
@@ -19,4 +19,4 @@ We have put together a document that lists [Frequently Asked Questions (FAQ)](fa

 # More questions?

-If you cannot find an answer in the documentation or the FAQ, you can search [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers). If you cannot find an answer there, ask a new question there, using the tag 'openlayers'.
+If you cannot find an answer in the documentation or the FAQ, you can search [Stack Overflow](https://stackoverflow.com/questions/tagged/openlayers). If you cannot find an answer there, ask a new question there, using the tag 'openlayers'.
--- a/doc/quickstart.hbs
+++ b/doc/quickstart.hbs
@@ -78,7 +78,7 @@ The first part is to include the JavaScript library. For the purpose of this tut
  <div id="map" class="map"></div>
 ```

-The map in the application is contained in a [`<div>` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
+The map in the application is contained in a [`<div>` HTML element](https://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.

 ```xml
  <style>
--- a/doc/tutorials/background.md
+++ b/doc/tutorials/background.md
@@ -19,7 +19,7 @@ OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), whi

 By default, OpenLayers uses a performance optimized Canvas renderer.

-OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io)) and bundled with polyfills for `requestAnimationFrame`, `Element.prototype.classList` and `URL`.
+OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](https://262.ecma-international.org/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](https://polyfill.io/), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io/)) and bundled with polyfills for `fetch`, `requestAnimationFrame`, `Element.prototype.classList`, `URL`, `TextDecoder` and `Number.isInteger`.

 The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.

--- a/doc/tutorials/raster-reprojection.md
+++ b/doc/tutorials/raster-reprojection.md
@@ -27,7 +27,7 @@ var map = new Map({
    new TileLayer({
      source: new TileWMS({
        projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
-        url: 'http://demo.boundlessgeo.com/geoserver/wms',
+        url: 'https://ahocevar.com/geoserver/wms',
        params: {
          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
        }
--- a/examples/.eslintrc
+++ b/examples/.eslintrc
@@ -7,9 +7,11 @@
    "d3": false,
    "domtoimage": false,
    "geojsonvt": false,
+    "gifler": false,
    "GyroNorm": false,
    "jsPDF": false,
    "jsts": false,
+    "JSZip": false,
    "mapboxgl": false,
    "saveAs": false,
    "toastr": false,
--- a/examples/animated-gif.html
+++ b/examples/animated-gif.html
@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Animated GIF
+shortdesc: Example of using an animated GIF as an icon.
+docs: >
+  Example of using an animated GIF as an icon.
+  Animation is achieved using the <a href="https://themadcreator.github.io/gifler/" target="_blank">Gifler</a> library.
+tags: "animation, vector, style, icon, gif"
+resources:
+  - https://unpkg.com/gifler@0.1.0/gifler.min.js
+---
+<div id="map" class="map"></div>
--- a/examples/animated-gif.js
+++ b/examples/animated-gif.js
@@ -0,0 +1,64 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import Point from '../src/ol/geom/Point.js';
+import View from '../src/ol/View.js';
+import {Icon, Style} from '../src/ol/style.js';
+import {Stamen, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+});
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
+
+const rasterLayer = new TileLayer({
+  source: new Stamen({
+    layer: 'toner',
+  }),
+});
+
+const map = new Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+const gifUrl = 'data/globe.gif';
+const gif = gifler(gifUrl);
+gif.frames(
+  document.createElement('canvas'),
+  function (ctx, frame) {
+    if (!iconFeature.getStyle()) {
+      iconFeature.setStyle(
+        new Style({
+          image: new Icon({
+            img: ctx.canvas,
+            imgSize: [frame.width, frame.height],
+            opacity: 0.8,
+          }),
+        })
+      );
+    }
+    ctx.clearRect(0, 0, frame.width, frame.height);
+    ctx.drawImage(frame.buffer, frame.x, frame.y);
+    map.render();
+  },
+  true
+);
+
+// change mouse cursor when over icon
+map.on('pointermove', function (e) {
+  const pixel = map.getEventPixel(e.originalEvent);
+  const hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
+});
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -7,7 +7,7 @@ docs: >
 tags: "bing, bing-maps"
 cloak:
  - key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <select id="layer-select">
--- a/examples/center.html
+++ b/examples/center.html
@@ -11,6 +11,11 @@ docs: >
  view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
  at a specific pixel location (the center of the black box).
  <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
+  <p><b>Note:</b> This example does not shift the view center. So the zoom 
+  controls and rotating the map will still use the center of the viewport as anchor.
+  To shift the whole view based on a padding, use the `padding` option on the view,
+  as shown in the <a href="view-padding.html">view-padding.html</a> example.
+  </p>
 tags: "center, rotation, openstreetmap"
 ---
 <div class="mapcontainer">
--- a/examples/cluster.html
+++ b/examples/cluster.html
@@ -8,6 +8,18 @@ tags: "cluster, vector"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>cluster distance</label>
-  <input id="distance" type="range" min="0" max="100" step="1" value="40"/>
+  <div class="form-group">
+    <label for="distance" class="col-form-label">Cluster distance</label>
+    <input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
+    <small class="form-text text-muted">
+      The distance within which features will be clustered together.
+    </small>
+  </div>
+  <div class="form-group">
+    <label for="min-distance" class="col-form-label">Minimum distance</label>
+    <input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
+    <small class="form-text text-muted">
+      The minimum distance between clusters. Can't be larger than the configured distance.
+    </small>
+  </div>
 </form>
--- a/examples/cluster.js
+++ b/examples/cluster.js
@@ -11,8 +11,10 @@ import {
 } from '../src/ol/style.js';
 import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {boundingExtent} from '../src/ol/extent.js';

-const distance = document.getElementById('distance');
+const distanceInput = document.getElementById('distance');
+const minDistanceInput = document.getElementById('min-distance');

 const count = 20000;
 const features = new Array(count);
@@ -27,7 +29,8 @@ const source = new VectorSource({
 });

 const clusterSource = new Cluster({
-  distance: parseInt(distance.value, 10),
+  distance: parseInt(distanceInput.value, 10),
+  minDistance: parseInt(minDistanceInput.value, 10),
  source: source,
 });

@@ -74,6 +77,25 @@ const map = new Map({
  }),
 });

-distance.addEventListener('input', function () {
-  clusterSource.setDistance(parseInt(distance.value, 10));
+distanceInput.addEventListener('input', function () {
+  clusterSource.setDistance(parseInt(distanceInput.value, 10));
+});
+
+minDistanceInput.addEventListener('input', function () {
+  clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
+});
+
+map.on('click', (e) => {
+  clusters.getFeatures(e.pixel).then((clickedFeatures) => {
+    if (clickedFeatures.length) {
+      // Get clustered Coordinates
+      const features = clickedFeatures[0].get('features');
+      if (features.length > 1) {
+        const extent = boundingExtent(
+          features.map((r) => r.getGeometry().getCoordinates())
+        );
+        map.getView().fit(extent, {duration: 1000, padding: [50, 50, 50, 50]});
+      }
+    }
+  });
 });
--- a/examples/color-manipulation.css
+++ b/examples/color-manipulation.css
@@ -1,5 +1,7 @@
 table.controls td {
-  text-align: center;
  padding: 2px 5px;
-  min-width: 60px;
+}
+table.controls td:nth-child(3) {
+  text-align: right;
+  min-width: 4.5em;
 }
--- a/examples/color-manipulation.html
+++ b/examples/color-manipulation.html
@@ -9,18 +9,18 @@ tags: "color, hue, lightness, chroma"
 <div id="map" class="map"></div>
 <table class="controls">
  <tr>
-    <td>hue</td>
-    <td><span id="hueOut"></span>°</td>
+    <td><label for="hue">hue</label></td>
    <td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
+    <td><span id="hueOut"></span> °&nbsp;</td>
  </tr>
  <tr>
-    <td>chroma</td>
-    <td><span id="chromaOut"></span> %</td>
+    <td><label for="chroma">chroma</label></td>
    <td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
+    <td><span id="chromaOut"></span> %</td>
  </tr>
  <tr>
-    <td>lightness</td>
-    <td><span id="lightnessOut"></span> %</td>
+    <td><label for="lightness">lightness</label></td>
    <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
+    <td><span id="lightnessOut"></span> %</td>
  </tr>
 </table>
--- a/examples/custom-circle-render.html
+++ b/examples/custom-circle-render.html
@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Custom Circle Render
+shortdesc: Example of a custom circle render.
+docs: >
+  This example demonstrates the use of 'ol/style/Style' render option function to render circle feature.
+tags: "circle, feature, vector, render, custom"
+---
+<div id="map" class="map"></div>
--- a/examples/custom-circle-render.js
+++ b/examples/custom-circle-render.js
@@ -0,0 +1,64 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {Circle} from '../src/ol/geom.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+const circleFeature = new Feature({
+  geometry: new Circle([12127398.797692968, 4063894.123105166], 50),
+});
+circleFeature.setStyle(
+  new Style({
+    renderer(coordinates, state) {
+      const [[x, y], [x1, y1]] = coordinates;
+      const ctx = state.context;
+      const dx = x1 - x;
+      const dy = y1 - y;
+      const radius = Math.sqrt(dx * dx + dy * dy);
+
+      const innerRadius = 0;
+      const outerRadius = radius * 1.4;
+
+      const gradient = ctx.createRadialGradient(
+        x,
+        y,
+        innerRadius,
+        x,
+        y,
+        outerRadius
+      );
+      gradient.addColorStop(0, 'rgba(255,0,0,0)');
+      gradient.addColorStop(0.6, 'rgba(255,0,0,0.2)');
+      gradient.addColorStop(1, 'rgba(255,0,0,0.8)');
+      ctx.beginPath();
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
+      ctx.strokeStyle = 'rgba(255,0,0,1)';
+      ctx.stroke();
+    },
+  })
+);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+      visible: true,
+    }),
+    new VectorLayer({
+      source: new VectorSource({
+        features: [circleFeature],
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [12127398.797692968, 4063894.123105166],
+    zoom: 19,
+  }),
+});
--- a/examples/custom-controls.js
+++ b/examples/custom-controls.js
@@ -10,7 +10,7 @@ import {Control, defaults as defaultControls} from '../src/ol/control.js';

 class RotateNorthControl extends Control {
  /**
-   * @param {Object=} opt_options Control options.
+   * @param {Object} [opt_options] Control options.
   */
  constructor(opt_options) {
    const options = opt_options || {};
--- a/examples/d3.js
+++ b/examples/d3.js
@@ -50,10 +50,13 @@ class CanvasLayer extends Layer {
    const scale = r / frameState.viewState.resolution;

    const center = toLonLat(getCenter(frameState.extent), projection);
+    const angle = (-frameState.viewState.rotation * 180) / Math.PI;
+
    d3Projection
      .scale(scale)
      .center(center)
-      .translate([width / 2, height / 2]);
+      .translate([width / 2, height / 2])
+      .angle(angle);

    d3Path = d3Path.projection(d3Projection);
    d3Path(this.features);
--- a/examples/data/geojson/countries.geojson
+++ b/examples/data/geojson/countries.geojson
--- a/examples/data/globe.gif
+++ b/examples/data/globe.gif
--- a/examples/data/kml/states.kml
+++ b/examples/data/kml/states.kml
--- a/examples/data/kmz/iceland.kmz
+++ b/examples/data/kmz/iceland.kmz
--- a/examples/data/polyline/route.json
+++ b/examples/data/polyline/route.json
@@ -0,0 +1 @@
+{"routes":[{"geometry":"hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}NfIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_EkUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]kDuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mCum@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@kai@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgBk_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAwXyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrXitAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNmaCsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAmb@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknFoFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snAw`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDwzGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwyA{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBbh@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipAdy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_s@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCoSfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfYgEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~kDyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jIab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJuEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL"}]}
--- a/examples/data/topojson/fr-departments.json
+++ b/examples/data/topojson/fr-departments.json
--- a/examples/drag-and-drop-custom-kmz.css
+++ b/examples/drag-and-drop-custom-kmz.css
@@ -0,0 +1,9 @@
+#info {
+  width: 100%;
+  height: 24rem;
+  overflow: scroll;
+  display: flex;
+  align-items: baseline;
+  border: 1px solid black;
+  justify-content: flex-start;
+}
--- a/examples/drag-and-drop-custom-kmz.html
+++ b/examples/drag-and-drop-custom-kmz.html
@@ -0,0 +1,22 @@
+---
+layout: example.html
+title: Custom Drag-and-Drop (KMZ)
+shortdesc: Example of using the drag-and-drop interaction with a custom format to handle KMZ files.
+docs: >
+  Example of using the drag-and-drop interaction with a custom format to handle KMZ files.
+  In addition to the formats used in the [Drag-and-Drop](drag-and-drop.html) example a custom format (subclassing KML) is used to handle KMZ files.
+  KML and icons must be extracted from the KMZ array buffer synchronously.
+  <a href="https://stuk.github.io/jszip/documentation/upgrade_guide.html" target="_blank">JSZip 2.x</a> is used as it has better browser compatibility and is simpler to code than the more recent <a href="https://github.com/ericvergnaud/jszip#readme" target="_blank">JSZip-sync</a>.
+  There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
+tags: "drag-and-drop, kml, kmz"
+resources:
+  - https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.1/jszip.min.js
+---
+<div id="map" class="map"></div>
+<br />
+<div>
+  <a id="download" download></a>
+  <button id="download-kmz">Download sample</button>
+</div>
+<br />
+<div id="info">&nbsp;</div>
--- a/examples/drag-and-drop-custom-kmz.js
+++ b/examples/drag-and-drop-custom-kmz.js
@@ -0,0 +1,155 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {
+  DragAndDrop,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
+import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+// Create functions to extract KML and icons from KMZ array buffer,
+// which must be done synchronously.
+
+const zip = new JSZip();
+
+function getKMLData(buffer) {
+  let kmlData;
+  zip.load(buffer);
+  const kmlFile = zip.file(/.kml$/i)[0];
+  if (kmlFile) {
+    kmlData = kmlFile.asText();
+  }
+  return kmlData;
+}
+
+function getKMLImage(href) {
+  let url = href;
+  let path = window.location.href;
+  path = path.slice(0, path.lastIndexOf('/') + 1);
+  if (href.indexOf(path) === 0) {
+    const regexp = new RegExp(href.replace(path, '') + '$', 'i');
+    const kmlFile = zip.file(regexp)[0];
+    if (kmlFile) {
+      url = URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
+    }
+  }
+  return url;
+}
+
+// Define a KMZ format class by subclassing ol/format/KML
+
+class KMZ extends KML {
+  constructor(opt_options) {
+    const options = opt_options || {};
+    options.iconUrlFunction = getKMLImage;
+    super(options);
+  }
+
+  getType() {
+    return 'arraybuffer';
+  }
+
+  readFeature(source, options) {
+    const kmlData = getKMLData(source);
+    return super.readFeature(kmlData, options);
+  }
+
+  readFeatures(source, options) {
+    const kmlData = getKMLData(source);
+    return super.readFeatures(kmlData, options);
+  }
+}
+
+// Set up map with Drag and Drop interaction
+
+const dragAndDropInteraction = new DragAndDrop({
+  formatConstructors: [KMZ, GPX, GeoJSON, IGC, KML, TopoJSON],
+});
+
+const map = new Map({
+  interactions: defaultInteractions().extend([dragAndDropInteraction]),
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+dragAndDropInteraction.on('addfeatures', function (event) {
+  const vectorSource = new VectorSource({
+    features: event.features,
+  });
+  map.addLayer(
+    new VectorLayer({
+      source: vectorSource,
+    })
+  );
+  map.getView().fit(vectorSource.getExtent());
+});
+
+const displayFeatureInfo = function (pixel) {
+  const features = [];
+  map.forEachFeatureAtPixel(pixel, function (feature) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    const info = [];
+    let i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      const description =
+        features[i].get('description') ||
+        features[i].get('name') ||
+        features[i].get('_name') ||
+        features[i].get('layer');
+      if (description) {
+        info.push(description);
+      }
+    }
+    document.getElementById('info').innerHTML = info.join('<br/>') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+map.on('pointermove', function (evt) {
+  if (evt.dragging) {
+    return;
+  }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function (evt) {
+  displayFeatureInfo(evt.pixel);
+});
+
+// Sample data download
+
+const link = document.getElementById('download');
+
+function download(fullpath, filename) {
+  fetch(fullpath)
+    .then(function (response) {
+      return response.blob();
+    })
+    .then(function (blob) {
+      if (navigator.msSaveBlob) {
+        // link download attribuute does not work on MS browsers
+        navigator.msSaveBlob(blob, filename);
+      } else {
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+      }
+    });
+}
+
+document.getElementById('download-kmz').addEventListener('click', function () {
+  download('data/kmz/iceland.kmz', 'iceland.kmz');
+});
--- a/examples/drag-and-drop-custom-mvt.css
+++ b/examples/drag-and-drop-custom-mvt.css
@@ -0,0 +1,3 @@
+.tileCoord input {
+  width: 60px;
+}
--- a/examples/drag-and-drop-custom-mvt.html
+++ b/examples/drag-and-drop-custom-mvt.html
@@ -0,0 +1,23 @@
+---
+layout: example.html
+title: Custom Drag-and-Drop (MVT preview)
+shortdesc: Example of using the drag-and-drop interaction with a custom format to preview MVT tiles.
+docs: >
+  Example of using the drag-and-drop interaction with a custom format to preview MVT tiles.
+  In addition to the formats used in the [Drag-and-Drop](drag-and-drop.html) example individual MVT tiles can be previewed.
+  There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
+tags: "drag-and-drop, mvt"
+---
+<div id="map" class="map"></div>
+<br />
+<div class="tileCoord">
+  <a id="download" download></a>
+  <span>Tile coordinate&nbsp;&nbsp;</span>
+  <span>&nbsp;z: <input type="number" id="tileCoordZ" value="6" /></span>
+  <span>&nbsp;x: <input type="number" id="tileCoordX" value="30" /></span>
+  <span>&nbsp;y: <input type="number" id="tileCoordY" value="20" /></span>
+  <span>&nbsp;&nbsp;</span>
+  <button id="download-mvt">Download sample</button>
+</div>
+<br />
+<div id="info">&nbsp;</div>
--- a/examples/drag-and-drop-custom-mvt.js
+++ b/examples/drag-and-drop-custom-mvt.js
@@ -0,0 +1,133 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {
+  DragAndDrop,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
+import {GPX, GeoJSON, IGC, KML, MVT, TopoJSON} from '../src/ol/format.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {createXYZ} from '../src/ol/tilegrid.js';
+
+// Define a custom MVT format as ol/format/MVT requires an extent
+
+const tileCoordZ = document.getElementById('tileCoordZ');
+const tileCoordX = document.getElementById('tileCoordX');
+const tileCoordY = document.getElementById('tileCoordY');
+
+class customMVT extends MVT {
+  constructor() {
+    super({featureClass: Feature});
+  }
+  readFeatures(source, options) {
+    options.extent = createXYZ().getTileCoordExtent([
+      parseInt(tileCoordZ.value),
+      parseInt(tileCoordX.value),
+      parseInt(tileCoordY.value),
+    ]);
+    return super.readFeatures(source, options);
+  }
+}
+
+// Set up map with Drag and Drop interaction
+
+const dragAndDropInteraction = new DragAndDrop({
+  formatConstructors: [customMVT, GPX, GeoJSON, IGC, KML, TopoJSON],
+});
+
+const map = new Map({
+  interactions: defaultInteractions().extend([dragAndDropInteraction]),
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+dragAndDropInteraction.on('addfeatures', function (event) {
+  const vectorSource = new VectorSource({
+    features: event.features,
+  });
+  map.addLayer(
+    new VectorLayer({
+      source: vectorSource,
+    })
+  );
+  map.getView().fit(vectorSource.getExtent());
+});
+
+const displayFeatureInfo = function (pixel) {
+  const features = [];
+  map.forEachFeatureAtPixel(pixel, function (feature) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    const info = [];
+    let i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      const description =
+        features[i].get('name') ||
+        features[i].get('_name') ||
+        features[i].get('layer');
+      if (description) {
+        info.push(description);
+      }
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+map.on('pointermove', function (evt) {
+  if (evt.dragging) {
+    return;
+  }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function (evt) {
+  displayFeatureInfo(evt.pixel);
+});
+
+// Sample data download
+
+const link = document.getElementById('download');
+
+function download(fullpath, filename) {
+  fetch(fullpath)
+    .then(function (response) {
+      return response.blob();
+    })
+    .then(function (blob) {
+      if (navigator.msSaveBlob) {
+        // link download attribuute does not work on MS browsers
+        navigator.msSaveBlob(blob, filename);
+      } else {
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+      }
+    });
+}
+
+document.getElementById('download-mvt').addEventListener('click', function () {
+  const fullpath =
+    'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/' +
+    tileCoordZ.value +
+    '/' +
+    tileCoordY.value +
+    '/' +
+    tileCoordX.value +
+    '.pbf';
+  const filename =
+    tileCoordZ.value + '-' + tileCoordX.value + '-' + tileCoordY.value + '.mvt';
+  download(fullpath, filename);
+});
--- a/examples/drag-and-drop.html
+++ b/examples/drag-and-drop.html
@@ -10,4 +10,20 @@ cloak:
    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
+<div><label><input type="checkbox" id="extractstyles" checked /> Extract styles from KML</label></div>
+<br />
+<div>
+  <a id="download" download></a>
+  Download samples:&nbsp;&nbsp;
+  <button id="download-gpx">GPX</button>
+  &nbsp;
+  <button id="download-geojson">GeoJSON</button>
+  &nbsp;
+  <button id="download-igc">IGC</button>
+  &nbsp;
+  <button id="download-kml">KML</button>
+  &nbsp;
+  <button id="download-topojson">TopoJSON</button>
+</div>
+<br />
 <div id="info">&nbsp;</div>
--- a/examples/drag-and-drop.js
+++ b/examples/drag-and-drop.js
@@ -1,24 +1,16 @@
+import DragAndDrop from '../src/ol/interaction/DragAndDrop.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {
-  DragAndDrop,
-  defaults as defaultInteractions,
-} from '../src/ol/interaction.js';
 import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {Vector as VectorSource, XYZ} from '../src/ol/source.js';

-const dragAndDropInteraction = new DragAndDrop({
-  formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON],
-});
-
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 const attributions =
  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

 const map = new Map({
-  interactions: defaultInteractions().extend([dragAndDropInteraction]),
  layers: [
    new TileLayer({
      source: new XYZ({
@@ -36,17 +28,39 @@ const map = new Map({
  }),
 });

-dragAndDropInteraction.on('addfeatures', function (event) {
-  const vectorSource = new VectorSource({
-    features: event.features,
+const extractStyles = document.getElementById('extractstyles');
+let dragAndDropInteraction;
+
+function setInteraction() {
+  if (dragAndDropInteraction) {
+    map.removeInteraction(dragAndDropInteraction);
+  }
+  dragAndDropInteraction = new DragAndDrop({
+    formatConstructors: [
+      GPX,
+      GeoJSON,
+      IGC,
+      // use constructed format to set options
+      new KML({extractStyles: extractStyles.checked}),
+      TopoJSON,
+    ],
  });
-  map.addLayer(
-    new VectorLayer({
-      source: vectorSource,
-    })
-  );
-  map.getView().fit(vectorSource.getExtent());
-});
+  dragAndDropInteraction.on('addfeatures', function (event) {
+    const vectorSource = new VectorSource({
+      features: event.features,
+    });
+    map.addLayer(
+      new VectorLayer({
+        source: vectorSource,
+      })
+    );
+    map.getView().fit(vectorSource.getExtent());
+  });
+  map.addInteraction(dragAndDropInteraction);
+}
+setInteraction();
+
+extractStyles.addEventListener('change', setInteraction);

 const displayFeatureInfo = function (pixel) {
  const features = [];
@@ -76,3 +90,48 @@ map.on('pointermove', function (evt) {
 map.on('click', function (evt) {
  displayFeatureInfo(evt.pixel);
 });
+
+// Sample data downloads
+
+const link = document.getElementById('download');
+
+function download(fullpath, filename) {
+  fetch(fullpath)
+    .then(function (response) {
+      return response.blob();
+    })
+    .then(function (blob) {
+      if (navigator.msSaveBlob) {
+        // link download attribuute does not work on MS browsers
+        navigator.msSaveBlob(blob, filename);
+      } else {
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+      }
+    });
+}
+
+document.getElementById('download-gpx').addEventListener('click', function () {
+  download('data/gpx/fells_loop.gpx', 'fells_loop.gpx');
+});
+
+document
+  .getElementById('download-geojson')
+  .addEventListener('click', function () {
+    download('data/geojson/roads-seoul.geojson', 'roads-seoul.geojson');
+  });
+
+document.getElementById('download-igc').addEventListener('click', function () {
+  download('data/igc/Ulrich-Prinz.igc', 'Ulrich-Prinz.igc');
+});
+
+document.getElementById('download-kml').addEventListener('click', function () {
+  download('data/kml/states.kml', 'states.kml');
+});
+
+document
+  .getElementById('download-topojson')
+  .addEventListener('click', function () {
+    download('data/topojson/fr-departments.json', 'fr-departments.json');
+  });
--- a/examples/draw-and-modify-features.html
+++ b/examples/draw-and-modify-features.html
@@ -8,7 +8,7 @@ tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
  <select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
--- a/examples/draw-features.html
+++ b/examples/draw-features.html
@@ -6,17 +6,18 @@ docs: >
  Example of using the Draw interaction. Select a geometry type from the
  dropdown above to start drawing. To finish drawing, click the last
  point. To activate freehand drawing for lines, polygons, and circles, hold
-  the `Shift` key.
+  the `Shift` key. To remove the last point of a line or polygon, press "Undo".
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
-  <select id="type">
+  <label for="type">Geometry type: &nbsp;</label>
+  <select class="form-control mr-2 mb-2 mt-2" id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
    <option value="Circle">Circle</option>
    <option value="None">None</option>
  </select>
+  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
 </form>
--- a/examples/draw-features.js
+++ b/examples/draw-features.js
@@ -45,4 +45,8 @@ typeSelect.onchange = function () {
  addInteraction();
 };

+document.getElementById('undo').addEventListener('click', function () {
+  draw.removeLastPoint();
+});
+
 addInteraction();
--- a/examples/draw-freehand.html
+++ b/examples/draw-freehand.html
@@ -12,7 +12,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
  <select id="type">
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
--- a/examples/draw-shapes.html
+++ b/examples/draw-shapes.html
@@ -9,18 +9,19 @@ docs: >
  achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
  a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`
  with a `geometryFunction` that creates a box-shaped polygon instead of a
-  circle.  Star drawing uses a custom geometry function that coverts a circle
-  into a start using the center and radius provided by the draw interaction.
+  circle. Star drawing uses a custom geometry function that converts a circle
+  into a star using the center and radius provided by the draw interaction.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Shape type &nbsp;</label>
-  <select id="type">
+  <label for="type">Shape type: &nbsp;</label>
+  <select class="form-control mr-2 mb-2 mt-2" id="type">
    <option value="Circle">Circle</option>
    <option value="Square">Square</option>
    <option value="Box">Box</option>
    <option value="Star">Star</option>
    <option value="None">None</option>
  </select>
+  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
 </form>
--- a/examples/draw-shapes.js
+++ b/examples/draw-shapes.js
@@ -44,7 +44,7 @@ function addInteraction() {
      value = 'Circle';
      geometryFunction = function (coordinates, geometry) {
        const center = coordinates[0];
-        const last = coordinates[1];
+        const last = coordinates[coordinates.length - 1];
        const dx = center[0] - last[0];
        const dy = center[1] - last[1];
        const radius = Math.sqrt(dx * dx + dy * dy);
@@ -84,4 +84,8 @@ typeSelect.onchange = function () {
  addInteraction();
 };

+document.getElementById('undo').addEventListener('click', function () {
+  draw.removeLastPoint();
+});
+
 addInteraction();
--- a/examples/export-pdf.html
+++ b/examples/export-pdf.html
@@ -14,7 +14,7 @@ resources:
  </div>
 </div>
 <form class="form">
-  <label>Page size </label>
+  <label for="format">Page size </label>
  <select id="format">
    <option value="a0">A0 (slow)</option>
    <option value="a1">A1</option>
@@ -23,7 +23,7 @@ resources:
    <option value="a4" selected>A4</option>
    <option value="a5">A5 (fast)</option>
  </select>
-  <label>Resolution </label>
+  <label for="resolution">Resolution </label>
  <select id="resolution">
    <option value="72">72 dpi (fast)</option>
    <option value="150">150 dpi</option>
--- a/examples/feature-move-animation.js
+++ b/examples/feature-move-animation.js
@@ -15,124 +15,6 @@ import {
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {getVectorContext} from '../src/ol/render.js';

-// This long string is placed here due to jsFiddle limitations.
-// It is usually loaded with AJAX.
-const polyline = [
-  'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}N',
-  'fIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^',
-  'aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_E',
-  'kUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_',
-  'Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@',
-  'sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]k',
-  'DuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mC',
-  'um@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@ka',
-  'i@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgB',
-  'k_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__',
-  'DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAw',
-  'Xyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrX',
-  'itAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@',
-  'xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNma',
-  'CsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_',
-  'fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o',
-  '~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAm',
-  'b@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_',
-  'lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknF',
-  'oFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snA',
-  'w`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDw',
-  'zGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}',
-  '@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwy',
-  'A{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi',
-  '@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC',
-  '|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBb',
-  'h@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipA',
-  'dy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_',
-  's@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCo',
-  'SfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@',
-  'oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e',
-  '[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfY',
-  'gEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~k',
-  'Dyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB',
-  '_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jI',
-  'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@',
-  'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ',
-  'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m',
-  '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL',
-].join('');
-
-const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline(
-  {
-    factor: 1e6,
-  }
-).readGeometry(polyline, {
-  dataProjection: 'EPSG:4326',
-  featureProjection: 'EPSG:3857',
-}));
-
-const routeCoords = route.getCoordinates();
-const routeLength = routeCoords.length;
-
-const routeFeature = new Feature({
-  type: 'route',
-  geometry: route,
-});
-const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */ (new Feature(
-  {
-    type: 'geoMarker',
-    geometry: new Point(routeCoords[0]),
-  }
-));
-const startMarker = new Feature({
-  type: 'icon',
-  geometry: new Point(routeCoords[0]),
-});
-const endMarker = new Feature({
-  type: 'icon',
-  geometry: new Point(routeCoords[routeLength - 1]),
-});
-
-const styles = {
-  'route': new Style({
-    stroke: new Stroke({
-      width: 6,
-      color: [237, 212, 0, 0.8],
-    }),
-  }),
-  'icon': new Style({
-    image: new Icon({
-      anchor: [0.5, 1],
-      src: 'data/icon.png',
-    }),
-  }),
-  'geoMarker': new Style({
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({color: 'black'}),
-      stroke: new Stroke({
-        color: 'white',
-        width: 2,
-      }),
-    }),
-  }),
-};
-
-let animating = false;
-let speed, now;
-const speedInput = document.getElementById('speed');
-const startButton = document.getElementById('start-animation');
-
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    features: [routeFeature, geoMarker, startMarker, endMarker],
-  }),
-  style: function (feature) {
-    // hide geoMarker if animation is active
-    if (animating && feature.get('type') === 'geoMarker') {
-      return null;
-    }
-    return styles[feature.get('type')];
-  },
-});
-
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 const attributions =
  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
@@ -155,63 +37,134 @@ const map = new Map({
        tileSize: 512,
      }),
    }),
-    vectorLayer,
  ],
 });

-const moveFeature = function (event) {
-  const vectorContext = getVectorContext(event);
-  const frameState = event.frameState;
+// The polyline string is read from a JSON similiar to those returned
+// by directions APIs such as Openrouteservice and Mapbox.
+fetch('data/polyline/route.json').then(function (response) {
+  response.json().then(function (result) {
+    const polyline = result.routes[0].geometry;

-  if (animating) {
-    const elapsedTime = frameState.time - now;
-    // here the trick to increase speed is to jump some indexes
-    // on lineString coordinates
-    const index = Math.round((speed * elapsedTime) / 1000);
+    const route = new Polyline({
+      factor: 1e6,
+    }).readGeometry(polyline, {
+      dataProjection: 'EPSG:4326',
+      featureProjection: 'EPSG:3857',
+    });

-    if (index >= routeLength) {
-      stopAnimation(true);
-      return;
+    const routeFeature = new Feature({
+      type: 'route',
+      geometry: route,
+    });
+    const geoMarker = new Feature({
+      type: 'geoMarker',
+      geometry: new Point(route.getCoordinateAt(0)),
+    });
+    const startMarker = new Feature({
+      type: 'icon',
+      geometry: new Point(route.getCoordinateAt(0)),
+    });
+    const endMarker = new Feature({
+      type: 'icon',
+      geometry: new Point(route.getCoordinateAt(1)),
+    });
+
+    const styles = {
+      'route': new Style({
+        stroke: new Stroke({
+          width: 6,
+          color: [237, 212, 0, 0.8],
+        }),
+      }),
+      'icon': new Style({
+        image: new Icon({
+          anchor: [0.5, 1],
+          src: 'data/icon.png',
+        }),
+      }),
+      'geoMarker': new Style({
+        image: new CircleStyle({
+          radius: 7,
+          fill: new Fill({color: 'black'}),
+          stroke: new Stroke({
+            color: 'white',
+            width: 2,
+          }),
+        }),
+      }),
+    };
+
+    let animating = false;
+
+    const vectorLayer = new VectorLayer({
+      source: new VectorSource({
+        features: [routeFeature, geoMarker, startMarker, endMarker],
+      }),
+      style: function (feature) {
+        // hide geoMarker if animation is active
+        if (animating && feature.get('type') === 'geoMarker') {
+          return null;
+        }
+        return styles[feature.get('type')];
+      },
+    });
+
+    map.addLayer(vectorLayer);
+
+    let speed, startTime;
+    const speedInput = document.getElementById('speed');
+    const startButton = document.getElementById('start-animation');
+
+    function moveFeature(event) {
+      const vectorContext = getVectorContext(event);
+      const frameState = event.frameState;
+
+      if (animating) {
+        const elapsedTime = frameState.time - startTime;
+        const distance = (speed * elapsedTime) / 1e6;
+
+        if (distance >= 1) {
+          stopAnimation(true);
+          return;
+        }
+
+        const currentPoint = new Point(route.getCoordinateAt(distance));
+        const feature = new Feature(currentPoint);
+        vectorContext.drawFeature(feature, styles.geoMarker);
+      }
+      // tell OpenLayers to continue the postrender animation
+      map.render();
    }

-    const currentPoint = new Point(routeCoords[index]);
-    const feature = new Feature(currentPoint);
-    vectorContext.drawFeature(feature, styles.geoMarker);
-  }
-  // tell OpenLayers to continue the postrender animation
-  map.render();
-};
+    function startAnimation() {
+      if (animating) {
+        stopAnimation(false);
+      } else {
+        animating = true;
+        startTime = new Date().getTime();
+        speed = speedInput.value;
+        startButton.textContent = 'Cancel Animation';
+        // hide geoMarker
+        geoMarker.changed();
+        // just in case you pan somewhere else
+        map.getView().setCenter(center);
+        vectorLayer.on('postrender', moveFeature);
+        map.render();
+      }
+    }

-function startAnimation() {
-  if (animating) {
-    stopAnimation(false);
-  } else {
-    animating = true;
-    now = new Date().getTime();
-    speed = speedInput.value;
-    startButton.textContent = 'Cancel Animation';
-    // hide geoMarker
-    geoMarker.setStyle(null);
-    // just in case you pan somewhere else
-    map.getView().setCenter(center);
-    vectorLayer.on('postrender', moveFeature);
-    map.render();
-  }
-}
+    function stopAnimation(ended) {
+      animating = false;
+      startButton.textContent = 'Start Animation';

-/**
- * @param {boolean} ended end of animation.
- */
-function stopAnimation(ended) {
-  animating = false;
-  startButton.textContent = 'Start Animation';
+      // if animation cancelled set the marker at the beginning
+      const coord = route.getCoordinateAt(ended ? 1 : 0);
+      geoMarker.getGeometry().setCoordinates(coord);
+      // remove listener
+      vectorLayer.un('postrender', moveFeature);
+    }

-  // if animation cancelled set the marker at the beginning
-  const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  const geometry = geoMarker.getGeometry();
-  geometry.setCoordinates(coord);
-  //remove listener
-  vectorLayer.un('postrender', moveFeature);
-}
-
-startButton.addEventListener('click', startAnimation, false);
+    startButton.addEventListener('click', startAnimation, false);
+  });
+});
--- a/examples/filter-points-webgl.html
+++ b/examples/filter-points-webgl.html
@@ -19,8 +19,8 @@ experimental: true
 <form>
  <div id="status">Show impacts between <span class="min-year"></span> and <span class="max-year"></span></div>

-  <label>Minimum year:</label>
+  <label for="min-year">Minimum year:</label>
  <input id="min-year" type="range" min="1850" max="2015" step="1" value="1850"/>
-  <label>Maximum year:</label>
+  <label for="max-year">Maximum year:</label>
  <input id="max-year" type="range" min="1850" max="2015" step="1" value="2015"/>
 </form>
--- a/examples/flight-animation.html
+++ b/examples/flight-animation.html
@@ -7,8 +7,8 @@ docs: >
  animate flights. A great circle arc between two airports is calculated using
  <a href="https://github.com/springmeyer/arc.js">arc.js</a> and then the flight
  paths are animated with <b>postrender</b>. The flight data is provided by
-  <a href="http://openflights.org/data.html">OpenFlights</a> (a simplified data
-  set from the <a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/">
+  <a href="https://openflights.org/data.html">OpenFlights</a> (a simplified data
+  set from the <a href="https://docs.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/">
  Mapbox.js documentation</a> is used).
 tags: "animation, vector, feature, flights, arc"
 resources:
--- a/examples/flight-animation.js
+++ b/examples/flight-animation.js
@@ -34,7 +34,7 @@ const flightsSource = new VectorSource({
  wrapX: false,
  attributions:
    'Flight data by ' +
-    '<a href="http://openflights.org/data.html">OpenFlights</a>,',
+    '<a href="https://openflights.org/data.html">OpenFlights</a>,',
  loader: function () {
    const url = 'data/openflights/flights.json';
    fetch(url)
--- a/examples/full-screen-drag-rotate-and-zoom.html
+++ b/examples/full-screen-drag-rotate-and-zoom.html
@@ -4,7 +4,7 @@ title: Full Screen Drag, Rotate, and Zoom
 shortdesc: Example of drag rotate and zoom control with full screen effect.
 docs: >
  <p>Hold down <code>Shift+Drag</code> to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift+Drag</code> thing again.</p>
-  <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
+  <p>If there is no button on the map, your browser does not support the <a href="https://caniuse.com/fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, drag, rotate, zoom, xyz, maptiler"
 cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
--- a/examples/full-screen-source.html
+++ b/examples/full-screen-source.html
@@ -4,7 +4,7 @@ title: Full Screen Control with extended source element
 shortdesc: Example of a full screen control with a source option definition.
 docs: >
  <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
-  <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
+  <p>If there is no button on the map, your browser does not support the <a href="https://caniuse.com/fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, source, fullScreenSource, osm, osm-maps"
 ---
 <div id="fullscreen" class="fullscreen">
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -4,7 +4,7 @@ title: Full Screen Control
 shortdesc: Example of a full screen control.
 docs: >
  <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
-  <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
+  <p>If there is no button on the map, your browser does not support the <a href="https://caniuse.com/fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, xyz, maptiler"
 cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
--- a/examples/geojson.js
+++ b/examples/geojson.js
@@ -125,8 +125,9 @@ const geojsonObject = {
        'coordinates': [
          [
            [-5e6, -1e6],
-            [-4e6, 1e6],
            [-3e6, -1e6],
+            [-4e6, 1e6],
+            [-5e6, -1e6],
          ],
        ],
      },
@@ -163,25 +164,28 @@ const geojsonObject = {
          [
            [
              [-5e6, 6e6],
-              [-5e6, 8e6],
-              [-3e6, 8e6],
              [-3e6, 6e6],
+              [-3e6, 8e6],
+              [-5e6, 8e6],
+              [-5e6, 6e6],
            ],
          ],
          [
            [
              [-2e6, 6e6],
-              [-2e6, 8e6],
-              [0, 8e6],
              [0, 6e6],
+              [0, 8e6],
+              [-2e6, 8e6],
+              [-2e6, 6e6],
            ],
          ],
          [
            [
              [1e6, 6e6],
-              [1e6, 8e6],
-              [3e6, 8e6],
              [3e6, 6e6],
+              [3e6, 8e6],
+              [1e6, 8e6],
+              [1e6, 6e6],
            ],
          ],
        ],
@@ -208,8 +212,9 @@ const geojsonObject = {
            'coordinates': [
              [
                [1e6, -6e6],
-                [2e6, -4e6],
                [3e6, -6e6],
+                [2e6, -4e6],
+                [1e6, -6e6],
              ],
            ],
          },
--- a/examples/heatmap-earthquakes.html
+++ b/examples/heatmap-earthquakes.html
@@ -8,8 +8,8 @@ tags: "heatmap, kml, vector, style, webgl"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>radius size</label>
+  <label for="radius">radius size</label>
  <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
-  <label>blur size</label>
+  <label for="blur">blur size</label>
  <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
 </form>
--- a/examples/here-maps.html
+++ b/examples/here-maps.html
@@ -3,14 +3,12 @@ layout: example.html
 title: HERE Map Tile API
 shortdesc: Example of a map with map tiles from HERE.
 docs: >
-  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">HERE Map Tile API</a> used with <code>ol/source/XYZ</code>.</p>
-  <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/">HERE Service Terms</a> when using their tile API.</p>
+  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile" target="_blank">HERE Map Tile API</a> used with <code>ol/source/XYZ</code>.</p>
+  <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/" target="_blank">HERE Service Terms</a> when using their tile API.</p>
 tags: "here, here-maps, here-tile-api"
 cloak:
-  - key: kDm0Jq1K4Ak7Bwtn8uvk
-    value: Your HERE Maps appId from https://developer.here.com/
-  - key: xnmvc4dKZrDfGlvQHXSvwQ
-    value: Your HERE Maps appCode from https://developer.here.com/
+  - key: x13yMxvFSo8FIKFDDTnQaJ57Gakt11ZaIyqIctoSD3Y
+    value: Your HERE Maps API key from https://developer.here.com/
 ---
 <div id="map" class="map"></div>
 <select id="layer-select">
--- a/examples/here-maps.js
+++ b/examples/here-maps.js
@@ -3,56 +3,49 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';

-const appId = 'kDm0Jq1K4Ak7Bwtn8uvk';
-const appCode = 'xnmvc4dKZrDfGlvQHXSvwQ';
+const apiKey = 'x13yMxvFSo8FIKFDDTnQaJ57Gakt11ZaIyqIctoSD3Y';
 const hereLayers = [
  {
    base: 'base',
    type: 'maptile',
    scheme: 'normal.day',
-    app_id: appId,
-    app_code: appCode,
+    apiKey: apiKey,
  },
  {
    base: 'base',
    type: 'maptile',
    scheme: 'normal.day.transit',
-    app_id: appId,
-    app_code: appCode,
+    apiKey: apiKey,
  },
  {
    base: 'base',
    type: 'maptile',
    scheme: 'pedestrian.day',
-    app_id: appId,
-    app_code: appCode,
+    apiKey: apiKey,
  },
  {
    base: 'aerial',
    type: 'maptile',
    scheme: 'terrain.day',
-    app_id: appId,
-    app_code: appCode,
+    apiKey: apiKey,
  },
  {
    base: 'aerial',
    type: 'maptile',
    scheme: 'satellite.day',
-    app_id: appId,
-    app_code: appCode,
+    apiKey: apiKey,
  },
  {
    base: 'aerial',
    type: 'maptile',
    scheme: 'hybrid.day',
-    app_id: appId,
-    app_code: appCode,
+    apiKey: apiKey,
  },
 ];
 const urlTpl =
-  'https://{1-4}.{base}.maps.cit.api.here.com' +
+  'https://{1-4}.{base}.maps.ls.hereapi.com' +
  '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
-  '?app_id={app_id}&app_code={app_code}';
+  '?apiKey={apiKey}';
 const layers = [];
 let i, ii;
 for (i = 0, ii = hereLayers.length; i < ii; ++i) {
@@ -67,7 +60,7 @@ for (i = 0, ii = hereLayers.length; i < ii; ++i) {
          'Map Tiles &copy; ' +
          new Date().getFullYear() +
          ' ' +
-          '<a href="http://developer.here.com">HERE</a>',
+          '<a href="https://developer.here.com/" target="_blank">HERE</a>',
      }),
    })
  );
@@ -87,8 +80,7 @@ function createUrl(tpl, layerDesc) {
    .replace('{base}', layerDesc.base)
    .replace('{type}', layerDesc.type)
    .replace('{scheme}', layerDesc.scheme)
-    .replace('{app_id}', layerDesc.app_id)
-    .replace('{app_code}', layerDesc.app_code);
+    .replace('{apiKey}', layerDesc.apiKey);
 }

 const select = document.getElementById('layer-select');
--- a/examples/hit-tolerance-priority.html
+++ b/examples/hit-tolerance-priority.html
@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Hit tolerance priority
+shortdesc: Shows bad behavior of hit detection with hit tolerance.
+docs: >
+  Hover over the map and observe how the small circles get a black outline as you hover over them. Is the expected feature getting highlighted?
+tags: "simple, openstreetmap"
+---
+<div id="map" class="map"></div>
--- a/examples/hit-tolerance-priority.js
+++ b/examples/hit-tolerance-priority.js
@@ -0,0 +1,84 @@
+import CircleStyle from '../src/ol/style/Circle.js';
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
+import {Point} from '../src/ol/geom.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    resolutions: [1],
+  }),
+});
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    features: [
+      new Feature({
+        geometry: new Point([0, 0]),
+        color: 'white',
+      }),
+      new Feature({
+        geometry: new Point([-10, 0]),
+        color: 'fuchsia',
+      }),
+      new Feature({
+        geometry: new Point([-10, -10]),
+        color: 'orange',
+      }),
+      new Feature({
+        geometry: new Point([-10, 10]),
+        color: 'cyan',
+      }),
+    ],
+  }),
+  style: (feature) => {
+    return new Style({
+      image: new CircleStyle({
+        radius: 5,
+        fill: new Fill({
+          color: feature.get('color'),
+        }),
+        stroke: new Stroke({
+          color: 'gray',
+          width: 1,
+        }),
+      }),
+    });
+  },
+});
+map.addLayer(vectorLayer);
+
+const highlightFeature = new Feature(new Point([NaN, NaN]));
+highlightFeature.setStyle(
+  new Style({
+    image: new CircleStyle({
+      radius: 5,
+      stroke: new Stroke({
+        color: 'black',
+        width: 2,
+      }),
+    }),
+  })
+);
+vectorLayer.getSource().addFeature(highlightFeature);
+map.on('pointermove', (e) => {
+  const hit = map.forEachFeatureAtPixel(
+    e.pixel,
+    (feature) => {
+      highlightFeature.setGeometry(feature.getGeometry().clone());
+      return true;
+    },
+    {
+      hitTolerance: 10,
+    }
+  );
+  if (!hit) {
+    highlightFeature.setGeometry(new Point([NaN, NaN]));
+  }
+});
--- a/examples/hit-tolerance.html
+++ b/examples/hit-tolerance.html
@@ -11,15 +11,14 @@ docs: >
 tags: "hitTolerance"
 ---
 <div id="map" class="map"></div>
+<span id="status">Try to click the line in the map.</span>
 <form class="form-inline">
-  <span id="status">&nbsp;No feature got hit.</span>
-  <br />
-  <label>Hit tolerance for selecting features </label>
+  <label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</label>
  <select id="hitTolerance" class="form-control">
    <option value="0" selected>0 Pixels</option>
    <option value="5">5 Pixels</option>
    <option value="10">10 Pixels</option>
  </select>
-  <br />
-  Area: &nbsp;<canvas id="circle" style="vertical-align: middle"/>
+  &nbsp; Area: &nbsp;
+  <canvas id="circle" style="vertical-align: middle" />
 </form>
--- a/examples/hit-tolerance.js
+++ b/examples/hit-tolerance.js
@@ -57,10 +57,10 @@ map.on('singleclick', function (e) {
  );
  if (hit) {
    style.getStroke().setColor('green');
-    statusElement.innerHTML = '&nbsp;A feature got hit!';
+    statusElement.innerHTML = 'A feature got hit!';
  } else {
    style.getStroke().setColor('black');
-    statusElement.innerHTML = '&nbsp;No feature got hit.';
+    statusElement.innerHTML = 'No feature got hit.';
  }
  feature.changed();
 });
--- a/examples/icon-color.js
+++ b/examples/icon-color.js
@@ -41,7 +41,7 @@ rome.setStyle(
 london.setStyle(
  new Style({
    image: new Icon({
-      color: '#4271AE',
+      color: 'rgba(255, 0, 0, .5)',
      crossOrigin: 'anonymous',
      src: 'data/bigdot.png',
      scale: 0.2,
--- a/examples/icon-scale.js
+++ b/examples/icon-scale.js
@@ -98,7 +98,6 @@ const popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
-  offset: [0, -50],
 });
 map.addOverlay(popup);

@@ -109,8 +108,7 @@ map.on('click', function (evt) {
  });
  $(element).popover('dispose');
  if (feature) {
-    const coordinates = feature.getGeometry().getCoordinates();
-    popup.setPosition(coordinates);
+    popup.setPosition(evt.coordinate);
    $(element).popover({
      placement: 'top',
      html: true,
@@ -123,11 +121,11 @@ map.on('click', function (evt) {

 // change mouse cursor when over marker
 map.on('pointermove', function (e) {
-  if (e.dragging) {
-    $(element).popover('dispose');
-    return;
-  }
  const pixel = map.getEventPixel(e.originalEvent);
  const hit = map.hasFeatureAtPixel(pixel);
  map.getTarget().style.cursor = hit ? 'pointer' : '';
 });
+// Close the popup when the map is moved
+map.on('movestart', function () {
+  $(element).popover('dispose');
+});
--- a/examples/icon-sprite-webgl.html
+++ b/examples/icon-sprite-webgl.html
@@ -21,6 +21,6 @@ cloak:
 <div id="map" class="map"></div>
 <div>Current sighting: <span id="info"></span></div>
 <div>
-  Filter by UFO shape:
+  <label for="shape-filter">Filter by UFO shape:</label>
  <select id="shape-filter"></select>
 </div>
--- a/examples/icon.js
+++ b/examples/icon.js
@@ -56,7 +56,6 @@ const popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
-  offset: [0, -50],
 });
 map.addOverlay(popup);

@@ -66,8 +65,7 @@ map.on('click', function (evt) {
    return feature;
  });
  if (feature) {
-    const coordinates = feature.getGeometry().getCoordinates();
-    popup.setPosition(coordinates);
+    popup.setPosition(evt.coordinate);
    $(element).popover({
      placement: 'top',
      html: true,
@@ -81,11 +79,11 @@ map.on('click', function (evt) {

 // change mouse cursor when over marker
 map.on('pointermove', function (e) {
-  if (e.dragging) {
-    $(element).popover('dispose');
-    return;
-  }
  const pixel = map.getEventPixel(e.originalEvent);
  const hit = map.hasFeatureAtPixel(pixel);
  map.getTarget().style.cursor = hit ? 'pointer' : '';
 });
+// Close the popup when the map is moved
+map.on('movestart', function () {
+  $(element).popover('dispose');
+});
--- a/examples/igc.html
+++ b/examples/igc.html
@@ -7,7 +7,7 @@ docs: >
 tags: "complex-geometry, closest-feature, igc, opencyclemap"
 cloak:
  - key: 0e6fc415256d4fbb9b5166a718591d71
-    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+    value: Your API key from https://www.thunderforest.com/docs/apikeys/ here

 ---
 <div id="map" class="map"></div>
--- a/examples/iiif.html
+++ b/examples/iiif.html
@@ -10,7 +10,7 @@ tags: "IIIF, IIIF Image API, tile source"
 <div id="map" class="map"></div>
 <div class="controls">
  <div id="iiif-notification">&nbsp;</div>
-  Enter <code>info.json</code> URL:
+  <label for="imageInfoUrl">Enter <code>info.json</code> URL:</label>
  <input type="text" id="imageInfoUrl" value="https://iiif.ub.uni-leipzig.de/iiif/j2k/0000/0107/0000010732/00000072.jpx/info.json">
  <button id="display">Display image</button>
 </div>
--- a/examples/image-load-events.js
+++ b/examples/image-load-events.js
@@ -6,7 +6,7 @@ import View from '../src/ol/View.js';
 /**
 * Renders a progress bar.
 * @param {HTMLElement} el The target element.
- * @constructor
+ * @class
 */
 function Progress(el) {
  this.el = el;
--- a/examples/index.html
+++ b/examples/index.html
@@ -28,29 +28,6 @@
      .example:hover {
        background-color: #F5F5F5;
      }
-
-      ::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      ::-webkit-scrollbar-button {
-        width: 0;
-        height: 0;
-        display: none;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2);
-        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),inset 0 -1px 0 rgba(0, 0, 0, 0.07);
-      }
-
-      ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba(0, 0, 0, 0.4);
-      }
-
-      ::-webkit-scrollbar-corner {
-        background-color: transparent;
-      }
    </style>
    <script type="text/javascript" src="Jugl.js"></script>
    <script type="text/javascript" src="examples-info.js"></script>
--- a/examples/index.js
+++ b/examples/index.js
@@ -72,7 +72,7 @@
    // sort examples, first by number of words matched, then
    // by word frequency
    examples.sort(function (a, b) {
-      return a.score - b.score || a.words - b.words;
+      return b.score - a.score || b.words - a.words;
    });
    return examples;
  }
--- a/examples/kml-timezones.js
+++ b/examples/kml-timezones.js
@@ -82,11 +82,7 @@ const displayFeatureInfo = function (pixel) {
    return feature;
  });
  if (feature) {
-    info
-      .tooltip('hide')
-      .attr('data-original-title', feature.get('name'))
-      .tooltip('fixTitle')
-      .tooltip('show');
+    info.attr('data-original-title', feature.get('name')).tooltip('show');
  } else {
    info.tooltip('hide');
  }
--- a/examples/layer-group.css
+++ b/examples/layer-group.css
@@ -1,3 +1,6 @@
 #layertree li > span {
  cursor: pointer;
-}
+}
+#layertree label {
+  display: block;
+}
--- a/examples/layer-group.html
+++ b/examples/layer-group.html
@@ -18,37 +18,44 @@ cloak:
    <li><span>OSM layer</span>
      <fieldset id="layer0">
        <label class="checkbox" for="visible0">
-          <input id="visible0" class="visible" type="checkbox"/>visibility
+          visibile <input id="visible0" class="visible" type="checkbox"/>
+        </label>
+        <label>
+          opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
        </label>
-        <label>opacity</label>
-        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
      </fieldset>
    </li>
-    <li><span>Layer group</span>
+    <li>
+      <span>Layer group</span>
      <fieldset id="layer1">
        <label class="checkbox" for="visible1">
-          <input id="visible1" class="visible" type="checkbox"/>visibility
+          visibile <input id="visible1" class="visible" type="checkbox"/>
+        </label>
+        <label>
+          opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
        </label>
-        <label>opacity</label>
-        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
      </fieldset>
      <ul>
-        <li><span>Food insecurity layer</span>
+        <li>
+          <span>Food insecurity layer</span>
          <fieldset id="layer10">
            <label class="checkbox" for="visible10">
-              <input id="visible10" class="visible" type="checkbox"/>visibility
+              visibile <input id="visible10" class="visible" type="checkbox"/>
+            </label>
+            <label>
+              opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
            </label>
-            <label>opacity</label>
-            <input class="opacity" type="range" min="0" max="1" step="0.01"/>
          </fieldset>
        </li>
-        <li><span>World borders layer</span>
+        <li>
+          <span>World borders layer</span>
          <fieldset id="layer11">
            <label class="checkbox" for="visible11">
-              <input id="visible11" class="visible" type="checkbox"/>visibility
+              visibile <input id="visible11" class="visible" type="checkbox"/>
+            </label>
+            <label>
+              opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
            </label>
-            <label>opacity</label>
-            <input class="opacity" type="range" min="0" max="1" step="0.01"/>
          </fieldset>
        </li>
      </ul>
--- a/examples/layer-group.js
+++ b/examples/layer-group.js
@@ -49,19 +49,21 @@ function bindInputs(layerid, layer) {
  visibilityInput.prop('checked', layer.getVisible());

  const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input change', function () {
+  opacityInput.on('input', function () {
    layer.setOpacity(parseFloat(this.value));
  });
  opacityInput.val(String(layer.getOpacity()));
 }
-map.getLayers().forEach(function (layer, i) {
-  bindInputs('#layer' + i, layer);
-  if (layer instanceof LayerGroup) {
-    layer.getLayers().forEach(function (sublayer, j) {
-      bindInputs('#layer' + i + j, sublayer);
-    });
-  }
-});
+function setup(id, group) {
+  group.getLayers().forEach(function (layer, i) {
+    const layerid = id + i;
+    bindInputs(layerid, layer);
+    if (layer instanceof LayerGroup) {
+      setup(layerid, layer);
+    }
+  });
+}
+setup('#layer', map.getLayerGroup());

 $('#layertree li > span')
  .click(function () {
--- a/examples/layer-z-index.js
+++ b/examples/layer-z-index.js
@@ -56,7 +56,7 @@ function createLayer(coordinates, style, zIndex) {
  return vectorLayer;
 }

-const layer0 = createLayer([40, 40], styles['star'], 0);
+const layer0 = createLayer([40, 40], styles['star']);
 const layer1 = createLayer([0, 0], styles['square'], 1);
 const layer2 = createLayer([0, 40], styles['triangle'], 0);

--- a/examples/localized-openstreetmap.html
+++ b/examples/localized-openstreetmap.html
@@ -3,11 +3,11 @@ layout: example.html
 title: Localized OpenStreetMap
 shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
 docs: >
-  <p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>.
+  <p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="https://www.openseamap.org/">OpenSeaMap</a>.
 tags: "localized-openstreetmap, openseamap, openstreetmap"
 cloak:
  - key: 0e6fc415256d4fbb9b5166a718591d71
-    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+    value: Your API key from https://www.thunderforest.com/docs/apikeys/ here

 ---
 <div id="map" class="map"></div>
--- a/examples/localized-openstreetmap.js
+++ b/examples/localized-openstreetmap.js
@@ -18,7 +18,7 @@ const openCycleMapLayer = new TileLayer({
 const openSeaMapLayer = new TileLayer({
  source: new OSM({
    attributions: [
-      'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
+      'All maps © <a href="https://www.openseamap.org/">OpenSeaMap</a>',
      ATTRIBUTION,
    ],
    opaque: false,
--- a/examples/mapbox-layer.html
+++ b/examples/mapbox-layer.html
@@ -3,12 +3,14 @@ layout: example.html
 title: Mapbox-gl Layer
 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.
+  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.
+  mapbox-gl-js version 1.13.0 is used in this example as later versions require a Mapbox access token and are not compatible with older browsers.
 tags: "simple, mapbox, vector, tiles, maptiler"
 experimental: true
 resources:
-  - https://unpkg.com/mapbox-gl@1.11.1/dist/mapbox-gl.js
-  - https://unpkg.com/mapbox-gl@1.11.1/dist/mapbox-gl.css
+  - https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.0/mapbox-gl.js
+  - https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.0/mapbox-gl.css
 cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
    value: Get your own API key at https://www.maptiler.com/cloud/
--- a/examples/measure.css
+++ b/examples/measure.css
@@ -7,6 +7,8 @@
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
+  cursor: default;
+  user-select: none;
 }
 .ol-tooltip-measure {
  opacity: 1;
--- a/examples/measure.html
+++ b/examples/measure.html
@@ -16,7 +16,7 @@ tags: "draw, edit, measure, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Measurement type &nbsp;</label>
+  <label for="type">Measurement type &nbsp;</label>
  <select id="type">
    <option value="length">Length (LineString)</option>
    <option value="area">Area (Polygon)</option>
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -248,6 +248,8 @@ function createMeasureTooltip() {
    element: measureTooltipElement,
    offset: [0, -15],
    positioning: 'bottom-center',
+    stopEvent: false,
+    insertFirst: false,
  });
  map.addOverlay(measureTooltip);
 }
--- a/examples/mobile-full-screen.html
+++ b/examples/mobile-full-screen.html
@@ -4,8 +4,8 @@ title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"
 cloak:
-  - key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp 
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
+    value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
 ---
 <!doctype html>
 <html lang="en">
--- a/examples/modify-icon.html
+++ b/examples/modify-icon.html
@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Icon modification
+shortdesc: Example using a Modify interaction to edit an icon.
+docs: >
+  The icon on this map can be dragged to modify its location.
+  <p>The Modify interaction can be configured with a `hitDetection` option. With this option, the modification candidate will not be determined by the `pixelTolerance`, but match the visual appearance of the geometry.</p>
+tags: "vector, modify, icon, marker"
+---
+<div id="map" class="map"></div>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				{"routes":[{"geometry":"hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}NfIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA\|N??o[N_STiwAtEmHGeHcAkiA}^aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_EkUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]kDuZyDmm@i_@uyIJe~@jCg\|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mCum@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@kai@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgBk_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__DuhEgaKuWct@gp@cnBii@mlBa_@}\|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAwXyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrXitAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNmaCsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o~CfIewG\|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAmb@umAw\|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_lKszAu\|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc\|BwZknFoFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snAw`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ\|Lqeb@e]kgPcaAu}SkDwzGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwyA{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo\|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC\|gGahH~s@w}@``Fi~FpnAooC\|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBbh@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipAdy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_s@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ\|@oNdCoSfFwXhEmOnLi\\lbAulB`X_d@\|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G\|a@eTje@oS~]cLr~Bgh@\|b@}Jv}EieAlv@sPluD{z@nzA_]`\|KchCtd@sPvb@wSb{@ko@f`RooQ~e[upZbuIolI\|gFafFzu@iq@nMmJ\|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@\|QsAfYgEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~kDyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD\|D}Ed\|@ctAbIuOzqB_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jIab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJuEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL"}]}