Update package version to 6.5.0

Bump @babel/preset-env from 7.12.10 to 7.12.11

.github/codeql/config.yml

@@ -0,0 +1,4 @@
+name: "OpenLayers CodeQL Config"
+
+paths:
+  - src

.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

README.md

@@ -112,10 +112,12 @@ OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.wh
 
 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:
 
+* [`fetch`](https://caniuse.com/#feat=fetch): Available from [polyfill.io](https://polyfill.io/).
 * [`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).
+* [`TextDecoder`](https://caniuse.com/#feat=textencoder): 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 [pepjs](https://npmjs.com/package/pepjs) (for really, really old browsers).
 
 ## Documentation
 

changelog/upgrade-notes.md

@@ -1,5 +1,20 @@
 ## Upgrade notes
 
+### 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

changelog/v6.4.1.md

@@ -2,7 +2,9 @@
 
 This is a bugfix release which removes a few regressions that were introduced by v6.4.0, and fixes a few issues in examples caused by the website facelift.
 
-## List of all changes * [#11346](https://github.com/openlayers/openlayers/pull/11346) - Fix text instruction flat coordinates when stride is not 2 ([@ahocevar](https://github.com/ahocevar))
+## List of all changes
+
+ * [#11346](https://github.com/openlayers/openlayers/pull/11346) - Fix text instruction flat coordinates when stride is not 2 ([@ahocevar](https://github.com/ahocevar))
  * [#11348](https://github.com/openlayers/openlayers/pull/11348) - Add all layers to layer export ([@M393](https://github.com/M393))
  * [#11337](https://github.com/openlayers/openlayers/pull/11337) - Do not rely on old value for target ([@ahocevar](https://github.com/ahocevar))
  * [#11345](https://github.com/openlayers/openlayers/pull/11345) - Fix the popup in the geographic example ([@MoonE](https://github.com/MoonE))

changelog/v6.4.2.md

@@ -0,0 +1,14 @@
+# 6.4.2
+
+This is a bugfix release which removes a few regressions that were introduced by v6.4.0, and fixes a few issues in examples.
+
+See the [v6.4.0 release notes](https://github.com/openlayers/openlayers/releases/tag/v6.4.0) for a complete list of changes and upgrade notes when upgrading from v6.3.x.
+
+## List of all changes
+
+ * [#11364](https://github.com/openlayers/openlayers/pull/11364) - Load pointer events polyfill - before other polyfills ([@ahocevar](https://github.com/ahocevar))
+ * [#11365](https://github.com/openlayers/openlayers/pull/11365) - Revert to original method proposed in #11193 ([@mike-000](https://github.com/mike-000))
+ * [#11359](https://github.com/openlayers/openlayers/pull/11359) - check projection can wrap before getting width ([@mike-000](https://github.com/mike-000))
+ * [#11355](https://github.com/openlayers/openlayers/pull/11355) - Cloak API key with instructions where to get one ([@ahocevar](https://github.com/ahocevar))
+ * [#11354](https://github.com/openlayers/openlayers/pull/11354) - Fix line breaks in changelog ([@ahocevar](https://github.com/ahocevar))
+

changelog/v6.4.3.md

@@ -0,0 +1,29 @@
+# 6.4.3
+
+This is a bugfix release which fixes a performance regression, a rendering issue, and adds improvements to a few examples.
+
+See the [v6.4.0 release notes](https://github.com/openlayers/openlayers/releases/tag/v6.4.0) for a complete list of changes and upgrade notes when upgrading from v6.3.x.
+
+## List of all changes
+
+ * [#11379](https://github.com/openlayers/openlayers/pull/11379) - tooltip bs on fullscreen ([@jipexu](https://github.com/jipexu))
+ * [#11378](https://github.com/openlayers/openlayers/pull/11378) - Fix imageSmoothing: false when ImageStatic is stretched to fit extent ([@mike-000](https://github.com/mike-000))
+ * [#11367](https://github.com/openlayers/openlayers/pull/11367) - Use https for mapbox tiles ([@MoonE](https://github.com/MoonE))
+ * [#11377](https://github.com/openlayers/openlayers/pull/11377) - Only include renderBuffer when decluttering ([@ahocevar](https://github.com/ahocevar))
+ * [#11376](https://github.com/openlayers/openlayers/pull/11376) - Overlay Eample - Show the popup in front of the other overlays ([@MoonE](https://github.com/MoonE))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#11381](https://github.com/openlayers/openlayers/pull/11381) - Bump karma from 5.1.0 to 5.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#11383](https://github.com/openlayers/openlayers/pull/11383) - Bump worker-loader from 2.0.0 to 3.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11386](https://github.com/openlayers/openlayers/pull/11386) - Bump webpack from 4.44.0 to 4.44.1 ([@openlayers](https://github.com/openlayers))
+ * [#11384](https://github.com/openlayers/openlayers/pull/11384) - Bump @babel/core from 7.10.5 to 7.11.0 ([@openlayers](https://github.com/openlayers))
+ * [#11382](https://github.com/openlayers/openlayers/pull/11382) - Bump mocha from 8.0.1 to 8.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11385](https://github.com/openlayers/openlayers/pull/11385) - Bump @babel/preset-env from 7.10.4 to 7.11.0 ([@openlayers](https://github.com/openlayers))
+ * [#11387](https://github.com/openlayers/openlayers/pull/11387) - Bump eslint from 7.5.0 to 7.6.0 ([@openlayers](https://github.com/openlayers))
+ * [#11388](https://github.com/openlayers/openlayers/pull/11388) - Bump terser-webpack-plugin from 3.0.7 to 3.0.8 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

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>

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>';
-  });
 });

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,23 +61,42 @@ 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;
+    position: sticky;
+    top: 54px;
+    height: calc(100vh - 54px);
   }
-    .navigation-list{
-      height:140px;
+  .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;
   }
 }
 
@@ -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;
   }

config/jsdoc/api/template/tmpl/container.tmpl

@@ -54,11 +54,15 @@
 <article>
     <div class="container-overview">
     <?js if (doc.kind === 'module' && doc.module) { ?>
+        <dl>
             <?js= self.partial('method.tmpl', doc.module) ?>
+        </dl>
     <?js } ?>
 
     <?js if (doc.kind === 'class') { ?>
+        <dl>
             <?js= self.partial('method.tmpl', doc) ?>
+        </dl>
     <?js } else { ?>
         <?js if (doc.description) { ?>
             <div class="description"><?js= doc.description ?></div>

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>
@@ -97,7 +97,7 @@ var version = obj.packageInfo.version;
                 <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                 <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                 <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
-                <a class="dropdown-item" href="../workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
+                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                 <div class="dropdown-divider"></div>
                 <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
             </div>
@@ -108,7 +108,7 @@ var version = obj.packageInfo.version;
             <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
               <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
-              <a class="dropdown-item" href="../download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
+              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
             </div>
            </li>
           </ul>

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' : '' ?>">
-    <div class="nameContainer<?js if (data.inherited) { ?> inherited<?js } ?>">
     <?js if (data.stability || kind !== 'class') { ?>
+    <div class="nameContainer<?js if (data.inherited) { ?> inherited<?js } ?>">
         <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 } ?>

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -51,9 +51,12 @@ function listContent(item, title, listItemPrinter) {
 }
 ?>
 <div class="navigation col-md-4 col-lg-3">
+    <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() ?>">
@@ -67,4 +70,5 @@ function listContent(item, title, listItemPrinter) {
                     listContent(item, 'Fires', printFiresListItem);
             }); ?>
         </ul>
+    </div>
 </div>

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;
-    },
-  });
-};

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"
     ],

config/jsdoc/info/publish.js

@@ -1,6 +1,5 @@
 /**
- * @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');
@@ -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;
         }
-        }
         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];

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
 
@@ -249,3 +249,7 @@ 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.
+
+### 68
+
+Data from this source can only be rendered if it has a projection compatible with the view projection.

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](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 `fetch`, `requestAnimationFrame`, `Element.prototype.classList`, `URL` and `TextDecoder`.
 
 The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.
 

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,

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="http://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>

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' : '';
+});

examples/button-title.html

@@ -4,6 +4,7 @@ title: Custom Tooltips
 shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >
   This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/components/tooltips/">Bootstrap</a>.
+  For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
 tags: "custom, tooltip"
 resources:
   - https://code.jquery.com/jquery-3.5.1.min.js

examples/button-title.js

@@ -19,7 +19,9 @@ const map = new Map({
 
 $('.ol-zoom-in, .ol-zoom-out').tooltip({
   placement: 'right',
+  container: '#map',
 });
 $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
   placement: 'left',
+  container: '#map',
 });

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

examples/cluster.html

@@ -8,6 +8,6 @@ tags: "cluster, vector"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>cluster distance</label>
+  <label for="distance">cluster distance</label>
   <input id="distance" type="range" min="0" max="100" step="1" value="40"/>
 </form>

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;
 }

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>

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>

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,
+  }),
+});

examples/custom-interactions.js

@@ -139,7 +139,7 @@ const map = new Map({
     new TileLayer({
       source: new TileJSON({
         url:
-          'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' +
+          'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?secure&access_token=' +
           key,
       }),
     }),

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"}]}

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;
+}

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>

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');
+});

examples/drag-and-drop-custom-mvt.css

@@ -0,0 +1,3 @@
+.tileCoord input {
+  width: 60px;
+}

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>

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);
+});

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>

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,7 +28,24 @@ const map = new Map({
   }),
 });
 
-dragAndDropInteraction.on('addfeatures', function (event) {
+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,
+    ],
+  });
+  dragAndDropInteraction.on('addfeatures', function (event) {
     const vectorSource = new VectorSource({
       features: event.features,
     });
@@ -46,7 +55,12 @@ dragAndDropInteraction.on('addfeatures', function (event) {
       })
     );
     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');
+  });

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>

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>

examples/draw-features.js

@@ -45,4 +45,8 @@ typeSelect.onchange = function () {
   addInteraction();
 };
 
+document.getElementById('undo').addEventListener('click', function () {
+  draw.removeLastPoint();
+});
+
 addInteraction();

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>

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>

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();

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>

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) {
+// 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;
+
+    const route = new Polyline({
+      factor: 1e6,
+    }).readGeometry(polyline, {
+      dataProjection: 'EPSG:4326',
+      featureProjection: 'EPSG:3857',
+    });
+
+    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 - now;
-    // here the trick to increase speed is to jump some indexes
-    // on lineString coordinates
-    const index = Math.round((speed * elapsedTime) / 1000);
+        const elapsedTime = frameState.time - startTime;
+        const distance = (speed * elapsedTime) / 1e6;
 
-    if (index >= routeLength) {
+        if (distance >= 1) {
           stopAnimation(true);
           return;
         }
 
-    const currentPoint = new Point(routeCoords[index]);
+        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();
-};
+    }
 
-function startAnimation() {
+    function startAnimation() {
       if (animating) {
         stopAnimation(false);
       } else {
         animating = true;
-    now = new Date().getTime();
+        startTime = new Date().getTime();
         speed = speedInput.value;
         startButton.textContent = 'Cancel Animation';
         // hide geoMarker
-    geoMarker.setStyle(null);
+        geoMarker.changed();
         // just in case you pan somewhere else
         map.getView().setCenter(center);
         vectorLayer.on('postrender', moveFeature);
         map.render();
       }
-}
+    }
 
-/**
- * @param {boolean} ended end of animation.
- */
-function stopAnimation(ended) {
+    function stopAnimation(ended) {
       animating = false;
       startButton.textContent = 'Start Animation';
 
       // 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
+      const coord = route.getCoordinateAt(ended ? 1 : 0);
+      geoMarker.getGeometry().setCoordinates(coord);
+      // remove listener
       vectorLayer.un('postrender', moveFeature);
-}
+    }
 
-startButton.addEventListener('click', startAnimation, false);
+    startButton.addEventListener('click', startAnimation, false);
+  });
+});

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>

examples/geolocation-orientation.html

@@ -35,6 +35,8 @@ tags: "fullscreen, geolocation, orientation, mobile"
           left: 10px;
       }
     </style>
+    <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
   </head>
   <body>
     <div id="map" class="map"></div>

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>

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>

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]));
+  }
+});

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>

examples/hit-tolerance.js

@@ -57,10 +57,10 @@ map.on('singleclick', function (e) {
   );
   if (hit) {
     style.getStroke().setColor('green');
-    statusElement.innerHTML = ' A feature got hit!';
+    statusElement.innerHTML = 'A feature got hit!';
   } else {
     style.getStroke().setColor('black');
-    statusElement.innerHTML = ' No feature got hit.';
+    statusElement.innerHTML = 'No feature got hit.';
   }
   feature.changed();
 });

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,
@@ -91,7 +91,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
     crossOrigin: '',
   }),
 });

examples/icon-scale.js

@@ -12,7 +12,7 @@ import {getVectorContext} from '../src/ol/render.js';
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
     crossOrigin: '',
   }),
 });

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>

examples/icon.js

@@ -36,7 +36,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
     crossOrigin: '',
   }),
 });

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>

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>
@@ -86,7 +63,7 @@
                 <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                 <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                 <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
-                <a class="dropdown-item" href="../workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
+                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                 <div class="dropdown-divider"></div>
                 <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
             </div>
@@ -97,7 +74,7 @@
             <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
             <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
               <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
-              <a class="dropdown-item" href="../download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
+              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
             </div>
            </li>
         </ul>

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;
   }

examples/layer-group.css

@@ -1,3 +1,6 @@
 #layertree li > span {
   cursor: pointer;
 }
+#layertree label {
+  display: block;
+}

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>

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);
+function setup(id, group) {
+  group.getLayers().forEach(function (layer, i) {
+    const layerid = id + i;
+    bindInputs(layerid, layer);
     if (layer instanceof LayerGroup) {
-    layer.getLayers().forEach(function (sublayer, j) {
-      bindInputs('#layer' + i + j, sublayer);
-    });
+      setup(layerid, layer);
     }
-});
+  });
+}
+setup('#layer', map.getLayerGroup());
 
 $('#layertree li > span')
   .click(function () {

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

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>

examples/mobile-full-screen.html

@@ -23,6 +23,8 @@ cloak:
         height: 100%;
       }
     </style>
+    <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
   </head>
   <body>
     <div id="map" class="map"></div>

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 `layer` option. With this option, hit detection will be used to determine the modification candidate.</p>
+tags: "vector, modify, icon, marker"
+---
+<div id="map" class="map"></div>

examples/modify-icon.js

@@ -0,0 +1,66 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import Point from '../src/ol/geom/Point.js';
+import TileJSON from '../src/ol/source/TileJSON.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Icon, Style} from '../src/ol/style.js';
+import {Modify} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+  name: 'Null Island',
+  population: 4000,
+  rainfall: 500,
+});
+
+const iconStyle = new Style({
+  image: new Icon({
+    anchor: [0.5, 46],
+    anchorXUnits: 'fraction',
+    anchorYUnits: 'pixels',
+    src: 'data/icon.png',
+  }),
+});
+
+iconFeature.setStyle(iconStyle);
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
+
+const rasterLayer = new TileLayer({
+  source: new TileJSON({
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
+    crossOrigin: '',
+  }),
+});
+
+const target = document.getElementById('map');
+const map = new Map({
+  layers: [rasterLayer, vectorLayer],
+  target: target,
+  view: new View({
+    center: [0, 0],
+    zoom: 3,
+  }),
+});
+
+const modify = new Modify({
+  hitDetection: vectorLayer,
+  source: vectorSource,
+});
+modify.on(['modifystart', 'modifyend'], function (evt) {
+  target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
+});
+const overlaySource = modify.getOverlay().getSource();
+overlaySource.on(['addfeature', 'removefeature'], function (evt) {
+  target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
+});
+
+map.addInteraction(modify);

examples/mouse-position.html

@@ -9,11 +9,11 @@ tags: "mouse-position, openstreetmap"
 <div id="map" class="map"></div>
 <div id="mouse-position"></div>
 <form>
-  <label>Projection </label>
+  <label for="projection">Projection </label>
   <select id="projection">
     <option value="EPSG:4326">EPSG:4326</option>
     <option value="EPSG:3857">EPSG:3857</option>
   </select>
-  <label>Precision </label>
+  <label for="precision">Precision</label>
   <input id="precision" type="number" min="0" max="12" value="4"/>
 </form>

examples/moveend.html

@@ -3,11 +3,15 @@ layout: example.html
 title: Moveend Event
 shortdesc: Use of the moveend event.
 docs: >
-  <p>In this example, a listener is registered for the map's <code>moveend</code> event.  Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
+  <p>
+    In this example, a listener is registered for the map's
+    <code>moveend</code> event.  Whenever this listener is called,
+    it updates the inputs below with the map extent in decimal degrees.
+  </p>
 tags: "moveend, map, event"
 ---
 <div id="map" class="map"></div>
-<label>top</label><input type="text" id="top">
-<label>right</label><input type="text" id="right"><br>
-<label>bottom</label><input type="text" id="bottom">
-<label>left</label><input type="text" id="left">
+<label>left: <input readonly="readonly" type="text" id="left"></label>
+<label>right: <input readonly="readonly" type="text" id="right"></label>
+<label>bottom: <input readonly="readonly" type="text" id="bottom"></label>
+<label>top: <input readonly="readonly" type="text" id="top"></label>

examples/offscreen-canvas.html

@@ -6,5 +6,9 @@ docs: >
   The map in this example is rendered in a web worker, using `OffscreenCanvas`. **Note:** This is currently only supported in Chrome and Edge.
 tags: "worker, offscreencanvas, vector-tiles"
 experimental: true
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+
 ---
 <div id="map" class="map"></div>

examples/offscreen-canvas.worker.js

@@ -6,7 +6,6 @@ import stringify from 'json-stringify-safe';
 import styleFunction from 'ol-mapbox-style/dist/stylefunction.js';
 import {Projection} from '../src/ol/proj.js';
 import {inView} from '../src/ol/layer/Layer.js';
-import {renderDeclutterItems} from '../src/ol/render.js';
 import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js';
 
 /** @type {any} */
@@ -145,7 +144,7 @@ worker.addEventListener('message', (event) => {
       renderer.renderFrame(frameState, canvas);
     }
   });
-  renderDeclutterItems(frameState, null);
+  layers.forEach((layer) => layer.renderDeclutter(frameState));
   if (tileQueue.getTilesLoading() < maxTotalLoading) {
     tileQueue.reprioritize();
     tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);

examples/overlay.js

@@ -21,6 +21,12 @@ const map = new Map({
 
 const pos = fromLonLat([16.3725, 48.208889]);
 
+// Popup showing the position the user clicked
+const popup = new Overlay({
+  element: document.getElementById('popup'),
+});
+map.addOverlay(popup);
+
 // Vienna marker
 const marker = new Overlay({
   position: pos,
@@ -37,12 +43,6 @@ const vienna = new Overlay({
 });
 map.addOverlay(vienna);
 
-// Popup showing the position the user clicked
-const popup = new Overlay({
-  element: document.getElementById('popup'),
-});
-map.addOverlay(popup);
-
 map.on('click', function (evt) {
   const element = popup.getElement();
   const coordinate = evt.coordinate;

examples/overviewmap-custom.html

@@ -11,4 +11,4 @@ cloak:
 
 ---
 <div id="map" class="map"></div>
-<div><input type="checkbox" id="rotateWithView">Rotate with view</div>
+<div><label><input type="checkbox" id="rotateWithView"> Rotate with view</label></div>

examples/permalink.js

@@ -13,7 +13,7 @@ if (window.location.hash !== '') {
   const hash = window.location.hash.replace('#map=', '');
   const parts = hash.split('/');
   if (parts.length === 4) {
-    zoom = parseInt(parts[0], 10);
+    zoom = parseFloat(parts[0]);
     center = [parseFloat(parts[1]), parseFloat(parts[2])];
     rotation = parseFloat(parts[3]);
   }
@@ -45,11 +45,11 @@ const updatePermalink = function () {
   const center = view.getCenter();
   const hash =
     '#map=' +
-    view.getZoom() +
+    view.getZoom().toFixed(2) +
     '/' +
-    Math.round(center[0] * 100) / 100 +
+    center[0].toFixed(2) +
     '/' +
-    Math.round(center[1] * 100) / 100 +
+    center[1].toFixed(2) +
     '/' +
     view.getRotation();
   const state = {

examples/print-to-scale.html

@@ -18,7 +18,7 @@ resources:
   <div id="map" class="map"></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>
@@ -27,14 +27,14 @@ 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>
     <option value="200" selected>200 dpi</option>
     <option value="300">300 dpi (slow)</option>
   </select>
-  <label>Scale </label>
+  <label for="scale">Scale </label>
   <select id="scale">
     <option value="500">1:500000</option>
     <option value="250" selected>1:250000</option>

examples/region-growing.css

@@ -1,4 +1,6 @@
-table.controls td {
-  min-width: 110px;
-  padding: 2px 5px;
+.map {
+  cursor: pointer;
+}
+#threshold {
+  margin: 0 0.6em;
 }

examples/region-growing.html

@@ -28,10 +28,11 @@ cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
 ---
-<div id="map" class="map" style="cursor: pointer"></div>
-<table class="controls">
-  <tr>
-    <td>Threshold: <span id="threshold-value"></span></td>
-    <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
-  </tr>
-</table>
+<div id="map" class="map"></div>
+<div>
+  <label class="input-group">
+    Threshold:
+    <input id="threshold" type="range" min="1" max="50" value="20">
+    <span id="threshold-value"></span>
+  </label>
+</div>

examples/regularshape.html

@@ -6,8 +6,9 @@ docs: >
   This example shows how several regular shapes
   or symbols (representing `x`, `cross`, `star`,
   `triangle`, `square` and `stacked`) can be created.
+  A `rectangle` is produced by scaling a square created without rotation.
 
   Style `stacked` represents possility to stack multiple shapes with offset
-tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
+tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x"
 ---
 <div id="map" class="map"></div>

examples/regularshape.js

@@ -19,6 +19,17 @@ const styles = {
       angle: Math.PI / 4,
     }),
   }),
+  'rectangle': new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      radius: 10 / Math.SQRT2,
+      radius2: 10,
+      points: 4,
+      angle: 0,
+      scale: [1, 0.5],
+    }),
+  }),
   'triangle': new Style({
     image: new RegularShape({
       fill: fill,
@@ -82,14 +93,24 @@ const styles = {
   ],
 };
 
-const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked'];
+const styleKeys = [
+  'x',
+  'cross',
+  'star',
+  'triangle',
+  'square',
+  'rectangle',
+  'stacked',
+];
 const count = 250;
 const features = new Array(count);
 const e = 4500000;
 for (let i = 0; i < count; ++i) {
   const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
   features[i] = new Feature(new Point(coordinates));
-  features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 6)]]);
+  features[i].setStyle(
+    styles[styleKeys[Math.floor(Math.random() * styleKeys.length)]]
+  );
 }
 
 const source = new VectorSource({

examples/reprojection-image.html

@@ -7,4 +7,7 @@ docs: >
 tags: "reprojection, projection, proj4js, image, imagestatic"
 ---
 <div id="map" class="map"></div>
-<div><input type="checkbox" id="imageSmoothing" checked />Image smoothing</div>
+<div>
+  <input type="checkbox" id="imageSmoothing" checked />
+  <label for="imageSmoothing">Image smoothing</label>
+</div>

examples/reprojection.html

@@ -9,14 +9,14 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
 <div id="map" class="map"></div>
 <form class="form-inline">
   <div class="col-md-3">
-    <label>Base map:</label>
+    <label for="base-layer">Base map:</label>
     <select id="base-layer">
       <option value="osm">OSM (EPSG:3857)</option>
       <option value="wms4326">WMS (EPSG:4326)</option>
     </select>
   </div>
   <div class="col-md-4">
-    <label>Overlay map:</label>
+    <label for="overlay-layer">Overlay map:</label>
     <select id="overlay-layer">
       <option value="bng">British National Grid (EPSG:27700)</option>
       <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
@@ -25,7 +25,7 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
     </select>
   </div>
   <div class="col-md-5">
-    <label>View projection:</label>
+    <label for="view-projection">View projection:</label>
     <select id="view-projection">
       <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
       <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>

examples/reprojection.js

@@ -7,7 +7,7 @@ import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js';
 import proj4 from 'proj4';
 import {OSM, TileImage, TileWMS} from '../src/ol/source.js';
 import {getCenter, getWidth} from '../src/ol/extent.js';
-import {get as getProjection} from '../src/ol/proj.js';
+import {get as getProjection, transformExtent} from '../src/ol/proj.js';
 import {register} from '../src/ol/proj/proj4.js';
 
 proj4.defs(
@@ -51,7 +51,7 @@ proj4.defs(
 register(proj4);
 
 const proj27700 = getProjection('EPSG:27700');
-proj27700.setExtent([0, 0, 700000, 1300000]);
+proj27700.setExtent([-650000, -150000, 1350000, 1450000]);
 
 const proj23032 = getProjection('EPSG:23032');
 proj23032.setExtent([-1206118.71, 4021309.92, 1295389.0, 8051813.28]);
@@ -92,8 +92,8 @@ layers['wms4326'] = new TileLayer({
 layers['wms21781'] = new TileLayer({
   source: new TileWMS({
     attributions:
-      '© <a href="http://www.geo.admin.ch/internet/geoportal/' +
-      'en/home.html">Pixelmap 1:1000000 / geo.admin.ch</a>',
+      '© <a href="https://shop.swisstopo.admin.ch/en/products/maps/national/lk1000"' +
+      'target="_blank">Pixelmap 1:1000000 / geo.admin.ch</a>',
     crossOrigin: 'anonymous',
     params: {
       'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
@@ -139,7 +139,8 @@ fetch(urlB)
       layer: 'OS_Open_Raster',
     });
     options.attributions =
-      'Contains OS data © Crown Copyright and database right 2019';
+      'Contains OS data © Crown Copyright and database right ' +
+      new Date().getFullYear();
     options.crossOrigin = '';
     options.projection = 'EPSG:27700';
     options.wrapX = false;
@@ -195,8 +196,10 @@ function updateViewProjection() {
   map.setView(newView);
 
   // Example how to prevent double occurrence of map by limiting layer extent
-  if (newProj == getProjection('EPSG:3857')) {
-    layers['bng'].setExtent([-1057216, 6405988, 404315, 8759696]);
+  if (newProj.isGlobal()) {
+    layers['bng'].setExtent(
+      transformExtent(proj27700.getExtent(), proj27700, newProj, 2)
+    );
   } else {
     layers['bng'].setExtent(undefined);
   }

examples/resources/common.js

@@ -2,39 +2,31 @@
 
   function compress(json) {
     return LZString.compressToBase64(JSON.stringify(json))
-      .replace(/\+/g, `-`)
-      .replace(/\//g, `_`)
-      .replace(/=+$/, ``);
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
   }
 
   function fetchResource(resource) {
-    return new Promise((resolve, reject) => {
-      const isImage = /\.(png|jpe?g|gif|tiff)$/.test(resource);
-      const xhr = new XMLHttpRequest();
-      xhr.open('GET', resource);
+    return new Promise(function (resolve, reject) {
+      const isImage = /\.(png|jpe?g|gif|tiff|svg|kmz)$/.test(resource);
       if (isImage) {
-        xhr.responseType = 'blob';
-      } else {
-        xhr.responseType = 'text';
-      }
-      xhr.addEventListener('load', () => {
-        if (isImage) {
-          const a = new FileReader();
-          a.addEventListener('load', e => {
         resolve ({
           isBinary: true,
-              content: e.target.result
-            })
+          content: new URL(resource, window.location.href).href
         });
-          a.readAsDataURL(xhr.response);
       } else {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', resource);
+        xhr.responseType = 'text';
+        xhr.addEventListener('load', function () {
           resolve ({
             content: xhr.response
-          })
-        }
+          });
         });
         xhr.addEventListener('error', reject);
         xhr.send();
+      }
     })
   }
 
@@ -42,24 +34,37 @@
   if (codepenButton) {
     const form = document.getElementById('codepen-form');
     codepenButton.href = form.action;
-    codepenButton.addEventListener('click', function(event) {
+    codepenButton.addEventListener('click', function (event) {
       event.preventDefault();
-      const html = document.getElementById('example-html-source').innerText;
-      const js = document.getElementById('example-js-source').innerText;
+      const innerText = document.documentMode ? 'textContent' : 'innerText';
+      const html = document.getElementById('example-html-source')[innerText];
+      const js = document.getElementById('example-js-source')[innerText];
       const workerContainer = document.getElementById('example-worker-source');
-      const worker = workerContainer ? workerContainer.innerText : undefined;
-      const pkgJson = document.getElementById('example-pkg-source').innerText;
+      const worker = workerContainer ? workerContainer[innerText] : undefined;
+      const pkgJson = document.getElementById('example-pkg-source')[innerText];
 
       const unique = new Set();
-      const localResources = (js.match(/'data\/[^']*/g) || [])
-        .concat(js.match(/'resources\/[^']*/g) || [])
-        .map(f => f.slice(1))
-        .filter(f => unique.has(f) ? false : unique.add(f));
+      const localResources = (js.match(/'(\.\/)?data\/[^']*/g) || [])
+        .concat(js.match(/'(\.\/)?resources\/[^']*/g) || [])
+        .map(
+          function (f) {
+            return f.replace(/^'(\.\/)?/, '');
+          }
+        )
+        .filter(
+          function (f) {
+            return unique.has(f) ? false : (unique.add(f) || unique);
+          }
+        );
 
-      const promises = localResources.map(resource => fetchResource(resource));
+      const promises = localResources.map(
+        function (resource) {
+          return fetchResource(resource);
+        }
+      );
 
-      Promise.all(promises)
-        .then(results => {
+      Promise.all(promises).then(
+        function (results) {
           const files = {
             'index.html': {
               content: html
@@ -67,7 +72,7 @@
             'main.js': {
               content: js
             },
-            "package.json": {
+            'package.json': {
               content: pkgJson
             },
             'sandbox.config.json': {
@@ -89,7 +94,8 @@
 
           form.parameters.value = compress(data);
           form.submit();
-        });
+        }
+      );
     });
   }
 })();

examples/scale-line.html

@@ -28,5 +28,5 @@ tags: "scale-line, openstreetmap"
 </select>
 
 <div id="showScaleTextDiv" style="display:none">
-  <input type="checkbox" id="showScaleText" checked>Show scale text
+  <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
 </div>

examples/select-features.html

@@ -10,7 +10,7 @@ tags: "select, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Action type &nbsp;</label>
+  <label for="type">Action type &nbsp;</label>
   <select id="type" class="form-control">
     <option value="click" selected>Click</option>
     <option value="singleclick">Single-click</option>

examples/shaded-relief.css

@@ -1,4 +1,7 @@
 table.controls td {
-  text-align: center;
   padding: 2px 5px;
 }
+table.controls td:nth-child(3) {
+  text-align: right;
+  min-width: 3em;
+}

examples/shaded-relief.html

@@ -28,15 +28,18 @@ tags: "raster, shaded relief"
 <div id="map" class="map"></div>
 <table class="controls">
   <tr>
-    <td>vertical exaggeration: <span id="vertOut"></span>x</td>
+    <td><label for="vert">vertical exaggeration:</label></td>
     <td><input id="vert" type="range" min="1" max="5" value="1"/></td>
+    <td><span id="vertOut"></span> x</td>
   </tr>
   <tr>
-    <td>sun elevation: <span id="sunElOut"></span>°</td>
+    <td><label for="sunEl">sun elevation:</label></td>
     <td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
+    <td><span id="sunElOut"></span> °</td>
   </tr>
   <tr>
-    <td>sun azimuth: <span id="sunAzOut"></span>°</td>
+    <td><label for="sunAz">sun azimuth:</label></td>
     <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
+    <td><span id="sunAzOut"></span> °</td>
   </tr>
 </table>

examples/snap.html

@@ -24,7 +24,7 @@ tags: "draw, edit, modify, vector, snap"
     </label>
   </div>
   <div class="form-group">
-    <label>Draw type &nbsp;</label>
+    <label for="draw-type">Draw type &nbsp;</label>
     <select name="draw-type" id="draw-type">
       <option value="Point">Point</option>
       <option value="LineString">LineString</option>

examples/style-renderer.css

@@ -0,0 +1,3 @@
+#map {
+  background: #75d0f0;
+}

examples/style-renderer.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Style renderer
+shortdesc: Example of a style with a custom renderer.
+docs: >
+  A custom style renderer and a clip path are used to render the flag of a country as fill for the country shape.
+tags: "vector, geojson, style, custom, renderer"
+---
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/style-renderer.js

@@ -0,0 +1,73 @@
+import GeoJSON from '../src/ol/format/GeoJSON.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 {getBottomLeft, getHeight, getWidth} from '../src/ol/extent.js';
+import {toContext} from '../src/ol/render.js';
+
+const fill = new Fill();
+const stroke = new Stroke({
+  color: 'rgba(255,255,255,0.8)',
+  width: 2,
+});
+const style = new Style({
+  renderer: function (pixelCoordinates, state) {
+    const context = state.context;
+    const geometry = state.geometry.clone();
+    geometry.setCoordinates(pixelCoordinates);
+    const extent = geometry.getExtent();
+    const width = getWidth(extent);
+    const height = getHeight(extent);
+    const flag = state.feature.get('flag');
+    if (!flag || height < 1 || width < 1) {
+      return;
+    }
+
+    // Stitch out country shape from the blue canvas
+    context.save();
+    const renderContext = toContext(context, {
+      pixelRatio: 1,
+    });
+    renderContext.setFillStrokeStyle(fill, stroke);
+    renderContext.drawGeometry(geometry);
+    context.clip();
+
+    // Fill transparent country with the flag image
+    const bottomLeft = getBottomLeft(extent);
+    const left = bottomLeft[0];
+    const bottom = bottomLeft[1];
+    context.drawImage(flag, left, bottom, width, height);
+    context.restore();
+  },
+});
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    url:
+      'https://openlayersbook.github.io/openlayers_book_samples/assets/data/countries.geojson',
+    format: new GeoJSON(),
+  }),
+  style: style,
+});
+
+// Load country flags and set them as `flag` attribute on the country feature
+vectorLayer.getSource().on('addfeature', function (event) {
+  const feature = event.feature;
+  const img = new Image();
+  img.onload = function () {
+    feature.set('flag', img);
+  };
+  img.src =
+    'https://flagcdn.com/w320/' + feature.get('iso_a2').toLowerCase() + '.png';
+});
+
+new Map({
+  layers: [vectorLayer],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+});

examples/templates/example.html

@@ -67,8 +67,8 @@
     <link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
     <link rel="stylesheet" href="./css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
     <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
     {{{ extraHead.local }}}
     {{{ css.tag }}}
     <title>{{ title }}</title>
@@ -93,7 +93,7 @@
                 <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                 <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                 <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
-                <a class="dropdown-item" href="../workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
+                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                 <div class="dropdown-divider"></div>
                 <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
             </div>
@@ -104,7 +104,7 @@
             <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
             <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
               <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
-              <a class="dropdown-item" href="../download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
+              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
             </div>
            </li>
         </ul>
@@ -189,11 +189,12 @@
         <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
   &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
-    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
-    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
     &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
-    &lt;script src="https://unpkg.com/@openlayers/pepjs"&gt;&lt;/script&gt;{{#if extraHead.remote}}
+    &lt;script src="https://unpkg.com/elm-pep"&gt;&lt;/script&gt;{{#if extraHead.remote}}
+    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
+    &lt;script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"&gt;&lt;/script&gt;
 {{ indent extraHead.remote spaces=4 }}{{/if}}
     &lt;style&gt;
       .map {