Updates for the 6.13.0 release

Update ol-mapbox-style for rich text labels support

.github/workflows/test.yml

@@ -101,7 +101,7 @@ jobs:
         run: npm run build-package
 
       - name: Generate the Legacy Build
-        run: npm run build-legacy && npx eslint --fix build/index.js
+        run: "npm run build-legacy && npx eslint --rule 'import/no-duplicates: off' --fix build/index.js"
 
   rendering:
     name: Rendering

DEVELOPING.md

@@ -2,7 +2,7 @@
 
 ## Setting up development environment
 
-You will obviously start by
+You will start by
 [forking](https://github.com/openlayers/openlayers/fork) the OpenLayers repository.
 
 ### Development dependencies
@@ -26,6 +26,28 @@ To run the examples you first need to start the dev server:
 
 Then, load <http://localhost:8080/> in your browser.
 
+## Linking Package
+
+The `ol` package is published from the `build/ol` folder of the `openlayers` repo. 
+
+After you've cloned the `openlayers` repo locally run the `npm build-package` to prepare the build then use the `npm link` command to connect it your project. 
+
+Below is an example of how to build and link it to "sample-project"
+
+
+    $ cd openlayers
+    $ npm run build-package
+    $ cd build/ol
+    $ npm link
+    $ cd /sample-project
+    $ npm link ol
+
+To remove the link run the following commands
+
+    $ cd sample-project
+    $ npm unlink --no-save ol
+    $ cd ../openlayers
+    $ npm unlink
 ## Running tests
 
 To run the tests once:

changelog/upgrade-notes.md

@@ -1,5 +1,27 @@
 ## Upgrade notes
 
+### Next
+
+### v6.13.0
+
+#### New `layer.getData()` method
+
+Raster layers (static images, image tiles, data tiles) have a new `layer.getData(pixel)` method that returns the pixel data at the provided location.  The return value depends on the underlying source data type.  For example, a GeoTIFF may return a `Float32Array` with one value per band, while a PNG rendered from a tile layer will return a `Uint8ClampedArray` of RGBA values.
+
+If you were previously using the `map.forEachLayerAtPixel()` method, you should use the new `layer.getData()` method instead.  The old method returns composite pixel values from multiple layers and is limited to RGBA values.  The new method doesn't suffer from these shortcomings and is more performant.
+
+#### Deprecated `map.forEachLayerAtPixel()` method
+
+The `map.forEachLayerAtPixel()` method has been deprecated.  It will be removed (or its behavior may change) in the next major release.  Please use the `layer.getData()` method instead.
+
+### v6.12.0
+
+No special changes are required when upgrading to the 6.12.0 release.
+
+### v6.11.0
+
+No special changes are required when upgrading to the 6.11.0 release.
+
 ### v6.10.0
 
 #### New `interpolate` option for sources

changelog/v6.11.0.md

@@ -0,0 +1,32 @@
+# 6.11.0
+
+This release follows up on the 6.10 release with a fix for Mapbox vector layers rendered over other layers.  A handful of other fixes and features are included.  See below for more detail.
+
+ * [#13195](https://github.com/openlayers/openlayers/pull/13195) - Use getFeaturesInExtent ([@ahocevar](https://github.com/ahocevar))
+ * [#13200](https://github.com/openlayers/openlayers/pull/13200) - Use interpolate option in Sea Level example ([@mike-000](https://github.com/mike-000))
+ * [#13201](https://github.com/openlayers/openlayers/pull/13201) - Fix typo in example description ([@mike-000](https://github.com/mike-000))
+ * [#13177](https://github.com/openlayers/openlayers/pull/13177) - Use ecoregions data ([@tschaub](https://github.com/tschaub))
+ * [#13198](https://github.com/openlayers/openlayers/pull/13198) - Avoid failure if existing target has no background color ([@tschaub](https://github.com/tschaub))
+ * [#13186](https://github.com/openlayers/openlayers/pull/13186) - Add getDataAtPixel() method for WebGL ([@mike-000](https://github.com/mike-000))
+ * [#13196](https://github.com/openlayers/openlayers/pull/13196) - typo fix for cog-stretch example ([@bradh](https://github.com/bradh))
+ * [#13190](https://github.com/openlayers/openlayers/pull/13190) - Fix base vector layer template generics ([@ahocevar](https://github.com/ahocevar))
+ * [#13180](https://github.com/openlayers/openlayers/pull/13180) - Always use ES modules from geotiff.js ([@ahocevar](https://github.com/ahocevar))
+ * [#13179](https://github.com/openlayers/openlayers/pull/13179) - Use Buffer and data uri when Blob is not available ([@ahocevar](https://github.com/ahocevar))
+ * [#13178](https://github.com/openlayers/openlayers/pull/13178) - Use background property for vector layers ([@tschaub](https://github.com/tschaub))
+ * [#13175](https://github.com/openlayers/openlayers/pull/13175) - Allow nodejs 12 to build the examples again ([@MoonE](https://github.com/MoonE))
+ * [#13176](https://github.com/openlayers/openlayers/pull/13176) - Add `attributions` and `attributionsCollapsible` options to `ol/source/DataTile` ([@mike-000](https://github.com/mike-000))
+ * [#13171](https://github.com/openlayers/openlayers/pull/13171) - Correct scale bar in EPSG:4326 ([@mike-000](https://github.com/mike-000))
+ * [#13168](https://github.com/openlayers/openlayers/pull/13168) - Release 6.10.0 ([@openlayers](https://github.com/openlayers))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#13182](https://github.com/openlayers/openlayers/pull/13182) - Bump eslint from 8.5.0 to 8.6.0 ([@openlayers](https://github.com/openlayers))
+ * [#13184](https://github.com/openlayers/openlayers/pull/13184) - Bump @rollup/plugin-node-resolve from 13.1.1 to 13.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#13183](https://github.com/openlayers/openlayers/pull/13183) - Bump @babel/core from 7.16.5 to 7.16.7 ([@openlayers](https://github.com/openlayers))
+ * [#13185](https://github.com/openlayers/openlayers/pull/13185) - Bump webpack-dev-server from 4.7.1 to 4.7.2 ([@openlayers](https://github.com/openlayers))
+ * [#13181](https://github.com/openlayers/openlayers/pull/13181) - Bump @babel/preset-env from 7.16.5 to 7.16.7 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

changelog/v6.12.0.md

@@ -0,0 +1,30 @@
+# 6.12.0
+
+The 6.12 release brings a few small fixes and enhancements.  See below for a complete list.
+
+ * Transitive dependency update (by @openlayers in https://github.com/openlayers/openlayers/pull/13240)
+ * Re-enable image smoothing after rendering (by @mike-000 in https://github.com/openlayers/openlayers/pull/13236)
+ * Describe use of className with declutter (by @mike-000 in https://github.com/openlayers/openlayers/pull/13237)
+ * added run to npm command (by @lklepner in https://github.com/openlayers/openlayers/pull/13231)
+ * Document how to link package during development (by @lklepner in https://github.com/openlayers/openlayers/pull/13228)
+ * Default CORS mode for WebGL rendered sources (by @tschaub in https://github.com/openlayers/openlayers/pull/13227)
+ * Support the wrapX option for WebGL rendered tile sources (by @tschaub in https://github.com/openlayers/openlayers/pull/13226)
+ * Update ol-mapbox-style (by @tschaub in https://github.com/openlayers/openlayers/pull/13224)
+ * Do not fire modifyend event when nothing was modified (by @ahocevar in https://github.com/openlayers/openlayers/pull/13219)
+ * Draw VectorTiles with interpolate in hybrid mode again (by @M393 in https://github.com/openlayers/openlayers/pull/13221)
+ * Fix some typos in ModifyInteraction documentation (by @EvertEt in https://github.com/openlayers/openlayers/pull/13216)
+ * Fix MVT incorrect feature data handling (by @EvertEt in https://github.com/openlayers/openlayers/pull/13217)
+ * Format the changelog so contributors can be highlighted (by @tschaub in https://github.com/openlayers/openlayers/pull/13205)
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * Bump karma from 6.3.9 to 6.3.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13209)
+ * Bump shx from 0.3.3 to 0.3.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13211)
+ * Bump @rollup/plugin-node-resolve from 13.1.2 to 13.1.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13210)
+ * Bump rollup from 2.62.0 to 2.63.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13208)
+ * Bump marked from 4.0.8 to 4.0.9 (by @openlayers in https://github.com/openlayers/openlayers/pull/13207)
+
+
+</details>

changelog/v6.13.0.md

@@ -0,0 +1,139 @@
+# 6.13.0
+
+## Overview
+
+The 6.13 release brings several exciting new features and improvements:
+* A new `layer.getData()` method to get pixel data for a single layer (see details below).
+* Support for rich text labels in `ol/style/Text`, to use different font styles and fonts in a single label.
+* The `useGeograpic()` and `setUserProjection()` functions in the `ol/proj` module are now part of the official API. These functions make it easier to work with geographic coordinates or local projections.
+* Improvements for WebGL Tile and Points layers.
+* Performance improvements on `ol/Feature`, to avoid event creation when there are no listeners.
+* Update of geotiff.js to v2, to fix some build issues that users reported.
+* Improvements to the auto-generated TypeScript types.
+
+## Details
+
+### New `layer.getData()` method
+
+Raster layers (static images, image tiles, data tiles) have a new `layer.getData(pixel)` method that returns the pixel data at the provided location.  The return value depends on the underlying source data type.  For example, a GeoTIFF may return a `Float32Array` with one value per band, while a PNG rendered from a tile layer will return a `Uint8ClampedArray` of RGBA values.
+
+If you were previously using the `map.forEachLayerAtPixel()` method, you should use the new `layer.getData()` method instead.  The old method returns composite pixel values from multiple layers and is limited to RGBA values.  The new method doesn't suffer from these shortcomings and is more performant.
+
+### Deprecated `map.forEachLayerAtPixel()` method
+
+The `map.forEachLayerAtPixel()` method has been deprecated.  It will be removed (or its behavior may change) in the next major release.  Please use the `layer.getData()` method instead.
+
+## List of all changes
+
+See below for a complete list of features and fixes.
+
+ * Update ol-mapbox-style for rich text labels support (by @ahocevar in https://github.com/openlayers/openlayers/pull/13418)
+ * Increase GeoTIFF resolutions tolerance (by @ahocevar in https://github.com/openlayers/openlayers/pull/13417)
+ * Check for graticule resolution change and fix unrotated size (by @mike-000 in https://github.com/openlayers/openlayers/pull/13415)
+ * Rich text labels (by @ahocevar in https://github.com/openlayers/openlayers/pull/13410)
+ * Clear image when source's image is not ready (by @yonda-yonda in https://github.com/openlayers/openlayers/pull/13398)
+ * Fix setting View resolution or center to undefined (by @MoonE in https://github.com/openlayers/openlayers/pull/13393)
+ * Fix clone of icon loses imgSize when cache is full (by @MoonE in https://github.com/openlayers/openlayers/pull/13390)
+ * Use same clipping method for vector and image tiles (by @ahocevar in https://github.com/openlayers/openlayers/pull/13392)
+ * Less clipping of target resolution tiles (by @ahocevar in https://github.com/openlayers/openlayers/pull/13391)
+ * Change remaining links to point to class page instead of module (by @MoonE in https://github.com/openlayers/openlayers/pull/13385)
+ * User projection API (by @ahocevar in https://github.com/openlayers/openlayers/pull/13383)
+ * Fix wrong types when using `"skipLibCheck": false` (by @seravifer in https://github.com/openlayers/openlayers/pull/13382)
+ * Fix JsDoc references (by @MoonE in https://github.com/openlayers/openlayers/pull/13374)
+ * Fix VectorSource isEmpty without spatial index (by @MoonE in https://github.com/openlayers/openlayers/pull/13373)
+ * Document difference between Vector and VectorImage layers (by @ahocevar in https://github.com/openlayers/openlayers/pull/13371)
+ * Fix `ol/source/Cluster#setSource` type annotation (by @MoonE in https://github.com/openlayers/openlayers/pull/12998)
+ * Preload tiles for WebGL tile layers (by @tschaub in https://github.com/openlayers/openlayers/pull/13357)
+ * Avoid event creation when there are no listeners (by @MoonE in https://github.com/openlayers/openlayers/pull/13358)
+ * Add floor, round and ceil to style expressions (by @mike-000 in https://github.com/openlayers/openlayers/pull/13363)
+ * Support WebGL layers in ol/source/Raster (by @mike-000 in https://github.com/openlayers/openlayers/pull/13361)
+ * Improve some null types to prepare for strictNullChecks (by @EvertEt in https://github.com/openlayers/openlayers/pull/13301)
+ * Reset globalAlpha back to its initial after mutating it for drawing layers (by @Amirh0sseinHZ in https://github.com/openlayers/openlayers/pull/13351)
+ * Removing an unnecessary word from DEVELOPING.md (by @Amirh0sseinHZ in https://github.com/openlayers/openlayers/pull/13352)
+ * Get pixel data (by @tschaub in https://github.com/openlayers/openlayers/pull/13338)
+ * Remove warning for `@type` annotation by jsdoc (by @MoonE in https://github.com/openlayers/openlayers/pull/13350)
+ * Improve some null types for strictNullChecks (by @EvertEt in https://github.com/openlayers/openlayers/pull/13334)
+ * Dispose of webgl contexts (by @MoonE in https://github.com/openlayers/openlayers/pull/13336)
+ * Fix error when accessing ready property of renderer (by @MoonE in https://github.com/openlayers/openlayers/pull/13337)
+ * Pass tilePixelRatio and gutter to TileTexture (by @mike-000 in https://github.com/openlayers/openlayers/pull/13269)
+ * Improve some nullable map types (by @EvertEt in https://github.com/openlayers/openlayers/pull/13328)
+ * Avoid rendering outside WebGL layer and source extent (by @tschaub in https://github.com/openlayers/openlayers/pull/13333)
+ * Avoid duplicate imports (by @tschaub in https://github.com/openlayers/openlayers/pull/13332)
+ * Add updateStyleVariables method to WebGLPoints layer (by @ahocevar in https://github.com/openlayers/openlayers/pull/13294)
+ * Fix rendercomplete for WebGLPoints layer and subclasses (by @ahocevar in https://github.com/openlayers/openlayers/pull/13323)
+ * fix: fix casing for z-index (by @OSHistory in https://github.com/openlayers/openlayers/pull/13319)
+ * Fix typo CSS class name for the expanded attributions button (by @fredj in https://github.com/openlayers/openlayers/pull/13315)
+ * Improve types for tile layers (by @ahocevar in https://github.com/openlayers/openlayers/pull/13299)
+ * Document geometry type (by @ahocevar in https://github.com/openlayers/openlayers/pull/13298)
+ * Add function to convert RenderFeature to Feature (by @MoonE in https://github.com/openlayers/openlayers/pull/13297)
+ * Update to geotiff@2 (by @ahocevar in https://github.com/openlayers/openlayers/pull/13292)
+ * Re-assign style variables on setStyle() (by @ahocevar in https://github.com/openlayers/openlayers/pull/13293)
+ * add @api comment on getAllLayers method (by @XiaofengZeng in https://github.com/openlayers/openlayers/pull/13261)
+ * Allowing to pass additional options to the geotiff.js source (by @constantinius in https://github.com/openlayers/openlayers/pull/13290)
+ * Defaults for generic types (by @ahocevar in https://github.com/openlayers/openlayers/pull/13291)
+ * Load api navigation dynamically to reduce needed disk space (by @MoonE in https://github.com/openlayers/openlayers/pull/13229)
+ * Remove unneeded `src=""` (by @mike-000 in https://github.com/openlayers/openlayers/pull/13271)
+ * Support multiple sources for WebGL tile layers (by @ahocevar in https://github.com/openlayers/openlayers/pull/13212)
+ * Add crossOrigin option to LiteralSymbolStyle (by @mike-000 in https://github.com/openlayers/openlayers/pull/13259)
+ * Avoid the redirect from unpkg.com (by @tschaub in https://github.com/openlayers/openlayers/pull/13242)
+ * Updates for the 6.12.0 release (by @openlayers in https://github.com/openlayers/openlayers/pull/13241)
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * Bump express from 4.17.2 to 4.17.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13402)
+ * Bump puppeteer from 13.3.1 to 13.3.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13401)
+ * Bump mocha from 9.2.0 to 9.2.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13403)
+ * Bump webpack from 5.68.0 to 5.69.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13404)
+ * Bump ol-mapbox-style from 6.8.3 to 6.9.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13406)
+ * Bump rollup from 2.67.1 to 2.67.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13405)
+ * Bump @babel/core from 7.17.2 to 7.17.5 (by @openlayers in https://github.com/openlayers/openlayers/pull/13407)
+ * Bump @babel/core from 7.17.0 to 7.17.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13381)
+ * Bump karma from 6.3.15 to 6.3.16 (by @openlayers in https://github.com/openlayers/openlayers/pull/13379)
+ * Bump eslint from 8.8.0 to 8.9.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13377)
+ * Bump puppeteer from 13.1.3 to 13.3.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13376)
+ * Bump follow-redirects from 1.14.7 to 1.14.8 (by @openlayers in https://github.com/openlayers/openlayers/pull/13372)
+ * Bump geotiff from 2.0.3 to 2.0.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13339)
+ * Bump globby from 13.1.0 to 13.1.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13340)
+ * Bump rollup from 2.66.1 to 2.67.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13342)
+ * Bump @babel/core from 7.16.12 to 7.17.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13343)
+ * Bump karma from 6.3.12 to 6.3.15 (by @openlayers in https://github.com/openlayers/openlayers/pull/13344)
+ * Bump webpack from 5.67.0 to 5.68.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13345)
+ * Bump webpack-dev-server from 4.7.3 to 4.7.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13346)
+ * Bump sinon from 13.0.0 to 13.0.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13348)
+ * Bump rollup from 2.66.0 to 2.66.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13318)
+ * Bump karma from 6.3.11 to 6.3.12 (by @openlayers in https://github.com/openlayers/openlayers/pull/13314)
+ * Bump geotiff from 2.0.2 to 2.0.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13313)
+ * Bump puppeteer from 13.1.1 to 13.1.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13317)
+ * Bump sinon from 12.0.1 to 13.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13316)
+ * Bump jsdoc from 3.6.9 to 3.6.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13312)
+ * Bump copy-webpack-plugin from 10.2.1 to 10.2.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13311)
+ * Bump clean-css-cli from 5.5.0 to 5.5.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13310)
+ * Bump eslint from 8.7.0 to 8.8.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13309)
+ * Bump webpack-cli from 4.9.1 to 4.9.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13305)
+ * Bump globby from 13.0.0 to 13.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13308)
+ * Bump marked from 4.0.10 to 4.0.12 (by @openlayers in https://github.com/openlayers/openlayers/pull/13307)
+ * Use exactly typescript@4.6.0-beta (by @openlayers in https://github.com/openlayers/openlayers/pull/13306)
+ * Bump globby from 12.2.0 to 13.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13281)
+ * Bump @babel/core from 7.16.7 to 7.16.12 (by @openlayers in https://github.com/openlayers/openlayers/pull/13278)
+ * Bump webpack from 5.66.0 to 5.67.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13277)
+ * Bump puppeteer from 13.0.1 to 13.1.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13280)
+ * Bump rollup from 2.64.0 to 2.66.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13279)
+ * Bump @babel/preset-env from 7.16.8 to 7.16.11 (by @openlayers in https://github.com/openlayers/openlayers/pull/13276)
+ * Bump copy-webpack-plugin from 10.2.0 to 10.2.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13275)
+ * Bump jsdoc from 3.6.7 to 3.6.9 (by @openlayers in https://github.com/openlayers/openlayers/pull/13274)
+ * Bump ol-mapbox-style from 6.8.2 to 6.8.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13273)
+ * Bump mocha from 9.1.4 to 9.2.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13272)
+ * Bump eslint from 8.6.0 to 8.7.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13246)
+ * Bump mocha from 9.1.3 to 9.1.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13247)
+ * Bump webpack-sources from 3.2.2 to 3.2.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13248)
+ * Bump webpack from 5.65.0 to 5.66.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13249)
+ * Bump globby from 12.0.2 to 12.2.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13250)
+ * Bump @babel/preset-env from 7.16.7 to 7.16.8 (by @openlayers in https://github.com/openlayers/openlayers/pull/13251)
+ * Bump rollup from 2.63.0 to 2.64.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13252)
+ * Bump karma from 6.3.10 to 6.3.11 (by @openlayers in https://github.com/openlayers/openlayers/pull/13253)
+ * Bump marked from 4.0.9 to 4.0.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13243)
+
+
+</details>

config/jsdoc/api/index.md

@@ -27,6 +27,7 @@
         <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a><br>
         <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a><br>
         <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a><br>
+        <a href="module-ol_layer_VectorImage-VectorImageLayer.html">ol/layer/VectorImage</a><br>
         <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a><br>
         <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
       </div>

config/jsdoc/api/template/publish.js

@@ -500,6 +500,7 @@ exports.publish = function (taffyData, opts, tutorials) {
 
   // once for all
   view.nav = buildNav(members);
+
   attachModuleSymbols(
     find({kind: ['class', 'function'], longname: {left: 'module:'}}),
     members.modules
@@ -518,7 +519,16 @@ exports.publish = function (taffyData, opts, tutorials) {
   // index page displays information from package.json and lists files
   const files = find({kind: 'file'});
 
-  view.navigationHtml = helper.resolveLinks(view.partial('navigation.tmpl'));
+  view.navigationItems = view.nav.reduce(function (dict, item) {
+    dict[item.longname] = item;
+    return dict;
+  }, {});
+  const navigationHtml = helper.resolveLinks(
+    view.nav.map((item) => view.partial('navigation.tmpl', {item})).join('')
+  );
+  const navHtmlPath = path.join(outdir, 'navigation.tmpl.html');
+  fs.writeFileSync(navHtmlPath, navigationHtml, 'utf8');
+
   generate(
     'Index',
     [

config/jsdoc/api/template/static/scripts/main.js

@@ -62,21 +62,47 @@ $(function () {
       $navList.addClass('search-empty');
       return 'search-empty';
     })();
+    let initialCurrent = navListNode.querySelector('li.item');
+    const longname = initialCurrent && initialCurrent.dataset.longname;
     let manualToggles = {};
+    if (initialCurrent) {
+      manualToggles[longname] = $(initialCurrent);
+    }
+
+    fetch('./navigation.tmpl.html').then(function (response) {
+      return response.text();
+    }).then(function (text) {
+      navListNode.innerHTML = text;
 
       // Show an item related a current documentation automatically
-    const longname = $('.page-title').data('filename')
-      .replace(/\.[a-z]+$/, '')
-      .replace('module-', 'module:')
-      .replace(/_/g, '/')
-      .replace(/-/g, '~');
       const currentItem = navListNode.querySelector('.item[data-longname="' + longname + '"]');
       if (currentItem) {
         $navList.prepend(currentItem);
+        search.$currentItem = $(currentItem);
       }
+      $classItems = undefined;
+      $members = undefined;
+
+      // Search again with full navigation, if user already searched
+      manualToggles = {};
+      const lastTerm = search.lastSearchTerm;
+      search.lastSearchTerm = undefined;
+      const fa = currentItem.querySelector('.title > .fa');
+      fa.classList.add('no-transition');
+      doSearch(lastTerm || '');
+
+      // Transfer manual toggle state to newly loaded current node
+      if (initialCurrent && initialCurrent.classList.contains('toggle-manual')) {
+        search.manualToggle(search.$currentItem, initialCurrent.classList.contains('toggle-manual-show'));
+      }
+      setTimeout(function () {
+        fa.classList.remove('no-transition');
+      }, 0);
+    });
+
     return {
       $navList: $navList,
-      $currentItem: currentItem ? $(currentItem) : undefined,
+      $currentItem: initialCurrent ? $(initialCurrent) : undefined,
       lastSearchTerm: undefined,
       lastState: {},
       lastClasses: undefined,
@@ -240,7 +266,7 @@ $(function () {
 
   // Toggle when click an item element
   search.$navList.on('click', '.toggle', function (e) {
-    if (event.target.tagName.toLowerCase() === 'a') {
+    if (e.target.tagName === 'A') {
       return;
     }
     const clsItem = $(this).closest('.item');

config/jsdoc/api/template/static/styles/jaguar.css

@@ -5,6 +5,7 @@
 
 .navbar-brand img {
   height: 35px;
+  width: 35px;
   vertical-align: middle;
   margin-right: 5px;
   display: inline-block;
@@ -71,6 +72,11 @@ li {
 .navigation-list {
   padding: 0 15px 0 15px;
 }
+.no-transition,
+.no-transition:after,
+.no-transition:before {
+    transition: none!important;
+}
 @supports (position: sticky) {
   .navigation {
     position: sticky;
@@ -78,7 +84,7 @@ li {
     height: calc(100vh - 54px);
   }
   .navigation-list {
-    overflow: auto;
+    overflow-y: auto;
     /* 54px navbar height */
     /* 4.25rem + 2px  searchbox height */
     /* 25px navigation padding */
@@ -94,7 +100,7 @@ li {
     position: inherit;
   }
   .navigation-list {
-    overflow: auto;
+    overflow-y: auto;
     max-height: 33vh;
     height: inherit;
   }
@@ -206,6 +212,10 @@ li {
   padding-left: 8px;
 }
 
+.navigation-list li.loading {
+  display: block;
+  height: 101vh;
+}
 /* search state */
 /* show all classes when search is empty */
 .navigation-list.search-empty .item {

config/jsdoc/api/template/tmpl/layout.tmpl

@@ -29,7 +29,7 @@ var version = obj.packageInfo.version;
       gtag('js', new Date());
       gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
     </script>
-    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
+    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
     <script>
     window.addEventListener("load", function() {
@@ -64,14 +64,14 @@ var version = obj.packageInfo.version;
     </script>
     <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>
-    <script src="scripts/prettify/lang-css.js"> </script>
-    <script src="scripts/jquery.min.js"> </script>
-    <script src="scripts/bootstrap.bundle.min.js"> </script>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <script src="scripts/jquery.min.js"></script>
+    <script src="scripts/bootstrap.bundle.min.js"></script>
     <!--[if lt IE 9]>
       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
     <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
     <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
@@ -115,7 +115,27 @@ var version = obj.packageInfo.version;
         </nav>
       </header>
       <div id="wrap" class="row">
-          <?js= this.navigationHtml ?>
+        <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
+              const item = this.navigationItems[docs[0].longname];
+              const listItem = item
+                ? this.partial('navigation.tmpl', {
+                    item: item,
+                    classes: ' toggle-manual toggle-manual-show',
+                  })
+                : '';
+              ?><?js= listItem ?>
+              <li class="loading">Loading …
+            </ul>
+          </div>
+        </div>
+
         <div class="main col-md-8 col-lg-9">
             <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
             <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">

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

@@ -42,33 +42,18 @@ function listContent(item, title, listItemPrinter) {
     <div class="member-list" data-type="<?js= type ?>">
         <span class="subtitle"><?js= title ?></span>
         <ul><?js
-        item[type].forEach(function (v) {
-            listItemPrinter(v);
-         }); ?>
+        item[type].forEach((v) => listItemPrinter(v)); ?>
         </ul>
     </div><?js
     }
-}
-?>
-<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() ?>">
+} ?>
+<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
     <span class="title toggle">
         <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
         <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
     </span><?js
-                    listContent(item, 'Members', printListItem);
-                    listContent(item, 'Typedefs', printListItemWithStability);
-                    listContent(item, 'Methods', printListItemWithStability);
-                    listContent(item, 'Fires', printFiresListItem);
-            }); ?>
-        </ul>
-    </div>
-</div>
+listContent(item, 'Members', printListItem);
+listContent(item, 'Typedefs', printListItemWithStability);
+listContent(item, 'Methods', printListItemWithStability);
+listContent(item, 'Fires', printFiresListItem);
+?>

examples/box-selection.css

@@ -1,4 +0,0 @@
-.ol-dragbox {
-  background-color: rgba(255,255,255,0.4);
-  border-color: rgba(100,150,0,1);
-}

examples/box-selection.html

@@ -9,4 +9,4 @@ docs: >
 tags: "DragBox, feature, selection, box"
 ---
 <div id="map" class="map"></div>
-<div id="info">No countries selected</div>
+<div>Selected regions: <span id="info">None</span></div>

examples/box-selection.js

@@ -1,23 +1,33 @@
 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 {DragBox, Select} from '../src/ol/interaction.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 
 const vectorSource = new VectorSource({
-  url: 'data/geojson/countries.geojson',
+  url: 'https://openlayers.org/data/vector/ecoregions.json',
   format: new GeoJSON(),
 });
 
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
+
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
       source: vectorSource,
+      background: '#1a2b39',
+      style: function (feature) {
+        const color = feature.get('COLOR_BIO') || '#eeeeee';
+        style.getFill().setColor(color);
+        return style;
+      },
     }),
   ],
   target: 'map',
@@ -28,8 +38,24 @@ const map = new Map({
   }),
 });
 
+const selectedStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
+  }),
+});
+
 // a normal select interaction to handle click
-const select = new Select();
+const select = new Select({
+  style: function (feature) {
+    const color = feature.get('COLOR_BIO') || '#eeeeee';
+    selectedStyle.getFill().setColor(color);
+    return selectedStyle;
+  },
+});
 map.addInteraction(select);
 
 const selectedFeatures = select.getFeatures();
@@ -42,6 +68,11 @@ const dragBox = new DragBox({
 map.addInteraction(dragBox);
 
 dragBox.on('boxend', function () {
+  const extent = dragBox.getGeometry().getExtent();
+  const boxFeatures = vectorSource
+    .getFeaturesInExtent(extent)
+    .filter((feature) => feature.getGeometry().intersectsExtent(extent));
+
   // features that intersect the box geometry are added to the
   // collection of selected features
 
@@ -50,11 +81,6 @@ dragBox.on('boxend', function () {
   // be added directly to the collection
   const rotation = map.getView().getRotation();
   const oblique = rotation % (Math.PI / 2) !== 0;
-  const candidateFeatures = oblique ? [] : selectedFeatures;
-  const extent = dragBox.getGeometry().getExtent();
-  vectorSource.forEachFeatureIntersectingExtent(extent, function (feature) {
-    candidateFeatures.push(feature);
-  });
 
   // when the view is obliquely rotated the box extent will
   // exceed its geometry so both the box and the candidate
@@ -66,13 +92,15 @@ dragBox.on('boxend', function () {
     const geometry = dragBox.getGeometry().clone();
     geometry.rotate(-rotation, anchor);
     const extent = geometry.getExtent();
-    candidateFeatures.forEach(function (feature) {
+    boxFeatures.forEach(function (feature) {
       const geometry = feature.getGeometry().clone();
       geometry.rotate(-rotation, anchor);
       if (geometry.intersectsExtent(extent)) {
         selectedFeatures.push(feature);
       }
     });
+  } else {
+    selectedFeatures.extend(boxFeatures);
   }
 });
 
@@ -85,11 +113,11 @@ const infoBox = document.getElementById('info');
 
 selectedFeatures.on(['add', 'remove'], function () {
   const names = selectedFeatures.getArray().map(function (feature) {
-    return feature.get('name');
+    return feature.get('ECO_NAME');
   });
   if (names.length > 0) {
     infoBox.innerHTML = names.join(', ');
   } else {
-    infoBox.innerHTML = 'No countries selected';
+    infoBox.innerHTML = 'None';
   }
 });

examples/canvas-gradient-pattern.html

@@ -1,13 +1,11 @@
 ---
 layout: example.html
 title: Styling feature with CanvasGradient or CanvasPattern
-shortdesc: Example showing the countries vector layer styled with patterns and gradients.
+shortdesc: Example showing a vector layer styled with a gradient.
 docs: >
-  This example creates a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
-  and a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient). The countries are loaded from
-  a GeoJSON file. A style function determines for each country whether to use a fill with the
-  CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). **Note**: For seamless repeat patterns,
-  image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
+  This example creates a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient).
+  The vector data is loaded from a file and features are filled with the gradient.
+  The same technique can be used with a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern).
 tags: "canvas, gradient, pattern, style"
 ---
 <div id="map" class="map"></div>

examples/canvas-gradient-pattern.js

@@ -1,4 +1,4 @@
-import GeoJSON from '../src/ol/format/GeoJSON.js';
+import KML from '../src/ol/format/KML.js';
 import Map from '../src/ol/Map.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
@@ -7,84 +7,42 @@ import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
-const canvas = document.createElement('canvas');
-const context = canvas.getContext('2d');
-
 // Gradient and pattern are in canvas pixel space, so we adjust for the
 // renderer's pixel ratio
 const pixelRatio = DEVICE_PIXEL_RATIO;
 
 // Generate a rainbow gradient
-const gradient = (function () {
-  const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
-  grad.addColorStop(0, 'red');
-  grad.addColorStop(1 / 6, 'orange');
-  grad.addColorStop(2 / 6, 'yellow');
-  grad.addColorStop(3 / 6, 'green');
-  grad.addColorStop(4 / 6, 'aqua');
-  grad.addColorStop(5 / 6, 'blue');
-  grad.addColorStop(1, 'purple');
-  return grad;
-})();
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
+const gradient = context.createLinearGradient(0, 0, 1024 * pixelRatio, 0);
+gradient.addColorStop(0, 'red');
+gradient.addColorStop(1 / 6, 'orange');
+gradient.addColorStop(2 / 6, 'yellow');
+gradient.addColorStop(3 / 6, 'green');
+gradient.addColorStop(4 / 6, 'aqua');
+gradient.addColorStop(5 / 6, 'blue');
+gradient.addColorStop(1, 'purple');
 
-// Generate a canvasPattern with two circles on white background
-const pattern = (function () {
-  canvas.width = 8 * pixelRatio;
-  canvas.height = 8 * pixelRatio;
-  // white background
-  context.fillStyle = 'white';
-  context.fillRect(0, 0, canvas.width, canvas.height);
-  // outer circle
-  context.fillStyle = 'rgba(102, 0, 102, 0.5)';
-  context.beginPath();
-  context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
-  context.fill();
-  // inner circle
-  context.fillStyle = 'rgb(55, 0, 170)';
-  context.beginPath();
-  context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
-  context.fill();
-  return context.createPattern(canvas, 'repeat');
-})();
-
-// Generate style for gradient or pattern fill
-const fill = new Fill();
-const style = new Style({
-  fill: fill,
+const vectorLayer = new VectorLayer({
+  background: 'white',
+  source: new VectorSource({
+    url: 'data/kml/states.kml',
+    format: new KML({extractStyles: false}),
+  }),
+  style: new Style({
+    fill: new Fill({color: gradient}),
     stroke: new Stroke({
       color: '#333',
-    width: 2,
+      width: 1,
+    }),
   }),
 });
 
-/**
- * The styling function for the vector layer, will return an array of styles
- * which either contains the aboove gradient or pattern.
- *
- * @param {import("../src/ol/Feature.js").default} feature The feature to style.
- * @return {Style} The style to use for the feature.
- */
-const getStackedStyle = function (feature) {
-  const id = feature.getId();
-  fill.setColor(id > 'J' ? gradient : pattern);
-  return style;
-};
-
-// Create a vector layer that makes use of the style function above…
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
-    format: new GeoJSON(),
-  }),
-  style: getStackedStyle,
-});
-
-// … finally create a map with that layer.
 const map = new Map({
   layers: [vectorLayer],
   target: 'map',
   view: new View({
-    center: fromLonLat([16, 48]),
-    zoom: 3,
+    center: fromLonLat([-100, 38.5]),
+    zoom: 4,
   }),
 });

examples/cog-math.html

@@ -3,9 +3,12 @@ layout: example.html
 title: NDVI from a Sentinel 2 COG
 shortdesc: Calculating NDVI and applying a custom color map.
 docs: >
-  The GeoTIFF layer in this example draws from two Sentinel 2 sources: a red band and a near infrared band.
+  The GeoTIFF layer in this example draws from two Sentinel 2 sources: a red band and a near-infrared band.
   The layer style includes a `color` expression that calculates the Normalized Difference Vegetation Index (NDVI)
   from values in the two bands.  The `interpolate` expression is used to map NDVI values to colors.
+  The `layer.getData()` method can be used to retrieve pixel values from the GeoTIFF.  Move your mouse
+  or tap on the map to see calculated NDVI values based on the red and near-infrared pixel values.
 tags: "cog, ndvi"
 ---
 <div id="map" class="map"></div>
+<div>NDVI: <span id="output"></span></div>

examples/cog-math.js

@@ -17,20 +17,13 @@ const source = new GeoTIFF({
   ],
 });
 
-const map = new Map({
-  target: 'map',
-  layers: [
-    new TileLayer({
+const layer = new TileLayer({
   style: {
     color: [
       'interpolate',
       ['linear'],
       // calculate NDVI, bands come from the sources below
-          [
-            '/',
-            ['-', ['band', 2], ['band', 1]],
-            ['+', ['band', 2], ['band', 1]],
-          ],
+      ['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
       // color ramp for NDVI values, ranging from -1 to 1
       -0.2,
       [191, 191, 191],
@@ -75,7 +68,23 @@ const map = new Map({
     ],
   },
   source: source,
-    }),
-  ],
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [layer],
   view: source.getView(),
 });
+
+const output = document.getElementById('output');
+function displayPixelValue(event) {
+  const data = layer.getData(event.pixel);
+  if (!data) {
+    return;
+  }
+  const red = data[0];
+  const nir = data[1];
+  const ndvi = (nir - red) / (nir + red);
+  output.textContent = ndvi.toFixed(2);
+}
+map.on(['pointermove', 'click'], displayPixelValue);

examples/cog-pyramid.html

@@ -4,9 +4,9 @@ title: GeoTIFF tile pyramid
 shortdesc: Rendering a COG tile pyramid as layer group.
 docs: >
   Data from a Cloud Optimized GeoTIFF (COG) tile pyramid can be rendered as a set of layers.  In this
-  example, a pyramid of 3-band GeoTIFFs is used to render RGB data. For each tile of the pyramid, a
-  separate layer is created on demand. The lowest resolution layer serves as preview while higher resolutions are
-  loading.
+  example, a pyramid of 3-band GeoTIFFs is used to render RGB data. The `ol/source.sourcesFromTileGrid`
+  helper function creates sources from this pyramid on demand. The GeoTIFFs used by those sources have
+  a resolution range that matches the range of a single z of the pyramid tile grid.
 tags: "cog, tilepyramid, stac"
 ---
 <div id="map" class="map"></div>

examples/cog-pyramid.js

@@ -1,16 +1,15 @@
 import GeoTIFF from '../src/ol/source/GeoTIFF.js';
-import LayerGroup from '../src/ol/layer/Group.js';
 import Map from '../src/ol/Map.js';
 import TileGrid from '../src/ol/tilegrid/TileGrid.js';
 import View from '../src/ol/View.js';
 import WebGLTileLayer from '../src/ol/layer/WebGLTile.js';
-import {getIntersection} from '../src/ol/extent.js';
+import {sourcesFromTileGrid} from '../src/ol/source.js';
 
 // Metadata from https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/2019_EOxCloudless_rgb.json
 
 // Tile grid of the GeoTIFF pyramid layout
 const tileGrid = new TileGrid({
-  origin: [-180, 90],
+  extent: [-180, -90, 180, 90],
   resolutions: [0.703125, 0.3515625, 0.17578125, 8.7890625e-2, 4.39453125e-2],
   tileSizes: [
     [512, 256],
@@ -21,30 +20,19 @@ const tileGrid = new TileGrid({
   ],
 });
 
-const pyramid = new LayerGroup();
-const layerForUrl = {};
-const zs = tileGrid.getResolutions().length;
-
-function useLayer(z, x, y) {
-  const url = `https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/${z}/${y}/${x}.tif`;
-  if (!(url in layerForUrl)) {
-    pyramid.getLayers().push(
-      new WebGLTileLayer({
-        minZoom: z,
-        maxZoom: z === 0 || z === zs - 1 ? undefined : z + 1,
-        extent: tileGrid.getTileCoordExtent([z, x, y]),
-        source: new GeoTIFF({
+const pyramid = new WebGLTileLayer({
+  sources: sourcesFromTileGrid(
+    tileGrid,
+    ([z, x, y]) =>
+      new GeoTIFF({
         sources: [
           {
-              url: url,
+            url: `https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/${z}/${y}/${x}.tif`,
           },
         ],
-        }),
       })
-    );
-    layerForUrl[url] = true;
-  }
-}
+  ),
+});
 
 const map = new Map({
   target: 'map',
@@ -56,16 +44,3 @@ const map = new Map({
     showFullExtent: true,
   }),
 });
-
-// Add overview layer
-useLayer(0, 0, 0);
-
-// Add layer for specific extent on demand
-map.on('moveend', () => {
-  const view = map.getView();
-  tileGrid.forEachTileCoord(
-    getIntersection([-180, -90, 180, 90], view.calculateExtent()),
-    tileGrid.getZForResolution(view.getResolution()),
-    ([z, x, y]) => useLayer(z, x, y)
-  );
-});

examples/cog-stretch.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
-title: Band Constrast Stretch
-shortdesc: Choosing bands and applying constrast stretch
+title: Band Contrast Stretch
+shortdesc: Choosing bands and applying contrast stretch
 docs: >
   This example uses the `layer.updateStyleVariables()` method to update the rendering
   of a GeoTIFF based on user selected bands and contrast stretch parameters.

examples/edit-geographic.html

@@ -7,7 +7,6 @@ docs: >
   makes it so the map view uses geographic coordinates (even if the view projection is
   not geographic).
 tags: "geographic"
-experimental: true
 ---
 <div id="map" class="map"></div>
 <select id="mode">

examples/edit-geographic.js

@@ -1,30 +1,28 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
 import {Map, View} from '../src/ol/index.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {useGeographic} from '../src/ol/proj.js';
 
 useGeographic();
 
 const source = new VectorSource({
-  url: 'data/geojson/countries.geojson',
+  url: 'https://openlayers.org/data/vector/us-states.json',
   format: new GeoJSON(),
 });
 
 const map = new Map({
   target: 'map',
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
+      background: 'white',
       source: source,
     }),
   ],
   view: new View({
-    center: [0, 0],
-    zoom: 2,
+    center: [-100, 38.5],
+    zoom: 4,
   }),
 });
 

examples/export-map.js

@@ -1,24 +1,34 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
+import {Fill, Style} from '../src/ol/style.js';
 import {
   Heatmap as HeatmapLayer,
-  Tile as TileLayer,
   Vector as VectorLayer,
 } from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {asArray} from '../src/ol/color.js';
+
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
 
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
       source: new VectorSource({
-        url: 'data/geojson/countries.geojson',
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
         format: new GeoJSON(),
       }),
-      opacity: 0.5,
+      background: 'white',
+      style: function (feature) {
+        const color = asArray(feature.get('COLOR_NNH') || '#eeeeee');
+        color[3] = 0.75;
+        style.getFill().setColor(color);
+        return style;
+      },
     }),
     new HeatmapLayer({
       source: new VectorSource({
@@ -30,7 +40,7 @@ const map = new Map({
       },
       radius: 15,
       blur: 15,
-      opacity: 0.5,
+      opacity: 0.75,
     }),
   ],
   target: 'map',
@@ -54,6 +64,13 @@ document.getElementById('export-png').addEventListener('click', function () {
           const opacity =
             canvas.parentNode.style.opacity || canvas.style.opacity;
           mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+
+          const backgroundColor = canvas.parentNode.style.backgroundColor;
+          if (backgroundColor) {
+            mapContext.fillStyle = backgroundColor;
+            mapContext.fillRect(0, 0, canvas.width, canvas.height);
+          }
+
           let matrix;
           const transform = canvas.style.transform;
           if (transform) {
@@ -81,6 +98,7 @@ document.getElementById('export-png').addEventListener('click', function () {
         }
       }
     );
+    mapContext.globalAlpha = 1;
     if (navigator.msSaveBlob) {
       // link download attribute does not work on MS browsers
       navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');

examples/export-pdf.js

@@ -83,6 +83,7 @@ exportButton.addEventListener(
           }
         }
       );
+      mapContext.globalAlpha = 1;
       const pdf = new jspdf.jsPDF('landscape', undefined, format);
       pdf.addImage(
         mapCanvas.toDataURL('image/jpeg'),

examples/extent-interaction.js

@@ -1,24 +1,15 @@
 import ExtentInteraction from '../src/ol/interaction/Extent.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {shiftKeyOnly} from '../src/ol/events/condition.js';
 
-const vectorSource = new VectorSource({
-  url: 'data/geojson/countries.geojson',
-  format: new GeoJSON(),
-});
-
 const map = new Map({
   layers: [
     new TileLayer({
       source: new OSM(),
     }),
-    new VectorLayer({
-      source: vectorSource,
-    }),
   ],
   target: 'map',
   view: new View({

examples/geographic.html

@@ -7,7 +7,6 @@ docs: >
   makes it so the map view uses geographic coordinates (even if the view projection is
   not geographic).
 tags: "geographic"
-experimental: true
 resources:
   - https://code.jquery.com/jquery-3.5.1.min.js
   - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

examples/geojson-vt.js

@@ -1,21 +1,20 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Projection from '../src/ol/proj/Projection.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import View from '../src/ol/View.js';
-import {
-  Tile as TileLayer,
-  VectorTile as VectorTileLayer,
-} from '../src/ol/layer.js';
+import {Fill, Style} from '../src/ol/style.js';
 
 // Converts geojson-vt data to GeoJSON
 const replacer = function (key, value) {
-  if (value.geometry) {
+  if (!value || !value.geometry) {
+    return value;
+  }
+
   let type;
   const rawType = value.type;
   let geometry = value.geometry;
-
   if (rawType === 1) {
     type = 'MultiPoint';
     if (geometry.length == 1) {
@@ -44,17 +43,25 @@ const replacer = function (key, value) {
     },
     'properties': value.tags,
   };
-  } else {
-    return value;
-  }
 };
 
-const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM(),
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
   }),
-  ],
+});
+
+const layer = new VectorTileLayer({
+  background: '#1a2b39',
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
+});
+
+const map = new Map({
+  layers: [layer],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -62,7 +69,7 @@ const map = new Map({
   }),
 });
 
-const url = 'data/geojson/countries.geojson';
+const url = 'https://openlayers.org/data/vector/ecoregions.json';
 fetch(url)
   .then(function (response) {
     return response.json();
@@ -106,8 +113,5 @@ fetch(url)
         tile.setFeatures(features);
       },
     });
-    const vectorLayer = new VectorTileLayer({
-      source: vectorSource,
-    });
-    map.addLayer(vectorLayer);
+    layer.setSource(vectorSource);
   });

examples/geolocation-orientation.html

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

examples/getfeatureinfo-image.html

@@ -3,8 +3,8 @@ layout: example.html
 title: WMS GetFeatureInfo (Image Layer)
 shortdesc: Using an image WMS source with GetFeatureInfo requests
 docs: >
-  This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.  Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
-tags: "getfeatureinfo, forEachLayerAtPixel"
+  This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.  Additionally `layer.getData(pixel)` is used to change the mouse pointer when hovering a non-transparent pixel on the map.
+tags: "getfeatureinfo, getData"
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/getfeatureinfo-image.js

@@ -47,9 +47,7 @@ map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
-  const pixel = map.getEventPixel(evt.originalEvent);
-  const hit = map.forEachLayerAtPixel(pixel, function () {
-    return true;
-  });
+  const data = wmsLayer.getData(evt.pixel);
+  const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';
 });

examples/getfeatureinfo-tile.html

@@ -3,8 +3,8 @@ layout: example.html
 title: WMS GetFeatureInfo (Tile Layer)
 shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source
 docs: >
-  This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.  Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
-tags: "getfeatureinfo, forEachLayerAtPixel"
+  This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.  Additionally `layer.getData(pixel)` is used to change the mouse pointer when hovering a non-transparent pixel on the map.
+tags: "getfeatureinfo, getData"
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/getfeatureinfo-tile.js

@@ -47,9 +47,7 @@ map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
-  const pixel = map.getEventPixel(evt.originalEvent);
-  const hit = map.forEachLayerAtPixel(pixel, function () {
-    return true;
-  });
+  const data = wmsLayer.getData(evt.pixel);
+  const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';
 });

examples/hitdetect-vector.html

@@ -1,12 +1,12 @@
 ---
 layout: example.html
 title: Vector Layer Hit Detection
-shortdesc: Example of hit detection on a countries vector layer with country information.
+shortdesc: Example of hit detection on an ecoregions vector layer with protection status.
 docs: >
-  The countries are loaded from a GeoJSON file. Information about countries is
-  on hover and click is retrieved using the layer's `getFeatures()` method. For
+  The ecoregions are loaded from a GeoJSON file. Information about features is
+  retrieved using the layer's `getFeatures()` method on hover and click. For
   vector layers, this function resolves with an array of only the topmost
-  feature. It uses a very efficient hit detection algorithm, at the cost of
+  feature. It uses an efficient hit detection algorithm, at the cost of
   accuracy. For pixel exact hit detection, when performance is not a concern,
   use the map's `getFeaturesAtPixel()` or `forEachFeatureAtPixel()` methods.
 tags: "vector, geojson, click, hover, hit detection"

examples/hitdetect-vector.js

@@ -3,35 +3,23 @@ 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, Text} from '../src/ol/style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#fff',
-      width: 3,
-    }),
+    color: '#eeeeee',
   }),
 });
 
 const vectorLayer = new VectorLayer({
+  background: '#1a2b39',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-    style.getText().setText(feature.get('name'));
+    const color = feature.get('COLOR_NNH') || '#eeeeee';
+    style.getFill().setColor(color);
     return style;
   },
 });
@@ -47,31 +35,15 @@ const map = new Map({
 
 const highlightStyle = new Style({
   stroke: new Stroke({
-    color: '#f00',
-    width: 1,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.1)',
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3,
-    }),
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
   }),
 });
 
 const featureOverlay = new VectorLayer({
   source: new VectorSource(),
   map: map,
-  style: function (feature) {
-    highlightStyle.getText().setText(feature.get('name'));
-    return highlightStyle;
-  },
+  style: highlightStyle,
 });
 
 let highlight;
@@ -80,7 +52,7 @@ const displayFeatureInfo = function (pixel) {
     const feature = features.length ? features[0] : undefined;
     const info = document.getElementById('info');
     if (features.length) {
-      info.innerHTML = feature.getId() + ': ' + feature.get('name');
+      info.innerHTML = feature.get('ECO_NAME') + ': ' + feature.get('NNH_NAME');
     } else {
       info.innerHTML = ' ';
     }

examples/image-vector-layer.js

@@ -4,33 +4,30 @@ import VectorImageLayer from '../src/ol/layer/VectorImage.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, Text} from '../src/ol/style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: '#eeeeee',
   }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  text: new Text(),
 });
 
-const map = new Map({
-  layers: [
-    new VectorImageLayer({
+const vectorLayer = new VectorImageLayer({
+  background: '#1a2b39',
   imageRatio: 2,
   source: new VectorSource({
-        url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-        style.getText().setText(feature.get('name'));
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
     return style;
   },
-    }),
-  ],
+});
+
+const map = new Map({
+  layers: [vectorLayer],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -43,27 +40,21 @@ const featureOverlay = new VectorLayer({
   map: map,
   style: new Style({
     stroke: new Stroke({
-      color: '#f00',
-      width: 1,
-    }),
-    fill: new Fill({
-      color: 'rgba(255,0,0,0.1)',
+      color: 'rgba(255, 255, 255, 0.7)',
+      width: 2,
     }),
   }),
 });
 
 let highlight;
 const displayFeatureInfo = function (pixel) {
-  map
-    .getLayers()
-    .item(0)
-    .getFeatures(pixel)
-    .then(function (features) {
-      const feature = features.length > 0 ? features[0] : undefined;
+  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+    return feature;
+  });
 
   const info = document.getElementById('info');
   if (feature) {
-        info.innerHTML = feature.getId() + ': ' + feature.get('name');
+    info.innerHTML = feature.get('ECO_NAME') || ' ';
   } else {
     info.innerHTML = ' ';
   }
@@ -77,13 +68,14 @@ const displayFeatureInfo = function (pixel) {
     }
     highlight = feature;
   }
-    });
 };
 
 map.on('pointermove', function (evt) {
-  if (!evt.dragging) {
-    displayFeatureInfo(evt.pixel);
+  if (evt.dragging) {
+    return;
   }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
 });
 
 map.on('click', function (evt) {

examples/immediate-geographic.html

@@ -10,6 +10,5 @@ docs: >
   any geometry on each render frame.  The `useGeographic` function is used in this example so that
   geometries can be in geographic coordinates.
 tags: "immediate, geographic"
-experimental: true
 ---
 <div id="map" class="map"></div>

examples/interpolation.html

@@ -7,7 +7,7 @@ docs: >
   The <code>interpolate: false</code> setting is used to disable interpolation of data values during
   reprojection and rendering. Elevation data is
   calculated from the pixel value returned by <b>forEachLayerAtPixel</b>. For comparison a second map
-  with interpolation enabled returns inaccuate elevations which are very noticeable close to 3107 meters
+  with interpolation enabled returns inaccurate elevations which are very noticeable close to 3107 meters
   due to how elevation is calculated from the pixel value.
 tags: "disable image interpolation, xyz, maptiler, reprojection"
 cloak:

examples/mapbox-layer.js

@@ -1,11 +1,10 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import HeatmapLayer from '../src/ol/layer/Heatmap.js';
 import Layer from '../src/ol/layer/Layer.js';
 import Map from '../src/ol/Map.js';
 import Source from '../src/ol/source/Source.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 {Stroke, Style} from '../src/ol/style.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 
 const center = [-98.8, 37.9];
@@ -34,6 +33,7 @@ const mbLayer = new Layer({
 
     const visible = mbLayer.getVisible();
     canvas.style.display = visible ? 'block' : 'none';
+    canvas.style.position = 'absolute';
 
     const opacity = mbLayer.getOpacity();
     canvas.style.opacity = opacity;
@@ -66,19 +66,16 @@ const mbLayer = new Layer({
   }),
 });
 
-const style = new Style({
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 2,
-  }),
-});
-
-const vectorLayer = new VectorLayer({
+const cities = new HeatmapLayer({
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'data/geojson/world-cities.geojson',
     format: new GeoJSON(),
   }),
-  style: style,
+  weight: function (feature) {
+    return feature.get('population') / 1e7;
+  },
+  radius: 15,
+  blur: 15,
 });
 
 const map = new Map({
@@ -87,5 +84,5 @@ const map = new Map({
     center: fromLonLat(center),
     zoom: 4,
   }),
-  layers: [mbLayer, vectorLayer],
+  layers: [mbLayer, cities],
 });

examples/mobile-full-screen.html

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

examples/modify-features.js

@@ -1,21 +1,19 @@
 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 {
   Modify,
   Select,
   defaults as defaultInteractions,
 } from '../src/ol/interaction.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-
-const raster = new TileLayer({
-  source: new OSM(),
-});
+import {fromLonLat} from '../src/ol/proj.js';
 
 const vector = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
     wrapX: false,
   }),
@@ -31,10 +29,10 @@ const modify = new Modify({
 
 const map = new Map({
   interactions: defaultInteractions().extend([select, modify]),
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
-    center: [0, 0],
-    zoom: 2,
+    center: fromLonLat([-100, 38.5]),
+    zoom: 4,
   }),
 });

examples/offscreen-canvas.js

@@ -5,9 +5,12 @@ import View from '../src/ol/View.js';
 import Worker from 'worker-loader!./offscreen-canvas.worker.js'; //eslint-disable-line
 import stringify from 'json-stringify-safe';
 import {FullScreen} from '../src/ol/control.js';
-import {compose, create} from '../src/ol/transform.js';
+import {
+  compose,
+  create,
+  toString as toTransformString,
+} from '../src/ol/transform.js';
 import {createXYZ} from '../src/ol/tilegrid.js';
-import {toString as toTransformString} from '../src/ol/transform.js';
 
 const worker = new Worker();
 

examples/offscreen-canvas.worker.js

@@ -1,12 +1,13 @@
 import MVT from '../src/ol/format/MVT.js';
-import TileQueue from '../src/ol/TileQueue.js';
+import TileQueue, {
+  getTilePriority as tilePriorityFunction,
+} from '../src/ol/TileQueue.js';
 import VectorTileLayer from '../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import stringify from 'json-stringify-safe';
 import styleFunction from 'ol-mapbox-style/dist/stylefunction.js';
 import {get} from '../src/ol/proj.js';
 import {inView} from '../src/ol/layer/Layer.js';
-import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js';
 
 /** @type {any} */
 const worker = self;

examples/projection-and-scale.html

@@ -0,0 +1,18 @@
+---
+layout: example.html
+title: Projection and Scale
+shortdesc: Example of maintaining scale when changing projection.
+docs: >
+  Example of maintaining scale when changing projection.
+  `getPointResolution()` is used to calculate the resolution for the
+  new projection which corresponds to that for the old projection. 
+tags: "projection, scale"
+---
+<div id="map" class="map"></div>
+<div>
+  <label for="view-projection">View projection</label>
+  <select id="view-projection">
+    <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
+    <option value="EPSG:4326" selected>WGS 84 (EPSG:4326)</option>
+  </select>
+</div>

examples/projection-and-scale.js

@@ -0,0 +1,68 @@
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js';
+import {
+  getPointResolution,
+  get as getProjection,
+  transform,
+} from '../src/ol/proj.js';
+
+const viewProjSelect = document.getElementById('view-projection');
+const projection = getProjection(viewProjSelect.value);
+
+const scaleControl = new ScaleLine({
+  units: 'metric',
+  bar: true,
+  steps: 4,
+  text: true,
+  minWidth: 140,
+});
+
+const map = new Map({
+  controls: defaultControls().extend([scaleControl]),
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: transform([0, 52], 'EPSG:4326', projection),
+    zoom: 6,
+    projection: projection,
+  }),
+});
+
+function onChangeProjection() {
+  const currentView = map.getView();
+  const currentProjection = currentView.getProjection();
+  const newProjection = getProjection(viewProjSelect.value);
+  const currentResolution = currentView.getResolution();
+  const currentCenter = currentView.getCenter();
+  const currentRotation = currentView.getRotation();
+  const newCenter = transform(currentCenter, currentProjection, newProjection);
+  const currentPointResolution = getPointResolution(
+    currentProjection,
+    1,
+    currentCenter,
+    'm'
+  );
+  const newPointResolution = getPointResolution(
+    newProjection,
+    1,
+    newCenter,
+    'm'
+  );
+  const newResolution =
+    (currentResolution * currentPointResolution) / newPointResolution;
+  const newView = new View({
+    center: newCenter,
+    resolution: newResolution,
+    rotation: currentRotation,
+    projection: newProjection,
+  });
+  map.setView(newView);
+}
+viewProjSelect.addEventListener('change', onChangeProjection);

examples/resources/layout.css

@@ -22,6 +22,7 @@ body {
 }
 .navbar-brand img {
   height: 35px;
+  width: 35px;;
   vertical-align: middle;
   margin-right: 5px;
   display: inline-block;

examples/rich-text-labels.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Rich Text Labels
+shortdesc: Rich text labels.
+docs: >
+  The labels in this map use different fonts to create clear context - an alphabetic sort key prefixing the state name in bold, and the population density in an extra line with a smaller font and italic.
+tags: "vector, rich-text, labels"
+---
+<div id="map" class="map"></div>

examples/rich-text-labels.js

@@ -0,0 +1,64 @@
+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, Text} from '../src/ol/style.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    extent: [-13882269, 2890586, -7456136, 6340207],
+    showFullExtent: true,
+  }),
+});
+
+const labelStyle = new Style({
+  text: new Text({
+    font: '13px Calibri,sans-serif',
+    fill: new Fill({
+      color: '#000',
+    }),
+    stroke: new Stroke({
+      color: '#fff',
+      width: 4,
+    }),
+  }),
+});
+const countryStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1,
+  }),
+});
+const style = [countryStyle, labelStyle];
+
+const vectorLayer = new VectorLayer({
+  background: 'white',
+  source: new VectorSource({
+    url: 'https://openlayers.org/data/vector/us-states.json',
+    format: new GeoJSON(),
+  }),
+  style: function (feature) {
+    labelStyle
+      .getText()
+      .setText([
+        feature.getId(),
+        'bold 13px Calibri,sans-serif',
+        ` ${feature.get('name')}`,
+        '',
+        '\n',
+        '',
+        `${feature.get('density')} people/mi²`,
+        'italic 11px Calibri,sans-serif',
+      ]);
+    return style;
+  },
+});
+
+map.addLayer(vectorLayer);

examples/sea-level.html

@@ -8,11 +8,6 @@ docs: >
     <a href="https://blog.mapbox.com/styling-mapbox-terrain-rgb-c75d1cd71471">Mapbox Terrain-RGB tiles</a>
     to "flood" areas below the elevation shown on the sea level slider.
   </p>
-  <p>
-    <code>ol/source/Raster</code> can take either a tile source or layer.
-    In this case a layer is used to allow disabling at the <code>prerender</code> event
-    of image smoothing which would change the precise elevation values set in the pixels.
-  </p>
 tags: "raster, pixel operation, flood"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB

examples/sea-level.js

@@ -26,18 +26,14 @@ 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 elevation = new TileLayer({
-  source: new XYZ({
-    url:
-      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+const elevation = new XYZ({
+  // The RGB values in the source collectively represent elevation.
+  // Interpolation of individual colors would produce incorrect evelations and is disabled.
+  url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
   tileSize: 512,
   maxZoom: 12,
   crossOrigin: '',
-  }),
-});
-elevation.on('prerender', function (evt) {
-  evt.context.imageSmoothingEnabled = false;
-  evt.context.msImageSmoothingEnabled = false;
+  interpolate: false,
 });
 
 const raster = new RasterSource({

examples/select-features.js

@@ -1,25 +1,33 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Select from '../src/ol/interaction/Select.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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {altKeyOnly, click, pointerMove} from '../src/ol/events/condition.js';
 
-const raster = new TileLayer({
-  source: new OSM(),
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
 });
 
 const vector = new VectorLayer({
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
+  background: 'white',
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
 });
 
 const map = new Map({
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -29,20 +37,39 @@ const map = new Map({
 
 let select = null; // ref to currently selected interaction
 
+const selected = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
+  }),
+});
+
+function selectStyle(feature) {
+  const color = feature.get('COLOR') || '#eeeeee';
+  selected.getFill().setColor(color);
+  return selected;
+}
+
 // select interaction working on "singleclick"
-const selectSingleClick = new Select();
+const selectSingleClick = new Select({style: selectStyle});
 
 // select interaction working on "click"
 const selectClick = new Select({
   condition: click,
+  style: selectStyle,
 });
 
 // select interaction working on "pointermove"
 const selectPointerMove = new Select({
   condition: pointerMove,
+  style: selectStyle,
 });
 
 const selectAltClick = new Select({
+  style: selectStyle,
   condition: function (mapBrowserEvent) {
     return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
   },

examples/select-hover-features.html

@@ -7,4 +7,4 @@ docs: >
 tags: "select, vector"
 ---
 <div id="map" class="map"></div>
-<span id="status"></span>
+<span id="status">&nbsp;</span>

examples/select-hover-features.js

@@ -1,36 +1,33 @@
 import Fill from '../src/ol/style/Fill.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Stroke from '../src/ol/style/Stroke.js';
 import Style from '../src/ol/style/Style.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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
-const raster = new TileLayer({
-  source: new OSM(),
-});
-
-const highlightStyle = new Style({
+const style = new Style({
   fill: new Fill({
-    color: 'rgba(255,255,255,0.7)',
-  }),
-  stroke: new Stroke({
-    color: '#3399CC',
-    width: 3,
+    color: '#eeeeee',
   }),
 });
 
 const vector = new VectorLayer({
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
+  background: 'white',
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
 });
 
 const map = new Map({
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -38,9 +35,19 @@ const map = new Map({
   }),
 });
 
-let selected = null;
+const selectStyle = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
+  }),
+});
+
 const status = document.getElementById('status');
 
+let selected = null;
 map.on('pointermove', function (e) {
   if (selected !== null) {
     selected.setStyle(undefined);
@@ -49,12 +56,13 @@ map.on('pointermove', function (e) {
 
   map.forEachFeatureAtPixel(e.pixel, function (f) {
     selected = f;
-    f.setStyle(highlightStyle);
+    selectStyle.getFill().setColor(f.get('COLOR') || '#eeeeee');
+    f.setStyle(selectStyle);
     return true;
   });
 
   if (selected) {
-    status.innerHTML = ' Hovering: ' + selected.get('name');
+    status.innerHTML = selected.get('ECO_NAME');
   } else {
     status.innerHTML = ' ';
   }

examples/select-multiple-features.js

@@ -1,40 +1,37 @@
 import Fill from '../src/ol/style/Fill.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Stroke from '../src/ol/style/Stroke.js';
 import Style from '../src/ol/style/Style.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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-
-const raster = new TileLayer({
-  source: new OSM(),
-});
+import {fromLonLat} from '../src/ol/proj.js';
 
 const highlightStyle = new Style({
   fill: new Fill({
-    color: 'rgba(255,255,255,0.7)',
+    color: '#EEE',
   }),
   stroke: new Stroke({
     color: '#3399CC',
-    width: 3,
+    width: 2,
   }),
 });
 
 const vector = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
   }),
 });
 
 const map = new Map({
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
-    center: [0, 0],
-    zoom: 2,
+    center: fromLonLat([-100, 38.5]),
+    zoom: 4,
     multiWorld: true,
   }),
 });

examples/sphere-mollweide.js

@@ -6,6 +6,7 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import proj4 from 'proj4';
+import {Fill, Style} from '../src/ol/style.js';
 import {register} from '../src/ol/proj/proj4.js';
 
 proj4.defs(
@@ -26,14 +27,25 @@ const sphereMollweideProjection = new Projection({
   worldExtent: [-179, -89.99, 179, 89.99],
 });
 
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
+
 const map = new Map({
   keyboardEventTarget: document,
   layers: [
     new VectorLayer({
       source: new VectorSource({
-        url: 'data/geojson/countries-110m.geojson',
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
         format: new GeoJSON(),
       }),
+      style: function (feature) {
+        const color = feature.get('COLOR_BIO') || '#eeeeee';
+        style.getFill().setColor(color);
+        return style;
+      },
     }),
     new Graticule(),
   ],
@@ -41,6 +53,6 @@ const map = new Map({
   view: new View({
     center: [0, 0],
     projection: sphereMollweideProjection,
-    zoom: 1,
+    zoom: 2,
   }),
 });

examples/templates/example.html

@@ -67,7 +67,7 @@
     <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://unpkg.com/elm-pep"></script>
+    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
     <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
     {{{ extraHead.local }}}
@@ -193,7 +193,7 @@
     &lt;meta charset="UTF-8"&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
     &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
-    &lt;script src="https://unpkg.com/elm-pep"&gt;&lt;/script&gt;
+    &lt;script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"&gt;&lt;/script&gt;
     &lt;!-- The lines below are 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,TextDecoder"&gt;&lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"&gt;&lt;/script&gt;{{#if extraHead.remote}}

examples/translate-features.js

@@ -1,6 +1,6 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.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 {
@@ -8,15 +8,12 @@ import {
   Translate,
   defaults as defaultInteractions,
 } from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-
-const raster = new TileLayer({
-  source: new OSM(),
-});
+import {fromLonLat} from '../src/ol/proj.js';
 
 const vector = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
   }),
 });
@@ -29,10 +26,10 @@ const translate = new Translate({
 
 const map = new Map({
   interactions: defaultInteractions().extend([select, translate]),
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
-    center: [0, 0],
-    zoom: 2,
+    center: fromLonLat([-100, 38.5]),
+    zoom: 4,
   }),
 });

examples/utfgrid.html

@@ -15,6 +15,6 @@ cloak:
   <!-- Overlay with the country info -->
   <div id="country-info">
     <div id="country-name">&nbsp;</div>
-    <img id="country-flag" src="" />
+    <img id="country-flag" />
   </div>
 </div>

examples/vector-label-decluttering.html

@@ -2,8 +2,6 @@
 layout: example.html
 title: Vector Label Decluttering
 shortdesc: Label decluttering on polygons.
-resources:
-  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
 docs: >
   Decluttering is used to avoid overlapping labels. The `overflow: true` setting on the text style makes it so labels that do not fit within the bounds of a polygon are also considered for decluttering.
 tags: "vector, decluttering, labels"

examples/vector-label-decluttering.js

@@ -4,12 +4,13 @@ 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, Text} from '../src/ol/style.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [0, 0],
-    zoom: 1,
+    center: fromLonLat([-100, 38.5]),
+    zoom: 4,
   }),
 });
 
@@ -38,12 +39,14 @@ const countryStyle = new Style({
 const style = [countryStyle, labelStyle];
 
 const vectorLayer = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-    labelStyle.getText().setText(feature.get('name'));
+    const label = feature.get('name').split(' ').join('\n');
+    labelStyle.getText().setText(label);
     return style;
   },
   declutter: true,

examples/vector-layer.js

@@ -3,35 +3,23 @@ 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, Text} from '../src/ol/style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#fff',
-      width: 3,
-    }),
+    color: '#eeeeee',
   }),
 });
 
 const vectorLayer = new VectorLayer({
+  background: '#1a2b39',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-    style.getText().setText(feature.get('name'));
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
     return style;
   },
 });
@@ -45,33 +33,15 @@ const map = new Map({
   }),
 });
 
-const highlightStyle = new Style({
-  stroke: new Stroke({
-    color: '#f00',
-    width: 1,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.1)',
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3,
-    }),
-  }),
-});
-
 const featureOverlay = new VectorLayer({
   source: new VectorSource(),
   map: map,
-  style: function (feature) {
-    highlightStyle.getText().setText(feature.get('name'));
-    return highlightStyle;
-  },
+  style: new Style({
+    stroke: new Stroke({
+      color: 'rgba(255, 255, 255, 0.7)',
+      width: 2,
+    }),
+  }),
 });
 
 let highlight;
@@ -82,7 +52,7 @@ const displayFeatureInfo = function (pixel) {
 
   const info = document.getElementById('info');
   if (feature) {
-    info.innerHTML = feature.getId() + ': ' + feature.get('name');
+    info.innerHTML = feature.get('ECO_NAME') || ' ';
   } else {
     info.innerHTML = ' ';
   }

examples/vector-wfs-geographic.html

@@ -11,6 +11,5 @@ tags: "geographic, vector, WFS, tile, strategy, loading, server, maptiler"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
-experimental: true
 ---
 <div id="map" class="map"></div>

examples/webgl-layer-swipe.js

@@ -17,7 +17,6 @@ const imagery = new TileLayer({
     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>',
-    crossOrigin: '',
     maxZoom: 20,
   }),
 });

examples/webgl-sea-level.js

@@ -33,7 +33,6 @@ const layer = new TileLayer({
       'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
     tileSize: 512,
     maxZoom: 12,
-    crossOrigin: 'anonymous',
   }),
   style: {
     variables: {
@@ -56,7 +55,6 @@ const map = new Map({
       source: new XYZ({
         url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
         attributions: attributions,
-        crossOrigin: 'anonymous',
         tileSize: 512,
         maxZoom: 22,
       }),

examples/webgl-shaded-relief.js

@@ -50,7 +50,6 @@ const shadedRelief = new TileLayer({
   opacity: 0.3,
   source: new XYZ({
     url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-    crossOrigin: 'anonymous',
   }),
   style: {
     variables: variables,

examples/webgl-tile-style.js

@@ -22,7 +22,6 @@ const layer = new TileLayer({
     variables: variables,
   },
   source: new XYZ({
-    crossOrigin: 'anonymous', // TODO: determine if we can avoid this
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,

examples/webpack/example-builder.js

@@ -329,7 +329,7 @@ export default class ExampleBuilder {
           source = this.cloakSource(source, data.cloak);
           assets[fileName] = source;
           return {
-            name: sourceConfig.as ?? fileName,
+            name: sourceConfig.as || fileName,
             source: source,
             type: ext,
           };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.10.0",
+  "version": "6.13.0",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -25,9 +25,9 @@
     "build-legacy": "shx rm -rf build/legacy && npm run build-index && webpack --config config/webpack-config-legacy-build.mjs && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
     "build-site": "shx rm -rf build/site && npm run build-examples && npm run apidoc && npm run build-legacy && shx mkdir -p build/site && shx cp site/index.html build/site/ && shx mv build/apidoc build/examples build/legacy build/site/",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "generate-types": "npx --package=typescript@3.8.3 -y -- tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && npx --package=typescript@4.3.5 -y -- tsc --project config/tsconfig-build.json",
-    "typecheck": "npx --package=typescript@4.3.5 -y -- tsc --pretty",
+    "generate-types": "tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && tsc --project config/tsconfig-build.json",
+    "typecheck": "tsc --pretty",
     "apidoc-debug": "shx rm -rf build/apidoc && node --inspect-brk=9229 ./node_modules/jsdoc/jsdoc.js -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
     "apidoc": "shx rm -rf build/apidoc && jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
@@ -45,8 +45,8 @@
     "url": "https://opencollective.com/openlayers"
   },
   "dependencies": {
-    "geotiff": "^1.0.8",
-    "ol-mapbox-style": "^6.7.0",
+    "geotiff": "^2.0.2",
+    "ol-mapbox-style": "^7.0.0",
     "pbf": "3.2.1",
     "rbush": "^3.0.1"
   },
@@ -59,23 +59,24 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
+    "@types/offscreencanvas": "^2019.6.4",
     "@types/pbf": "^3.0.2",
     "@types/topojson-specification": "^1.0.1",
     "babel-loader": "^8.2.2",
     "chaikin-smooth": "^1.0.4",
-    "clean-css-cli": "5.5.0",
+    "clean-css-cli": "5.5.2",
     "copy-webpack-plugin": "^10.0.0",
     "es-main": "^1.0.2",
     "eslint": "^8.0.1",
-    "eslint-config-openlayers": "^16.0.1",
+    "eslint-config-openlayers": "^16.1.0",
     "expect.js": "0.3.1",
     "express": "^4.17.1",
     "front-matter": "^4.0.0",
     "fs-extra": "^10.0.0",
-    "globby": "^12.0.0",
+    "globby": "^13.0.0",
     "handlebars": "4.7.7",
     "jquery": "3.6.0",
-    "jsdoc": "3.6.7",
+    "jsdoc": "3.6.10",
     "jsdoc-plugin-typescript": "^2.0.5",
     "json-stringify-safe": "^5.0.1",
     "karma": "^6.3.8",
@@ -85,19 +86,20 @@
     "karma-source-map-support": "^1.4.0",
     "karma-webpack": "^5.0.0",
     "loglevelnext": "^5.0.5",
-    "marked": "4.0.8",
-    "mocha": "9.1.3",
+    "marked": "4.0.12",
+    "mocha": "9.2.1",
     "pixelmatch": "^5.1.0",
     "pngjs": "^6.0.0",
     "proj4": "^2.7.5",
-    "puppeteer": "13.0.1",
+    "puppeteer": "13.3.2",
     "regenerator-runtime": "^0.13.9",
     "rollup": "^2.42.3",
     "rollup-plugin-terser": "^7.0.2",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
-    "sinon": "^12.0.1",
+    "sinon": "^13.0.0",
     "threads": "^1.6.5",
+    "typescript": "4.6.0-beta",
     "walk": "^2.3.9",
     "webpack": "^5.27.2",
     "webpack-cli": "^4.5.0",

site/index.html

@@ -7,7 +7,7 @@
     <link href='https://openlayers.org/assets/theme/site.css' rel='stylesheet' type='text/css'>
     <link href="./legacy/ol.css" rel='stylesheet' type='text/css'>
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
-    <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
     <!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
     <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>

src/ol/Feature.js

@@ -11,7 +11,7 @@ import {listen, unlistenByKey} from './events.js';
  */
 
 /**
- * @typedef {Feature<import("./geom/Geometry.js").default>|import("./render/Feature.js").default} FeatureLike
+ * @typedef {Feature|import("./render/Feature.js").default} FeatureLike
  */
 
 /***
@@ -36,7 +36,7 @@ import {listen, unlistenByKey} from './events.js';
  * Features can be styled individually with `setStyle`; otherwise they use the
  * style of their vector layer.
  *
- * Note that attribute properties are set as {@link module:ol/Object} properties on
+ * Note that attribute properties are set as {@link module:ol/Object~BaseObject} properties on
  * the feature object, so they are observable, and have get/set accessors.
  *
  * Typically, a feature has a single geometry property. You can set the
@@ -70,7 +70,7 @@ import {listen, unlistenByKey} from './events.js';
  * ```
  *
  * @api
- * @template {import("./geom/Geometry.js").default} Geometry
+ * @template {import("./geom/Geometry.js").default} [Geometry=import("./geom/Geometry.js").default]
  */
 class Feature extends BaseObject {
   /**

src/ol/Image.js

@@ -9,9 +9,9 @@ import {getHeight} from './extent.js';
 import {listenOnce, unlistenByKey} from './events.js';
 
 /**
- * A function that takes an {@link module:ol/Image~Image} for the image and a
+ * A function that takes an {@link module:ol/Image~ImageWrapper} for the image and a
  * `{string}` for the src as arguments. It is supposed to make it so the
- * underlying image {@link module:ol/Image~Image#getImage} is assigned the
+ * underlying image {@link module:ol/Image~ImageWrapper#getImage} is assigned the
  * content specified by the src. If not specified, the default is
  *
  *     function(image, src) {

src/ol/Map.js

@@ -30,7 +30,7 @@ import {defaults as defaultInteractions} from './interaction.js';
  *       target: 'map'
  *     });
  *
- * The above snippet creates a map using a {@link module:ol/layer/Tile} to
+ * The above snippet creates a map using a {@link module:ol/layer/Tile~TileLayer} to
  * display {@link module:ol/source/OSM~OSM} OSM data and render it to a DOM
  * element with the id `map`.
  *
@@ -47,8 +47,8 @@ import {defaults as defaultInteractions} from './interaction.js';
  * accessed by `getLayerGroup` and `setLayerGroup`. Layers entered in the
  * options are added to this group, and `addLayer` and `removeLayer` change the
  * layer collection in the group. `getLayers` is a convenience function for
- * `getLayerGroup().getLayers()`. Note that {@link module:ol/layer/Group~Group}
- * is a subclass of {@link module:ol/layer/Base}, so layers entered in the
+ * `getLayerGroup().getLayers()`. Note that {@link module:ol/layer/Group~LayerGroup}
+ * is a subclass of {@link module:ol/layer/Base~BaseLayer}, so layers entered in the
  * options or added with `addLayer` can be groups, which can contain further
  * groups, and so on.
  *

src/ol/MapBrowserEventHandler.js

@@ -59,7 +59,7 @@ class MapBrowserEventHandler extends Target {
     /**
      * The most recent "down" type event (or null if none have occurred).
      * Set on pointerdown.
-     * @type {PointerEvent}
+     * @type {PointerEvent|null}
      * @private
      */
     this.down_ = null;

src/ol/Object.js

@@ -50,7 +50,7 @@ export class ObjectEvent extends Event {
  * instantiated in apps.
  * Most non-trivial classes inherit from this.
  *
- * This extends {@link module:ol/Observable} with observable
+ * This extends {@link module:ol/Observable~Observable} with observable
  * properties, where each property is observable as well as the object as a
  * whole.
  *
@@ -172,10 +172,14 @@ class BaseObject extends Observable {
   notify(key, oldValue) {
     let eventType;
     eventType = `change:${key}`;
+    if (this.hasListener(eventType)) {
       this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+    }
     eventType = ObjectEventType.PROPERTYCHANGE;
+    if (this.hasListener(eventType)) {
       this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
     }
+  }
 
   /**
    * @param {string} key Key name.

src/ol/Overlay.js

@@ -249,14 +249,14 @@ class Overlay extends BaseObject {
 
   /**
    * Get the map associated with this overlay.
-   * @return {import("./PluggableMap.js").default|undefined} The map that the
+   * @return {import("./PluggableMap.js").default|null} The map that the
    * overlay is part of.
    * @observable
    * @api
    */
   getMap() {
-    return /** @type {import("./PluggableMap.js").default|undefined} */ (
-      this.get(Property.MAP)
+    return /** @type {import("./PluggableMap.js").default|null} */ (
+      this.get(Property.MAP) || null
     );
   }
 
@@ -378,8 +378,8 @@ class Overlay extends BaseObject {
 
   /**
    * Set the map to be associated with this overlay.
-   * @param {import("./PluggableMap.js").default|undefined} map The map that the
-   * overlay is part of.
+   * @param {import("./PluggableMap.js").default|null} map The map that the
+   * overlay is part of. Pass `null` to just remove the overlay from the current map.
    * @observable
    * @api
    */

src/ol/PluggableMap.js

@@ -73,7 +73,7 @@ import {removeNode} from './dom.js';
  * @typedef {Object} AtPixelOptions
  * @property {undefined|function(import("./layer/Layer.js").default<import("./source/Source").default>): boolean} [layerFilter] Layer filter
  * function. The filter function will receive one argument, the
- * {@link module:ol/layer/Layer layer-candidate} and it should return a boolean value.
+ * {@link module:ol/layer/Layer~Layer layer-candidate} and it should return a boolean value.
  * Only layers which are visible and for which this function returns `true`
  * will be tested for features. By default, all visible layers will be tested.
  * @property {number} [hitTolerance=0] Hit-detection tolerance in css pixels. Pixels
@@ -610,9 +610,9 @@ class PluggableMap extends BaseObject {
    * @param {import("./pixel.js").Pixel} pixel Pixel.
    * @param {function(import("./Feature.js").FeatureLike, import("./layer/Layer.js").default<import("./source/Source").default>, import("./geom/SimpleGeometry.js").default): T} callback Feature callback. The callback will be
    *     called with two arguments. The first argument is one
-   *     {@link module:ol/Feature feature} or
-   *     {@link module:ol/render/Feature render feature} at the pixel, the second is
-   *     the {@link module:ol/layer/Layer layer} of the feature and will be null for
+   *     {@link module:ol/Feature~Feature feature} or
+   *     {@link module:ol/render/Feature~RenderFeature render feature} at the pixel, the second is
+   *     the {@link module:ol/layer/Layer~Layer layer} of the feature and will be null for
    *     unmanaged layers. To stop detection, callback functions can return a
    *     truthy value.
    * @param {AtPixelOptions} [opt_options] Optional options.
@@ -667,6 +667,7 @@ class PluggableMap extends BaseObject {
   /**
    * Get all layers from all layer groups.
    * @return {Array<import("./layer/Layer.js").default>} Layers.
+   * @api
    */
   getAllLayers() {
     const layers = [];
@@ -684,17 +685,23 @@ class PluggableMap extends BaseObject {
   }
 
   /**
+   * Please the `layer.getData()` method for {@link module:ol/layer/Tile~TileLayer#getData tile layers} or
+   * {@link module:ol/layer/Image~ImageLayer#getData image layers} instead of using this method.
+   *
    * Detect layers that have a color value at a pixel on the viewport, and
    * execute a callback with each matching layer. Layers included in the
    * detection can be configured through `opt_layerFilter`.
    *
-   * Note: this may give false positives unless the map layers have had different `className`
-   * properties assigned to them.
+   * Note: In maps with more than one layer, this method will typically return pixel data
+   * representing the composed image of all layers visible at the given pixel – because layers
+   * will generally share the same rendering context.  To force layers to render separately, and
+   * to get pixel data representing only one layer at a time, you can assign each layer a unique
+   * `className` in its constructor.
    *
    * @param {import("./pixel.js").Pixel} pixel Pixel.
    * @param {function(this: S, import("./layer/Layer.js").default, (Uint8ClampedArray|Uint8Array)): T} callback
    *     Layer callback. This callback will receive two arguments: first is the
-   *     {@link module:ol/layer/Layer layer}, second argument is an array representing
+   *     {@link module:ol/layer/Layer~Layer layer}, second argument is an array representing
    *     [R, G, B, A] pixel values (0 - 255) and will be `null` for layer types
    *     that do not currently support this argument. To stop detection, callback
    *     functions can return a truthy value.
@@ -703,6 +710,7 @@ class PluggableMap extends BaseObject {
    * callback execution, or the first truthy callback return value.
    * @template S,T
    * @api
+   * @deprecated
    */
   forEachLayerAtPixel(pixel, callback, opt_options) {
     if (!this.frameState_) {
@@ -939,10 +947,13 @@ class PluggableMap extends BaseObject {
   /**
    * @return {boolean} Layers have sources that are still loading.
    */
-  getLoading() {
+  getLoadingOrNotReady() {
     const layerStatesArray = this.getLayerGroup().getLayerStatesArray();
     for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
       const layer = layerStatesArray[i].layer;
+      if (!layer.getRenderer().ready) {
+        return true;
+      }
       const source = /** @type {import("./layer/Layer.js").default} */ (
         layer
       ).getSource();
@@ -1557,7 +1568,7 @@ class PluggableMap extends BaseObject {
     this.renderComplete_ =
       !this.tileQueue_.getTilesLoading() &&
       !this.tileQueue_.getCount() &&
-      !this.getLoading();
+      !this.getLoadingOrNotReady();
 
     if (!this.postRenderTimeoutHandle_) {
       this.postRenderTimeoutHandle_ = setTimeout(() => {

src/ol/Tile.js

@@ -8,7 +8,7 @@ import {abstract} from './util.js';
 import {easeIn} from './easing.js';
 
 /**
- * A function that takes an {@link module:ol/Tile} for the tile and a
+ * A function that takes an {@link module:ol/Tile~Tile} for the tile and a
  * `{string}` for the url as arguments. The default is
  * ```js
  * source.setTileLoadFunction(function(tile, src) {
@@ -45,12 +45,12 @@ import {easeIn} from './easing.js';
  */
 
 /**
- * {@link module:ol/source/Tile~Tile} sources use a function of this type to get
+ * {@link module:ol/source/Tile~TileSource} sources use a function of this type to get
  * the url that provides a tile for a given tile coordinate.
  *
  * This function takes an {@link module:ol/tilecoord~TileCoord} for the tile
  * coordinate, a `{number}` representing the pixel ratio and a
- * {@link module:ol/proj/Projection} for the projection  as arguments
+ * {@link module:ol/proj/Projection~Projection} for the projection  as arguments
  * and returns a `{string}` representing the tile URL, or undefined if no tile
  * should be requested for the passed tile coordinate.
  *

src/ol/View.js

@@ -10,6 +10,7 @@ import {DEFAULT_TILE_SIZE} from './tilegrid/common.js';
 import {
   METERS_PER_UNIT,
   createProjection,
+  disableCoordinateWarning,
   fromUserCoordinate,
   fromUserExtent,
   getUserProjection,
@@ -20,25 +21,25 @@ import {VOID} from './functions.js';
 import {
   add as addCoordinate,
   equals as coordinatesEqual,
+  equals,
   rotate as rotateCoordinate,
 } from './coordinate.js';
 import {assert} from './asserts.js';
 import {assign} from './obj.js';
 import {none as centerNone, createExtent} from './centerconstraint.js';
 import {clamp, modulo} from './math.js';
-import {createMinMaxResolution} from './resolutionconstraint.js';
+import {
+  createMinMaxResolution,
+  createSnapToPower,
+  createSnapToResolutions,
+} from './resolutionconstraint.js';
 import {
   createSnapToN,
   createSnapToZero,
   disable,
   none as rotationNone,
 } from './rotationconstraint.js';
-import {
-  createSnapToPower,
-  createSnapToResolutions,
-} from './resolutionconstraint.js';
-import {easeOut} from './easing.js';
-import {equals} from './coordinate.js';
+import {easeOut, inAndOut} from './easing.js';
 import {
   getCenter,
   getForViewAndSize,
@@ -46,7 +47,6 @@ import {
   getWidth,
   isEmpty,
 } from './extent.js';
-import {inAndOut} from './easing.js';
 import {linearFindNearest} from './array.js';
 import {fromExtent as polygonFromExtent} from './geom/Polygon.js';
 
@@ -242,7 +242,7 @@ const DEFAULT_MIN_ZOOM = 0;
  * A View has a `projection`. The projection determines the
  * coordinate system of the center, and its units determine the units of the
  * resolution (projection units per pixel). The default projection is
- * Spherical Mercator (EPSG:3857).
+ * Web Mercator (EPSG:3857).
  *
  * ### The view states
  *
@@ -407,6 +407,9 @@ class View extends BaseObject {
     if (options.extent) {
       options.extent = fromUserExtent(options.extent, this.projection_);
     }
+    if (options.projection) {
+      disableCoordinateWarning();
+    }
 
     this.applyOptions_(options);
   }
@@ -1633,7 +1636,9 @@ class View extends BaseObject {
    * @api
    */
   setCenter(center) {
-    this.setCenterInternal(fromUserCoordinate(center, this.getProjection()));
+    this.setCenterInternal(
+      center ? fromUserCoordinate(center, this.getProjection()) : center
+    );
   }
 
   /**

src/ol/centerconstraint.js

@@ -18,14 +18,19 @@ export function createExtent(extent, onlyCenter, smooth) {
   return (
     /**
      * @param {import("./coordinate.js").Coordinate|undefined} center Center.
-     * @param {number} resolution Resolution.
+     * @param {number|undefined} resolution Resolution.
      * @param {import("./size.js").Size} size Viewport size; unused if `onlyCenter` was specified.
      * @param {boolean} [opt_isMoving] True if an interaction or animation is in progress.
      * @param {Array<number>} [opt_centerShift] Shift between map center and viewport center.
      * @return {import("./coordinate.js").Coordinate|undefined} Center.
      */
     function (center, resolution, size, opt_isMoving, opt_centerShift) {
-      if (center) {
+      if (!center) {
+        return undefined;
+      }
+      if (!resolution && !onlyCenter) {
+        return center;
+      }
       const viewWidth = onlyCenter ? 0 : size[0] * resolution;
       const viewHeight = onlyCenter ? 0 : size[1] * resolution;
       const shiftX = opt_centerShift ? opt_centerShift[0] : 0;
@@ -48,10 +53,10 @@ export function createExtent(extent, onlyCenter, smooth) {
 
       let x = clamp(center[0], minX, maxX);
       let y = clamp(center[1], minY, maxY);
-        const ratio = 30 * resolution;
 
       // during an interaction, allow some overscroll
-        if (opt_isMoving && smooth) {
+      if (opt_isMoving && smooth && resolution) {
+        const ratio = 30 * resolution;
         x +=
           -ratio * Math.log(1 + Math.max(0, minX - center[0]) / ratio) +
           ratio * Math.log(1 + Math.max(0, center[0] - maxX) / ratio);
@@ -61,9 +66,6 @@ export function createExtent(extent, onlyCenter, smooth) {
       }
 
       return [x, y];
-      } else {
-        return undefined;
-      }
     }
   );
 }

src/ol/control/Attribution.js

@@ -110,7 +110,7 @@ class Attribution extends Control {
     const collapseClassName =
       options.collapseClassName !== undefined
         ? options.collapseClassName
-        : className + '-collpase';
+        : className + '-collapse';
 
     if (typeof collapseLabel === 'string') {
       /**

src/ol/control/Control.js

@@ -69,7 +69,7 @@ class Control extends BaseObject {
 
     /**
      * @private
-     * @type {import("../PluggableMap.js").default}
+     * @type {import("../PluggableMap.js").default|null}
      */
     this.map_ = null;
 
@@ -98,7 +98,7 @@ class Control extends BaseObject {
 
   /**
    * Get the map associated with this control.
-   * @return {import("../PluggableMap.js").default|undefined} Map.
+   * @return {import("../PluggableMap.js").default|null} Map.
    * @api
    */
   getMap() {
@@ -107,9 +107,10 @@ class Control extends BaseObject {
 
   /**
    * Remove the control from its current map and attach it to the new map.
+   * Pass `null` to just remove the control from the current map.
    * Subclasses may set up event handlers to get notified about changes to
    * the map here.
-   * @param {import("../PluggableMap.js").default} [map] Map.
+   * @param {import("../PluggableMap.js").default|null} map Map.
    * @api
    */
   setMap(map) {
@@ -121,7 +122,7 @@ class Control extends BaseObject {
     }
     this.listenerKeys.length = 0;
     this.map_ = map;
-    if (this.map_) {
+    if (map) {
       const target = this.target_
         ? this.target_
         : map.getOverlayContainerStopEvent();

src/ol/control/FullScreen.js

@@ -281,9 +281,10 @@ class FullScreen extends Control {
 
   /**
    * Remove the control from its current map and attach it to the new map.
+   * Pass `null` to just remove the control from the current map.
    * Subclasses may set up event handlers to get notified about changes to
    * the map here.
-   * @param {import("../PluggableMap.js").default} map Map.
+   * @param {import("../PluggableMap.js").default|null} map Map.
    * @api
    */
   setMap(map) {

src/ol/control/MousePosition.js

@@ -212,9 +212,10 @@ class MousePosition extends Control {
 
   /**
    * Remove the control from its current map and attach it to the new map.
+   * Pass `null` to just remove the control from the current map.
    * Subclasses may set up event handlers to get notified about changes to
    * the map here.
-   * @param {import("../PluggableMap.js").default} map Map.
+   * @param {import("../PluggableMap.js").default|null} map Map.
    * @api
    */
   setMap(map) {

src/ol/control/OverviewMap.js

@@ -267,9 +267,10 @@ class OverviewMap extends Control {
 
   /**
    * Remove the control from its current map and attach it to the new map.
+   * Pass `null` to just remove the control from the current map.
    * Subclasses may set up event handlers to get notified about changes to
    * the map here.
-   * @param {import("../PluggableMap.js").default} map Map.
+   * @param {import("../PluggableMap.js").default|null} map Map.
    * @api
    */
   setMap(map) {

src/ol/control/ScaleLine.js

@@ -484,12 +484,12 @@ class ScaleLine extends Control {
     const resolution = getPointResolution(
       this.viewState_.projection,
       this.viewState_.resolution,
-      this.viewState_.center
+      this.viewState_.center,
+      ProjUnits.METERS
     );
     const dpi = this.dpi_ || DEFAULT_DPI;
-    const mpu = this.viewState_.projection.getMetersPerUnit();
     const inchesPerMeter = 1000 / 25.4;
-    return parseFloat(resolution.toString()) * mpu * inchesPerMeter * dpi;
+    return parseFloat(resolution.toString()) * inchesPerMeter * dpi;
   }
 
   /**

src/ol/control/ZoomSlider.js

@@ -161,9 +161,10 @@ class ZoomSlider extends Control {
 
   /**
    * Remove the control from its current map and attach it to the new map.
+   * Pass `null` to just remove the control from the current map.
    * Subclasses may set up event handlers to get notified about changes to
    * the map here.
-   * @param {import("../PluggableMap.js").default} map Map.
+   * @param {import("../PluggableMap.js").default|null} map Map.
    * @api
    */
   setMap(map) {

src/ol/control/ZoomToExtent.js

@@ -38,7 +38,7 @@ class ZoomToExtent extends Control {
     });
 
     /**
-     * @type {?import("../extent.js").Extent}
+     * @type {?import("../extent.js").Extent|null}
      * @protected
      */
     this.extent = options.extent ? options.extent : null;

src/ol/css.js

@@ -91,7 +91,7 @@ const fontRegExMatchIndex = [
  * Get the list of font families from a font spec.  Note that this doesn't work
  * for font families that have commas in them.
  * @param {string} fontSpec The CSS font property.
- * @return {FontParameters} The font parameters (or null if the input spec is invalid).
+ * @return {FontParameters|null} The font parameters (or null if the input spec is invalid).
  */
 export const getFontParameters = function (fontSpec) {
   const match = fontSpec.match(fontRegEx);

src/ol/dom.js

@@ -83,7 +83,7 @@ export function replaceNode(newNode, oldNode) {
 
 /**
  * @param {Node} node The node to remove.
- * @return {Node} The node that was removed or null.
+ * @return {Node|null} The node that was removed or null.
  */
 export function removeNode(node) {
   return node && node.parentNode ? node.parentNode.removeChild(node) : null;

src/ol/events.js

@@ -4,7 +4,7 @@
 import {clear} from './obj.js';
 
 /**
- * Key to use with {@link module:ol/Observable~Observable#unByKey}.
+ * Key to use with {@link module:ol/Observable.unByKey}.
  * @typedef {Object} EventsKey
  * @property {ListenerFunction} listener Listener.
  * @property {import("./events/Target.js").EventTargetLike} target Target.

src/ol/events/Target.js

@@ -83,15 +83,17 @@ class Target extends Disposable {
    * @api
    */
   dispatchEvent(event) {
-    /** @type {import("./Event.js").default|Event} */
-    const evt = typeof event === 'string' ? new Event(event) : event;
-    const type = evt.type;
+    const isString = typeof event === 'string';
+    const type = isString ? event : event.type;
+    const listeners = this.listeners_ && this.listeners_[type];
+    if (!listeners) {
+      return;
+    }
+
+    const evt = isString ? new Event(event) : /** @type {Event} */ (event);
     if (!evt.target) {
       evt.target = this.eventTarget_ || this;
     }
-    const listeners = this.listeners_ && this.listeners_[type];
-    let propagate;
-    if (listeners) {
     const dispatching = this.dispatching_ || (this.dispatching_ = {});
     const pendingRemovals =
       this.pendingRemovals_ || (this.pendingRemovals_ = {});
@@ -100,6 +102,7 @@ class Target extends Disposable {
       pendingRemovals[type] = 0;
     }
     ++dispatching[type];
+    let propagate;
     for (let i = 0, ii = listeners.length; i < ii; ++i) {
       if ('handleEvent' in listeners[i]) {
         propagate = /** @type {import("../events.js").ListenerObject} */ (
@@ -115,8 +118,7 @@ class Target extends Disposable {
         break;
       }
     }
-      --dispatching[type];
-      if (dispatching[type] === 0) {
+    if (--dispatching[type] === 0) {
       let pr = pendingRemovals[type];
       delete pendingRemovals[type];
       while (pr--) {
@@ -126,7 +128,6 @@ class Target extends Disposable {
     }
     return propagate;
   }
-  }
 
   /**
    * Clean up.

src/ol/events/condition.js

@@ -7,7 +7,7 @@ import {MAC, WEBKIT} from '../has.js';
 import {assert} from '../asserts.js';
 
 /**
- * A function that takes an {@link module:ol/MapBrowserEvent} and returns a
+ * A function that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
  * `{boolean}`. If the condition is met, true should be returned.
  *
  * @typedef {function(this: ?, import("../MapBrowserEvent.js").default): boolean} Condition

src/ol/featureloader.js

@@ -12,16 +12,16 @@ import {VOID} from './functions.js';
 let withCredentials = false;
 
 /**
- * {@link module:ol/source/Vector} sources use a function of this type to
+ * {@link module:ol/source/Vector~VectorSource} sources use a function of this type to
  * load features.
  *
  * This function takes up to 5 arguments. These are an {@link module:ol/extent~Extent} representing
  * the area to be loaded, a `{number}` representing the resolution (map units per pixel), an
- * {@link module:ol/proj/Projection} for the projection, an optional success callback that should get
+ * {@link module:ol/proj/Projection~Projection} for the projection, an optional success callback that should get
  * the loaded features passed as an argument and an optional failure callback with no arguments. If
  * the callbacks are not used, the corresponding vector source will not fire `'featuresloadend'` and
  * `'featuresloaderror'` events. `this` within the function is bound to the
- * {@link module:ol/source/Vector} it's called from.
+ * {@link module:ol/source/Vector~VectorSource} it's called from.
  *
  * The function is responsible for loading the features and adding them to the
  * source.
@@ -35,12 +35,12 @@ let withCredentials = false;
  */
 
 /**
- * {@link module:ol/source/Vector} sources use a function of this type to
+ * {@link module:ol/source/Vector~VectorSource} sources use a function of this type to
  * get the url to load features from.
  *
  * This function takes an {@link module:ol/extent~Extent} representing the area
  * to be loaded, a `{number}` representing the resolution (map units per pixel)
- * and an {@link module:ol/proj/Projection} for the projection  as
+ * and an {@link module:ol/proj/Projection~Projection} for the projection  as
  * arguments and returns a `{string}` representing the URL.
  * @typedef {function(import("./extent.js").Extent, number, import("./proj/Projection.js").default): string} FeatureUrlFunction
  * @api

src/ol/format/GML2.js

@@ -393,7 +393,7 @@ class GML2 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {import("../geom/LineString.js").default} line LineString geometry.
    * @param {Array<*>} objectStack Node stack.
    * @private
@@ -455,7 +455,7 @@ class GML2 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {import("../geom/Polygon.js").default} polygon Polygon geometry.
    * @param {Array<*>} objectStack Node stack.
    * @private
@@ -467,7 +467,7 @@ class GML2 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {import("../geom/LinearRing.js").default} ring LinearRing geometry.
    * @param {Array<*>} objectStack Node stack.
    */
@@ -546,7 +546,7 @@ class GML2 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {import("../geom/Point.js").default} point Point geometry.
    * @param {Array<*>} objectStack Node stack.
    */

src/ol/format/GML3.js

@@ -720,7 +720,7 @@ class GML3 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {import("../geom/LinearRing.js").default} ring LinearRing geometry.
    * @param {Array<*>} objectStack Node stack.
    */
@@ -744,7 +744,7 @@ class GML3 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {import("../geom/Point.js").default} point Point geometry.
    * @param {Array<*>} objectStack Node stack.
    */
@@ -768,7 +768,7 @@ class GML3 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {Polygon} polygon Polygon geometry.
    * @param {Array<*>} objectStack Node stack.
    * @private
@@ -780,7 +780,7 @@ class GML3 extends GMLBase {
   }
 
   /**
-   * @param {Node} node Node.
+   * @param {Element} node Node.
    * @param {LineString} line LineString geometry.
    * @param {Array<*>} objectStack Node stack.
    * @private