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

changelog/upgrade-notes.md

@@ -1,5 +1,19 @@
 ## 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.

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 = {};
-
-    // 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);
+    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 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,15 +115,35 @@ var version = obj.packageInfo.version;
         </nav>
       </header>
       <div id="wrap" class="row">
-          <?js= this.navigationHtml ?>
-          <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">
-                <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
-              </div>
-              <?js= content ?>
+        <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">
+              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+            </div>
+            <?js= content ?>
+        </div>
       </div>
       <script>prettyPrint();</script>
       <script src="scripts/linenumber.js"></script>

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

@@ -16,12 +16,12 @@ function getItemCssClass(type) {
 
 const printListItem = (member) => {
     const shortName = toShortName(member.name); ?>
-                    <li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
+            <li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
 };
 const printListItemWithStability = (member) => {
     const shortName = toShortName(member.name);
     const cls = member.stability && member.stability !== 'stable' ? ' class="unstable"' : ''; ?>
-                    <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
+            <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
 };
 const printFiresListItem = (eventName) => {
     const ancestor = self.find({longname: eventName})[0] ||
@@ -32,43 +32,28 @@ const printFiresListItem = (eventName) => {
     } else {
         const cls = ancestor.stability && ancestor.stability !== 'stable' ? ' class="unstable"' : '';
         const shortName = toShortName(ancestor.name); ?>
-                    <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
+            <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
     }
 };
 
 function listContent(item, title, listItemPrinter) {
     const type = title.toLowerCase();
     if (item[type] && item[type].length) { ?>
-            <div class="member-list" data-type="<?js= type ?>">
-                <span class="subtitle"><?js= title ?></span>
-                <ul><?js
-        item[type].forEach(function (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() ?>">
-                <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);
-            }); ?>
+    <div class="member-list" data-type="<?js= type ?>">
+        <span class="subtitle"><?js= title ?></span>
+        <ul><?js
+        item[type].forEach((v) => listItemPrinter(v)); ?>
         </ul>
-    </div>
-</div>
+    </div><?js
+    }
+} ?>
+<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);
+?>

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,65 +17,74 @@ const source = new GeoTIFF({
   ],
 });
 
