Update package version to 6.8.1

Controls inherit font size from parent

README.md

@@ -70,39 +70,20 @@ OpenLayers appreciates contributions of all kinds.  We especially want to thank
 
 <br>
 
+[![ela-compil logo](./sponsor-logos/ela-compil.png)](https://ela.pl/)
+
+> We develop leading Physical Security Information Management (PSIM) software.
+> OpenLayers is the core of our map engine and we love it! 
+> https://elacompil.recruitee.com/
+
+<br>
+
 See our [GitHub sponsors page](https://github.com/sponsors/openlayers) or [Open Collective](https://opencollective.com/openlayers/contribute/sponsors-214/checkout) if you too are interested in becoming a regular sponsor.
 
 ## ES Modules
 
 The `ol` package contains a `src/` folder with the sources, authored as [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). To use these untranspiled sources, either import modules from `ol/src` instead of `ol`, or configure your bundler with an alias pointing to `ol/src` for the `ol` package.
 
-## IntelliSense (VS Code) support
-
-The untranspiled sources in the `src/` folder are JSDoc type annotated. For applications authored in JavaScript, VS Code can get type definitions from these sources with a properly configured `jsconfig.json` in the project root:
-
-<details><summary>jsconfig.json</summary>
-
-```json
-{
-  "compilerOptions": {
-    "checkJs": true,
-    "baseUrl": "./",
-    "paths": {
-      "ol": ["node_modules/ol/src"],
-      "ol/*": ["node_modules/ol/src/*"]
-    }
-  },
-  "include": [
-    "**/*.js",
-    "node_modules/ol/**/*.js"
-  ],
-  "typeAcquisition": {
-    "exclude": ["ol"]
-  }
-}
-```
-</details>
-
 ## TypeScript support
 
 The [ol package](https://npmjs.com/package/ol) includes auto-generated TypeScript declarations as `*.d.ts` files.
@@ -121,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,6 +1,12 @@
 ## Upgrade notes
 
-### Next version
+### 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.
 
 ### v6.6.0
 
@@ -22,7 +28,7 @@ The `undefinedHTML` option for the MousePosition control has been deprecated and
 
 #### New `placeholder` option for the MousePosition control
 
-When the mouse position is not available, the control renders a non-breaking space.  To render somthing else instead,
+When the mouse position is not available, the control renders a non-breaking space.  To render something else instead,
 set the `placeholder` option.  If you want to retain the last position when the mouse leaves the viewport, set
 `placeholder: false`.  This will be the default behavior in a future release.
 

changelog/v6.6.0.md

@@ -1,6 +1,6 @@
 # 6.6.0
 
-With more than 160 pull requests from 14 contributors, this release brings improved support for using OpenLayers in Node.js enviromnents, a new WKB (well knowm binary) format, TypeScript declarations in the ol package, and more efficient vector tile rendering. In addition, several examples were added or improved, and many bugs were fixed.
+With more than 160 pull requests from 14 contributors, this release brings improved support for using OpenLayers in Node.js environments, a new WKB (well known binary) format, TypeScript declarations in the ol package, and more efficient vector tile rendering. In addition, several examples were added or improved, and many bugs were fixed.
 
 ## Upgrade notes
 
@@ -22,7 +22,7 @@ The `undefinedHTML` option for the MousePosition control has been deprecated and
 
 #### New `placeholder` option for the MousePosition control
 
-When the mouse position is not available, the control renders a non-breaking space.  To render somthing else instead,
+When the mouse position is not available, the control renders a non-breaking space.  To render something else instead,
 set the `placeholder` option.  If you want to retain the last position when the mouse leaves the viewport, set
 `placeholder: false`.  This will be the default behavior in a future release.
 
@@ -43,7 +43,7 @@ The `placeholder` option has no effect if the deprecated `undefinedHTML` option
  * More efficient vector tile rendering to save battery on mobile devices and memory.
  * New 'properties' option on layers for easier use of arbitrary properties in typed environments.
  * Hit detection support when using OffscreenCanvas and workers for rendering.
- * The [ol](https://npmjs.com/package/ol) now uses `"type": "module"` in `package.json` for easier use of OpenLayers in Node.js.
+ * The [ol package](https://npmjs.com/package/ol) now uses `"type": "module"` in `package.json` for easier use of OpenLayers in Node.js.
  * New WKB (Well-Known Binary) format parser and serializer.
  * Console warning when map container's width or height are zero.
  * New `snapToPointer` option on the `Modify` interaction to control user experience when clicking a vertex far away from its center.

changelog/v6.6.1.md

@@ -0,0 +1,26 @@
+# 6.6.1
+
+This is a bugfix release which brings improvements to the included TypeScript types, and fixes two minor issues with the Draw interaction and hit detection of regular shape symbols.
+
+## List of all changes
+ * [#12498](https://github.com/openlayers/openlayers/pull/12498) - CanvasLayerRenderer: Forward LayerType type parameter to LayerRenderer ([@bryantevans00](https://github.com/bryantevans00))
+ * [#12518](https://github.com/openlayers/openlayers/pull/12518) - VectorEventType: Add 'changefeature' in @typedef ([@DaniEll-AT](https://github.com/DaniEll-AT))
+ * [#12517](https://github.com/openlayers/openlayers/pull/12517) - Update ela-compil sponsors section of README ([@ela-compil](https://github.com/ela-compil))
+ * [#12511](https://github.com/openlayers/openlayers/pull/12511) - Add ela-compil to sponsors section of README ([@ahocevar](https://github.com/ahocevar))
+ * [#12513](https://github.com/openlayers/openlayers/pull/12513) - Draw a sketch point when adding a vertex programmatically ([@ahocevar](https://github.com/ahocevar))
+ * [#12507](https://github.com/openlayers/openlayers/pull/12507) - Fix regular shape hit detect transparent fill ([@MoonE](https://github.com/MoonE))
+ * [#12509](https://github.com/openlayers/openlayers/pull/12509) - Allow any return type from listener functions ([@ahocevar](https://github.com/ahocevar))
+ * [#12505](https://github.com/openlayers/openlayers/pull/12505) - Fix type of PluggableMap#setTarget() argument ([@ahocevar](https://github.com/ahocevar))
+ * [#12495](https://github.com/openlayers/openlayers/pull/12495) - Edits to the changelog ([@tschaub](https://github.com/tschaub))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#12503](https://github.com/openlayers/openlayers/pull/12503) - Bump webpack from 5.42.0 to 5.44.0 ([@openlayers](https://github.com/openlayers))
+ * [#12502](https://github.com/openlayers/openlayers/pull/12502) - Bump @types/geojson from 7946.0.7 to 7946.0.8 ([@openlayers](https://github.com/openlayers))
+ * [#12501](https://github.com/openlayers/openlayers/pull/12501) - Bump rollup from 2.52.7 to 2.53.1 ([@openlayers](https://github.com/openlayers))
+ * [#12500](https://github.com/openlayers/openlayers/pull/12500) - Bump @types/arcgis-rest-api from 10.4.4 to 10.4.5 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

changelog/v6.7.0.md

@@ -0,0 +1,121 @@
+# 6.7.0
+
+The 6.7 release includes a great batch of usability improvements, fixes, and new features.  See the full list of changes from 100 pull requests below, but here are some highlights:
+
+ * New GeoTIFF source!  With parsing support from the awesome [geotiff.js](https://geotiffjs.github.io/) library, you can now render layers from hosted GeoTIFF imagery.  The GeoTIFF source gives you the ability to pull from multiple GeoTIFF images, read from arbitrary bands, run band math expressions, and style the imagery to your liking.
+ * New WebGL tile renderer.  The GeoTIFF source is rendered with a new WebGL-based tile renderer.  In addition to GeoTIFFs, the renderer supports layers with a generic DataTile source – these can be used to render aribtrary raster data and leverage the same style expressions as described above.
+ * More type checking.  We continue to make improvements to the TypeScript definitions included in the `ol` package.
+ * New sources supporting the draft [OGC API - Tiles](https://ogcapi.ogc.org/tiles/) specification.  The OGCMapTile and OGCVectorTile sources allow you to render data from services that implement the draft OGC tiles spec.  Since the specification is not yet final, these sources are not yet part of the stable OpenLayers API and should be considered experimental.
+ * Custom cluster creation support, improved KML icon rendering, lots of fixes, and more.  See below for all the detail.
+
+## List of all changes
+
+ * [#12727](https://github.com/openlayers/openlayers/pull/12727) - Add missing 'boxstart' event to OnSignature ([@simonseyock](https://github.com/simonseyock))
+ * [#12718](https://github.com/openlayers/openlayers/pull/12718) - Rename function to avoid minification failure ([@tschaub](https://github.com/tschaub))
+ * [#12712](https://github.com/openlayers/openlayers/pull/12712) - Add convertToRGB option to GeoTIFF source ([@ahocevar](https://github.com/ahocevar))
+ * [#12716](https://github.com/openlayers/openlayers/pull/12716) - Spelling fix ([@fredj](https://github.com/fredj))
+ * [#12715](https://github.com/openlayers/openlayers/pull/12715) - Try harder to get the projection from GeoTIFF headers ([@tschaub](https://github.com/tschaub))
+ * [#12714](https://github.com/openlayers/openlayers/pull/12714) - Avoid creating duplicate projections in COG examples ([@tschaub](https://github.com/tschaub))
+ * [#12713](https://github.com/openlayers/openlayers/pull/12713) - Check for GeoTIFF CRS starting with last image ([@tschaub](https://github.com/tschaub))
+ * [#12709](https://github.com/openlayers/openlayers/pull/12709) - Support rendering of GeoTIFF images in pixel coordinates ([@tschaub](https://github.com/tschaub))
+ * [#12711](https://github.com/openlayers/openlayers/pull/12711) - Use band numbers starting with one ([@tschaub](https://github.com/tschaub))
+ * [#12710](https://github.com/openlayers/openlayers/pull/12710) - Spelling fix in GeoTIFF docs ([@tschaub](https://github.com/tschaub))
+ * [#12697](https://github.com/openlayers/openlayers/pull/12697) - Move description above type tag ([@tschaub](https://github.com/tschaub))
+ * [#12695](https://github.com/openlayers/openlayers/pull/12695) - Update Google KML icon anchors and correct icon scaling ([@mike-000](https://github.com/mike-000))
+ * [#12642](https://github.com/openlayers/openlayers/pull/12642) - Fix fullscreen in mapbox-style example ([@ahocevar](https://github.com/ahocevar))
+ * [#12624](https://github.com/openlayers/openlayers/pull/12624) - Improve API docs for optional properties ([@ahocevar](https://github.com/ahocevar))
+ * [#10963](https://github.com/openlayers/openlayers/pull/10963) - OGC map and vector tile sources ([@tschaub](https://github.com/tschaub))
+ * [#12690](https://github.com/openlayers/openlayers/pull/12690) - Fix return stride of forEachSegment ([@ahocevar](https://github.com/ahocevar))
+ * [#12684](https://github.com/openlayers/openlayers/pull/12684) - Fix view resolutions in example ([@mike-000](https://github.com/mike-000))
+ * [#12683](https://github.com/openlayers/openlayers/pull/12683) - Fix sprite offset for pixel ratio !== 1 ([@ahocevar](https://github.com/ahocevar))
+ * [#12671](https://github.com/openlayers/openlayers/pull/12671) - Configure cache on the layer instead of the source ([@tschaub](https://github.com/tschaub))
+ * [#12669](https://github.com/openlayers/openlayers/pull/12669) - Add opaque and transition options to GeoTIFF source ([@ahocevar](https://github.com/ahocevar))
+ * [#12667](https://github.com/openlayers/openlayers/pull/12667) - Additional docs and type checking for raster source ([@tschaub](https://github.com/tschaub))
+ * [#12666](https://github.com/openlayers/openlayers/pull/12666) - Re-add accidently removed events ([@ahocevar](https://github.com/ahocevar))
+ * [#12647](https://github.com/openlayers/openlayers/pull/12647) - Remove Translate option conflicts and update documentation ([@mike-000](https://github.com/mike-000))
+ * [#12008](https://github.com/openlayers/openlayers/pull/12008) - Rendering raster tiles with WebGL ([@tschaub](https://github.com/tschaub))
+ * [#12632](https://github.com/openlayers/openlayers/pull/12632) - Only warn of zero size when map should be visible ([@mike-000](https://github.com/mike-000))
+ * [#12626](https://github.com/openlayers/openlayers/pull/12626) - Set canvas style to override problem 3rd party css ([@mike-000](https://github.com/mike-000))
+ * [#12608](https://github.com/openlayers/openlayers/pull/12608) - Support more OGC CRS identifiers ([@tschaub](https://github.com/tschaub))
+ * [#12607](https://github.com/openlayers/openlayers/pull/12607) - Don't add color as possible type if it was not set ([@MoonE](https://github.com/MoonE))
+ * [#12605](https://github.com/openlayers/openlayers/pull/12605) - Some typing improvements ([@simonseyock](https://github.com/simonseyock))
+ * [#12600](https://github.com/openlayers/openlayers/pull/12600) - Make attribution getters public. ([@simonseyock](https://github.com/simonseyock))
+ * [#12597](https://github.com/openlayers/openlayers/pull/12597) - #12596 fix RasterSource does not end Tile transition ([@mwerlitz](https://github.com/mwerlitz))
+ * [#12599](https://github.com/openlayers/openlayers/pull/12599) - Replace reference image to match that of the CI ([@ahocevar](https://github.com/ahocevar))
+ * [#12595](https://github.com/openlayers/openlayers/pull/12595) - Generate correct type definitions with null ([@ahocevar](https://github.com/ahocevar))
+ * [#12578](https://github.com/openlayers/openlayers/pull/12578) - Update rendering test reference image ([@ahocevar](https://github.com/ahocevar))
+ * [#12577](https://github.com/openlayers/openlayers/pull/12577) - Use shx for the build-site script, clean before run ([@MoonE](https://github.com/MoonE))
+ * [#12575](https://github.com/openlayers/openlayers/pull/12575) - Add on(), un() and once() signatures for ol/source/Raster ([@ahocevar](https://github.com/ahocevar))
+ * [#12565](https://github.com/openlayers/openlayers/pull/12565) - Handle named colors as string in equal operator ([@sebakerckhof](https://github.com/sebakerckhof))
+ * [#12576](https://github.com/openlayers/openlayers/pull/12576) - Fix example and legacy build with nodejs 16.6 ([@MoonE](https://github.com/MoonE))
+ * [#12551](https://github.com/openlayers/openlayers/pull/12551) - Add WKB to the exports of ol/format ([@M393](https://github.com/M393))
+ * [#12550](https://github.com/openlayers/openlayers/pull/12550) - Add `grid` tag to examples. ([@simonseyock](https://github.com/simonseyock))
+ * [#12549](https://github.com/openlayers/openlayers/pull/12549) - Add `change:layers` event. ([@simonseyock](https://github.com/simonseyock))
+ * [#12545](https://github.com/openlayers/openlayers/pull/12545) - Restore simple axis order handling with fixed proj4 ([@ahocevar](https://github.com/ahocevar))
+ * [#12544](https://github.com/openlayers/openlayers/pull/12544) - Make Raster source work as generics type for Image layer ([@ahocevar](https://github.com/ahocevar))
+ * [#12527](https://github.com/openlayers/openlayers/pull/12527) - Treat custom loaders without success/fail handling as if they were a void loader ([@mike-000](https://github.com/mike-000))
+ * [#12538](https://github.com/openlayers/openlayers/pull/12538) - Avoid creating context until needed ([@tschaub](https://github.com/tschaub))
+ * [#12528](https://github.com/openlayers/openlayers/pull/12528) - Convert the hit tolerance priority example into a test ([@MoonE](https://github.com/MoonE))
+ * [#12522](https://github.com/openlayers/openlayers/pull/12522) - Shorter name for the option to create a custom cluster ([@tschaub](https://github.com/tschaub))
+ * [#12506](https://github.com/openlayers/openlayers/pull/12506) - Fix adding controls with map config ([@M393](https://github.com/M393))
+ * [#12487](https://github.com/openlayers/openlayers/pull/12487) - Custom cluster feature creation function ([@Razi91](https://github.com/Razi91))
+ * [#12520](https://github.com/openlayers/openlayers/pull/12520) - Fix typo in changelog ([@ahocevar](https://github.com/ahocevar))
+ * [#12519](https://github.com/openlayers/openlayers/pull/12519) - Release v6.6.1 ([@openlayers](https://github.com/openlayers))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#12703](https://github.com/openlayers/openlayers/pull/12703) - Bump terser-webpack-plugin from 5.1.4 to 5.2.3 ([@openlayers](https://github.com/openlayers))
+ * [#12704](https://github.com/openlayers/openlayers/pull/12704) - Bump @babel/eslint-parser from 7.15.0 to 7.15.4 ([@openlayers](https://github.com/openlayers))
+ * [#12705](https://github.com/openlayers/openlayers/pull/12705) - Bump webpack from 5.51.1 to 5.52.0 ([@openlayers](https://github.com/openlayers))
+ * [#12706](https://github.com/openlayers/openlayers/pull/12706) - Bump webpack-dev-server from 4.0.0 to 4.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#12707](https://github.com/openlayers/openlayers/pull/12707) - Bump @babel/core from 7.15.0 to 7.15.5 ([@openlayers](https://github.com/openlayers))
+ * [#12702](https://github.com/openlayers/openlayers/pull/12702) - Bump @babel/preset-env from 7.15.0 to 7.15.4 ([@openlayers](https://github.com/openlayers))
+ * [#12677](https://github.com/openlayers/openlayers/pull/12677) - Bump marked from 3.0.0 to 3.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#12678](https://github.com/openlayers/openlayers/pull/12678) - Bump globby from 12.0.1 to 12.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#12679](https://github.com/openlayers/openlayers/pull/12679) - Bump mocha from 9.1.0 to 9.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#12657](https://github.com/openlayers/openlayers/pull/12657) - Bump mocha from 9.0.3 to 9.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#12650](https://github.com/openlayers/openlayers/pull/12650) - Bump webpack from 5.50.0 to 5.51.1 ([@openlayers](https://github.com/openlayers))
+ * [#12654](https://github.com/openlayers/openlayers/pull/12654) - Bump webpack-dev-server from 4.0.0-rc.0 to 4.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12653](https://github.com/openlayers/openlayers/pull/12653) - Bump globby from 12.0.0 to 12.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#12652](https://github.com/openlayers/openlayers/pull/12652) - Bump loglevelnext from 5.0.5 to 5.0.6 ([@openlayers](https://github.com/openlayers))
+ * [#12651](https://github.com/openlayers/openlayers/pull/12651) - Bump rollup from 2.56.2 to 2.56.3 ([@openlayers](https://github.com/openlayers))
+ * [#12627](https://github.com/openlayers/openlayers/pull/12627) - Bump webpack-cli from 4.7.2 to 4.8.0 ([@openlayers](https://github.com/openlayers))
+ * [#12631](https://github.com/openlayers/openlayers/pull/12631) - Bump marked from 2.1.3 to 3.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12630](https://github.com/openlayers/openlayers/pull/12630) - Bump webpack from 5.49.0 to 5.50.0 ([@openlayers](https://github.com/openlayers))
+ * [#12629](https://github.com/openlayers/openlayers/pull/12629) - Bump yargs from 17.1.0 to 17.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#12628](https://github.com/openlayers/openlayers/pull/12628) - Bump rollup from 2.56.1 to 2.56.2 ([@openlayers](https://github.com/openlayers))
+ * [#12616](https://github.com/openlayers/openlayers/pull/12616) - Bump webpack from 5.47.1 to 5.49.0 ([@openlayers](https://github.com/openlayers))
+ * [#12617](https://github.com/openlayers/openlayers/pull/12617) - Bump @babel/eslint-parser from 7.14.9 to 7.15.0 ([@openlayers](https://github.com/openlayers))
+ * [#12615](https://github.com/openlayers/openlayers/pull/12615) - Bump rollup from 2.56.0 to 2.56.1 ([@openlayers](https://github.com/openlayers))
+ * [#12614](https://github.com/openlayers/openlayers/pull/12614) - Bump puppeteer from 10.1.0 to 10.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12613](https://github.com/openlayers/openlayers/pull/12613) - Bump yargs from 17.0.1 to 17.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#12612](https://github.com/openlayers/openlayers/pull/12612) - Bump @babel/core from 7.14.8 to 7.15.0 ([@openlayers](https://github.com/openlayers))
+ * [#12611](https://github.com/openlayers/openlayers/pull/12611) - Bump @babel/preset-env from 7.14.9 to 7.15.0 ([@openlayers](https://github.com/openlayers))
+ * [#12610](https://github.com/openlayers/openlayers/pull/12610) - Bump clean-css-cli from 5.3.2 to 5.3.3 ([@openlayers](https://github.com/openlayers))
+ * [#12602](https://github.com/openlayers/openlayers/pull/12602) - Bump rollup from 2.54.0 to 2.56.0 ([@openlayers](https://github.com/openlayers))
+ * [#12583](https://github.com/openlayers/openlayers/pull/12583) - Bump webpack-sources from 2.3.1 to 3.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12581](https://github.com/openlayers/openlayers/pull/12581) - Bump @rollup/plugin-commonjs from 19.0.1 to 20.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12582](https://github.com/openlayers/openlayers/pull/12582) - Bump @babel/preset-env from 7.14.8 to 7.14.9 ([@openlayers](https://github.com/openlayers))
+ * [#12585](https://github.com/openlayers/openlayers/pull/12585) - Bump clean-css-cli from 5.3.0 to 5.3.2 ([@openlayers](https://github.com/openlayers))
+ * [#12584](https://github.com/openlayers/openlayers/pull/12584) - Bump webpack from 5.46.0 to 5.47.1 ([@openlayers](https://github.com/openlayers))
+ * [#12586](https://github.com/openlayers/openlayers/pull/12586) - Bump @babel/eslint-parser from 7.14.7 to 7.14.9 ([@openlayers](https://github.com/openlayers))
+ * [#12588](https://github.com/openlayers/openlayers/pull/12588) - Bump sinon from 11.1.1 to 11.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#12589](https://github.com/openlayers/openlayers/pull/12589) - Bump eslint from 7.31.0 to 7.32.0 ([@openlayers](https://github.com/openlayers))
+ * [#12559](https://github.com/openlayers/openlayers/pull/12559) - Bump rollup from 2.53.2 to 2.54.0 ([@openlayers](https://github.com/openlayers))
+ * [#12560](https://github.com/openlayers/openlayers/pull/12560) - Bump @babel/core from 7.14.6 to 7.14.8 ([@openlayers](https://github.com/openlayers))
+ * [#12558](https://github.com/openlayers/openlayers/pull/12558) - Bump webpack-dev-server from 4.0.0-beta.3 to 4.0.0-rc.0 ([@openlayers](https://github.com/openlayers))
+ * [#12556](https://github.com/openlayers/openlayers/pull/12556) - Bump globby from 11.0.4 to 12.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12555](https://github.com/openlayers/openlayers/pull/12555) - Bump webpack from 5.45.1 to 5.46.0 ([@openlayers](https://github.com/openlayers))
+ * [#12554](https://github.com/openlayers/openlayers/pull/12554) - Bump mocha from 9.0.2 to 9.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#12553](https://github.com/openlayers/openlayers/pull/12553) - Bump @babel/preset-env from 7.14.7 to 7.14.8 ([@openlayers](https://github.com/openlayers))
+ * [#12552](https://github.com/openlayers/openlayers/pull/12552) - Bump @rollup/plugin-node-resolve from 13.0.2 to 13.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#12536](https://github.com/openlayers/openlayers/pull/12536) - Bump rollup from 2.53.1 to 2.53.2 ([@openlayers](https://github.com/openlayers))
+ * [#12537](https://github.com/openlayers/openlayers/pull/12537) - Bump @rollup/plugin-node-resolve from 13.0.0 to 13.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#12535](https://github.com/openlayers/openlayers/pull/12535) - Bump webpack from 5.44.0 to 5.45.1 ([@openlayers](https://github.com/openlayers))
+ * [#12534](https://github.com/openlayers/openlayers/pull/12534) - Bump eslint from 7.30.0 to 7.31.0 ([@openlayers](https://github.com/openlayers))
+ * [#12533](https://github.com/openlayers/openlayers/pull/12533) - Bump @rollup/plugin-commonjs from 19.0.0 to 19.0.1 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

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.6.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))

config/jsdoc/api/index.md

@@ -27,7 +27,8 @@
         <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a><br>
         <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a><br>
         <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a><br>
-        <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a>
+        <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a><br>
+        <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
       </div>
     </div>
   </div>
@@ -58,7 +59,7 @@
     <div class="card h-100 bg-light">
       <div class="card-body">
         <h4 class="card-title">Sources and formats</h4>
-        <a href="module-ol_source_Tile-TileSource.html">Tile sources</a> for <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a>
+        <a href="module-ol_source_Tile-TileSource.html">Tile sources</a> for <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a> or <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
         <br><a href="module-ol_source_Image-ImageSource.html">Image sources</a> for <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a>
         <br><a href="module-ol_source_Vector-VectorSource.html">Vector sources</a> for <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a>
         <br><a href="module-ol_source_VectorTile-VectorTile.html">Vector tile sources</a> for <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a>
@@ -71,7 +72,7 @@
     <div class="card h-100 bg-light">
       <div class="card-body">
         <h4 class="card-title">Projections</h4>
-          <p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use <a href="module-ol_proj.html#.transform">ol/proj#transform()</a> and <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a>.</p>
+          <p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform coordinates from and to geographic, use <a href="module-ol_proj.html#.fromLonLat">ol/proj#fromLonLat()</a> and <a href="module-ol_proj.html#.toLonLat">ol/proj#toLonLat()</a>. For extents and other projections, use <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a> and <a href="module-ol_proj.html#.transform">ol/proj#transform()</a>.<p>
           <a href="module-ol_proj.html">ol/proj</a>
       </div>
     </div>

config/jsdoc/api/template/tmpl/params.tmpl

@@ -70,7 +70,7 @@
             <?js if (!param.subparams) {?>
             <td class="type">
             <?js if (param.type && param.type.names) {?>
-                <?js= self.partial('type.tmpl', param.type.names) ?>
+                <?js= self.partial('type.tmpl', param.type.names) + (param.optional && typeof param.defaultvalue === 'undefined' && param.type.names.indexOf('undefined') === -1 ? ' | undefined' : '') ?>
                 <?js if (typeof param.defaultvalue !== 'undefined') { ?>
                     (defaults to <?js= self.htmlsafe(param.defaultvalue) ?>)
                 <?js } ?>

config/tsconfig-build.json

@@ -23,7 +23,7 @@
     /* Strict Type-Checking Options */
     "strict": false,                           /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */

config/webpack-config-legacy-build.mjs

@@ -1,37 +1,37 @@
 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'
-          ),
-        ],
       },
     ],
   },
   resolve: {
+    fallback: {
+      fs: false,
+      http: false,
+      https: false,
+    },
     alias: {
       ol: path.resolve('./build/ol'),
     },

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 {

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.html

@@ -0,0 +1,13 @@
+---
+layout: example.html
+title: NDVI+NDWI from two 16-bit COGs
+shortdesc: Calculating NDVI+NDWI as green and blue values.
+docs: >
+  The GeoTIFF layer in this example calculates the Normalized Difference Vegetation Index (NDVI)
+  and Normalized Difference Water Index (NDWI) from two cloud-optimized Sentinel 2 GeoTIFFs: one
+  with 10 m resolution and red and a near infrared bands, and one with 60 m resolution and a short
+  wave infrared channel. The NDVI is shown as green, the NDWI as blue. The 4th band is the alpha
+  band, which gets added when a source has a `nodata` value configured.
+tags: "cog, ndvi, ndwi, sentinel, geotiff"
+---
+<div id="map" class="map"></div>

examples/cog-math-multisource.js

@@ -0,0 +1,60 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+
+const source = new GeoTIFF({
+  sources: [
+    {
+      url: 'https://s2downloads.eox.at/demo/Sentinel-2/3857/R10m.tif',
+      bands: [3, 4],
+      min: 0,
+      nodata: 0,
+      max: 65535,
+    },
+    {
+      url: 'https://s2downloads.eox.at/demo/Sentinel-2/3857/R60m.tif',
+      bands: [9],
+      min: 0,
+      nodata: 0,
+      max: 65535,
+    },
+  ],
+});
+source.setAttributions(
+  "<a href='https://s2maps.eu'>Sentinel-2 cloudless</a> by <a href='https://eox.at/'>EOX IT Services GmbH</a> (Contains modified Copernicus Sentinel data 2019)"
+);
+
+const ndvi = [
+  '/',
+  ['-', ['band', 2], ['band', 1]],
+  ['+', ['band', 2], ['band', 1]],
+];
+
+const ndwi = [
+  '/',
+  ['-', ['band', 3], ['band', 1]],
+  ['+', ['band', 3], ['band', 1]],
+];
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      style: {
+        color: [
+          'color',
+          // red: | NDVI - NDWI |
+          ['*', 255, ['abs', ['-', ndvi, ndwi]]],
+          // green: NDVI
+          ['*', 255, ndvi],
+          // blue: NDWI
+          ['*', 255, ndwi],
+          // alpha
+          ['band', 4],
+        ],
+      },
+      source,
+    }),
+  ],
+  view: source.getView(),
+});

examples/cog-math.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: NDVI from a Sentinel 2 COG
+shortdesc: Calculating NDVI and applying a custom color map.
+docs: >
+  The GeoTIFF layer in this example draws from two Sentinel 2 sources: a red band and a near infrared band.
+  The layer style includes a `color` expression that calculates the Normalized Difference Vegetation Index (NDVI)
+  from values in the two bands.  The `interpolate` expression is used to map NDVI values to colors.
+tags: "cog, ndvi"
+---
+<div id="map" class="map"></div>

examples/cog-math.js

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

examples/cog-overviews.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: GeoTIFF with Overviews
+shortdesc: Rendering a GeoTIFF with external overviews as a layer.
+docs: >
+  In some cases, a GeoTIFF may have external overviews.  This example uses the
+  `overviews` property to provide URLs for the external overviews.  The example
+  composes a false color composite using shortwave infrared (B6), near infrared (B5),
+  and visible green (B3) bands from a Landsat 8 image.
+tags: "cog"
+---
+<div id="map" class="map"></div>

examples/cog-overviews.js

@@ -0,0 +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';
+
+// 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({
+      style: {
+        saturation: -0.3,
+      },
+      source: source,
+    }),
+  ],
+  view: source.getView(),
+});

examples/cog-pyramid.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: GeoTIFF tile pyramid
+shortdesc: Rendering a COG tile pyramid as layer group.
+docs: >
+  Data from a Cloud Optimized GeoTIFF (COG) tile pyramid can be rendered as a set of layers.  In this
+  example, a pyramid of 3-band GeoTIFFs is used to render RGB data. For each tile of the pyramid, a
+  separate layer is created on demand. The lowest resolution layer serves as preview while higher resolutions are
+  loading.
+tags: "cog, tilepyramid, stac"
+---
+<div id="map" class="map"></div>

examples/cog-pyramid.js

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

examples/cog.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Cloud Optimized GeoTIFF (COG)
+shortdesc: Rendering a COG as a tiled layer.
+docs: >
+  Tiled data from a Cloud Optimized GeoTIFF (COG) can be rendered as a layer.  In this
+  example, a single 3-band GeoTIFF is used to render RGB data.
+tags: "cog"
+---
+<div id="map" class="map"></div>

examples/cog.js

@@ -0,0 +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';
+
+const source = new GeoTIFF({
+  sources: [
+    {
+      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/TCI.tif',
+    },
+  ],
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source,
+    }),
+  ],
+  view: source.getView(),
+});

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-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.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Data Tiles
+shortdesc: Generating tile data from scratch.
+docs: >
+  This example generates RGBA tile data from scratch.
+tags: "data tiles"
+---
+<div id="map" class="map"></div>

examples/data-tiles.js

@@ -0,0 +1,46 @@
+import DataTile 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';
+
+const size = 256;
+
+const canvas = document.createElement('canvas');
+canvas.width = size;
+canvas.height = size;
+
+const context = canvas.getContext('2d');
+context.strokeStyle = 'white';
+context.textAlign = 'center';
+context.font = '24px sans-serif';
+const lineHeight = 30;
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new DataTile({
+        loader: function (z, x, y) {
+          const half = size / 2;
+          context.clearRect(0, 0, size, size);
+          context.fillStyle = 'rgba(100, 100, 100, 0.5)';
+          context.fillRect(0, 0, size, size);
+          context.fillStyle = 'black';
+          context.fillText(`z: ${z}`, half, half - lineHeight);
+          context.fillText(`x: ${x}`, half, half);
+          context.fillText(`y: ${y}`, half, half + lineHeight);
+          context.strokeRect(0, 0, size, size);
+          const data = context.getImageData(0, 0, size, size).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,
+      }),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 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/hit-tolerance-priority.html

@@ -1,9 +0,0 @@
----
-layout: example.html
-title: Hit tolerance priority
-shortdesc: Shows bad behavior of hit detection with hit tolerance.
-docs: >
-  Hover over the map and observe how the small circles get a black outline as you hover over them. Is the expected feature getting highlighted?
-tags: "simple, openstreetmap"
----
-<div id="map" class="map"></div>

examples/hit-tolerance-priority.js

@@ -1,84 +0,0 @@
-import CircleStyle from '../src/ol/style/Circle.js';
-import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
-import VectorSource from '../src/ol/source/Vector.js';
-import View from '../src/ol/View.js';
-import {Fill, Stroke, Style} from '../src/ol/style.js';
-import {Point} from '../src/ol/geom.js';
-
-const map = new Map({
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    resolution: 1,
-    resolutions: [1],
-  }),
-});
-
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    features: [
-      new Feature({
-        geometry: new Point([0, 0]),
-        color: 'white',
-      }),
-      new Feature({
-        geometry: new Point([-10, 0]),
-        color: 'fuchsia',
-      }),
-      new Feature({
-        geometry: new Point([-10, -10]),
-        color: 'orange',
-      }),
-      new Feature({
-        geometry: new Point([-10, 10]),
-        color: 'cyan',
-      }),
-    ],
-  }),
-  style: (feature) => {
-    return new Style({
-      image: new CircleStyle({
-        radius: 5,
-        fill: new Fill({
-          color: feature.get('color'),
-        }),
-        stroke: new Stroke({
-          color: 'gray',
-          width: 1,
-        }),
-      }),
-    });
-  },
-});
-map.addLayer(vectorLayer);
-
-const highlightFeature = new Feature(new Point([NaN, NaN]));
-highlightFeature.setStyle(
-  new Style({
-    image: new CircleStyle({
-      radius: 5,
-      stroke: new Stroke({
-        color: 'black',
-        width: 2,
-      }),
-    }),
-  })
-);
-vectorLayer.getSource().addFeature(highlightFeature);
-map.on('pointermove', (e) => {
-  const hit = map.forEachFeatureAtPixel(
-    e.pixel,
-    (feature) => {
-      highlightFeature.setGeometry(feature.getGeometry().clone());
-      return true;
-    },
-    {
-      hitTolerance: 10,
-    }
-  );
-  if (!hit) {
-    highlightFeature.setGeometry(new Point([NaN, NaN]));
-  }
-});

examples/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-style.css

@@ -4,3 +4,13 @@
   top: auto;
   right: auto;
 }
+.map:-webkit-full-screen {
+  height: 100%;
+  margin: 0;
+}
+.map:-ms-fullscreen {
+  height: 100%;
+}
+.map:fullscreen {
+  height: 100%;
+}

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

@@ -4,11 +4,11 @@ title: Advanced Mapbox Vector Tiles
 shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
 docs: >
   A vector tiles map which reuses the same source tiles for subsequent zoom levels to save bandwidth on mobile devices. **Note**: No map will be visible when the access token has expired.
-tags: "mapbox, vector, tiles, mobile"
+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.js

@@ -92,7 +92,7 @@ const map = new Map({
   ],
   target: 'map',
   view: new View({
-    resolutions: createXYZ({tileSize: 512}).getResolutions89,
+    resolutions: createXYZ({tileSize: 512}).getResolutions(),
     center: [0, 0],
     zoom: 2,
   }),

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/ogc-map-tiles-geographic.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: OGC Map Tiles (Geographic)
+shortdesc: Rendering map tiles from an OGC API – Tiles service.
+docs: >
+  The <a href="https://ogcapi.ogc.org/tiles/">OGC API – Tiles</a> specification describes how a service can provide map tiles.  Because the specification
+  has not yet been finalized, the <code>OGCMapTile</code> source is not yet part of the stable API.
+tags: "ogc"
+experimental: true
+---
+<div id="map" class="map"></div>

examples/ogc-map-tiles-geographic.js

@@ -0,0 +1,20 @@
+import Map from '../src/ol/Map.js';
+import OGCMapTile from '../src/ol/source/OGCMapTile.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OGCMapTile({
+        url: 'https://maps.ecere.com/ogcapi/collections/blueMarble/map/tiles/WorldCRS84Quad',
+      }),
+    }),
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 1,
+  }),
+});

examples/ogc-map-tiles.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: OGC Map Tiles
+shortdesc: Rendering map tiles from an OGC API – Tiles service.
+docs: >
+  The <a href="https://ogcapi.ogc.org/tiles/">OGC API – Tiles</a> specification describes how a service can provide map tiles.  Because the specification
+  has not yet been finalized, the <code>OGCMapTile</code> source is not yet part of the stable API.
+tags: "ogc"
+experimental: true
+---
+<div id="map" class="map"></div>

examples/ogc-map-tiles.js

@@ -0,0 +1,19 @@
+import Map from '../src/ol/Map.js';
+import OGCMapTile from '../src/ol/source/OGCMapTile.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OGCMapTile({
+        url: 'https://maps.ecere.com/ogcapi/collections/blueMarble/map/tiles/WebMercatorQuad',
+      }),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+});

examples/ogc-vector-tiles.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: OGC Vector Tiles
+shortdesc: Rendering vector tiles from an OGC API – Tiles service.
+docs: >
+  The <a href="https://ogcapi.ogc.org/tiles/">OGC API – Tiles</a> specification describes how a service can provide vector tiles.  Because the specification
+  has not yet been finalized, the <code>OGCVectorTile</code> source is not yet part of the stable API.
+tags: "ogc, vector"
+experimental: true
+---
+<div id="map" class="map"></div>

examples/ogc-vector-tiles.js

@@ -0,0 +1,21 @@
+import MVT from '../src/ol/format/MVT.js';
+import Map from '../src/ol/Map.js';
+import OGCVectorTile from '../src/ol/source/OGCVectorTile.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import View from '../src/ol/View.js';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new VectorTileLayer({
+      source: new OGCVectorTile({
+        url: 'https://maps.ecere.com/ogcapi/collections/NaturalEarth:cultural:ne_10m_admin_0_countries/tiles/WebMercatorQuad',
+        format: new MVT(),
+      }),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 1,
+  }),
+});

examples/print-to-scale.html

@@ -8,7 +8,7 @@ docs: >
   Unlike the <a href="export-pdf.html">Export PDF example</a> the on screen map is only used to set the center and rotation.
   The extent printed depends on the scale and page size. To print the scale bar and attributions the example uses the
   <a href="https://html2canvas.hertzen.com/" target="_blank">html2canvas</a> library.
-tags: "print, printing, scale, scaleline, export, pdf"
+tags: "print, printing, scale, scaleline, export, pdf, grid"
 resources:
   - https://html2canvas.hertzen.com/dist/html2canvas.min.js
   - https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js

examples/raster.js

@@ -5,7 +5,7 @@ import XYZ from '../src/ol/source/XYZ.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
 
 const minVgi = 0;
-const maxVgi = 0.25;
+const maxVgi = 0.5;
 const bins = 10;
 
 /**
@@ -87,7 +87,7 @@ const raster = new RasterSource({
     summarize: summarize,
   },
 });
-raster.set('threshold', 0.1);
+raster.set('threshold', 0.25);
 
 function createCounts(min, max, num) {
   const values = new Array(num);

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/reprojection.html

@@ -4,7 +4,7 @@ title: Raster Reprojection
 shortdesc: Demonstrates client-side raster reprojection between various projections.
 docs: >
   This example shows client-side raster reprojection between various projections.
-tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
+tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi, grid"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">

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/select-features.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Select Features
 shortdesc: Example of using the Select interaction.
 docs: >
-  Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
+  Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold the <code>Shift</code> key to toggle the feature in the selection.</p>
   <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
   <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
 tags: "select, vector"

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/translate-features.html

@@ -3,7 +3,9 @@ layout: example.html
 title: Translate Features
 shortdesc: Example of a translate features interaction.
 docs: >
-  This example demonstrates how the translate and select interactions can be used together.  Zoom in to an area of interest and click to select a feature.  Then drag the feature around to move it elsewhere on the map.
+  This example demonstrates how the translate and select interactions can be used together.
+  Zoom in to an area of interest and click to select a feature or hold the <code>Shift</code> key and select multiple features.
+  Then drag the features around to move them elsewhere on the map.
 tags: "drag, translate, feature, vector, editing"
 ---
 <div id="map" class="map"></div>

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-tiles-4326.html

@@ -5,7 +5,7 @@ shortdesc: Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-sty
 docs: >
   Example showing vector tiles in EPSG:4326 (styled using `ol-mapbox-style`) loaded from maptiler.com.
   **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
-tags: "vector tiles, epsg4326, mapbox style, ol-mapbox-style, maptiler"
+tags: "vector tiles, epsg4326, mapbox style, ol-mapbox-style, maptiler, grid"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/

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.css

@@ -0,0 +1,13 @@
+#level {
+  display: inline-block;
+  width: 150px;
+  vertical-align: text-bottom;
+}
+
+a.location {
+  cursor: pointer;
+}
+
+#map {
+  background: #8bd4ff;
+}

examples/webgl-sea-level.html

@@ -0,0 +1,37 @@
+---
+layout: example.html
+title: Sea Level (with WebGL)
+shortdesc: Render sea level at different elevations
+docs: >
+  <p>
+    The <code>style</code> property of a WebGL tile layer accepts a <code>color</code> expression that
+    can be used to modify pixel values before rendering.  Here, RGB tiles representing elevation
+    data are loaded and rendered so that values at or below sea level are blue, and values
+    above sea level are transparent.  The <code>color</code> expression operates on normalized pixel
+    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>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
+    sea level slider, the <code>layer.updateStyleVariables()</code> function is called to update
+    the <code>level</code> style variable with the value from the slider.
+  </p>
+tags: "webgl, math, flood"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+---
+<div id="map" class="map"></div>
+<label>
+  Sea level
+  <input id="level" type="range" min="0" max="100" value="1"/>
+  +<span id="output"></span> m
+</label>
+<br>
+Go to
+<a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
+<a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
+<a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
+<a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>

examples/webgl-sea-level.js

@@ -0,0 +1,91 @@
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+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>';
+
+// 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:
+      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+    maxZoom: 10,
+    tileSize: 512,
+    crossOrigin: 'anonymous',
+  }),
+  style: {
+    variables: {
+      level: 0,
+    },
+    color: [
+      'case',
+      // use the `level` style variable to determine the color
+      ['<=', elevation, ['var', 'level']],
+      [139, 212, 255, 1],
+      [139, 212, 255, 0],
+    ],
+  },
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+        attributions: attributions,
+        crossOrigin: 'anonymous',
+        tileSize: 512,
+      }),
+    }),
+    layer,
+  ],
+  view: new View({
+    center: fromLonLat([-122.3267, 37.8377]),
+    zoom: 11,
+  }),
+});
+
+const control = document.getElementById('level');
+const output = document.getElementById('output');
+const listener = function () {
+  output.innerText = 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');
+for (let i = 0, ii = locations.length; i < ii; ++i) {
+  locations[i].addEventListener('click', relocate);
+}
+
+function relocate(event) {
+  const data = event.target.dataset;
+  const view = map.getView();
+  view.setCenter(fromLonLat(data.center.split(',').map(Number)));
+  view.setZoom(Number(data.zoom));
+}

examples/webgl-shaded-relief.css

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

examples/webgl-shaded-relief.html

@@ -0,0 +1,32 @@
+---
+layout: example.html
+title: Shaded Relief (with WebGL)
+shortdesc: Calculate shaded relief from elevation data
+docs: >
+  <p>
+    For the shaded relief, a single tiled source of elevation data is used as input.
+    The shaded relief is calculated by the layer's <code>style</code> with a <code>color</code>
+    expression. The style variables are updated when the user drags one of the sliders. The
+    <code>band</code> operator is used to sample data from neighboring pixels for calculating slope and
+    aspect, which is done with the <code>['band', bandIndex, xOffset, yOffset]</code> syntax.
+  </p>
+tags: "webgl, shaded relief"
+---
+<div id="map" class="map"></div>
+<table class="controls">
+  <tr>
+    <td><label for="vert">vertical exaggeration:</label></td>
+    <td><input id="vert" type="range" min="1" max="5" value="1"/></td>
+    <td><span id="vertOut"></span> x</td>
+  </tr>
+  <tr>
+    <td><label for="sunEl">sun elevation:</label></td>
+    <td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
+    <td><span id="sunElOut"></span> °</td>
+  </tr>
+  <tr>
+    <td><label for="sunAz">sun azimuth:</label></td>
+    <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
+    <td><span id="sunAzOut"></span> °</td>
+  </tr>
+</table>

examples/webgl-shaded-relief.js

@@ -0,0 +1,93 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {OSM, XYZ} from '../src/ol/source.js';
+import {WebGLTile as TileLayer} from '../src/ol/layer.js';
+
+const variables = {};
+
+// The method used to extract elevations from the DEM.
+// In this case the format used is
+// red + green * 2 + blue * 3
+//
+// Other frequently used methods include the Mapbox format
+// (red * 256 * 256 + green * 256 + blue) * 0.1 - 10000
+// and the Terrarium format
+// (red * 256 + green + blue / 256) - 32768
+function elevation(xOffset, yOffset) {
+  return [
+    '+',
+    ['*', 256, ['band', 1, xOffset, yOffset]],
+    [
+      '+',
+      ['*', 2 * 256, ['band', 2, xOffset, yOffset]],
+      ['*', 3 * 256, ['band', 3, xOffset, yOffset]],
+    ],
+  ];
+}
+
+// Generates a shaded relief image given elevation data.  Uses a 3x3
+// neighborhood for determining slope and aspect.
+const dp = ['*', 2, ['resolution']];
+const z0x = ['*', ['var', 'vert'], elevation(-1, 0)];
+const z1x = ['*', ['var', 'vert'], elevation(1, 0)];
+const dzdx = ['/', ['-', z1x, z0x], dp];
+const z0y = ['*', ['var', 'vert'], elevation(0, -1)];
+const z1y = ['*', ['var', 'vert'], elevation(0, 1)];
+const dzdy = ['/', ['-', z1y, z0y], dp];
+const slope = ['atan', ['^', ['+', ['^', dzdx, 2], ['^', dzdy, 2]], 0.5]];
+const aspect = ['clamp', ['atan', ['-', 0, dzdx], dzdy], -Math.PI, Math.PI];
+const sunEl = ['*', Math.PI / 180, ['var', 'sunEl']];
+const sunAz = ['*', Math.PI / 180, ['var', 'sunAz']];
+
+const cosIncidence = [
+  '+',
+  ['*', ['sin', sunEl], ['cos', slope]],
+  ['*', ['*', ['cos', sunEl], ['sin', slope]], ['cos', ['-', sunAz, aspect]]],
+];
+const scaled = ['*', 255, cosIncidence];
+
+const shadedRelief = new TileLayer({
+  opacity: 0.3,
+  source: new XYZ({
+    url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
+    crossOrigin: 'anonymous',
+  }),
+  style: {
+    variables: variables,
+    color: ['color', scaled, scaled, scaled],
+  },
+});
+
+const controlIds = ['vert', 'sunEl', 'sunAz'];
+controlIds.forEach(function (id) {
+  const control = document.getElementById(id);
+  const output = document.getElementById(id + 'Out');
+  function updateValues() {
+    output.innerText = control.value;
+    variables[id] = Number(control.value);
+  }
+  updateValues();
+  const listener = function () {
+    updateValues();
+    shadedRelief.updateStyleVariables(variables);
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+    shadedRelief,
+  ],
+  view: new View({
+    extent: [-13675026, 4439648, -13580856, 4580292],
+    center: [-13615645, 4497969],
+    minZoom: 10,
+    maxZoom: 16,
+    zoom: 13,
+  }),
+});

examples/webgl-tile-style.css

@@ -0,0 +1,4 @@
+#controls {
+  display: flex;
+  justify-content: space-around;
+}

examples/webgl-tile-style.html

@@ -0,0 +1,31 @@
+---
+layout: example.html
+title: WebGL Tile Layer Styles
+shortdesc: Styling raster tiles with WebGL.
+docs: >
+  The `style` property of a WebGL tile layer can be used to adjust properties like
+  `exposure`, `contrast`, and `saturation`.  Typically those values would be set to
+  numeric constants to apply a filter to imagery.  In this example, the style properties
+  are set to variables that can be updated based on application state.  Adjusting the
+  sliders results in a call to `layer.updateStyleVariables()` to use new values for the
+  associated style properties.
+tags: "webgl, style"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+---
+<div id="map" class="map"></div>
+<div id="controls">
+  <label>
+    <input id="exposure" type="range" min="-0.5" max="0.5" step="0.01">
+    <br>exposure <span id="exposure-value"></span>
+  </label>
+  <label>
+    <input id="contrast" type="range" min="-0.5" max="0.5" step="0.01">
+    <br>contrast <span id="contrast-value"></span>
+  </label>
+  <label>
+    <input id="saturation" type="range" min="-0.5" max="0.5" step="0.01">
+    <br>saturation <span id="saturation-value"></span>
+  </label>
+</div>

examples/webgl-tile-style.js

@@ -0,0 +1,57 @@
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+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 variables = {
+  exposure: 0,
+  contrast: 0,
+  saturation: 0,
+};
+
+const layer = new TileLayer({
+  style: {
+    exposure: ['var', 'exposure'],
+    contrast: ['var', 'contrast'],
+    saturation: ['var', 'saturation'],
+    variables: variables,
+  },
+  source: new XYZ({
+    crossOrigin: 'anonymous', // TODO: determine if we can avoid this
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+  }),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+
+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.toFixed(2);
+  const listener = function (event) {
+    const value = parseFloat(event.target.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/webgl-tiles.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: WebGL Tiles
+shortdesc: Rendering raster data with WebGL.
+docs: >
+  This example uses WebGL to raster tiles on a map.
+tags: "webgl, osm"
+---
+<div id="map" class="map"></div>

examples/webgl-tiles.js

@@ -0,0 +1,17 @@
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});

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: {
@@ -101,6 +85,8 @@ export default {
   resolve: {
     fallback: {
       fs: false,
+      http: false,
+      https: false,
     },
     alias: {
       // allow imports from 'ol/module' instead of specifiying the source path

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/webpack/worker-loader.cjs

@@ -9,7 +9,12 @@ module.exports = function loader() {
   build(this.resource, {minify})
     .then((chunk) => {
       for (const filePath in chunk.modules) {
-        this.addDependency(filePath);
+        try {
+          const dependency = require.resolve(filePath);
+          this.addDependency(dependency);
+        } catch (e) {
+          // empty catch block
+        }
       }
       callback(null, chunk.code);
     })

examples/wms-custom-tilegrid-512x256.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: WMS 512x256 Tiles
-shortdesc: Example of a WMS layer with 512x256px tiles.
+shortdesc: Example of a WMS layer with a custom grid with 512x256px tiles.
 docs: >
   WMS can serve arbitrary tile sizes. This example uses a custom tile grid with non-square tiles.
-tags: "wms, tile, non-square"
+tags: "wms, tile, non-square, grid"
 ---
 <div id="map" class="map"></div>

examples/wmts-dimensions.html

@@ -4,7 +4,7 @@ title: WMTS Tile Transitions
 shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer.
 docs: >
   Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from <a href="https://scalgo.com/">SCALGO</a>, underlying data from <a href="https://cgiarcsi.community/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
-tags: "wmts, parameter, transition"
+tags: "wmts, parameter, transition, grid"
 ---
 <div id="map" class="map"></div>
 <label>

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-ign.html

@@ -9,6 +9,6 @@ docs: >
     and
     [Documentation de l’offre de données et services de l’IGN](https://geoservices.ign.fr/documentation/diffusion/documentation-offre.html)
     (french).
-tags: "french, ign, geoportail, wmts"
+tags: "french, ign, geoportail, wmts, grid"
 ---
 <div id="map" class="map"></div>

examples/wmts.html

@@ -4,6 +4,6 @@ title: WMTS
 shortdesc: Example of a WMTS source.
 docs: >
   This example shows how to manually create the configuration for accessing a WMTS. The [WMTS Layer from capabilities example](wmts-layer-from-capabilities.html) shows how to create the configuration from a GetCapabilities response.
-tags: "wmts"
+tags: "wmts, grid"
 ---
 <div id="map" class="map"></div>

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({