Updates for 6.9.0

Do not replace icon color if image not loaded

README.md

@@ -102,6 +102,8 @@ For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and ol
 * [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/).
 * [Pointer events](https://caniuse.com/pointer): Use [elm-pep](https://npmjs.com/package/elm-pep) (lightweight) or [pepjs](https://npmjs.com/package/pepjs) (for really, really old browsers).
 
+[`ol/source/GeoTIFF`](https://openlayers.org/en/latest/apidoc/module-ol_source_GeoTIFF-GeoTIFFSource.html) requires a browser that supports [ECMAScript 6](https://262.ecma-international.org/6.0/). Additionally a polyfill for [`Promise.allSettled`](https://caniuse.com/mdn-javascript_builtins_promise_allsettled) may be needed.
+
 ## Documentation
 
 Check out the [hosted examples](https://openlayers.org/en/latest/examples/), the [workshop](https://openlayers.org/workshop/) or the [API documentation](https://openlayers.org/en/latest/apidoc/).

changelog/upgrade-notes.md

@@ -1,5 +1,13 @@
 ## Upgrade notes
 
+### v6.9.0
+
+There should be nothing special required when upgrading from v6.8 to v6.9.
+
+### v6.8.0
+
+There should be nothing special required when upgrading from v6.7 to v6.8.
+
 ### v6.7.0
 
 There should be nothing special required when upgrading from v6.6 to v6.7.

changelog/v6.8.0.md

@@ -0,0 +1,60 @@
+# 6.8.0
+
+The 6.8 release builds on the momentum of 6.7 with some great new enhancements.  Data tiles now handle 32-bit data in addition to 8-bit.  Views properties can now be provided that sources that fetch view-related data.  Vector tile rendering got some performance enhancements.  Find detail on these features and a number of fixes in the list of changes below.
+
+## List of all changes
+
+ * [#12785](https://github.com/openlayers/openlayers/pull/12785) - Promise.allSettled polyfill and other browser compatibilty ([@mike-000](https://github.com/mike-000))
+ * [#12807](https://github.com/openlayers/openlayers/pull/12807) - Updated styles ([@tschaub](https://github.com/tschaub))
+ * [#12806](https://github.com/openlayers/openlayers/pull/12806) - Update to the WebGL sea level example ([@tschaub](https://github.com/tschaub))
+ * [#12808](https://github.com/openlayers/openlayers/pull/12808) - Update expectations for vector tile icon label rendering ([@tschaub](https://github.com/tschaub))
+ * [#12804](https://github.com/openlayers/openlayers/pull/12804) - Make vector tiles rendering simpler and a bit faster ([@ahocevar](https://github.com/ahocevar))
+ * [#12802](https://github.com/openlayers/openlayers/pull/12802) - Enqueue tiles at the next step in the animation ([@tschaub](https://github.com/tschaub))
+ * [#12801](https://github.com/openlayers/openlayers/pull/12801) - Update ol-mapbox-style to latest version without ol peer dependency ([@ahocevar](https://github.com/ahocevar))
+ * [#12792](https://github.com/openlayers/openlayers/pull/12792) - Do not do any canvas work when there are no features to render ([@ahocevar](https://github.com/ahocevar))
+ * [#12797](https://github.com/openlayers/openlayers/pull/12797) - Update geotiff ([@ahocevar](https://github.com/ahocevar))
+ * [#12799](https://github.com/openlayers/openlayers/pull/12799) - All layers now call dispose on the renderer ([@tschaub](https://github.com/tschaub))
+ * [#12798](https://github.com/openlayers/openlayers/pull/12798) - More cleanup in the WebGL tile layer's dispose method ([@tschaub](https://github.com/tschaub))
+ * [#12795](https://github.com/openlayers/openlayers/pull/12795) - New tile source for the WMTS example ([@mike-000](https://github.com/mike-000))
+ * [#12793](https://github.com/openlayers/openlayers/pull/12793) - Add a method to set the map layers ([@tschaub](https://github.com/tschaub))
+ * [#12789](https://github.com/openlayers/openlayers/pull/12789) - Handle TileJSON urls in Mapbox Style document ([@ahocevar](https://github.com/ahocevar))
+ * [#12790](https://github.com/openlayers/openlayers/pull/12790) - Allow maps to be configured with a promise for view props ([@tschaub](https://github.com/tschaub))
+ * [#12777](https://github.com/openlayers/openlayers/pull/12777) - Fix offscreen-canvas example ([@ahocevar](https://github.com/ahocevar))
+ * [#12778](https://github.com/openlayers/openlayers/pull/12778) - Do not render vector tiles unless they are being used ([@ahocevar](https://github.com/ahocevar))
+ * [#12773](https://github.com/openlayers/openlayers/pull/12773) - Enable WebGL extensions when required ([@tschaub](https://github.com/tschaub))
+ * [#12774](https://github.com/openlayers/openlayers/pull/12774) - Fix text decluttering when segment length is zero ([@MoonE](https://github.com/MoonE))
+ * [#12770](https://github.com/openlayers/openlayers/pull/12770) - Use Uint8Array instead of Uint8ClampedArray for increased browser compatibility ([@tschaub](https://github.com/tschaub))
+ * [#12759](https://github.com/openlayers/openlayers/pull/12759) - #12758: Allow undefined to be passed to control setMap(). Also fix type of getMap() ([@jumpinjackie](https://github.com/jumpinjackie))
+ * [#12760](https://github.com/openlayers/openlayers/pull/12760) - Fix opacity handling for tile and vector layers ([@ahocevar](https://github.com/ahocevar))
+ * [#12764](https://github.com/openlayers/openlayers/pull/12764) - Fix ImageInformationResponse typedef ([@webwitcher](https://github.com/webwitcher))
+ * [#12769](https://github.com/openlayers/openlayers/pull/12769) - Remove extra closing anchor tag ([@tschaub](https://github.com/tschaub))
+ * [#12761](https://github.com/openlayers/openlayers/pull/12761) - Add Float Textures for GL Rendering / DataTiles ([@theduckylittle](https://github.com/theduckylittle))
+ * [#12740](https://github.com/openlayers/openlayers/pull/12740) - Various fixes for browser compatibility issues ([mike-000](https://github.com/search?q=mike-000&type=Users))
+ * [#12741](https://github.com/openlayers/openlayers/pull/12741) - Minimal documentation for GMLBase ([@mike-000](https://github.com/mike-000))
+ * [#12743](https://github.com/openlayers/openlayers/pull/12743) - Remove docs reference to unmanaged layer and Select ([@mike-000](https://github.com/mike-000))
+ * [#12734](https://github.com/openlayers/openlayers/pull/12734) - Continue supporting IE11 in examples and legacy build ([@ahocevar](https://github.com/ahocevar))
+ * [#12739](https://github.com/openlayers/openlayers/pull/12739) - Change canvas style from initial to unset ([@mike-000](https://github.com/mike-000))
+ * [#12731](https://github.com/openlayers/openlayers/pull/12731) - Handle resolution and tile loadingstrategy with user projection ([@ahocevar](https://github.com/ahocevar))
+ * [#12736](https://github.com/openlayers/openlayers/pull/12736) - OnSignatures return more specific type ([@simonseyock](https://github.com/simonseyock))
+ * [#12732](https://github.com/openlayers/openlayers/pull/12732) - Add <meta charset="utf-8"> to Quick Start ([@mike-000](https://github.com/mike-000))
+ * [#12728](https://github.com/openlayers/openlayers/pull/12728) - Release v6.7.0 ([@openlayers](https://github.com/openlayers))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#12784](https://github.com/openlayers/openlayers/pull/12784) - Bump webpack-dev-server from 4.2.0 to 4.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#12783](https://github.com/openlayers/openlayers/pull/12783) - Bump marked from 3.0.3 to 3.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#12782](https://github.com/openlayers/openlayers/pull/12782) - Bump webpack-sources from 3.2.0 to 3.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#12781](https://github.com/openlayers/openlayers/pull/12781) - Bump webpack from 5.52.1 to 5.53.0 ([@openlayers](https://github.com/openlayers))
+ * [#12780](https://github.com/openlayers/openlayers/pull/12780) - Bump @babel/eslint-parser from 7.15.4 to 7.15.7 ([@openlayers](https://github.com/openlayers))
+ * [#12750](https://github.com/openlayers/openlayers/pull/12750) - Bump webpack-dev-server from 4.1.0 to 4.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12749](https://github.com/openlayers/openlayers/pull/12749) - Bump marked from 3.0.2 to 3.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#12748](https://github.com/openlayers/openlayers/pull/12748) - Bump ol-mapbox-style from 6.4.1 to 6.4.2 ([@openlayers](https://github.com/openlayers))
+ * [#12747](https://github.com/openlayers/openlayers/pull/12747) - Bump terser-webpack-plugin from 5.2.3 to 5.2.4 ([@openlayers](https://github.com/openlayers))
+ * [#12746](https://github.com/openlayers/openlayers/pull/12746) - Bump @babel/preset-env from 7.15.4 to 7.15.6 ([@openlayers](https://github.com/openlayers))
+ * [#12745](https://github.com/openlayers/openlayers/pull/12745) - Bump webpack from 5.52.0 to 5.52.1 ([@openlayers](https://github.com/openlayers))
+ * [#12744](https://github.com/openlayers/openlayers/pull/12744) - Bump webpack-dev-middleware from 5.0.0 to 5.1.0 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

changelog/v6.8.1.md

@@ -0,0 +1,5 @@
+# 6.8.1
+
+This is a patch release which updates `ol.css` to restore a legible control button size in applications that do not have a css `font-size` set for `button` elements.
+
+ * [#12811](https://github.com/openlayers/openlayers/pull/12811) - Controls inherit font size from parent ([@tschaub](https://github.com/tschaub))

changelog/v6.9.0.md

@@ -0,0 +1,51 @@
+# 6.9.0
+
+The 6.9 release brings a few new features and a number of fixes.  GeoTIFF sources now have a `normalize` option.  Set `normalize: false` if you want your style expressions to work with raw floating point values instead of normalized values from 0 to 1.  The GeoTIFF source also now uses nodata values from the source imagery – so in most cases you don't need to specify this yourself.  For people configuring vector layers with styles that use custom rendering, you can now get hit detection on the rendered result.  See details on these features and other included fixes below.
+
+ * [#12813](https://github.com/openlayers/openlayers/pull/12813) - Do not replace icon color if image not loaded ([@mike-000](https://github.com/mike-000))
+ * [#12870](https://github.com/openlayers/openlayers/pull/12870) - Fix publicPath problem in legacy build ([@ahocevar](https://github.com/ahocevar))
+ * [#12889](https://github.com/openlayers/openlayers/pull/12889) - Simplified ESLint config ([@tschaub](https://github.com/tschaub))
+ * [#12875](https://github.com/openlayers/openlayers/pull/12875) - Only trigger change event if animating a tile transition ([@tschaub](https://github.com/tschaub))
+ * [#12885](https://github.com/openlayers/openlayers/pull/12885) - Fix typeDefs for several Control modules ([@MatthijsBon](https://github.com/MatthijsBon))
+ * [#12861](https://github.com/openlayers/openlayers/pull/12861) - Update geotiff to 1.0.8; allow version range ([@ahocevar](https://github.com/ahocevar))
+ * [#12865](https://github.com/openlayers/openlayers/pull/12865) - Add a note about installing git before using create-ol-app ([@tschaub](https://github.com/tschaub))
+ * [#12847](https://github.com/openlayers/openlayers/pull/12847) - Add more definitions for GeoTIFF types ([@tschaub](https://github.com/tschaub))
+ * [#12850](https://github.com/openlayers/openlayers/pull/12850) - Fix issues with animate on View without center or resolution ([@MoonE](https://github.com/MoonE))
+ * [#12846](https://github.com/openlayers/openlayers/pull/12846) - Use nodata values in the GeoTIFF headers for fill value ([@tschaub](https://github.com/tschaub))
+ * [#12837](https://github.com/openlayers/openlayers/pull/12837) - forEachLayerAtPixel return null for unsupported layer types ([@mike-000](https://github.com/mike-000))
+ * [#12836](https://github.com/openlayers/openlayers/pull/12836) - Support a normalize option on the GeoTIFF source ([@tschaub](https://github.com/tschaub))
+ * [#12646](https://github.com/openlayers/openlayers/pull/12646) - Support for hit detection in styles with custom rendering ([@ashchurova](https://github.com/ashchurova))
+ * [#12831](https://github.com/openlayers/openlayers/pull/12831) - Fix rendering VectorImage with no features in view extent ([@MoonE](https://github.com/MoonE))
+ * [#12830](https://github.com/openlayers/openlayers/pull/12830) - bugfix: Fix type of `layers` option in `OverviewMap` ([@ejn](https://github.com/ejn))
+ * [#12815](https://github.com/openlayers/openlayers/pull/12815) - Spelling correction ([@tschaub](https://github.com/tschaub))
+ * [#12812](https://github.com/openlayers/openlayers/pull/12812) - Release v6.8.1 ([@openlayers](https://github.com/openlayers))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#12881](https://github.com/openlayers/openlayers/pull/12881) - Bump webpack from 5.56.1 to 5.58.1 ([@openlayers](https://github.com/openlayers))
+ * [#12882](https://github.com/openlayers/openlayers/pull/12882) - Bump marked from 3.0.4 to 3.0.7 ([@openlayers](https://github.com/openlayers))
+ * [#12878](https://github.com/openlayers/openlayers/pull/12878) - Bump webpack-dev-server from 4.3.0 to 4.3.1 ([@openlayers](https://github.com/openlayers))
+ * [#12879](https://github.com/openlayers/openlayers/pull/12879) - Bump @babel/preset-env from 7.15.6 to 7.15.8 ([@openlayers](https://github.com/openlayers))
+ * [#12880](https://github.com/openlayers/openlayers/pull/12880) - Bump @babel/eslint-parser from 7.15.7 to 7.15.8 ([@openlayers](https://github.com/openlayers))
+ * [#12884](https://github.com/openlayers/openlayers/pull/12884) - Bump @babel/core from 7.15.5 to 7.15.8 ([@openlayers](https://github.com/openlayers))
+ * [#12877](https://github.com/openlayers/openlayers/pull/12877) - Bump webpack-cli from 4.8.0 to 4.9.0 ([@openlayers](https://github.com/openlayers))
+ * [#12854](https://github.com/openlayers/openlayers/pull/12854) - Bump webpack from 5.54.0 to 5.56.1 ([@openlayers](https://github.com/openlayers))
+ * [#12857](https://github.com/openlayers/openlayers/pull/12857) - Bump webpack-dev-server from 4.2.1 to 4.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#12856](https://github.com/openlayers/openlayers/pull/12856) - Bump @rollup/plugin-commonjs from 20.0.0 to 21.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12855](https://github.com/openlayers/openlayers/pull/12855) - Bump rollup from 2.57.0 to 2.58.0 ([@openlayers](https://github.com/openlayers))
+ * [#12853](https://github.com/openlayers/openlayers/pull/12853) - Bump clean-css-cli from 5.3.3 to 5.4.1 ([@openlayers](https://github.com/openlayers))
+ * [#12822](https://github.com/openlayers/openlayers/pull/12822) - Bump glob from 7.1.7 to 7.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12824](https://github.com/openlayers/openlayers/pull/12824) - Bump rollup from 2.56.3 to 2.57.0 ([@openlayers](https://github.com/openlayers))
+ * [#12818](https://github.com/openlayers/openlayers/pull/12818) - Bump threads from 1.6.5 to 1.7.0 ([@openlayers](https://github.com/openlayers))
+ * [#12821](https://github.com/openlayers/openlayers/pull/12821) - Bump @rollup/plugin-node-resolve from 13.0.4 to 13.0.5 ([@openlayers](https://github.com/openlayers))
+ * [#12823](https://github.com/openlayers/openlayers/pull/12823) - Bump walk from 2.3.14 to 2.3.15 ([@openlayers](https://github.com/openlayers))
+ * [#12819](https://github.com/openlayers/openlayers/pull/12819) - Bump webpack-dev-middleware from 5.1.0 to 5.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#12820](https://github.com/openlayers/openlayers/pull/12820) - Bump mocha from 9.1.1 to 9.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#12817](https://github.com/openlayers/openlayers/pull/12817) - Bump yargs from 17.1.1 to 17.2.1 ([@openlayers](https://github.com/openlayers))
+ * [#12825](https://github.com/openlayers/openlayers/pull/12825) - Bump webpack from 5.53.0 to 5.54.0 ([@openlayers](https://github.com/openlayers))
+ * [#12826](https://github.com/openlayers/openlayers/pull/12826) - Bump puppeteer from 10.2.0 to 10.4.0 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

config/webpack-config-legacy-build.mjs

@@ -1,33 +1,28 @@
 import TerserPlugin from 'terser-webpack-plugin';
-import path, {dirname} from 'path';
+import path from 'path';
-import {fileURLToPath} from 'url';
-
-const baseDir = dirname(fileURLToPath(import.meta.url));
 
 export default {
-  entry: './build/index.js',
+  entry: ['regenerator-runtime/runtime', './build/index.js'],
   devtool: 'source-map',
   mode: 'production',
   target: ['web', 'es5'],
   module: {
     rules: [
       {
-        test: /^((?!es2015-)[\s\S])*\.js$/,
+        test: /\.m?js$/,
         use: {
-          loader: 'buble-loader',
+          loader: 'babel-loader',
           options: {
-            transforms: {dangerousForOf: true},
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: 'last 2 versions, not dead',
+                },
+              ],
+            ],
           },
         },
-        include: [
-          path.join(
-            baseDir,
-            '..',
-            'node_modules',
-            '@mapbox',
-            'mapbox-gl-style-spec'
-          ),
-        ],
       },
     ],
   },
@@ -53,6 +48,7 @@ export default {
   },
   output: {
     path: path.resolve('./build/legacy'),
+    publicPath: '',
     filename: 'ol.js',
     library: 'ol',
     libraryTarget: 'umd',

doc/errors/index.md

@@ -233,10 +233,6 @@ Cannot determine IIIF Image API version from provided image information JSON.
 
 A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
 
-### 63
-
-Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.
-
 ### 64
 
 Layer opacity must be a number.

doc/quickstart.hbs

@@ -18,6 +18,7 @@ Below you'll find a complete working example.  Create a new file, copy in the co
 <!doctype html>
 <html lang="en">
   <head>
+    <meta charset="utf-8">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/css/ol.css" type="text/css">
     <style>
       .map {

doc/tutorials/bundle.md

@@ -15,6 +15,8 @@ Create a new empty directory for your project and navigate to it by running `mkd
 
     npx create-ol-app
 
+*You will need to have `git` installed for the above command to work.  If you receive an error, make that [Git is installed](https://github.com/git-guides/install-git) on your system.*
+
 This will install the `ol` package, set up a development environment with additional dependencies, and give you an `index.html` and `main.js` starting point for your application.  By default, [Parcel](https://parceljs.org) will be used as a module loader and bundler.  See the [`create-ol-app`](https://github.com/openlayers/create-ol-app) documentation for details on using another bundler.
 
 To start the development server

examples/.eslintrc

@@ -13,6 +13,7 @@
     "jsts": false,
     "JSZip": false,
     "mapboxgl": false,
+    "NumpyLoader": false,
     "saveAs": false,
     "toastr": false,
     "topojson": false,

examples/cluster.js

@@ -77,13 +77,17 @@ const map = new Map({
   }),
 });
 
-distanceInput.addEventListener('input', function () {
+const distanceHandler = function () {
   clusterSource.setDistance(parseInt(distanceInput.value, 10));
-});
+};
+distanceInput.addEventListener('input', distanceHandler);
+distanceInput.addEventListener('change', distanceHandler);
 
-minDistanceInput.addEventListener('input', function () {
+const minDistanceHandler = function () {
   clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
-});
+};
+minDistanceInput.addEventListener('input', minDistanceHandler);
+minDistanceInput.addEventListener('change', minDistanceHandler);
 
 map.on('click', (e) => {
   clusters.getFeatures(e.pixel).then((clickedFeatures) => {

examples/cog-math-multisource.js

@@ -1,7 +1,6 @@
 import GeoTIFF from '../src/ol/source/GeoTIFF.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
-import View from '../src/ol/View.js';
 
 const source = new GeoTIFF({
   sources: [
@@ -57,9 +56,5 @@ const map = new Map({
       source,
     }),
   ],
-  view: new View({
+  view: source.getView(),
-    center: [1900000, 6100000],
-    zoom: 13,
-    minZoom: 10,
-  }),
 });

examples/cog-math.js

@@ -1,16 +1,21 @@
 import GeoTIFF from '../src/ol/source/GeoTIFF.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
-import View from '../src/ol/View.js';
-import proj4 from 'proj4';
-import {getCenter} from '../src/ol/extent.js';
-import {register} from '../src/ol/proj/proj4.js';
 
-proj4.defs('EPSG:32636', '+proj=utm +zone=36 +datum=WGS84 +units=m +no_defs');
+const source = new GeoTIFF({
-register(proj4);
+  sources: [
-
+    {
-// metadata from https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/S2A_36QWD_20200701_0_L2A.json
+      // visible red, band 1 in the style expression above
-const sourceExtent = [499980, 1790220, 609780, 1900020];
+      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/B04.tif',
+      max: 10000,
+    },
+    {
+      // near infrared, band 2 in the style expression above
+      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/B08.tif',
+      max: 10000,
+    },
+  ],
+});
 
 const map = new Map({
   target: 'map',
@@ -69,27 +74,8 @@ const map = new Map({
           [0, 69, 0],
         ],
       },
-      source: new GeoTIFF({
+      source: source,
-        sources: [
-          {
-            // visible red, band 1 in the style expression above
-            url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/B04.tif',
-            max: 10000,
-          },
-          {
-            // near infrared, band 2 in the style expression above
-            url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/B08.tif',
-            max: 10000,
-          },
-        ],
-      }),
-      extent: sourceExtent,
     }),
   ],
-  view: new View({
+  view: source.getView(),
-    projection: 'EPSG:32636',
-    center: getCenter(sourceExtent),
-    extent: sourceExtent,
-    zoom: 9,
-  }),
 });

examples/cog-overviews.js

@@ -1,62 +1,49 @@
 import GeoTIFF from '../src/ol/source/GeoTIFF.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
-import View from '../src/ol/View.js';
-import proj4 from 'proj4';
-import {getCenter} from '../src/ol/extent.js';
-import {register} from '../src/ol/proj/proj4.js';
-
-proj4.defs('EPSG:32645', '+proj=utm +zone=45 +datum=WGS84 +units=m +no_defs');
-register(proj4);
-
-const sourceExtent = [382200, 2279370, 610530, 2512500];
-
-const base =
-  'https://landsat-pds.s3.amazonaws.com/c1/L8/139/045/LC08_L1TP_139045_20170304_20170316_01_T1/LC08_L1TP_139045_20170304_20170316_01_T1';
 
 // scale values in this range to 0 - 1
 const min = 10000;
 const max = 15000;
 
+const base =
+  'https://landsat-pds.s3.amazonaws.com/c1/L8/139/045/LC08_L1TP_139045_20170304_20170316_01_T1/LC08_L1TP_139045_20170304_20170316_01_T1';
+
+const source = new GeoTIFF({
+  sources: [
+    {
+      url: `${base}_B6.TIF`,
+      overviews: [`${base}_B6.TIF.ovr`],
+      min: min,
+      max: max,
+      nodata: 0,
+    },
+    {
+      url: `${base}_B5.TIF`,
+      overviews: [`${base}_B5.TIF.ovr`],
+      min: min,
+      max: max,
+      nodata: 0,
+    },
+    {
+      url: `${base}_B3.TIF`,
+      overviews: [`${base}_B3.TIF.ovr`],
+      min: min,
+      max: max,
+      nodata: 0,
+    },
+  ],
+});
+
 const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
-      extent: sourceExtent,
       style: {
         saturation: -0.3,
       },
-      source: new GeoTIFF({
+      source: source,
-        sources: [
-          {
-            url: `${base}_B6.TIF`,
-            overviews: [`${base}_B6.TIF.ovr`],
-            min: min,
-            max: max,
-            nodata: 0,
-          },
-          {
-            url: `${base}_B5.TIF`,
-            overviews: [`${base}_B5.TIF.ovr`],
-            min: min,
-            max: max,
-            nodata: 0,
-          },
-          {
-            url: `${base}_B3.TIF`,
-            overviews: [`${base}_B3.TIF.ovr`],
-            min: min,
-            max: max,
-            nodata: 0,
-          },
-        ],
-      }),
     }),
   ],
-  view: new View({
+  view: source.getView(),
-    projection: 'EPSG:32645',
-    center: getCenter(sourceExtent),
-    extent: sourceExtent,
-    zoom: 8,
-  }),
 });

examples/cog.js

@@ -1,35 +1,21 @@
 import GeoTIFF from '../src/ol/source/GeoTIFF.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
-import View from '../src/ol/View.js';
-import proj4 from 'proj4';
-import {getCenter} from '../src/ol/extent.js';
-import {register} from '../src/ol/proj/proj4.js';
 
-proj4.defs('EPSG:32636', '+proj=utm +zone=36 +datum=WGS84 +units=m +no_defs');
+const source = new GeoTIFF({
-register(proj4);
+  sources: [
-
+    {
-// metadata from https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/S2A_36QWD_20200701_0_L2A.json
+      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/TCI.tif',
-const sourceExtent = [499980, 1790220, 609780, 1900020];
+    },
+  ],
+});
 
 const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
-      source: new GeoTIFF({
+      source: source,
-        sources: [
-          {
-            url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/TCI.tif',
-          },
-        ],
-      }),
-      extent: sourceExtent,
     }),
   ],
-  view: new View({
+  view: source.getView(),
-    projection: 'EPSG:32636',
-    center: getCenter(sourceExtent),
-    extent: sourceExtent,
-    zoom: 9,
-  }),
 });

examples/color-manipulation.js

@@ -166,10 +166,12 @@ const controlIds = ['hue', 'chroma', 'lightness'];
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
     output.innerText = control.value;
     raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
   output.innerText = control.value;
   controls[id] = control;
 });

examples/custom-hit-detection-renderer.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Custom Hit Detection Render
+shortdesc: Example of a custom hit detection renderer.
+docs: >
+  This example demonstrates the use of 'ol/style/Style' hitDetectionRender option function in 
+  detecting if pointer is over a particular feature. 
+  Move pointer over the label for Columbus Circle feature and see that only label is used in
+  hit detection.
+tags: "circle, feature, vector, render, custom, hitDetectionRenderer"
+---
+<div id="map" class="map"></div>

examples/custom-hit-detection-renderer.js

@@ -0,0 +1,103 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {Circle} from '../src/ol/geom.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+const columbusCircleCoords = fromLonLat([-73.98189, 40.76805]);
+const labelTextStroke = 'rgba(120, 120, 120, 1)';
+const labelText = 'Columbus Circle';
+
+let pointerOverFeature = null;
+
+const renderLabelText = (ctx, x, y, stroke) => {
+  ctx.fillStyle = 'rgba(255,0,0,1)';
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = 1;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.font = `bold 30px verdana`;
+  ctx.filter = 'drop-shadow(7px 7px 2px #e81)';
+  ctx.fillText(labelText, x, y);
+  ctx.strokeText(labelText, x, y);
+};
+
+const circleFeature = new Feature({
+  geometry: new Circle(columbusCircleCoords, 50),
+});
+
+circleFeature.set('label-color', labelTextStroke);
+
+circleFeature.setStyle(
+  new Style({
+    renderer(coordinates, state) {
+      const [[x, y], [x1, y1]] = coordinates;
+      const ctx = state.context;
+      const dx = x1 - x;
+      const dy = y1 - y;
+      const radius = Math.sqrt(dx * dx + dy * dy);
+
+      const innerRadius = 0;
+      const outerRadius = radius * 1.4;
+
+      const gradient = ctx.createRadialGradient(
+        x,
+        y,
+        innerRadius,
+        x,
+        y,
+        outerRadius
+      );
+      gradient.addColorStop(0, 'rgba(255,0,0,0)');
+      gradient.addColorStop(0.6, 'rgba(255,0,0,0.2)');
+      gradient.addColorStop(1, 'rgba(255,0,0,0.8)');
+      ctx.beginPath();
+      ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(255,0,0,1)';
+      ctx.stroke();
+
+      renderLabelText(ctx, x, y, circleFeature.get('label-color'));
+    },
+    hitDetectionRenderer(coordinates, state) {
+      const [x, y] = coordinates[0];
+      const ctx = state.context;
+      renderLabelText(ctx, x, y, circleFeature.get('label-color'));
+    },
+  })
+);
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+      visible: true,
+    }),
+    new VectorLayer({
+      source: new VectorSource({
+        features: [circleFeature],
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: columbusCircleCoords,
+    zoom: 19,
+  }),
+});
+
+map.on('pointermove', (evt) => {
+  const featureOver = map.forEachFeatureAtPixel(evt.pixel, (feature) => {
+    feature.set('label-color', 'rgba(255,255,255,1)');
+    return feature;
+  });
+
+  if (pointerOverFeature && pointerOverFeature != featureOver) {
+    pointerOverFeature.set('label-color', labelTextStroke);
+  }
+  pointerOverFeature = featureOver;
+});

examples/custom-interactions.html

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

examples/custom-interactions.js

@@ -131,7 +131,7 @@ const polygonFeature = new Feature(
 );
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 const map = new Map({
   interactions: defaultInteractions().extend([new Drag()]),

examples/data-tiles.js

@@ -31,7 +31,8 @@ const map = new Map({
           context.fillText(`y: ${y}`, half, half + lineHeight);
           context.strokeRect(0, 0, size, size);
           const data = context.getImageData(0, 0, size, size).data;
-          return Promise.resolve(data);
+          // converting to Uint8Array for increased browser compatibility
+          return Promise.resolve(new Uint8Array(data.buffer));
         },
         // disable opacity transition to avoid overlapping labels during tile loading
         transition: 0,

examples/disable-image-smoothing.js

@@ -56,10 +56,12 @@ imagery.on('prerender', function (evt) {
 
 const control = document.getElementById('opacity');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   imagery.setOpacity(control.value / 100);
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 imagery.setOpacity(control.value / 100);
 

examples/igc.js

@@ -179,8 +179,9 @@ const featureOverlay = new VectorLayer({
   }),
 });
 
-document.getElementById('time').addEventListener('input', function () {
+const control = document.getElementById('time');
-  const value = parseInt(this.value, 10) / 100;
+const listener = function () {
+  const value = parseInt(control.value, 10) / 100;
   const m = time.start + time.duration * value;
   vectorSource.forEachFeature(function (feature) {
     const geometry =
@@ -198,4 +199,6 @@ document.getElementById('time').addEventListener('input', function () {
     }
   });
   map.render();
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);

examples/layer-extent.html

@@ -8,7 +8,7 @@ docs: >
   to limit rendering based on an extent (approximate country bounds).
 tags: "extent, tilejson"
 cloak:
-- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
   value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/layer-extent.js

@@ -16,7 +16,7 @@ const extents = {
 };
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 const base = new TileLayer({
   source: new TileJSON({

examples/layer-group.html

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

examples/layer-group.js

@@ -6,7 +6,7 @@ import {Group as LayerGroup, Tile as TileLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 const map = new Map({
   layers: [
@@ -49,7 +49,7 @@ function bindInputs(layerid, layer) {
   visibilityInput.prop('checked', layer.getVisible());
 
   const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input', function () {
+  opacityInput.on('input change', function () {
     layer.setOpacity(parseFloat(this.value));
   });
   opacityInput.val(String(layer.getOpacity()));

examples/layer-swipe.js

@@ -57,10 +57,8 @@ aerial.on('postrender', function (event) {
   ctx.restore();
 });
 
-swipe.addEventListener(
+const listener = function () {
-  'input',
+  map.render();
-  function () {
+};
-    map.render();
+swipe.addEventListener('input', listener);
-  },
+swipe.addEventListener('change', listener);
-  false
-);

examples/mapbox-vector-layer.html

@@ -9,7 +9,7 @@ docs: >
   layers (provided they all share the same source).
 tags: "mapbox, studio, vector, tiles"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-layer.js

@@ -8,7 +8,7 @@ const map = new Map({
     new MapboxVector({
       styleUrl: 'mapbox://styles/mapbox/bright-v9',
       accessToken:
-        'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q',
+        'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ',
     }),
   ],
   view: new View({

examples/mapbox-vector-tiles-advanced.html

@@ -8,7 +8,7 @@ tags: "mapbox, vector, tiles, mobile, grid"
 resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-tiles-advanced.js

@@ -8,7 +8,7 @@ import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import {get as getProjection} from '../src/ol/proj.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 // Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 const resolutions = [];

examples/mapbox-vector-tiles.html

@@ -8,7 +8,7 @@ tags: "simple, mapbox, vector, tiles"
 resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-tiles.js

@@ -6,7 +6,7 @@ import View from '../src/ol/View.js';
 import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 const map = new Map({
   layers: [

examples/min-max-resolution.html

@@ -8,7 +8,7 @@ docs: >
   <p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
 tags: "minResolution, maxResolution, resolution"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/min-max-resolution.js

@@ -5,7 +5,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 /**
  * Create the map.

examples/numpytile.css

@@ -0,0 +1,3 @@
+input[type="range"] {
+  vertical-align: text-bottom;
+}

examples/numpytile.html

@@ -0,0 +1,22 @@
+---
+layout: example.html
+title: Rendering 16-bit NumpyTiles
+shortdesc: Renders a multi-byte depth source image directly using WebGL.
+docs: >
+  This example uses a <code>ol/source/DataTile</code> source to load multi-byte raster data in the
+  <a href="https://github.com/planetlabs/numpytiles-spec/">NumpyTile</a> format.
+  The source is rendered with a <code>ol/layer/WebGLTile</code> layer.  Adjusting the sliders above
+  performs a contrast stretch by adjusting the style variables set on the layer.
+tags: "numpytiles, webgl"
+resources:
+  - https://unpkg.com/@planet/ol-numpytiles@2.0.2/umd/NumpyLoader.js
+---
+<div id="map" class="map"></div>
+
+<div>
+  <h5>Contrast stretch</h5>
+  <ul>
+    <li>Min <input type="range" min="1000" max="10000" id="input-min"/> <span id="output-min"></span></li>
+    <li>Max <input type="range" min="10000" max="50000" id="input-max"/> <span id="output-max"></span></li>
+  </ul>
+</div>

examples/numpytile.js

@@ -0,0 +1,109 @@
+import DataTileSource from '../src/ol/source/DataTile.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+// 16-bit COG
+// Which will be served as NumpyTiles.
+const COG =
+  'https://storage.googleapis.com/open-cogs/stac-examples/20201211_223832_CS2_analytic.tif';
+
+function numpyTileLoader(z, x, y) {
+  const url = `https://api.cogeo.xyz/cog/tiles/WebMercatorQuad/${z}/${x}/${y}@1x?format=npy&url=${encodeURIComponent(
+    COG
+  )}`;
+
+  return fetch(url)
+    .then((r) => r.arrayBuffer())
+    .then((buffer) => NumpyLoader.fromArrayBuffer(buffer))
+    .then((numpyData) => {
+      // flatten the numpy data
+      const dataTile = new Float32Array(256 * 256 * 5);
+      const bandSize = 256 * 256;
+      for (let x = 0; x < 256; x++) {
+        for (let y = 0; y < 256; y++) {
+          const px = x + y * 256;
+          dataTile[px * 5 + 0] = numpyData.data[y * 256 + x];
+          dataTile[px * 5 + 1] = numpyData.data[bandSize + y * 256 + x];
+          dataTile[px * 5 + 2] = numpyData.data[bandSize * 2 + y * 256 + x];
+          dataTile[px * 5 + 3] = numpyData.data[bandSize * 3 + y * 256 + x];
+          dataTile[px * 5 + 4] =
+            numpyData.data[bandSize * 4 + y * 256 + x] > 0 ? 1.0 : 0;
+        }
+      }
+      return dataTile;
+    });
+}
+
+const interpolateBand = (bandIdx) => [
+  'interpolate',
+  ['linear'],
+  ['band', bandIdx],
+  ['var', 'bMin'],
+  0,
+  ['var', 'bMax'],
+  1,
+];
+
+const initialMin = 3000;
+const initialMax = 18000;
+
+const numpyLayer = new TileLayer({
+  style: {
+    color: [
+      'array',
+      interpolateBand(3),
+      interpolateBand(2),
+      interpolateBand(1),
+      ['band', 5],
+    ],
+    variables: {
+      'bMin': initialMin,
+      'bMax': initialMax,
+    },
+  },
+  source: new DataTileSource({
+    loader: numpyTileLoader,
+    bandCount: 5,
+  }),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [numpyLayer],
+  view: new View({
+    center: fromLonLat([172.933, 1.3567]),
+    zoom: 15,
+  }),
+});
+
+const inputMin = document.getElementById('input-min');
+const inputMax = document.getElementById('input-max');
+const outputMin = document.getElementById('output-min');
+const outputMax = document.getElementById('output-max');
+
+const handleMin = (evt) => {
+  numpyLayer.updateStyleVariables({
+    'bMin': parseFloat(evt.target.value),
+    'bMax': parseFloat(inputMax.value),
+  });
+  outputMin.innerText = evt.target.value;
+};
+inputMin.addEventListener('input', handleMin);
+inputMin.addEventListener('change', handleMin);
+
+const handleMax = (evt) => {
+  numpyLayer.updateStyleVariables({
+    'bMin': parseFloat(inputMin.value),
+    'bMax': parseFloat(evt.target.value),
+  });
+  outputMax.innerText = evt.target.value;
+};
+inputMax.addEventListener('input', handleMax);
+inputMax.addEventListener('change', handleMax);
+
+inputMin.value = initialMin;
+inputMax.value = initialMax;
+outputMin.innerText = initialMin;
+outputMax.innerText = initialMax;

examples/offscreen-canvas.worker.js

@@ -88,6 +88,9 @@ function loadStyles() {
               this.context = context;
               this.container = {
                 firstElementChild: canvas,
+                style: {
+                  opacity: layer.getOpacity(),
+                },
               };
               rendererTransform = transform;
             };

examples/region-growing.js

@@ -137,7 +137,9 @@ function updateControlValue() {
 }
 updateControlValue();
 
-thresholdControl.addEventListener('input', function () {
+const listener = function () {
   updateControlValue();
   raster.changed();
-});
+};
+thresholdControl.addEventListener('input', listener);
+thresholdControl.addEventListener('change', listener);

examples/resources/Promise.allSettled.js

@@ -0,0 +1,21 @@
+if (typeof Promise !== 'undefined' && !Promise.allSettled && Array.from) {
+  Promise.allSettled = 
+    function (promises) {
+      return Promise.all(
+        Array.from(
+          promises,
+          function (p) {
+            return p.then (
+              function (value) {
+                return {status: 'fulfilled', value: value};
+              }
+            ).catch(
+              function (reason) {
+                return {status: 'rejected', reason: reason};
+              }
+            );
+          }
+        )
+      )
+    };
+}

examples/resources/layout.css

@@ -122,13 +122,15 @@ ol.inline>li {
   background: url(map-background.jpg) repeat;
   margin-bottom: 10px;
 }
+
+.ol-control {
+  line-height: normal;
+}
+
 .ol-attribution.ol-logo-only,
 .ol-attribution.ol-uncollapsible {
   max-width: calc(100% - 3em);
 }
-.ol-attribution ul {
-  font-size: 14px;
-}
 .iframe-info iframe {
   width: 100%;
 }

examples/reusable-source.html

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

examples/reusable-source.js

@@ -4,7 +4,7 @@ import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 const baseUrl = 'https://{a-c}.tiles.mapbox.com/v4';
 const urls = [
   baseUrl + '/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png?access_token=' + key,

examples/sea-level.js

@@ -67,10 +67,12 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   raster.changed();
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 
 raster.on('beforeoperations', function (event) {

examples/semi-transparent-layer.html

@@ -6,7 +6,7 @@ docs: >
   This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to black and white by using a CSS filter.
 tags: "transparent, osm, tilejson, css"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/semi-transparent-layer.js

@@ -6,7 +6,7 @@ import View from '../src/ol/View.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 const map = new Map({
   layers: [

examples/shaded-relief.js

@@ -159,10 +159,12 @@ const controls = {};
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
     output.innerText = control.value;
     raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
   output.innerText = control.value;
   controls[id] = control;
 });

examples/templates/example.html

@@ -69,6 +69,7 @@
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     <script src="https://unpkg.com/elm-pep"></script>
     <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
+    <script src="./resources/Promise.allSettled.js"></script>
     {{{ extraHead.local }}}
     {{{ css.tag }}}
     <title>{{ title }}</title>

examples/tile-load-events.html

@@ -10,7 +10,7 @@ docs: >
   renders a tile loading progress bar at the bottom of the map.</p>
 tags: "tile, events, loading"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div class="wrapper">

examples/utfgrid.html

@@ -7,7 +7,7 @@ docs: >
   Tiles made with <a href="https://tilemill-project.github.io/tilemill/">TileMill</a>. Hosting on <a href="https://www.mapbox.com/">mapbox.com</a> or with open-source <a href="https://github.com/maptiler/tileserver-php">TileServer</a>.
 tags: "utfgrid, tilejson"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/utfgrid.js

@@ -6,7 +6,7 @@ import UTFGrid from '../src/ol/source/UTFGrid.js';
 import View from '../src/ol/View.js';
 
 const key =
-  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ';
 
 const mapLayer = new TileLayer({
   source: new TileJSON({

examples/vector-wfs-geographic.html

@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: WFS with geographic coordinates
+shortdesc: Example of using WFS with a Tile strategy.
+docs: >
+  This example loads new features from GeoServer WFS with a tile based loading strategy.
+  Calling the <code>useGeographic</code> function in the <code>'ol/proj'</code> module
+  makes it so the map view uses geographic coordinates (even if the view projection is
+  not geographic).
+tags: "geographic, vector, WFS, tile, strategy, loading, server, maptiler"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+experimental: true
+---
+<div id="map" class="map"></div>

examples/vector-wfs-geographic.js

@@ -0,0 +1,60 @@
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+import {Stroke, Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {createXYZ} from '../src/ol/tilegrid.js';
+import {tile} from '../src/ol/loadingstrategy.js';
+import {useGeographic} from '../src/ol/proj.js';
+
+useGeographic();
+
+const vectorSource = new VectorSource({
+  format: new GeoJSON(),
+  url: function (extent) {
+    return (
+      'https://ahocevar.com/geoserver/wfs?service=WFS&' +
+      'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
+      'outputFormat=application/json&srsname=EPSG:4326&' +
+      'bbox=' +
+      extent.join(',') +
+      ',EPSG:4326'
+    );
+  },
+  strategy: tile(createXYZ({tileSize: 512})),
+});
+
+const vector = new VectorLayer({
+  source: vectorSource,
+  style: new Style({
+    stroke: new Stroke({
+      color: 'rgba(0, 0, 255, 1.0)',
+      width: 2,
+    }),
+  }),
+});
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+const raster = new TileLayer({
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+  }),
+});
+
+const map = new Map({
+  layers: [raster, vector],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [-80.0298, 43.4578],
+    maxZoom: 19,
+    zoom: 12,
+  }),
+});

examples/webgl-sea-level.html

@@ -11,7 +11,7 @@ docs: >
     values ranging from 0 to 1.  The <code>band</code> operator is used to select normalized values
     from a single band.
   </p><p>
-    After converting the normalized RGB values to elevation, the <code>interpolate</code> expression
+    After converting the normalized RGB values to elevation, the <code>case</code> expression
     is used to pick colors to apply at a given elevation.  Instead of using constant
     numeric values as the stops in the colors array, the <code>var</code> operator allows you to
     use a value that can be modified by your application.  When the user drags the

examples/webgl-sea-level.js

@@ -9,7 +9,24 @@ const attributions =
   '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
-const elevation = new TileLayer({
+// band math operates on normalized values from 0-1
+// so we scale by 255 to align with the elevation formula
+// from https://cloud.maptiler.com/tiles/terrain-rgb/
+const elevation = [
+  '+',
+  -10000,
+  [
+    '*',
+    0.1 * 255,
+    [
+      '+',
+      ['*', 256 * 256, ['band', 1]],
+      ['+', ['*', 256, ['band', 2]], ['band', 3]],
+    ],
+  ],
+];
+
+const layer = new TileLayer({
   opacity: 0.6,
   source: new XYZ({
     url:
@@ -23,28 +40,10 @@ const elevation = new TileLayer({
       level: 0,
     },
     color: [
-      'interpolate',
+      'case',
-      ['linear'],
+      // use the `level` style variable to determine the color
-      // band math operates on normalized values from 0-1
+      ['<=', elevation, ['var', 'level']],
-      // so we scale by 255 to align with the elevation formula
-      // from https://cloud.maptiler.com/tiles/terrain-rgb/
-      [
-        '+',
-        -10000,
-        [
-          '*',
-          0.1 * 255,
-          [
-            '+',
-            ['*', 256 * 256, ['band', 1]],
-            ['+', ['*', 256, ['band', 2]], ['band', 3]],
-          ],
-        ],
-      ],
-      // use the `level` style variable as a stop in the color ramp
-      ['var', 'level'],
       [139, 212, 255, 1],
-      ['+', 0.01, ['var', 'level']],
       [139, 212, 255, 0],
     ],
   },
@@ -61,7 +60,7 @@ const map = new Map({
         tileSize: 512,
       }),
     }),
-    elevation,
+    layer,
   ],
   view: new View({
     center: fromLonLat([-122.3267, 37.8377]),
@@ -71,10 +70,12 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
-  elevation.updateStyleVariables({level: parseFloat(control.value)});
+  layer.updateStyleVariables({level: parseFloat(control.value)});
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 
 const locations = document.getElementsByClassName('location');

examples/webgl-shaded-relief.js

@@ -67,10 +67,12 @@ controlIds.forEach(function (id) {
     variables[id] = Number(control.value);
   }
   updateValues();
-  control.addEventListener('input', () => {
+  const listener = function () {
     updateValues();
     shadedRelief.updateStyleVariables(variables);
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
 });
 
 const map = new Map({

examples/webgl-tile-style.js

@@ -38,18 +38,20 @@ const map = new Map({
   }),
 });
 
-for (const name in variables) {
+let variable;
+for (variable in variables) {
+  const name = variable;
   const element = document.getElementById(name);
   const value = variables[name];
   element.value = value.toString();
-  document.getElementById(`${name}-value`).innerText = `(${value})`;
+  document.getElementById(name + '-value').innerText = value.toFixed(2);
-
+  const listener = function (event) {
-  element.addEventListener('input', function (event) {
     const value = parseFloat(event.target.value);
-    document.getElementById(`${name}-value`).innerText = `(${value})`;
+    document.getElementById(name + '-value').innerText = value.toFixed(2);
-
     const updates = {};
     updates[name] = value;
     layer.updateStyleVariables(updates);
-  });
+  };
+  element.addEventListener('input', listener);
+  element.addEventListener('change', listener);
 }

examples/webpack/.eslintrc

@@ -1,9 +0,0 @@
-{
-  "env": {
-    "node": true,
-    "es6": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2017
-  }
-}

examples/webpack/config.mjs

@@ -18,7 +18,7 @@ export default {
       .filter((name) => /^(?!index).*\.html$/.test(name))
       .map((name) => name.replace(/\.html$/, ''))
       .forEach((example) => {
-        entry[example] = `./${example}.js`;
+        entry[example] = ['regenerator-runtime/runtime', `./${example}.js`];
       });
     return entry;
   },
@@ -28,25 +28,13 @@ export default {
       {
         test: /^((?!es2015-)[\s\S])*\.js$/,
         use: {
-          loader: 'buble-loader',
+          loader: 'babel-loader',
           options: {
-            transforms: {
+            presets: [
-              dangerousForOf: true,
+              ['@babel/preset-env', {targets: 'last 2 versions, not dead'}],
-            },
+            ],
           },
         },
-        include: [
-          path.join(baseDir, '..', '..', 'src'),
-          path.join(baseDir, '..'),
-          path.join(
-            baseDir,
-            '..',
-            '..',
-            'node_modules',
-            '@mapbox',
-            'mapbox-gl-style-spec'
-          ),
-        ],
       },
       {
         test: /\.js$/,
@@ -63,10 +51,6 @@ export default {
         // Do not minify examples that inject code into workers
         exclude: [/(color-manipulation|region-growing|raster)\.js/],
         extractComments: false,
-        terserOptions: {
-          // Mangle private members convention with underscore suffix
-          mangle: {properties: {regex: /_$/}},
-        },
       }),
     ],
     runtimeChunk: {

examples/webpack/example-builder.js

@@ -1,5 +1,6 @@
 import assert from 'assert';
 import frontMatter from 'front-matter';
+import fs from 'fs';
 import fse from 'fs-extra';
 import handlebars from 'handlebars';
 import marked from 'marked';
@@ -17,6 +18,11 @@ const isTemplateJs =
   /\/(jquery(-\d+\.\d+\.\d+)?|(bootstrap(\.bundle)?))(\.min)?\.js(\?.*)?$/;
 const isTemplateCss = /\/bootstrap(\.min)?\.css(\?.*)?$/;
 
+const exampleDirContents = fs
+  .readdirSync(path.join(baseDir, '..'))
+  .filter((name) => /^(?!index).*\.html$/.test(name))
+  .map((name) => name.replace(/\.html$/, ''));
+
 let cachedPackageInfo = null;
 async function getPackageInfo() {
   if (cachedPackageInfo) {
@@ -188,7 +194,7 @@ export default class ExampleBuilder {
       }
 
       const name = filename.replace(/\.js$/, '');
-      if (name === 'index' || name === this.common) {
+      if (!exampleDirContents.includes(name)) {
         continue;
       }
 

examples/wmts-dimensions.js

@@ -61,13 +61,11 @@ const map = new Map({
   ],
 });
 
-const updateSourceDimension = function (source, sliderVal) {
+const slider = document.getElementById('slider');
-  source.updateDimensions({'threshold': sliderVal});
+const updateSourceDimension = function () {
-  document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
+  wmtsSource.updateDimensions({'threshold': slider.value});
+  document.getElementById('theinfo').innerHTML = slider.value + ' meters';
 };
-
+slider.addEventListener('input', updateSourceDimension);
-updateSourceDimension(wmtsSource, 10);
+slider.addEventListener('change', updateSourceDimension);
-
+updateSourceDimension();
-document.getElementById('slider').addEventListener('input', function () {
-  updateSourceDimension(wmtsSource, this.value);
-});

examples/wmts.js

@@ -10,9 +10,9 @@ import {getTopLeft, getWidth} from '../src/ol/extent.js';
 const projection = getProjection('EPSG:3857');
 const projectionExtent = projection.getExtent();
 const size = getWidth(projectionExtent) / 256;
-const resolutions = new Array(14);
+const resolutions = new Array(19);
-const matrixIds = new Array(14);
+const matrixIds = new Array(19);
-for (let z = 0; z < 14; ++z) {
+for (let z = 0; z < 19; ++z) {
   // generate resolutions and matrixIds arrays for this WMTS
   resolutions[z] = size / Math.pow(2, z);
   matrixIds[z] = z;
@@ -22,19 +22,16 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new OSM(),
-      opacity: 0.7,
     }),
     new TileLayer({
       opacity: 0.7,
       source: new WMTS({
         attributions:
-          'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/' +
+          'Tiles © <a href="https://mrdata.usgs.gov/geology/state/"' +
-          'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>',
+          ' target="_blank">USGS</a>',
-        url:
+        url: 'https://mrdata.usgs.gov/mapcache/wmts',
-          'https://services.arcgisonline.com/arcgis/rest/' +
+        layer: 'sgmc2',
-          'services/Demographics/USA_Population_Density/MapServer/WMTS/',
+        matrixSet: 'GoogleMapsCompatible',
-        layer: '0',
-        matrixSet: 'EPSG:3857',
         format: 'image/png',
         projection: projection,
         tileGrid: new WMTSTileGrid({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.7.0",
+  "version": "6.9.0",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -23,7 +23,7 @@
     "build-package": "npm run transpile && npm run copy-css && npm run generate-types && node tasks/prepare-package.js",
     "build-index": "shx rm -f build/index.js && npm run build-package && node tasks/generate-index.js",
     "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 && shx mkdir -p build/site && shx cp site/index.html build/site/ && shx mv build/apidoc build/examples build/site/",
+    "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",
@@ -45,34 +45,31 @@
     "url": "https://opencollective.com/openlayers"
   },
   "dependencies": {
-    "geotiff": "^1.0.5",
+    "geotiff": "^1.0.8",
-    "ol-mapbox-style": "^6.4.1",
+    "ol-mapbox-style": "^6.5.1",
     "pbf": "3.2.1",
     "rbush": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
-    "@babel/eslint-parser": "^7.13.14",
     "@babel/preset-env": "^7.4.4",
     "@openlayers/eslint-plugin": "^4.0.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.2",
     "@types/topojson-specification": "^1.0.1",
     "babel-loader": "^8.2.2",
-    "buble": "^0.20.0",
-    "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
-    "clean-css-cli": "5.3.3",
+    "clean-css-cli": "5.4.1",
     "copy-webpack-plugin": "^9.0.0",
     "coverage-istanbul-loader": "^3.0.5",
     "coveralls": "3.1.1",
     "es-main": "^1.0.2",
-    "eslint": "^7.2.0",
+    "eslint": "^7.32.0",
-    "eslint-config-openlayers": "^15.0.0",
+    "eslint-config-openlayers": "^16.0.1",
     "expect.js": "0.3.1",
     "express": "^4.17.1",
     "front-matter": "^4.0.0",
@@ -93,12 +90,12 @@
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
     "loglevelnext": "^5.0.5",
-    "marked": "3.0.2",
+    "marked": "3.0.7",
-    "mocha": "9.1.1",
+    "mocha": "9.1.2",
     "pixelmatch": "^5.1.0",
     "pngjs": "^6.0.0",
     "proj4": "^2.7.5",
-    "puppeteer": "10.2.0",
+    "puppeteer": "10.4.0",
     "regenerator-runtime": "^0.13.9",
     "rollup": "^2.42.3",
     "rollup-plugin-terser": "^7.0.2",
@@ -106,6 +103,7 @@
     "shx": "^0.3.2",
     "sinon": "^11.1.1",
     "terser-webpack-plugin": "^5.1.1",
+    "threads": "^1.6.5",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
     "webpack": "^5.27.2",
@@ -118,10 +116,6 @@
   },
   "eslintConfig": {
     "extends": "openlayers",
-    "parser": "@babel/eslint-parser",
-    "parserOptions": {
-      "requireConfigFile": false
-    },
     "plugins": [
       "@openlayers"
     ],

site/index.html

@@ -4,11 +4,32 @@
     <title>OpenLayers</title>
     <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
     <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>
+    <!-- The line below is 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,URL,TextDecoder,Number.isInteger"></script>    
   </head>
   <body>
     <ul>
       <li><a href="./apidoc/">API Docs</a></li>
       <li><a href="./examples/">Examples</a></li>
     </ul>
+    <div id="map" style="width:400px;height:400px;"></div>
+    <script src="./legacy/ol.js"></script>
+    <script>
+      new ol.Map({
+        target: 'map',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.OSM()
+          })
+        ],
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 0
+        })
+      })
+    </script>
   </body>
 </html>

src/ol/Collection.js

@@ -81,12 +81,12 @@ class Collection extends BaseObject {
     super();
 
     /***
-     * @type {CollectionOnSignature<import("./Observable.js").OnReturn>}
+     * @type {CollectionOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {CollectionOnSignature<import("./Observable.js").OnReturn>}
+     * @type {CollectionOnSignature<import("./events").EventsKey>}
      */
     this.once;
 

src/ol/DataTile.js

@@ -5,8 +5,9 @@ import Tile from './Tile.js';
 import TileState from './TileState.js';
 
 /**
- * Data that can be used with a DataTile.
+ * Data that can be used with a DataTile.  For increased browser compatibility, use
- * @typedef {Uint8Array|Uint8ClampedArray|DataView} Data
+ * Uint8Array instead of Uint8ClampedArray where possible.
+ * @typedef {Uint8Array|Uint8ClampedArray|Float32Array|DataView} Data
  */
 
 /**

src/ol/Feature.js

@@ -83,12 +83,12 @@ class Feature extends BaseObject {
     super();
 
     /***
-     * @type {FeatureOnSignature<import("./Observable.js").OnReturn>}
+     * @type {FeatureOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {FeatureOnSignature<import("./Observable.js").OnReturn>}
+     * @type {FeatureOnSignature<import("./events").EventsKey>}
      */
     this.once;
 

src/ol/Geolocation.js

@@ -107,12 +107,12 @@ class Geolocation extends BaseObject {
     super();
 
     /***
-     * @type {GeolocationOnSignature<import("./Observable.js").OnReturn>}
+     * @type {GeolocationOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {GeolocationOnSignature<import("./Observable.js").OnReturn>}
+     * @type {GeolocationOnSignature<import("./events").EventsKey>}
      */
     this.once;
 

src/ol/Object.js

@@ -95,12 +95,12 @@ class BaseObject extends Observable {
     super();
 
     /***
-     * @type {ObjectOnSignature<import("./Observable.js").OnReturn>}
+     * @type {ObjectOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {ObjectOnSignature<import("./Observable.js").OnReturn>}
+     * @type {ObjectOnSignature<import("./events").EventsKey>}
      */
     this.once;
 

src/ol/Observable.js

@@ -9,23 +9,24 @@ import {listen, listenOnce, unlistenByKey} from './events.js';
  * @template {string} Type
  * @template {Event|import("./events/Event.js").default} EventClass
  * @template Return
- * @typedef {(type: Type|Type[], listener: (event: EventClass) => ?) => Return} OnSignature
+ * @typedef {(type: Type, listener: (event: EventClass) => ?) => Return} OnSignature
  */
 
 /***
  * @template {string} Type
  * @template Return
- * @typedef {(type: Type[], listener: (event: Event|import("./events/Event").default) => ?) => Return} CombinedOnSignature
+ * @typedef {(type: Type[], listener: (event: Event|import("./events/Event").default) => ?) => Return extends void ? void : Return[]} CombinedOnSignature
- */
-
-/***
- * @typedef {import("./events").EventsKey|Array<import("./events").EventsKey>} OnReturn
  */
 
 /**
  * @typedef {'change'|'error'} EventTypes
  */
 
+/***
+ * @template Return
+ * @typedef {OnSignature<EventTypes, import("./events/Event.js").default, Return> & CombinedOnSignature<EventTypes, Return>} ObservableOnSignature
+ */
+
 /**
  * @classdesc
  * Abstract base class; normally only used for creating subclasses and not
@@ -41,20 +42,17 @@ class Observable extends EventTarget {
   constructor() {
     super();
 
-    /***
+    this.on =
-     * @type {OnSignature<EventTypes, import("./events/Event.js").default, OnReturn>}
+      /** @type {ObservableOnSignature<import("./events").EventsKey>} */ (
-     */
+        this.onInternal
-    this.on = this.onInternal;
+      );
 
-    /***
+    this.once =
-     * @type {OnSignature<EventTypes, import("./events/Event.js").default, OnReturn>}
+      /** @type {ObservableOnSignature<import("./events").EventsKey>} */ (
-     */
+        this.onceInternal
-    this.once = this.onceInternal;
+      );
 
-    /***
+    this.un = /** @type {ObservableOnSignature<void>} */ (this.unInternal);
-     * @type {OnSignature<EventTypes, import("./events/Event.js").default, void>}
-     */
-    this.un = this.unInternal;
 
     /**
      * @private
@@ -84,7 +82,7 @@ class Observable extends EventTarget {
 
   /**
    * @param {string|Array<string>} type Type.
-   * @param {function(?): ?} listener Listener.
+   * @param {function((Event|import("./events/Event").default)): ?} listener Listener.
    * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Event key.
    * @protected
    */
@@ -103,7 +101,7 @@ class Observable extends EventTarget {
 
   /**
    * @param {string|Array<string>} type Type.
-   * @param {function(?): ?} listener Listener.
+   * @param {function((Event|import("./events/Event").default)): ?} listener Listener.
    * @return {import("./events.js").EventsKey|Array<import("./events.js").EventsKey>} Event key.
    * @protected
    */
@@ -125,7 +123,7 @@ class Observable extends EventTarget {
   /**
    * Unlisten for a certain type of event.
    * @param {string|Array<string>} type Type.
-   * @param {function(?): ?} listener Listener.
+   * @param {function((Event|import("./events/Event").default)): ?} listener Listener.
    * @protected
    */
   unInternal(type, listener) {

src/ol/Overlay.js

@@ -123,12 +123,12 @@ class Overlay extends BaseObject {
     super();
 
     /***
-     * @type {OverlayOnSignature<import("./Observable").OnReturn>}
+     * @type {OverlayOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {OverlayOnSignature<import("./Observable").OnReturn>}
+     * @type {OverlayOnSignature<import("./events").EventsKey>}
      */
     this.once;
 

src/ol/PluggableMap.js

@@ -48,6 +48,7 @@ import {removeNode} from './dom.js';
  * @property {import("./transform.js").Transform} coordinateToPixelTransform CoordinateToPixelTransform.
  * @property {import("rbush").default} declutterTree DeclutterTree.
  * @property {null|import("./extent.js").Extent} extent Extent.
+ * @property {import("./extent.js").Extent} [nextExtent] Next extent during an animation series.
  * @property {number} index Index.
  * @property {Array<import("./layer/Layer.js").State>} layerStatesArray LayerStatesArray.
  * @property {number} layerIndex LayerIndex.
@@ -137,7 +138,7 @@ import {removeNode} from './dom.js';
  * element itself or the `id` of the element. If not specified at construction
  * time, {@link module:ol/Map~Map#setTarget} must be called for the map to be
  * rendered. If passed by element, the container can be in a secondary document.
- * @property {View} [view] The map's view.  No layer sources will be
+ * @property {View|Promise<import("./View.js").ViewOptions>} [view] The map's view.  No layer sources will be
  * fetched unless this is specified at construction time or through
  * {@link module:ol/Map~Map#setView}.
  */
@@ -158,12 +159,12 @@ class PluggableMap extends BaseObject {
     super();
 
     /***
-     * @type {PluggableMapOnSignature<import("./Observable.js").OnReturn>}
+     * @type {PluggableMapOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {PluggableMapOnSignature<import("./Observable.js").OnReturn>}
+     * @type {PluggableMapOnSignature<import("./events").EventsKey>}
      */
     this.once;
 
@@ -388,6 +389,13 @@ class PluggableMap extends BaseObject {
     // is "defined" already.
     this.setProperties(optionsInternal.values);
 
+    const map = this;
+    if (options.view && !(options.view instanceof View)) {
+      options.view.then(function (viewOptions) {
+        map.setView(new View(viewOptions));
+      });
+    }
+
     this.controls.addEventListener(
       CollectionEventType.ADD,
       /**
@@ -840,6 +848,23 @@ class PluggableMap extends BaseObject {
     return /** @type {LayerGroup} */ (this.get(MapProperty.LAYERGROUP));
   }
 
+  /**
+   * Clear any existing layers and add layers to the map.
+   * @param {Array<import("./layer/Base.js").default>|Collection<import("./layer/Base.js").default>} layers The layers to be added to the map.
+   * @api
+   */
+  setLayers(layers) {
+    const group = this.getLayerGroup();
+    if (layers instanceof Collection) {
+      group.setLayers(layers);
+      return;
+    }
+
+    const collection = group.getLayers();
+    collection.clear();
+    collection.extend(layers);
+  }
+
   /**
    * Get the collection of layers associated with this map.
    * @return {!Collection<import("./layer/Base.js").default>} Layers.
@@ -1412,6 +1437,18 @@ class PluggableMap extends BaseObject {
         viewHints: viewHints,
         wantedTiles: {},
       };
+      if (viewState.nextCenter && viewState.nextResolution) {
+        const rotation = isNaN(viewState.nextRotation)
+          ? viewState.rotation
+          : viewState.nextRotation;
+
+        frameState.nextExtent = getForViewAndSize(
+          viewState.nextCenter,
+          viewState.nextResolution,
+          rotation,
+          size
+        );
+      }
     }
 
     this.frameState_ = frameState;
@@ -1496,12 +1533,24 @@ class PluggableMap extends BaseObject {
 
   /**
    * Set the view for this map.
-   * @param {View} view The view that controls this map.
+   * @param {View|Promise<import("./View.js").ViewOptions>} view The view that controls this map.
+   * It is also possible to pass a promise that resolves to options for constructing a view.  This
+   * alternative allows view properties to be resolved by sources or other components that load
+   * view-related metadata.
    * @observable
    * @api
    */
   setView(view) {
-    this.set(MapProperty.VIEW, view);
+    if (!view || view instanceof View) {
+      this.set(MapProperty.VIEW, view);
+      return;
+    }
+    this.set(MapProperty.VIEW, new View());
+
+    const map = this;
+    view.then(function (viewOptions) {
+      map.setView(new View(viewOptions));
+    });
   }
 
   /**
@@ -1600,7 +1649,7 @@ function createOptionsInternal(options) {
   values[MapProperty.TARGET] = options.target;
 
   values[MapProperty.VIEW] =
-    options.view !== undefined ? options.view : new View();
+    options.view instanceof View ? options.view : new View();
 
   let controls;
   if (options.controls !== undefined) {

src/ol/View.js

@@ -208,6 +208,9 @@ import {fromExtent as polygonFromExtent} from './geom/Polygon.js';
  * @property {import("./coordinate.js").Coordinate} center Center.
  * @property {import("./proj/Projection.js").default} projection Projection.
  * @property {number} resolution Resolution.
+ * @property {import("./coordinate.js").Coordinate} [nextCenter] The next center during an animation series.
+ * @property {number} [nextResolution] The next resolution during an animation series.
+ * @property {number} [nextRotation] The next rotation during an animation series.
  * @property {number} rotation Rotation.
  * @property {number} zoom Zoom.
  */
@@ -309,12 +312,12 @@ class View extends BaseObject {
     super();
 
     /***
-     * @type {ViewOnSignature<import("./Observable.js").OnReturn>}
+     * @type {ViewOnSignature<import("./events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {ViewOnSignature<import("./Observable.js").OnReturn>}
+     * @type {ViewOnSignature<import("./events").EventsKey>}
      */
     this.once;
 
@@ -374,6 +377,24 @@ class View extends BaseObject {
      */
     this.targetRotation_;
 
+    /**
+     * @private
+     * @type {import("./coordinate.js").Coordinate}
+     */
+    this.nextCenter_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.nextResolution_;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.nextRotation_;
+
     /**
      * @private
      * @type {import("./coordinate.js").Coordinate|undefined}
@@ -600,29 +621,36 @@ class View extends BaseObject {
       callback = arguments[animationCount - 1];
       --animationCount;
     }
-    if (!this.isDef()) {
+
+    let i = 0;
+    for (; i < animationCount && !this.isDef(); ++i) {
       // if view properties are not yet set, shortcut to the final state
-      const state = arguments[animationCount - 1];
+      const state = arguments[i];
       if (state.center) {
         this.setCenterInternal(state.center);
       }
       if (state.zoom !== undefined) {
         this.setZoom(state.zoom);
+      } else if (state.resolution) {
+        this.setResolution(state.resolution);
       }
       if (state.rotation !== undefined) {
         this.setRotation(state.rotation);
       }
+    }
+    if (i === animationCount) {
       if (callback) {
         animationCallback(callback, true);
       }
       return;
     }
+
     let start = Date.now();
     let center = this.targetCenter_.slice();
     let resolution = this.targetResolution_;
     let rotation = this.targetRotation_;
     const series = [];
-    for (let i = 0; i < animationCount; ++i) {
+    for (; i < animationCount; ++i) {
       const options = /** @type {AnimationOptions} */ (arguments[i]);
 
       const animation = {
@@ -714,6 +742,9 @@ class View extends BaseObject {
     }
     this.animations_.length = 0;
     this.cancelAnchor_ = anchor;
+    this.nextCenter_ = null;
+    this.nextResolution_ = NaN;
+    this.nextRotation_ = NaN;
   }
 
   /**
@@ -752,6 +783,7 @@ class View extends BaseObject {
           const y0 = animation.sourceCenter[1];
           const x1 = animation.targetCenter[0];
           const y1 = animation.targetCenter[1];
+          this.nextCenter_ = animation.targetCenter;
           const x = x0 + progress * (x1 - x0);
           const y = y0 + progress * (y1 - y0);
           this.targetCenter_ = [x, y];
@@ -776,6 +808,7 @@ class View extends BaseObject {
               animation.anchor
             );
           }
+          this.nextResolution_ = animation.targetResolution;
           this.targetResolution_ = resolution;
           this.applyTargetState_(true);
         }
@@ -800,6 +833,7 @@ class View extends BaseObject {
               animation.anchor
             );
           }
+          this.nextRotation_ = animation.targetRotation;
           this.targetRotation_ = rotation;
         }
         this.applyTargetState_(true);
@@ -811,6 +845,9 @@ class View extends BaseObject {
       if (seriesComplete) {
         this.animations_[i] = null;
         this.setHint(ViewHint.ANIMATING, -1);
+        this.nextCenter_ = null;
+        this.nextResolution_ = NaN;
+        this.nextRotation_ = NaN;
         const callback = series[0].callback;
         if (callback) {
           animationCallback(callback, true);
@@ -1191,7 +1228,7 @@ class View extends BaseObject {
    */
   getState() {
     const projection = this.getProjection();
-    const resolution = /** @type {number} */ (this.getResolution());
+    const resolution = this.getResolution();
     const rotation = this.getRotation();
     let center = /** @type {import("./coordinate.js").Coordinate} */ (
       this.getCenterInternal()
@@ -1211,6 +1248,9 @@ class View extends BaseObject {
       center: center.slice(0),
       projection: projection !== undefined ? projection : null,
       resolution: resolution,
+      nextCenter: this.nextCenter_,
+      nextResolution: this.nextResolution_,
+      nextRotation: this.nextRotation_,
       rotation: rotation,
       zoom: this.getZoom(),
     };

src/ol/control/Attribution.js

@@ -20,12 +20,12 @@ import {removeChildren, replaceNode} from '../dom.js';
  * @property {boolean} [collapsed=true] Specify if attributions should
  * be collapsed at startup.
  * @property {string} [tipLabel='Attributions'] Text label to use for the button tip.
- * @property {string} [label='i'] Text label to use for the
+ * @property {string|HTMLElement} [label='i'] Text label to use for the
  * collapsed attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [expandClassName=className + '-expand'] CSS class name for the
  * collapsed attributions button.
- * @property {string|HTMLElement} [collapseLabel='»'] Text label to use
+ * @property {string|HTMLElement} [collapseLabel='›'] Text label to use
  * for the expanded attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [collapseClassName=className + '-collapse'] CSS class name for the
@@ -105,7 +105,7 @@ class Attribution extends Control {
         : className + '-expand';
 
     const collapseLabel =
-      options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
+      options.collapseLabel !== undefined ? options.collapseLabel : '\u203A';
 
     const collapseClassName =
       options.collapseClassName !== undefined

src/ol/control/Control.js

@@ -98,7 +98,7 @@ class Control extends BaseObject {
 
   /**
    * Get the map associated with this control.
-   * @return {import("../PluggableMap.js").default} Map.
+   * @return {import("../PluggableMap.js").default|undefined} Map.
    * @api
    */
   getMap() {
@@ -109,7 +109,7 @@ class Control extends BaseObject {
    * Remove the control 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} [map] Map.
    * @api
    */
   setMap(map) {

src/ol/control/FullScreen.js

@@ -44,15 +44,15 @@ const FullScreenEventType = {
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-full-screen'] CSS class name.
- * @property {string|Text} [label='\u2922'] Text label to use for the button.
+ * @property {string|Text|HTMLElement} [label='\u2922'] Text label to use for the button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {string|Text} [labelActive='\u00d7'] Text label to use for the
+ * @property {string|Text|HTMLElement} [labelActive='\u00d7'] Text label to use for the
  * button when full-screen is active.
+ * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [activeClassName=className + '-true'] CSS class name for the button
  * when full-screen is active.
  * @property {string} [inactiveClassName=className + '-false'] CSS class name for the button
  * when full-screen is inactive.
- * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [tipLabel='Toggle full-screen'] Text label to use for the button tip.
  * @property {boolean} [keys=false] Full keyboard access.
  * @property {HTMLElement|string} [target] Specify a target if you want the
@@ -90,12 +90,12 @@ class FullScreen extends Control {
     });
 
     /***
-     * @type {FullScreenOnSignature<import("../Observable.js").OnReturn>}
+     * @type {FullScreenOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {FullScreenOnSignature<import("../Observable.js").OnReturn>}
+     * @type {FullScreenOnSignature<import("../events").EventsKey>}
      */
     this.once;
 
@@ -133,7 +133,7 @@ class FullScreen extends Control {
 
     /**
      * @private
-     * @type {Text}
+     * @type {Text|HTMLElement}
      */
     this.labelNode_ =
       typeof label === 'string' ? document.createTextNode(label) : label;
@@ -143,7 +143,7 @@ class FullScreen extends Control {
 
     /**
      * @private
-     * @type {Text}
+     * @type {Text|HTMLElement}
      */
     this.labelActiveNode_ =
       typeof labelActive === 'string'

src/ol/control/MousePosition.js

@@ -80,12 +80,12 @@ class MousePosition extends Control {
     });
 
     /***
-     * @type {MousePositionOnSignature<import("../Observable.js").OnReturn>}
+     * @type {MousePositionOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {MousePositionOnSignature<import("../Observable.js").OnReturn>}
+     * @type {MousePositionOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/control/OverviewMap.js

@@ -48,12 +48,12 @@ class ControlledMap extends PluggableMap {
  * @typedef {Object} Options
  * @property {string} [className='ol-overviewmap'] CSS class name.
  * @property {boolean} [collapsed=true] Whether the control should start collapsed or not (expanded).
- * @property {string|HTMLElement} [collapseLabel='«'] Text label to use for the
+ * @property {string|HTMLElement} [collapseLabel='‹'] Text label to use for the
  * expanded overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {boolean} [collapsible=true] Whether the control can be collapsed or not.
- * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed
+ * @property {string|HTMLElement} [label='›'] Text label to use for the collapsed
  * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} [layers]
+ * @property {Array<import("../layer/Base.js").default>|import("../Collection.js").default<import("../layer/Base.js").default>} [layers]
  * Layers for the overview map.
  * @property {function(import("../MapEvent.js").default):void} [render] Function called when the control
  * should be re-rendered. This is called in a `requestAnimationFrame` callback.
@@ -127,7 +127,7 @@ class OverviewMap extends Control {
       options.tipLabel !== undefined ? options.tipLabel : 'Overview map';
 
     const collapseLabel =
-      options.collapseLabel !== undefined ? options.collapseLabel : '\u00AB';
+      options.collapseLabel !== undefined ? options.collapseLabel : '\u2039';
 
     if (typeof collapseLabel === 'string') {
       /**
@@ -140,7 +140,7 @@ class OverviewMap extends Control {
       this.collapseLabel_ = collapseLabel;
     }
 
-    const label = options.label !== undefined ? options.label : '\u00BB';
+    const label = options.label !== undefined ? options.label : '\u203A';
 
     if (typeof label === 'string') {
       /**

src/ol/control/ScaleLine.js

@@ -100,12 +100,12 @@ class ScaleLine extends Control {
     });
 
     /***
-     * @type {ScaleLineOnSignature<import("../Observable.js").OnReturn>}
+     * @type {ScaleLineOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {ScaleLineOnSignature<import("../Observable.js").OnReturn>}
+     * @type {ScaleLineOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/control/Zoom.js

@@ -14,7 +14,7 @@ import {easeOut} from '../easing.js';
  * @property {string} [zoomOutClassName=className + '-out'] CSS class name for the zoom-out button.
  * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in
  * button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button.
+ * @property {string|HTMLElement} [zoomOutLabel='–'] Text label to use for the zoom-out button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [zoomInTipLabel='Zoom in'] Text label to use for the button tip.
  * @property {string} [zoomOutTipLabel='Zoom out'] Text label to use for the button tip.
@@ -61,7 +61,7 @@ class Zoom extends Control {
     const zoomInLabel =
       options.zoomInLabel !== undefined ? options.zoomInLabel : '+';
     const zoomOutLabel =
-      options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2212';
+      options.zoomOutLabel !== undefined ? options.zoomOutLabel : '\u2013';
 
     const zoomInTipLabel =
       options.zoomInTipLabel !== undefined ? options.zoomInTipLabel : 'Zoom in';

src/ol/css.js

@@ -114,3 +114,11 @@ export const getFontParameters = function (fontSpec) {
   style.families = style.family.split(/,\s?/);
   return style;
 };
+
+/**
+ * @param {number} opacity Opacity (0..1).
+ * @return {string} CSS opacity.
+ */
+export function cssOpacity(opacity) {
+  return opacity === 1 ? '' : String(Math.round(opacity * 100) / 100);
+}

src/ol/dom.js

@@ -27,7 +27,7 @@ export function createCanvasContext2D(
     canvas = new OffscreenCanvas(opt_width || 300, opt_height || 300);
   } else {
     canvas = document.createElement('canvas');
-    canvas.style.all = 'initial';
+    canvas.style.all = 'unset';
   }
   if (opt_width) {
     canvas.width = opt_width;

src/ol/format/GMLBase.js

@@ -90,6 +90,7 @@ const ONLY_WHITESPACE_RE = /^[\s\xa0]*$/;
  * is shared with versioned format classes GML2 and GML3.
  *
  * @abstract
+ * @api
  */
 class GMLBase extends XMLFeature {
   /**

src/ol/format/IIIFInfo.js

@@ -40,7 +40,7 @@ import {includes} from '../array.js';
  */
 
 /**
- * @typedef {Object<string,string|number|Array<number|string|IiifProfile>|Object<string, number>|TileInfo>}
+ * @typedef {Object<string,string|number|Array<number|string|IiifProfile|Object<string, number>|TileInfo>>}
  *    ImageInformationResponse
  */
 

src/ol/geom/flat/textpath.js

@@ -54,7 +54,8 @@ export function drawTextOnPath(
     advance();
   } while (offset < end - stride && segmentM + segmentLength < startM);
 
-  let interpolate = (startM - segmentM) / segmentLength;
+  let interpolate =
+    segmentLength === 0 ? 0 : (startM - segmentM) / segmentLength;
   const beginX = lerp(x1, x2, interpolate);
   const beginY = lerp(y1, y2, interpolate);
 
@@ -64,7 +65,7 @@ export function drawTextOnPath(
   while (offset < end - stride && segmentM + segmentLength < endM) {
     advance();
   }
-  interpolate = (endM - segmentM) / segmentLength;
+  interpolate = segmentLength === 0 ? 0 : (endM - segmentM) / segmentLength;
   const endX = lerp(x1, x2, interpolate);
   const endY = lerp(y1, y2, interpolate);
 
@@ -88,11 +89,12 @@ export function drawTextOnPath(
   x2 = flatCoordinates[offset];
   y2 = flatCoordinates[offset + 1];
 
+  let previousAngle;
   // All on the same segment
   if (singleSegment) {
     advance();
 
-    let previousAngle = Math.atan2(y2 - y1, x2 - x1);
+    previousAngle = Math.atan2(y2 - y1, x2 - x1);
     if (reverse) {
       previousAngle += previousAngle > 0 ? -PI : PI;
     }
@@ -102,7 +104,6 @@ export function drawTextOnPath(
     return result;
   }
 
-  let previousAngle;
   for (let i = 0, ii = text.length; i < ii; ) {
     advance();
     let angle = Math.atan2(y2 - y1, x2 - x1);
@@ -137,7 +138,10 @@ export function drawTextOnPath(
     const chars = reverse
       ? text.substring(ii - iStart, ii - i)
       : text.substring(iStart, i);
-    interpolate = (startM + charLength / 2 - segmentM) / segmentLength;
+    interpolate =
+      segmentLength === 0
+        ? 0
+        : (startM + charLength / 2 - segmentM) / segmentLength;
     const x = lerp(x1, x2, interpolate);
     const y = lerp(y1, y2, interpolate);
     result.push([x, y, charLength / 2, angle, chars]);

src/ol/interaction/DragAndDrop.js

@@ -89,7 +89,7 @@ export class DragAndDropEvent extends Event {
  * Handles input of vector data by drag and drop.
  *
  * Note that the DragAndDrop interaction uses the TextDecoder() constructor if the supplied
- * combinnation of formats read both text string and ArrayBuffer sources. Older browsers such
+ * combination of formats read both text string and ArrayBuffer sources. Older browsers such
  * as IE which do not support this will need a TextDecoder polyfill to be loaded before use.
  *
  * @api
@@ -108,12 +108,12 @@ class DragAndDrop extends Interaction {
     });
 
     /***
-     * @type {DragAndDropOnSignature<import("../Observable").OnReturn>}
+     * @type {DragAndDropOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {DragAndDropOnSignature<import("../Observable").OnReturn>}
+     * @type {DragAndDropOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/DragBox.js

@@ -123,12 +123,12 @@ class DragBox extends PointerInteraction {
     super();
 
     /***
-     * @type {DragBoxOnSignature<import("../Observable").OnReturn>}
+     * @type {DragBoxOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {DragBoxOnSignature<import("../Observable").OnReturn>}
+     * @type {DragBoxOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/Draw.js

@@ -204,12 +204,12 @@ class Draw extends PointerInteraction {
     super(pointerOptions);
 
     /***
-     * @type {DrawOnSignature<import("../Observable").OnReturn>}
+     * @type {DrawOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {DrawOnSignature<import("../Observable").OnReturn>}
+     * @type {DrawOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/Extent.js

@@ -103,12 +103,12 @@ class Extent extends PointerInteraction {
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
     /***
-     * @type {ExtentOnSignature<import("../Observable.js").OnReturn>}
+     * @type {ExtentOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {ExtentOnSignature<import("../Observable.js").OnReturn>}
+     * @type {ExtentOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/Interaction.js

@@ -46,12 +46,12 @@ class Interaction extends BaseObject {
     super();
 
     /***
-     * @type {InteractionOnSignature<import("../Observable.js").OnReturn>}
+     * @type {InteractionOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {InteractionOnSignature<import("../Observable.js").OnReturn>}
+     * @type {InteractionOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/Modify.js

@@ -203,12 +203,12 @@ class Modify extends PointerInteraction {
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
     /***
-     * @type {ModifyOnSignature<import("../Observable.js").OnReturn>}
+     * @type {ModifyOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {ModifyOnSignature<import("../Observable.js").OnReturn>}
+     * @type {ModifyOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/Select.js

@@ -154,8 +154,6 @@ const originalFeatureStyles = {};
  * `toggle`, `add`/`remove`, and `multi` options; a `layers` filter; and a
  * further feature filter using the `filter` option.
  *
- * Selected features are added to an internal unmanaged layer.
- *
  * @fires SelectEvent
  * @api
  */
@@ -167,12 +165,12 @@ class Select extends Interaction {
     super();
 
     /***
-     * @type {SelectOnSignature<import("../Observable.js").OnReturn>}
+     * @type {SelectOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {SelectOnSignature<import("../Observable.js").OnReturn>}
+     * @type {SelectOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/interaction/Translate.js

@@ -140,12 +140,12 @@ class Translate extends PointerInteraction {
     super(/** @type {import("./Pointer.js").Options} */ (options));
 
     /***
-     * @type {TranslateOnSignature<import("../Observable.js").OnReturn>}
+     * @type {TranslateOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {TranslateOnSignature<import("../Observable.js").OnReturn>}
+     * @type {TranslateOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/layer/Base.js

@@ -60,12 +60,12 @@ class BaseLayer extends BaseObject {
     super();
 
     /***
-     * @type {BaseLayerOnSignature<import("../Observable.js").OnReturn>}
+     * @type {BaseLayerOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {BaseLayerOnSignature<import("../Observable.js").OnReturn>}
+     * @type {BaseLayerOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/layer/BaseTile.js

@@ -72,12 +72,12 @@ class BaseTileLayer extends Layer {
     super(baseOptions);
 
     /***
-     * @type {BaseTileLayerOnSignature<import("../Observable.js").OnReturn>}
+     * @type {BaseTileLayerOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {BaseTileLayerOnSignature<import("../Observable.js").OnReturn>}
+     * @type {BaseTileLayerOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/layer/Group.js

@@ -73,12 +73,12 @@ class LayerGroup extends BaseLayer {
     super(baseOptions);
 
     /***
-     * @type {GroupOnSignature<import("../Observable.js").OnReturn>}
+     * @type {GroupOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {GroupOnSignature<import("../Observable.js").OnReturn>}
+     * @type {GroupOnSignature<import("../events").EventsKey>}
      */
     this.once;
 

src/ol/layer/Layer.js

@@ -79,7 +79,7 @@ import {listen, unlistenByKey} from '../events.js';
  * displayed, irrespective of the source of that data.
  *
  * Layers are usually added to a map with {@link import("../PluggableMap.js").default#addLayer map.addLayer()}. Components
- * like {@link module:ol/interaction/Select~Select} use unmanaged layers
+ * like {@link module:ol/interaction/Draw~Draw} use unmanaged layers
  * internally. These unmanaged layers are associated with the map using
  * {@link module:ol/layer/Layer~Layer#setMap} instead.
  *
@@ -107,12 +107,12 @@ class Layer extends BaseLayer {
     super(baseOptions);
 
     /***
-     * @type {LayerOnSignature<import("../Observable.js").OnReturn>}
+     * @type {LayerOnSignature<import("../events").EventsKey>}
      */
     this.on;
 
     /***
-     * @type {LayerOnSignature<import("../Observable.js").OnReturn>}
+     * @type {LayerOnSignature<import("../events").EventsKey>}
      */
     this.once;
 
@@ -348,6 +348,11 @@ class Layer extends BaseLayer {
    * Clean up.
    */
   disposeInternal() {
+    if (this.renderer_) {
+      this.renderer_.dispose();
+      delete this.renderer_;
+    }
+
     this.setSource(null);
     super.disposeInternal();
   }