+const layer = new TileLayer({
+  style: {
+    color: [
+      'interpolate',
+      ['linear'],
+      // calculate NDVI, bands come from the sources below
+      ['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
+      // color ramp for NDVI values, ranging from -1 to 1
+      -0.2,
+      [191, 191, 191],
+      -0.1,
+      [219, 219, 219],
+      0,
+      [255, 255, 224],
+      0.025,
+      [255, 250, 204],
+      0.05,
+      [237, 232, 181],
+      0.075,
+      [222, 217, 156],
+      0.1,
+      [204, 199, 130],
+      0.125,
+      [189, 184, 107],
+      0.15,
+      [176, 194, 97],
+      0.175,
+      [163, 204, 89],
+      0.2,
+      [145, 191, 82],
+      0.25,
+      [128, 179, 71],
+      0.3,
+      [112, 163, 64],
+      0.35,
+      [97, 150, 54],
+      0.4,
+      [79, 138, 46],
+      0.45,
+      [64, 125, 36],
+      0.5,
+      [48, 110, 28],
+      0.55,
+      [33, 97, 18],
+      0.6,
+      [15, 84, 10],
+      0.65,
+      [0, 69, 0],
+    ],
+  },
+  source: source,
+});
+
 const map = new Map({
   target: 'map',
-  layers: [
-    new TileLayer({
-      style: {
-        color: [
-          'interpolate',
-          ['linear'],
-          // calculate NDVI, bands come from the sources below
-          [
-            '/',
-            ['-', ['band', 2], ['band', 1]],
-            ['+', ['band', 2], ['band', 1]],
-          ],
-          // color ramp for NDVI values, ranging from -1 to 1
-          -0.2,
-          [191, 191, 191],
-          -0.1,
-          [219, 219, 219],
-          0,
-          [255, 255, 224],
-          0.025,
-          [255, 250, 204],
-          0.05,
-          [237, 232, 181],
-          0.075,
-          [222, 217, 156],
-          0.1,
-          [204, 199, 130],
-          0.125,
-          [189, 184, 107],
-          0.15,
-          [176, 194, 97],
-          0.175,
-          [163, 204, 89],
-          0.2,
-          [145, 191, 82],
-          0.25,
-          [128, 179, 71],
-          0.3,
-          [112, 163, 64],
-          0.35,
-          [97, 150, 54],
-          0.4,
-          [79, 138, 46],
-          0.45,
-          [64, 125, 36],
-          0.5,
-          [48, 110, 28],
-          0.55,
-          [33, 97, 18],
-          0.6,
-          [15, 84, 10],
-          0.65,
-          [0, 69, 0],
-        ],
-      },
-      source: source,
-    }),
-  ],
+  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({
-          sources: [
-            {
-              url: url,
-            },
-          ],
-        }),
+const pyramid = new WebGLTileLayer({
+  sources: sourcesFromTileGrid(
+    tileGrid,
+    ([z, x, y]) =>
+      new GeoTIFF({
+        sources: [
+          {
+            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/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/export-map.js

@@ -98,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/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/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/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/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/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/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/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/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-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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.12.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.8.2",
+    "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.9",
-    "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,9 +172,13 @@ class BaseObject extends Observable {
   notify(key, oldValue) {
     let eventType;
     eventType = `change:${key}`;
-    this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+    if (this.hasListener(eventType)) {
+      this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+    }
     eventType = ObjectEventType.PROPERTYCHANGE;
-    this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+    if (this.hasListener(eventType)) {
+      this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+    }
   }
 
   /**

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,6 +685,9 @@ 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`.
@@ -697,7 +701,7 @@ class PluggableMap extends BaseObject {
    * @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.
@@ -706,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_) {
@@ -942,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();
@@ -1560,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,52 +18,54 @@ 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) {
-        const viewWidth = onlyCenter ? 0 : size[0] * resolution;
-        const viewHeight = onlyCenter ? 0 : size[1] * resolution;
-        const shiftX = opt_centerShift ? opt_centerShift[0] : 0;
-        const shiftY = opt_centerShift ? opt_centerShift[1] : 0;
-        let minX = extent[0] + viewWidth / 2 + shiftX;
-        let maxX = extent[2] - viewWidth / 2 + shiftX;
-        let minY = extent[1] + viewHeight / 2 + shiftY;
-        let maxY = extent[3] - viewHeight / 2 + shiftY;
-
-        // note: when zooming out of bounds, min and max values for x and y may
-        // end up inverted (min > max); this has to be accounted for
-        if (minX > maxX) {
-          minX = (maxX + minX) / 2;
-          maxX = minX;
-        }
-        if (minY > maxY) {
-          minY = (maxY + minY) / 2;
-          maxY = minY;
-        }
-
-        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) {
-          x +=
-            -ratio * Math.log(1 + Math.max(0, minX - center[0]) / ratio) +
-            ratio * Math.log(1 + Math.max(0, center[0] - maxX) / ratio);
-          y +=
-            -ratio * Math.log(1 + Math.max(0, minY - center[1]) / ratio) +
-            ratio * Math.log(1 + Math.max(0, center[1] - maxY) / ratio);
-        }
-
-        return [x, y];
-      } else {
+      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;
+      const shiftY = opt_centerShift ? opt_centerShift[1] : 0;
+      let minX = extent[0] + viewWidth / 2 + shiftX;
+      let maxX = extent[2] - viewWidth / 2 + shiftX;
+      let minY = extent[1] + viewHeight / 2 + shiftY;
+      let maxY = extent[3] - viewHeight / 2 + shiftY;
+
+      // note: when zooming out of bounds, min and max values for x and y may
+      // end up inverted (min > max); this has to be accounted for
+      if (minX > maxX) {
+        minX = (maxX + minX) / 2;
+        maxX = minX;
+      }
+      if (minY > maxY) {
+        minY = (maxY + minY) / 2;
+        maxY = minY;
+      }
+
+      let x = clamp(center[0], minX, maxX);
+      let y = clamp(center[1], minY, maxY);
+
+      // during an interaction, allow some overscroll
+      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);
+        y +=
+          -ratio * Math.log(1 + Math.max(0, minY - center[1]) / ratio) +
+          ratio * Math.log(1 + Math.max(0, center[1] - maxY) / ratio);
+      }
+
+      return [x, y];
     }
   );
 }

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/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,49 +83,50 @@ 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_ = {});
-      if (!(type in dispatching)) {
-        dispatching[type] = 0;
-        pendingRemovals[type] = 0;
-      }
-      ++dispatching[type];
-      for (let i = 0, ii = listeners.length; i < ii; ++i) {
-        if ('handleEvent' in listeners[i]) {
-          propagate = /** @type {import("../events.js").ListenerObject} */ (
-            listeners[i]
-          ).handleEvent(evt);
-        } else {
-          propagate = /** @type {import("../events.js").ListenerFunction} */ (
-            listeners[i]
-          ).call(this, evt);
-        }
-        if (propagate === false || evt.propagationStopped) {
-          propagate = false;
-          break;
-        }
-      }
-      --dispatching[type];
-      if (dispatching[type] === 0) {
-        let pr = pendingRemovals[type];
-        delete pendingRemovals[type];
-        while (pr--) {
-          this.removeEventListener(type, VOID);
-        }
-        delete dispatching[type];
-      }
-      return propagate;
+    const dispatching = this.dispatching_ || (this.dispatching_ = {});
+    const pendingRemovals =
+      this.pendingRemovals_ || (this.pendingRemovals_ = {});
+    if (!(type in dispatching)) {
+      dispatching[type] = 0;
+      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} */ (
+          listeners[i]
+        ).handleEvent(evt);
+      } else {
+        propagate = /** @type {import("../events.js").ListenerFunction} */ (
+          listeners[i]
+        ).call(this, evt);
+      }
+      if (propagate === false || evt.propagationStopped) {
+        propagate = false;
+        break;
+      }
+    }
+    if (--dispatching[type] === 0) {
+      let pr = pendingRemovals[type];
+      delete pendingRemovals[type];
+      while (pr--) {
+        this.removeEventListener(type, VOID);
+      }
+      delete dispatching[type];
+    }
+    return propagate;
   }
 
   /**

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

src/ol/format/GMLBase.js

@@ -166,7 +166,7 @@ class GMLBase extends XMLFeature {
       if (!featureType && node.childNodes) {
         (featureType = []), (featureNS = {});
         for (let i = 0, ii = node.childNodes.length; i < ii; ++i) {
-          const child = node.childNodes[i];
+          const child = /** @type {Element} */ (node.childNodes[i]);
           if (child.nodeType === 1) {
             const ft = child.nodeName.split(':').pop();
             if (featureType.indexOf(ft) === -1) {

src/ol/format/GPX.js

@@ -869,7 +869,7 @@ function writeRte(node, feature, objectStack) {
 }
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Feature} feature Feature.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -902,7 +902,7 @@ function writeTrk(node, feature, objectStack) {
 }
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {LineString} lineString LineString.
  * @param {Array<*>} objectStack Object stack.
  */

src/ol/format/GeoJSON.js

@@ -66,6 +66,9 @@ class GeoJSON extends JSONFeature {
     );
 
     if (options.featureProjection) {
+      /**
+       * @type {import("../proj/Projection.js").default}
+       */
       this.defaultFeatureProjection = getProjection(options.featureProjection);
     }
 

src/ol/format/KML.js

@@ -195,13 +195,13 @@ const KML_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 let DEFAULT_COLOR;
 
 /**
- * @type {Fill}
+ * @type {Fill|null}
  */
 let DEFAULT_FILL_STYLE = null;
 
 /**
  * Get the default fill style (or null if not yet set).
- * @return {Fill} The default fill style.
+ * @return {Fill|null} The default fill style.
  */
 export function getDefaultFillStyle() {
   return DEFAULT_FILL_STYLE;
@@ -233,13 +233,13 @@ let DEFAULT_IMAGE_STYLE_SIZE;
 let DEFAULT_IMAGE_STYLE_SRC;
 
 /**
- * @type {import("../style/Image.js").default}
+ * @type {import("../style/Image.js").default|null}
  */
 let DEFAULT_IMAGE_STYLE = null;
 
 /**
  * Get the default image style (or null if not yet set).
- * @return {import("../style/Image.js").default} The default image style.
+ * @return {import("../style/Image.js").default|null} The default image style.
  */
 export function getDefaultImageStyle() {
   return DEFAULT_IMAGE_STYLE;
@@ -251,13 +251,13 @@ export function getDefaultImageStyle() {
 let DEFAULT_NO_IMAGE_STYLE;
 
 /**
- * @type {Stroke}
+ * @type {Stroke|null}
  */
 let DEFAULT_STROKE_STYLE = null;
 
 /**
  * Get the default stroke style (or null if not yet set).
- * @return {Stroke} The default stroke style.
+ * @return {Stroke|null} The default stroke style.
  */
 export function getDefaultStrokeStyle() {
   return DEFAULT_STROKE_STYLE;
@@ -269,39 +269,39 @@ export function getDefaultStrokeStyle() {
 let DEFAULT_TEXT_STROKE_STYLE;
 
 /**
- * @type {Text}
+ * @type {Text|null}
  */
 let DEFAULT_TEXT_STYLE = null;
 
 /**
  * Get the default text style (or null if not yet set).
- * @return {Text} The default text style.
+ * @return {Text|null} The default text style.
  */
 export function getDefaultTextStyle() {
   return DEFAULT_TEXT_STYLE;
 }
 
 /**
- * @type {Style}
+ * @type {Style|null}
  */
 let DEFAULT_STYLE = null;
 
 /**
  * Get the default style (or null if not yet set).
- * @return {Style} The default style.
+ * @return {Style|null} The default style.
  */
 export function getDefaultStyle() {
   return DEFAULT_STYLE;
 }
 
 /**
- * @type {Array<Style>}
+ * @type {Array<Style>|null}
  */
 let DEFAULT_STYLE_ARRAY = null;
 
 /**
  * Get the default style array (or null if not yet set).
- * @return {Array<Style>} The default style.
+ * @return {Array<Style>|null} The default style.
  */
 export function getDefaultStyleArray() {
   return DEFAULT_STYLE_ARRAY;
@@ -1007,8 +1007,7 @@ function createFeatureStyleFunction(
       if (drawName) {
         const geometry = feature.getGeometry();
         if (geometry) {
-          const type = geometry.getType();
-          if (type === GeometryType.GEOMETRY_COLLECTION) {
+          if (geometry instanceof GeometryCollection) {
             multiGeometryPoints = geometry
               .getGeometriesArrayRecursive()
               .filter(function (geometry) {
@@ -1020,6 +1019,7 @@ function createFeatureStyleFunction(
               });
             drawName = multiGeometryPoints.length > 0;
           } else {
+            const type = geometry.getType();
             drawName =
               type === GeometryType.POINT || type === GeometryType.MULTI_POINT;
           }
@@ -2473,7 +2473,7 @@ const DOCUMENT_NODE_FACTORY = function (value, objectStack, opt_nodeName) {
 };
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Array<Feature>} features Features.
  * @param {Array<*>} objectStack Object stack.
  * @this {KML}
@@ -2499,7 +2499,7 @@ function writeDocument(node, features, objectStack) {
 const DATA_NODE_FACTORY = makeSimpleNodeFactory('Data');
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {{names: Array<string>, values: (Array<*>)}} namesAndValues Names and values.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -2561,7 +2561,7 @@ const GX_NODE_FACTORY = function (value, objectStack, opt_nodeName) {
 };
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Object} icon Icon object.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -2617,7 +2617,7 @@ const ICON_STYLE_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("../style/Icon.js").default} style Icon style.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -2712,7 +2712,7 @@ const LABEL_STYLE_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Text} style style.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -2758,7 +2758,7 @@ const LINE_STYLE_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Stroke} style style.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -2856,7 +2856,7 @@ const MULTI_GEOMETRY_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("../geom/Geometry.js").default} geometry Geometry.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -2927,7 +2927,7 @@ const BOUNDARY_IS_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("../geom/LinearRing.js").default} linearRing Linear ring.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -3180,7 +3180,7 @@ const PRIMITIVE_GEOMETRY_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("../geom/SimpleGeometry.js").default} geometry Geometry.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -3243,7 +3243,7 @@ const INNER_BOUNDARY_NODE_FACTORY = makeSimpleNodeFactory('innerBoundaryIs');
 const OUTER_BOUNDARY_NODE_FACTORY = makeSimpleNodeFactory('outerBoundaryIs');
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Polygon} polygon Polygon.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -3281,7 +3281,7 @@ const POLY_STYLE_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Style} style Style.
  * @param {Array<*>} objectStack Object stack.
  */
@@ -3341,7 +3341,7 @@ const STYLE_SERIALIZERS = makeStructureNS(NAMESPACE_URIS, {
 });
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Object<string, Array<Style>>} styles Styles.
  * @param {Array<*>} objectStack Object stack.
  */

src/ol/format/MVT.js

@@ -19,7 +19,7 @@ import RenderFeature from '../render/Feature.js';
 import Units from '../proj/Units.js';
 import {assert} from '../asserts.js';
 import {get} from '../proj.js';
-import {linearRingIsClockwise} from '../geom/flat/orient.js';
+import {inflateEnds} from '../geom/flat/orient.js';
 
 /**
  * @typedef {Object} Options
@@ -80,7 +80,7 @@ class MVT extends FeatureFormat {
 
     /**
      * @private
-     * @type {Array<string>}
+     * @type {Array<string>|null}
      */
     this.layers_ = options.layers ? options.layers : null;
 
@@ -185,8 +185,8 @@ class MVT extends FeatureFormat {
 
     values[this.layerName_] = rawFeature.layer.name;
 
-    const flatCoordinates = [];
-    const ends = [];
+    const flatCoordinates = /** @type {Array<number>} */ ([]);
+    const ends = /** @type {Array<number>} */ ([]);
     this.readRawGeometry_(pbf, rawFeature, flatCoordinates, ends);
 
     const geometryType = getGeometryType(type, ends.length);
@@ -203,28 +203,11 @@ class MVT extends FeatureFormat {
     } else {
       let geom;
       if (geometryType == GeometryType.POLYGON) {
-        const endss = [];
-        let offset = 0;
-        let prevEndIndex = 0;
-        for (let i = 0, ii = ends.length; i < ii; ++i) {
-          const end = ends[i];
-          // classifies an array of rings into polygons with outer rings and holes
-          if (!linearRingIsClockwise(flatCoordinates, offset, end, 2)) {
-            endss.push(ends.slice(prevEndIndex, i + 1));
-          } else {
-            if (endss.length === 0) {
-              continue;
-            }
-            endss[endss.length - 1].push(ends[prevEndIndex]);
-          }
-          prevEndIndex = i + 1;
-          offset = end;
-        }
-        if (endss.length > 1) {
-          geom = new MultiPolygon(flatCoordinates, GeometryLayout.XY, endss);
-        } else {
-          geom = new Polygon(flatCoordinates, GeometryLayout.XY, ends);
-        }
+        const endss = inflateEnds(flatCoordinates, ends);
+        geom =
+          endss.length > 1
+            ? new MultiPolygon(flatCoordinates, GeometryLayout.XY, endss)
+            : new Polygon(flatCoordinates, GeometryLayout.XY, ends);
       } else {
         geom =
           geometryType === GeometryType.POINT
@@ -248,7 +231,9 @@ class MVT extends FeatureFormat {
       }
       const geometry = transformGeometryWithOptions(geom, false, options);
       feature.setGeometry(geometry);
-      feature.setId(id);
+      if (id !== undefined) {
+        feature.setId(id);
+      }
       feature.setProperties(values, true);
     }
 

src/ol/format/OSMXML.js

@@ -96,7 +96,9 @@ class OSMXML extends XMLFeature {
         }
         transformGeometryWithOptions(geometry, false, options);
         const feature = new Feature(geometry);
-        feature.setId(values.id);
+        if (values.id !== undefined) {
+          feature.setId(values.id);
+        }
         feature.setProperties(values.tags, true);
         state.features.push(feature);
       }
@@ -146,7 +148,9 @@ function readNode(node, objectStack) {
     const geometry = new Point(coordinates);
     transformGeometryWithOptions(geometry, false, options);
     const feature = new Feature(geometry);
-    feature.setId(id);
+    if (id !== undefined) {
+      feature.setId(id);
+    }
     feature.setProperties(values.tags, true);
     state.features.push(feature);
   }

src/ol/format/Polyline.js

@@ -110,7 +110,7 @@ class Polyline extends TextFeature {
   }
 
   /**
-   * @param {import("../Feature.js").default} feature Features.
+   * @param {import("../Feature.js").default<LineString>} feature Features.
    * @param {import("./Feature.js").WriteOptions} [opt_options] Write options.
    * @protected
    * @return {string} Text.
@@ -126,7 +126,7 @@ class Polyline extends TextFeature {
   }
 
   /**
-   * @param {Array<import("../Feature.js").default>} features Features.
+   * @param {Array<import("../Feature.js").default<LineString>>} features Features.
    * @param {import("./Feature.js").WriteOptions} [opt_options] Write options.
    * @protected
    * @return {string} Text.

src/ol/format/WFS.js

@@ -148,9 +148,9 @@ const TRANSACTION_SERIALIZERS = {
  * @property {import("../extent.js").Extent} [bbox] Extent to use for the BBOX filter. The `geometryName`
  * option must be set.
  * @property {import("./filter/Filter.js").default} [filter] Filter condition. See
- * {@link module:ol/format/Filter} for more information.
+ * {@link module:ol/format/filter} for more information.
  * @property {string} [resultType] Indicates what response should be returned,
- * E.g. `hits` only includes the `numberOfFeatures` attribute in the response and no features.
+ * e.g. `hits` only includes the `numberOfFeatures` attribute in the response and no features.
  */
 
 /**
@@ -1054,7 +1054,7 @@ function writeQuery(node, featureType, objectStack) {
 }
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("./filter/Filter.js").default} filter Filter.
  * @param {Array<*>} objectStack Node stack.
  */
@@ -1158,7 +1158,7 @@ function writeDuringFilter(node, filter, objectStack) {
 }
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("./filter/LogicalNary.js").default} filter Filter.
  * @param {Array<*>} objectStack Node stack.
  */
@@ -1182,7 +1182,7 @@ function writeLogicalFilter(node, filter, objectStack) {
 }
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {import("./filter/Not.js").default} filter Filter.
  * @param {Array<*>} objectStack Node stack.
  */
@@ -1341,7 +1341,7 @@ export function writeFilter(filter, opt_version) {
 }
 
 /**
- * @param {Node} node Node.
+ * @param {Element} node Node.
  * @param {Array<string>} featureTypes Feature types.
  * @param {Array<*>} objectStack Node stack.
  */

src/ol/format/WKB.js

@@ -62,7 +62,7 @@ class WkbReader {
     this.isLittleEndian_ = false;
     this.hasZ_ = false;
     this.hasM_ = false;
-    /** @type {number} */
+    /** @type {number|null} */
     this.srid_ = null;
 
     this.layout_ = GeometryLayout.XY;
@@ -356,7 +356,7 @@ class WkbReader {
   }
 
   /**
-   * @return {number} SRID in the EWKB. `null` if not defined.
+   * @return {number|null} SRID in the EWKB. `null` if not defined.
    */
   getSrid() {
     return this.srid_;

src/ol/format/WMSGetFeatureInfo.js

@@ -54,20 +54,20 @@ class WMSGetFeatureInfo extends XMLFeature {
 
     /**
      * @private
-     * @type {Array<string>}
+     * @type {Array<string>|null}
      */
     this.layers_ = options.layers ? options.layers : null;
   }
 
   /**
-   * @return {Array<string>} layers
+   * @return {Array<string>|null} layers
    */
   getLayers() {
     return this.layers_;
   }
 
   /**
-   * @param {Array<string>} layers Layers to parse.
+   * @param {Array<string>|null} layers Layers to parse.
    */
   setLayers(layers) {
     this.layers_ = layers;

src/ol/geom/GeometryCollection.js

@@ -14,7 +14,7 @@ import {listen, unlistenByKey} from '../events.js';
 
 /**
  * @classdesc
- * An array of {@link module:ol/geom/Geometry} objects.
+ * An array of {@link module:ol/geom/Geometry~Geometry} objects.
  *
  * @api
  */

src/ol/geom/LineString.js

@@ -166,7 +166,7 @@ class LineString extends SimpleGeometry {
    *
    * @param {number} m M.
    * @param {boolean} [opt_extrapolate] Extrapolate. Default is `false`.
-   * @return {import("../coordinate.js").Coordinate} Coordinate.
+   * @return {import("../coordinate.js").Coordinate|null} Coordinate.
    * @api
    */
   getCoordinateAtM(m, opt_extrapolate) {

src/ol/geom/MultiLineString.js

@@ -169,7 +169,7 @@ class MultiLineString extends SimpleGeometry {
    * @param {number} m M.
    * @param {boolean} [opt_extrapolate] Extrapolate. Default is `false`.
    * @param {boolean} [opt_interpolate] Interpolate. Default is `false`.
-   * @return {import("../coordinate.js").Coordinate} Coordinate.
+   * @return {import("../coordinate.js").Coordinate|null} Coordinate.
    * @api
    */
   getCoordinateAtM(m, opt_extrapolate, opt_interpolate) {

src/ol/geom/MultiPolygon.js

@@ -301,7 +301,7 @@ class MultiPolygon extends SimpleGeometry {
   }
 
   /**
-   * Return the interior points as {@link module:ol/geom/MultiPoint multipoint}.
+   * Return the interior points as {@link module:ol/geom/MultiPoint~MultiPoint multipoint}.
    * @return {MultiPoint} Interior points as XYM coordinates, where M is
    * the length of the horizontal intersection that the point belongs to.
    * @api

src/ol/geom/Polygon.js

@@ -275,7 +275,7 @@ class Polygon extends SimpleGeometry {
    * at index `1` and beyond.
    *
    * @param {number} index Index.
-   * @return {LinearRing} Linear ring.
+   * @return {LinearRing|null} Linear ring.
    * @api
    */
   getLinearRing(index) {

src/ol/geom/SimpleGeometry.js

@@ -55,7 +55,7 @@ class SimpleGeometry extends Geometry {
 
   /**
    * @abstract
-   * @return {Array<*>} Coordinates.
+   * @return {Array<*> | null} Coordinates.
    */
   getCoordinates() {
     return abstract();

src/ol/geom/flat/interpolate.js

@@ -74,7 +74,7 @@ export function interpolatePoint(
  * @param {number} stride Stride.
  * @param {number} m M.
  * @param {boolean} extrapolate Extrapolate.
- * @return {import("../../coordinate.js").Coordinate} Coordinate.
+ * @return {import("../../coordinate.js").Coordinate|null} Coordinate.
  */
 export function lineStringCoordinateAtM(
   flatCoordinates,
@@ -147,7 +147,7 @@ export function lineStringCoordinateAtM(
  * @param {number} m M.
  * @param {boolean} extrapolate Extrapolate.
  * @param {boolean} interpolate Interpolate.
- * @return {import("../../coordinate.js").Coordinate} Coordinate.
+ * @return {import("../../coordinate.js").Coordinate|null} Coordinate.
  */
 export function lineStringsCoordinateAtM(
   flatCoordinates,

src/ol/geom/flat/orient.js

@@ -178,3 +178,31 @@ export function orientLinearRingsArray(
   }
   return offset;
 }
+
+/**
+ * Return a two-dimensional endss
+ * @param {Array<number>} flatCoordinates Flat coordinates
+ * @param {Array<number>} ends Linear ring end indexes
+ * @return {Array<Array<number>>} Two dimensional endss array that can
+ * be used to contruct a MultiPolygon
+ */
+export function inflateEnds(flatCoordinates, ends) {
+  const endss = [];
+  let offset = 0;
+  let prevEndIndex = 0;
+  for (let i = 0, ii = ends.length; i < ii; ++i) {
+    const end = ends[i];
+    // classifies an array of rings into polygons with outer rings and holes
+    if (!linearRingIsClockwise(flatCoordinates, offset, end, 2)) {
+      endss.push(ends.slice(prevEndIndex, i + 1));
+    } else {
+      if (endss.length === 0) {
+        continue;
+      }
+      endss[endss.length - 1].push(ends[prevEndIndex]);
+    }
+    prevEndIndex = i + 1;
+    offset = end;
+  }
+  return endss;
+}

src/ol/geom/flat/textpath.js

@@ -17,7 +17,7 @@ import {rotate} from './transform.js';
  * @param {string} font The font.
  * @param {Object<string, number>} cache A cache of measured widths.
  * @param {number} rotation Rotation to apply to the flatCoordinates to determine whether text needs to be reversed.
- * @return {Array<Array<*>>} The result array (or null if `maxAngle` was
+ * @return {Array<Array<*>>|null} The result array (or null if `maxAngle` was
  * exceeded). Entries of the array are x, y, anchorX, angle, chunk.
  */
 export function drawTextOnPath(

src/ol/interaction.js

@@ -60,8 +60,8 @@ export {default as Translate} from './interaction/Translate.js';
  * excluded by setting the appropriate option to false in the constructor
  * options, but the order of the interactions is fixed.  If you want to specify
  * a different order for interactions, you will need to create your own
- * {@link module:ol/interaction/Interaction} instances and insert
- * them into a {@link module:ol/Collection} in the order you want
+ * {@link module:ol/interaction/Interaction~Interaction} instances and insert
+ * them into a {@link module:ol/Collection~Collection} in the order you want
  * before creating your {@link module:ol/Map~Map} instance. Changing the order can
  * be of interest if the event propagation needs to be stopped at a point.
  * The default set of interactions, in sequence, is:

src/ol/interaction/DoubleClickZoom.js

@@ -38,7 +38,7 @@ class DoubleClickZoom extends Interaction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} (if it was a
    * doubleclick) and eventually zooms the map.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.

src/ol/interaction/DragAndDrop.js

@@ -168,7 +168,7 @@ class DragAndDrop extends Interaction {
 
     /**
      * @private
-     * @type {HTMLElement}
+     * @type {HTMLElement|null}
      */
     this.target = options.target ? options.target : null;
   }

src/ol/interaction/DragBox.js

@@ -8,7 +8,7 @@ import RenderBox from '../render/Box.js';
 import {mouseActionButton} from '../events/condition.js';
 
 /**
- * A function that takes a {@link module:ol/MapBrowserEvent} and two
+ * A function that takes a {@link module:ol/MapBrowserEvent~MapBrowserEvent} and two
  * {@link module:ol/pixel~Pixel}s and returns a `{boolean}`. If the condition is met,
  * true should be returned.
  * @typedef {function(this: ?, import("../MapBrowserEvent.js").default, import("../pixel.js").Pixel, import("../pixel.js").Pixel):boolean} EndCondition
@@ -110,7 +110,7 @@ export class DragBoxEvent extends Event {
  * it to when the shift or other key is held down. This is used, for example,
  * for zooming to a specific area of the map
  * (see {@link module:ol/interaction/DragZoom~DragZoom} and
- * {@link module:ol/interaction/DragRotateAndZoom}).
+ * {@link module:ol/interaction/DragRotateAndZoom~DragRotateAndZoom}).
  *
  * @fires DragBoxEvent
  * @api

src/ol/interaction/Draw.js

@@ -257,14 +257,14 @@ class Draw extends PointerInteraction {
 
     /**
      * Target source for drawn features.
-     * @type {VectorSource}
+     * @type {VectorSource|null}
      * @private
      */
     this.source_ = options.source ? options.source : null;
 
     /**
      * Target collection for drawn features.
-     * @type {import("../Collection.js").default<Feature>}
+     * @type {import("../Collection.js").default<Feature>|null}
      * @private
      */
     this.features_ = options.features ? options.features : null;
@@ -421,7 +421,7 @@ class Draw extends PointerInteraction {
 
     /**
      * Sketch feature.
-     * @type {Feature}
+     * @type {Feature<import('../geom/SimpleGeometry.js').default>}
      * @private
      */
     this.sketchFeature_ = null;
@@ -529,7 +529,7 @@ class Draw extends PointerInteraction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} and may actually draw or finish the drawing.
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} and may actually draw or finish the drawing.
    * @param {import("../MapBrowserEvent.js").default} event Map browser event.
    * @return {boolean} `false` to stop event propagation.
    * @api
@@ -1022,7 +1022,7 @@ class Draw extends PointerInteraction {
 
   /**
    * Stop drawing without adding the sketch feature to the target layer.
-   * @return {Feature} The sketch feature (or null if none).
+   * @return {Feature<import("../geom/SimpleGeometry.js").default>|null} The sketch feature (or null if none).
    * @private
    */
   abortDrawing_() {
@@ -1165,7 +1165,7 @@ function getDefaultStyleFunction() {
 /**
  * Create a `geometryFunction` for `type: 'Circle'` that will create a regular
  * polygon with a user specified number of sides and start angle instead of a
- * `import("../geom/Circle.js").Circle` geometry.
+ * {@link import("../geom/Circle.js").Circle} geometry.
  * @param {number} [opt_sides] Number of sides of the regular polygon.
  *     Default is 32.
  * @param {number} [opt_angle] Angle of the first point in counter-clockwise

src/ol/interaction/Interaction.js

@@ -66,7 +66,7 @@ class Interaction extends BaseObject {
 
     /**
      * @private
-     * @type {import("../PluggableMap.js").default}
+     * @type {import("../PluggableMap.js").default|null}
      */
     this.map_ = null;
 
@@ -85,7 +85,7 @@ class Interaction extends BaseObject {
 
   /**
    * Get the map associated with this interaction.
-   * @return {import("../PluggableMap.js").default} Map.
+   * @return {import("../PluggableMap.js").default|null} Map.
    * @api
    */
   getMap() {
@@ -93,7 +93,7 @@ class Interaction extends BaseObject {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event}.
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event}.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.
    * @api
@@ -116,7 +116,7 @@ class Interaction extends BaseObject {
    * Remove the interaction from its current map and attach it to the new 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.
    */
   setMap(map) {
     this.map_ = map;

src/ol/interaction/KeyboardPan.js

@@ -76,7 +76,7 @@ class KeyboardPan extends Interaction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} if it was a
    * `KeyEvent`, and decides the direction to pan to (if an arrow key was
    * pressed).
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.

src/ol/interaction/KeyboardZoom.js

@@ -57,7 +57,7 @@ class KeyboardZoom extends Interaction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} if it was a
    * `KeyEvent`, and decides whether to zoom in or out (depending on whether the
    * key pressed was '+' or '-').
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.

src/ol/interaction/Modify.js

@@ -121,7 +121,7 @@ const ModifyEventType = {
  * must be provided with the `features` option.
  * @property {boolean|import("../layer/BaseVector").default} [hitDetection] When configured, point
  * features will be considered for modification based on their visual appearance, instead of being within
- * the `pixelTolerance` from the pointer location. When a {@link module:ol/layer/BaseVector} is
+ * the `pixelTolerance` from the pointer location. When a {@link module:ol/layer/BaseVector~BaseVectorLayer} is
  * provided, only the rendered representation of the features on that layer will be considered.
  * @property {Collection<Feature>} [features]
  * The features the interaction works on.  If a feature collection is not
@@ -142,10 +142,10 @@ export class ModifyEvent extends Event {
    * @param {ModifyEventType} type Type.
    * @param {Collection<import("../Feature").FeatureLike>} features
    * The features modified.
-   * @param {import("../MapBrowserEvent.js").default} MapBrowserEvent
-   * Associated {@link module:ol/MapBrowserEvent}.
+   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent
+   * Associated {@link module:ol/MapBrowserEvent~MapBrowserEvent}.
    */
-  constructor(type, features, MapBrowserEvent) {
+  constructor(type, features, mapBrowserEvent) {
     super(type);
 
     /**
@@ -156,11 +156,11 @@ export class ModifyEvent extends Event {
     this.features = features;
 
     /**
-     * Associated {@link module:ol/MapBrowserEvent}.
+     * Associated {@link module:ol/MapBrowserEvent~MapBrowserEvent}.
      * @type {import("../MapBrowserEvent.js").default}
      * @api
      */
-    this.mapBrowserEvent = MapBrowserEvent;
+    this.mapBrowserEvent = mapBrowserEvent;
   }
 }
 
@@ -253,7 +253,7 @@ class Modify extends PointerInteraction {
 
     /**
      * Editing vertex.
-     * @type {Feature}
+     * @type {Feature<Point>}
      * @private
      */
     this.vertexFeature_ = null;
@@ -834,7 +834,7 @@ class Modify extends PointerInteraction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} and may modify the geometry.
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} and may modify the geometry.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.
    */

src/ol/interaction/MouseWheelZoom.js

@@ -164,7 +164,7 @@ class MouseWheelZoom extends Interaction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a mousewheel-event) and eventually
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} (if it was a mousewheel-event) and eventually
    * zooms the map.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.

src/ol/interaction/Pointer.js

@@ -121,7 +121,7 @@ class PointerInteraction extends Interaction {
   handleDragEvent(mapBrowserEvent) {}
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} and may call into
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} and may call into
    * other functions, if event sequences like e.g. 'drag' or 'down-up' etc. are
    * detected.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.

src/ol/interaction/Select.js

@@ -27,9 +27,9 @@ const SelectEventType = {
 };
 
 /**
- * A function that takes an {@link module:ol/Feature} or
- * {@link module:ol/render/Feature} and an
- * {@link module:ol/layer/Layer} and returns `true` if the feature may be
+ * A function that takes an {@link module:ol/Feature~Feature} or
+ * {@link module:ol/render/Feature~RenderFeature} and an
+ * {@link module:ol/layer/Layer~Layer} and returns `true` if the feature may be
  * selected or `false` otherwise.
  * @typedef {function(import("../Feature.js").FeatureLike, import("../layer/Layer.js").default<import("../source/Source").default>):boolean} FilterFunction
  */
@@ -83,8 +83,8 @@ const SelectEventType = {
  * used by the interaction is returned by
  * {@link module:ol/interaction/Select~Select#getFeatures}.
  * @property {FilterFunction} [filter] A function
- * that takes an {@link module:ol/Feature} and an
- * {@link module:ol/layer/Layer} and returns `true` if the feature may be
+ * that takes an {@link module:ol/Feature~Feature} and an
+ * {@link module:ol/layer/Layer~Layer} and returns `true` if the feature may be
  * selected or `false` otherwise.
  * @property {number} [hitTolerance=0] Hit-detection tolerance. Pixels inside
  * the radius around the given position will be checked for features.
@@ -101,7 +101,7 @@ export class SelectEvent extends Event {
    * @param {Array<import("../Feature.js").default>} selected Selected features.
    * @param {Array<import("../Feature.js").default>} deselected Deselected features.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Associated
-   *     {@link module:ol/MapBrowserEvent}.
+   *     {@link module:ol/MapBrowserEvent~MapBrowserEvent}.
    */
   constructor(type, selected, deselected, mapBrowserEvent) {
     super(type);
@@ -121,7 +121,7 @@ export class SelectEvent extends Event {
     this.deselected = deselected;
 
     /**
-     * Associated {@link module:ol/MapBrowserEvent}.
+     * Associated {@link module:ol/MapBrowserEvent~MapBrowserEvent}.
      * @type {import("../MapBrowserEvent.js").default}
      * @api
      */
@@ -309,7 +309,7 @@ class Select extends Interaction {
   }
 
   /**
-   * Returns the associated {@link module:ol/layer/Vector~Vector vector layer} of
+   * Returns the associated {@link module:ol/layer/Vector~VectorLayer vector layer} of
    * a selected feature.
    * @param {import("../Feature.js").FeatureLike} feature Feature
    * @return {import('../layer/Vector.js').default} Layer.
@@ -334,7 +334,7 @@ class Select extends Interaction {
   /**
    * Remove the interaction from its current map, if any,  and attach it to a new
    * map, if any. Pass `null` to just remove the interaction from the current map.
-   * @param {import("../PluggableMap.js").default} map Map.
+   * @param {import("../PluggableMap.js").default|null} map Map.
    * @api
    */
   setMap(map) {
@@ -460,7 +460,7 @@ class Select extends Interaction {
   }
 
   /**
-   * Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the
+   * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} and may change the
    * selected state of features.
    * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
    * @return {boolean} `false` to stop event propagation.

src/ol/interaction/Snap.js

@@ -73,7 +73,7 @@ const tempSegment = [];
 /**
  * @classdesc
  * Handles snapping of vector features while modifying or drawing them.  The
- * features can come from a {@link module:ol/source/Vector} or {@link module:ol/Collection~Collection}
+ * features can come from a {@link module:ol/source/Vector~VectorSource} or {@link module:ol/Collection~Collection}
  * Any interaction object that allows the user to interact
  * with the features using the mouse can benefit from the snapping, as long
  * as it is added before.
@@ -115,7 +115,7 @@ class Snap extends PointerInteraction {
     super(pointerOptions);
 
     /**
-     * @type {import("../source/Vector.js").default}
+     * @type {import("../source/Vector.js").default|null}
      * @private
      */
     this.source_ = options.source ? options.source : null;
@@ -133,7 +133,7 @@ class Snap extends PointerInteraction {
     this.edge_ = options.edge !== undefined ? options.edge : true;
 
     /**
-     * @type {import("../Collection.js").default<import("../Feature.js").default>}
+     * @type {import("../Collection.js").default<import("../Feature.js").default>|null}
      * @private
      */
     this.features_ = options.features ? options.features : null;

src/ol/interaction/Translate.js

@@ -34,9 +34,9 @@ const TranslateEventType = {
 };
 
 /**
- * A function that takes an {@link module:ol/Feature} or
- * {@link module:ol/render/Feature} and an
- * {@link module:ol/layer/Layer} and returns `true` if the feature may be
+ * A function that takes an {@link module:ol/Feature~Feature} or
+ * {@link module:ol/render/Feature~RenderFeature} and an
+ * {@link module:ol/layer/Layer~Layer} and returns `true` if the feature may be
  * translated or `false` otherwise.
  * @typedef {function(import("../Feature.js").FeatureLike, import("../layer/Layer.js").default<import("../source/Source").default>):boolean} FilterFunction
  */
@@ -55,8 +55,8 @@ const TranslateEventType = {
  * absent, all visible layers will be considered translatable.
  * Not used if `features` is provided.
  * @property {FilterFunction} [filter] A function
- * that takes an {@link module:ol/Feature} and an
- * {@link module:ol/layer/Layer} and returns `true` if the feature may be
+ * that takes an {@link module:ol/Feature~Feature} and an
+ * {@link module:ol/layer/Layer~Layer} and returns `true` if the feature may be
  * translated or `false` otherwise. Not used if `features` is provided.
  * @property {number} [hitTolerance=0] Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features.
@@ -102,7 +102,7 @@ export class TranslateEvent extends Event {
     this.startCoordinate = startCoordinate;
 
     /**
-     * Associated {@link module:ol/MapBrowserEvent}.
+     * Associated {@link module:ol/MapBrowserEvent~MapBrowserEvent}.
      * @type {import("../MapBrowserEvent.js").default}
      * @api
      */
@@ -169,7 +169,7 @@ class Translate extends PointerInteraction {
     this.startCoordinate_ = null;
 
     /**
-     * @type {Collection<import("../Feature.js").default>}
+     * @type {Collection<import("../Feature.js").default>|null}
      * @private
      */
     this.features_ = options.features !== undefined ? options.features : null;

src/ol/layer/Base.js

@@ -55,8 +55,8 @@ import {clamp} from '../math.js';
  * @classdesc
  * Abstract base class; normally only used for creating subclasses and not
  * instantiated in apps.
- * Note that with {@link module:ol/layer/Base} and all its subclasses, any property set in
- * the options is set as a {@link module:ol/Object} property on the layer object, so
+ * Note that with {@link module:ol/layer/Base~BaseLayer} and all its subclasses, any property set in
+ * the options is set as a {@link module:ol/Object~BaseObject} property on the layer object, so
  * is observable, and has get/set accessors.
  *
  * @api
@@ -119,7 +119,7 @@ class BaseLayer extends BaseObject {
      * @private
      */
     this.className_ =
-      properties.className !== undefined ? options.className : 'ol-layer';
+      properties.className !== undefined ? properties.className : 'ol-layer';
     delete properties.className;
 
     this.setProperties(properties);
@@ -163,7 +163,6 @@ class BaseLayer extends BaseObject {
       });
     const zIndex = this.getZIndex();
     state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
-    state.sourceState = this.getSourceState();
     state.visible = this.getVisible();
     state.extent = this.getExtent();
     state.zIndex = zIndex === undefined && !state.managed ? Infinity : zIndex;
@@ -289,7 +288,7 @@ class BaseLayer extends BaseObject {
   }
 
   /**
-   * Sets the backgrlound color.
+   * Sets the background color.
    * @param {BackgroundColor} [opt_background] Background color.
    */
   setBackground(opt_background) {

src/ol/layer/BaseTile.js

@@ -136,6 +136,26 @@ class BaseTileLayer extends Layer {
   setUseInterimTilesOnError(useInterimTilesOnError) {
     this.set(TileProperty.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
   }
+
+  /**
+   * Get data for a pixel location.  The return type depends on the source data.  For image tiles,
+   * a four element RGBA array will be returned.  For data tiles, the array length will match the
+   * number of bands in the dataset.  For requests outside the layer extent, `null` will be returned.
+   * Data for a image tiles can only be retrieved if the source's `crossOrigin` property is set.
+   *
+   * ```js
+   * // display layer data on every pointer move
+   * map.on('pointermove', (event) => {
+   *   console.log(layer.getData(event.pixel));
+   * });
+   * ```
+   * @param {import("../pixel").Pixel} pixel Pixel.
+   * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
+   * @api
+   */
+  getData(pixel) {
+    return super.getData(pixel);
+  }
 }
 
 export default BaseTileLayer;

src/ol/layer/Graticule.js

@@ -20,7 +20,6 @@ import {
   containsExtent,
   equals,
   getCenter,
-  getHeight,
   getIntersection,
   getWidth,
   intersects,
@@ -484,9 +483,16 @@ class Graticule extends VectorLayer {
 
     /**
      * @type {?import("../extent.js").Extent}
+     * @private
      */
     this.renderedExtent_ = null;
 
+    /**
+     * @type {?number}
+     * @private
+     */
+    this.renderedResolution_ = null;
+
     this.setRenderOrder(null);
   }
 
@@ -536,10 +542,15 @@ class Graticule extends VectorLayer {
     ];
     const renderExtent = getIntersection(layerExtent, extent);
 
-    if (this.renderedExtent_ && equals(this.renderedExtent_, renderExtent)) {
+    if (
+      this.renderedExtent_ &&
+      equals(this.renderedExtent_, renderExtent) &&
+      this.renderedResolution_ === resolution
+    ) {
       return;
     }
     this.renderedExtent_ = renderExtent;
+    this.renderedResolution_ = resolution;
 
     // bail out if nothing to render
     if (isEmpty(renderExtent)) {
@@ -670,16 +681,14 @@ class Graticule extends VectorLayer {
    */
   drawLabels_(event) {
     const rotation = event.frameState.viewState.rotation;
+    const resolution = event.frameState.viewState.resolution;
+    const size = event.frameState.size;
     const extent = event.frameState.extent;
     const rotationCenter = getCenter(extent);
     let rotationExtent = extent;
     if (rotation) {
-      const width = getWidth(extent);
-      const height = getHeight(extent);
-      const cr = Math.abs(Math.cos(rotation));
-      const sr = Math.abs(Math.sin(rotation));
-      const unrotatedWidth = (sr * height - cr * width) / (sr * sr - cr * cr);
-      const unrotatedHeight = (sr * width - cr * height) / (sr * sr - cr * cr);
+      const unrotatedWidth = size[0] * resolution;
+      const unrotatedHeight = size[1] * resolution;
       rotationExtent = [
         rotationCenter[0] - unrotatedWidth / 2,
         rotationCenter[1] - unrotatedHeight / 2,

src/ol/layer/Group.js

@@ -243,10 +243,10 @@ class LayerGroup extends BaseLayer {
   }
 
   /**
-   * Returns the {@link module:ol/Collection collection} of {@link module:ol/layer/Layer~Layer layers}
+   * Returns the {@link module:ol/Collection~Collection collection} of {@link module:ol/layer/Layer~Layer layers}
    * in this group.
    * @return {!import("../Collection.js").default<import("./Base.js").default>} Collection of
-   *   {@link module:ol/layer/Base layers} that are part of this group.
+   *   {@link module:ol/layer/Base~BaseLayer layers} that are part of this group.
    * @observable
    * @api
    */
@@ -257,10 +257,10 @@ class LayerGroup extends BaseLayer {
   }
 
   /**
-   * Set the {@link module:ol/Collection collection} of {@link module:ol/layer/Layer~Layer layers}
+   * Set the {@link module:ol/Collection~Collection collection} of {@link module:ol/layer/Layer~Layer layers}
    * in this group.
    * @param {!import("../Collection.js").default<import("./Base.js").default>} layers Collection of
-   *   {@link module:ol/layer/Base layers} that are part of this group.
+   *   {@link module:ol/layer/Base~BaseLayer layers} that are part of this group.
    * @observable
    * @api
    */

src/ol/layer/Heatmap.js

@@ -33,7 +33,7 @@ import {createCanvasContext2D} from '../dom.js';
  * @property {string|function(import("../Feature.js").default):number} [weight='weight'] The feature
  * attribute to use for the weight or a function that returns a weight from a feature. Weight values
  * should range from 0 to 1 (and values outside will be clamped to that range).
- * @property {import("../source/Vector.js").default} [source] Source.
+ * @property {import("../source/Vector.js").default<import("../geom/Point.js").default>} [source] Point source.
  * @property {Object<string, *>} [properties] Arbitrary observable properties. Can be accessed with `#get()` and `#set()`.
  */