Updates for the 6.13.0 release

Update ol-mapbox-style for rich text labels support

.github/codeql/config.yml

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

.github/workflows/build-preview.yml

@@ -0,0 +1,29 @@
+name: Build Preview
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - run: npm ci
+      - run: npm run build-site
+      - uses: actions/upload-artifact@v2
+        with:
+          name: site
+          path: build/site
+      - name: Store pull request number for later use
+        run: |
+          mkdir -p build/pr
+          echo ${{github.event.number}} > build/pr/number
+      - uses: actions/upload-artifact@v2
+        with:
+          name: pr
+          path: build/pr

.github/workflows/deploy-preview.yml

@@ -0,0 +1,102 @@
+name: Deploy Preview
+
+on:
+  workflow_run:
+    workflows: ["Build Preview"]
+    types:
+      - completed
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    if: ${{github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'}}
+    steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - run: npm install --global netlify-cli@6
+      - run: npm install unzipper@0.10
+
+      - name: Get pull request number
+        uses: actions/github-script@v5
+        id: pull-request-number
+        with:
+          result-encoding: string
+          script: |
+            const unzipper = require('unzipper');
+
+            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: ${{github.event.workflow_run.id}}
+            });
+
+            const artifact = artifacts.data.artifacts.filter(
+              artifact => artifact.name === 'pr'
+            )[0];
+
+            if (!artifact) {
+              throw new Error('No pr artifact found');
+            }
+
+            const download = await github.rest.actions.downloadArtifact({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              artifact_id: artifact.id,
+              archive_format: 'zip'
+            });
+
+            const directory = await unzipper.Open.buffer(Buffer.from(download.data));
+            const file = directory.files.find(d => d.path === 'number');
+            const content = await file.buffer();
+            return content.toString();
+
+      - uses: dawidd6/action-download-artifact@v2
+        with:
+          github_token: ${{secrets.GITHUB_TOKEN}}
+          workflow: build-preview.yml
+          pr: ${{steps.pull-request-number.outputs.result}}
+          name: site
+          path: build/site
+
+      - name: Deploy to Netlify
+        env:
+          NETLIFY_AUTH_TOKEN: ${{secrets.NETLIFY_AUTH_TOKEN}}
+          NETLIFY_SITE_ID: ${{secrets.NETLIFY_SITE_ID}}
+        run: netlify deploy --dir=build/site --alias=deploy-preview-${{steps.pull-request-number.outputs.result}}
+
+      - name: Add comment to pull request
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const pullRequestNumber = parseInt(${{steps.pull-request-number.outputs.result}}, 10);
+
+            const start = ':package:';
+            const author = 'github-actions[bot]';
+
+            const comments = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: pullRequestNumber
+            });
+
+            const commentExists = comments.data.some(
+              comment => comment.user.login === author && comment.body.startsWith(start)
+            );
+
+            if (!commentExists) {
+              const body = [
+                `${start} Preview the [examples](https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/examples/) and`,
+                `[docs](https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/apidoc/) from this branch`,
+                `here: https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/.`
+              ].join(' ');
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pullRequestNumber,
+                body: body
+              });
+            } else {
+              console.log(`Preview URL comment already added to PR #${pullRequestNumber}`);
+            }

.github/workflows/publish.yml

@@ -9,11 +9,11 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
+          node-version: '16'
+          registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies
         run: npm ci
       - name: Publish
@@ -24,4 +24,4 @@ jobs:
           cd build/ol
           npm publish --tag dev
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/security.yml

@@ -15,20 +15,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          # Must fetch at least the immediate parents so that if this is
-          # a pull request then we can checkout the head of the pull request.
-          # Only include this option if you are running this workflow on pull requests.
-          fetch-depth: 2
+      - uses: actions/checkout@v2
 
-      # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v1
         with:
           languages: javascript
-          config-file: ./.github/codeql/config.yml
+          source-root: src
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v1

.github/workflows/test.yml

@@ -24,22 +24,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
-
-      - name: Determine Cache Directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Configure Job Cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          node-version: '16'
 
       - name: Install Dependencies
         run: npm ci
@@ -59,22 +46,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
-
-      - name: Determine Cache Directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Configure Job Cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          node-version: '16'
 
       - name: Install Dependencies
         run: npm ci
@@ -94,22 +68,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
-
-      - name: Determine Cache Directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Configure Job Cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          node-version: '16'
 
       - name: Install Dependencies
         run: npm ci
@@ -129,22 +90,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
-
-      - name: Determine Cache Directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Configure Job Cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          node-version: '16'
 
       - name: Install Dependencies
         run: npm ci
@@ -153,7 +101,7 @@ jobs:
         run: npm run build-package
 
       - name: Generate the Legacy Build
-        run: npm run build-legacy && npx eslint --fix build/index.js
+        run: "npm run build-legacy && npx eslint --rule 'import/no-duplicates: off' --fix build/index.js"
 
   rendering:
     name: Rendering
@@ -167,22 +115,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16
-
-      - name: Determine Cache Directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Configure Job Cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          node-version: '16'
 
       - name: Install Dependencies
         run: npm ci

DEVELOPING.md

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

README.md

@@ -36,10 +36,10 @@ new Map({
 
 See the following examples for more detail on bundling OpenLayers with your application:
 
+ * Using [Vite](https://github.com/openlayers/ol-vite)
  * Using [Rollup](https://github.com/openlayers/ol-rollup)
- * Using [Webpack](https://github.com/openlayers/ol-webpack)
+ * Using [webpack](https://github.com/openlayers/ol-webpack)
  * Using [Parcel](https://github.com/openlayers/ol-parcel)
- * Using [Browserify](https://github.com/openlayers/ol-browserify)
 
 ## Sponsors
 
@@ -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.
@@ -116,11 +97,14 @@ For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and ol
 * [`fetch`](https://caniuse.com/fetch): Available from [polyfill.io](https://polyfill.io/).
 * [`requestAnimationFrame`](https://caniuse.com/requestanimationframe): Available from [polyfill.io](https://polyfill.io/).
 * [`element.prototype.classList` (`add`/`remove`)](https://caniuse.com/classlist): Available from [polyfill.io](https://polyfill.io/).
-* [`URL` API](https://caniuse.com/url): Available from [polyfill.io](https://polyfill.io/).
+* [`URL` API](https://caniuse.com/url): Available from [polyfill.io](https://polyfill.io/) or [core-js](https://cdnjs.com/libraries/core-js/).
 * [`TextDecoder`](https://caniuse.com/textencoder): Available from [polyfill.io](https://polyfill.io/).
-* [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/).
+* [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/) or [core-js](https://cdnjs.com/libraries/core-js/).
+* [`Reflect`](https://caniuse.com/mdn-javascript_builtins_reflect): Available from [core-js](https://cdnjs.com/libraries/core-js/).
 * [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,62 @@
 ## Upgrade notes
 
-### Next version
+### Next
+
+### v6.13.0
+
+#### New `layer.getData()` method
+
+Raster layers (static images, image tiles, data tiles) have a new `layer.getData(pixel)` method that returns the pixel data at the provided location.  The return value depends on the underlying source data type.  For example, a GeoTIFF may return a `Float32Array` with one value per band, while a PNG rendered from a tile layer will return a `Uint8ClampedArray` of RGBA values.
+
+If you were previously using the `map.forEachLayerAtPixel()` method, you should use the new `layer.getData()` method instead.  The old method returns composite pixel values from multiple layers and is limited to RGBA values.  The new method doesn't suffer from these shortcomings and is more performant.
+
+#### Deprecated `map.forEachLayerAtPixel()` method
+
+The `map.forEachLayerAtPixel()` method has been deprecated.  It will be removed (or its behavior may change) in the next major release.  Please use the `layer.getData()` method instead.
+
+### v6.12.0
+
+No special changes are required when upgrading to the 6.12.0 release.
+
+### v6.11.0
+
+No special changes are required when upgrading to the 6.11.0 release.
+
+### v6.10.0
+
+#### New `interpolate` option for sources
+
+Sources now have an `interpolate` option.  This option controls whether data from the source is interpolated when resampling.
+
+For `ol/source/DataTile` sources, the default is `interpolate: false`.  This means that when a data tile source is used with a WebGL tile layer renderer, your style expression will have access to pixel values in the data tiles without interpolation.  If this option is set to true, linear interpolation will be used when over- or under-sampling the data.
+
+#### Deprecation of the `imageSmoothing` option for sources
+
+The `imageSmoothing` option for sources has been deprecated and will be removed in the next major release.  Use the `interpolate` option instead.
+
+```js
+// if you were using `imageSmoothing`
+const before = new TileSource({
+  imageSmoothing: false
+});
+
+// use the `interpolate` option instead
+const after = new TileSource({
+  interpolate: false
+});
+```
+
+### v6.9.0
+
+There should be nothing special required when upgrading from v6.8 to v6.9.
+
+### v6.8.0
+
+There should be nothing special required when upgrading from v6.7 to v6.8.
+
+### v6.7.0
+
+There should be nothing special required when upgrading from v6.6 to v6.7.
 
 ### v6.6.0
 
@@ -22,7 +78,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.10.0.md

@@ -0,0 +1,200 @@
+# 6.10.0
+
+Just in time for the new year, the 6.10 release brings another great batch of features and fixes for your OpenLayers applications.
+
+#### WebGL rendering
+
+You can now update the style for your WebGL tile layers with `layer.setStyle()`.  Keep in mind that it is more efficient to use style variables if you want to adjust styling on every render frame.  However, in cases where you want to completely reconfigure the style, you can use the new `layer.setStyle()` method.
+
+Additional WebGL tile layer rendering enhancements:
+ * A new `palette` operator was added that allows styling raster data based on a colormap.
+ * The `band` operator accepts expressions for the band number (in addition to numeric literals) – allowing for bands to be set by user provided style variables, for example.
+ * Tile layers now dispatch `prerender`, `postrender`, `precompose` and `postcompose` events with access to the WebGL rendering context.
+ * Layers that are adjacent to one another now share a single canvas element and rendering context – allowing for more layers in your maps before exhausting the browser's context limit.
+
+#### Vector tiles
+
+The Mapbox vector layer now works more easily with other vector tile providers.  In addition, vector tile layers can now be configured with a background color.
+
+#### New `interpolate` option for sources
+
+Sources now have an `interpolate` option.  This option controls whether data from the source is interpolated when resampling.
+
+For `ol/source/DataTile` sources, the default is `interpolate: false`.  This means that when a data tile source is used with a WebGL tile layer renderer, your style expression will have access to pixel values in the data tiles without interpolation.  If this option is set to true, linear interpolation will be used when over- or under-sampling the data.
+
+#### Deprecation of the `imageSmoothing` option for sources
+
+The `imageSmoothing` option for sources has been deprecated and will be removed in the next major release.  Use the `interpolate` option instead.
+
+```js
+// if you were using `imageSmoothing`
+const before = new TileSource({
+  imageSmoothing: false
+});
+
+// use the `interpolate` option instead
+const after = new TileSource({
+  interpolate: false
+});
+```
+
+#### List of all changes
+
+See below for more features and fixes.
+
+ * [#13155](https://github.com/openlayers/openlayers/pull/13155) - Allow interpolation to be configured for data tile sources ([@tschaub](https://github.com/tschaub))
+ * [#13165](https://github.com/openlayers/openlayers/pull/13165) - Do not exceed maximum call stack when parsing TopoJSON ([@ahocevar](https://github.com/ahocevar))
+ * [#13158](https://github.com/openlayers/openlayers/pull/13158) - Add example for dynamic clusters ([@ahocevar](https://github.com/ahocevar))
+ * [#13156](https://github.com/openlayers/openlayers/pull/13156) - Ensure that tile range covers all pixels ([@tschaub](https://github.com/tschaub))
+ * [#13154](https://github.com/openlayers/openlayers/pull/13154) - Update Export Map example to handle WebGL ([@mike-000](https://github.com/mike-000))
+ * [#13147](https://github.com/openlayers/openlayers/pull/13147) - Support rendering with a palette in WebGL ([@tschaub](https://github.com/tschaub))
+ * [#13142](https://github.com/openlayers/openlayers/pull/13142) - Include transpacific flights in Flight Animation example ([@mike-000](https://github.com/mike-000))
+ * [#13150](https://github.com/openlayers/openlayers/pull/13150) - Include layer opacity in Heatmap shader ([@mike-000](https://github.com/mike-000))
+ * [#13149](https://github.com/openlayers/openlayers/pull/13149) - Add layer also for programmatically selected features ([@ahocevar](https://github.com/ahocevar))
+ * [#13151](https://github.com/openlayers/openlayers/pull/13151) - Avoid error accessing attributes when context is lost ([@mike-000](https://github.com/mike-000))
+ * [#13144](https://github.com/openlayers/openlayers/pull/13144) - Replace deprecated syntax in example ([@mike-000](https://github.com/mike-000))
+ * [#13131](https://github.com/openlayers/openlayers/pull/13131) - Unset canvas css in stylesheet ([@ahocevar](https://github.com/ahocevar))
+ * [#13130](https://github.com/openlayers/openlayers/pull/13130) - Allow WebGL tile layers to be constructed without a source ([@tschaub](https://github.com/tschaub))
+ * [#13126](https://github.com/openlayers/openlayers/pull/13126) - Preserve the drawing buffer by default for WebGL layers ([@tschaub](https://github.com/tschaub))
+ * [#13127](https://github.com/openlayers/openlayers/pull/13127) - Fix for range slider on IE ([@mike-000](https://github.com/mike-000))
+ * [#13095](https://github.com/openlayers/openlayers/pull/13095) - Render is only complete when no tiles are queued ([@ahocevar](https://github.com/ahocevar))
+ * [#13120](https://github.com/openlayers/openlayers/pull/13120) - Populate view's object properties ([@ahocevar](https://github.com/ahocevar))
+ * [#13102](https://github.com/openlayers/openlayers/pull/13102) - update line-arrows example ([@jipexu](https://github.com/jipexu))
+ * [#13119](https://github.com/openlayers/openlayers/pull/13119) - Dispatch precompose and postcompose events for WebGL layers ([@tschaub](https://github.com/tschaub))
+ * [#13118](https://github.com/openlayers/openlayers/pull/13118) - Add a layer opacity example ([@tschaub](https://github.com/tschaub))
+ * [#13115](https://github.com/openlayers/openlayers/pull/13115) - Lazily create resources for worker ([@tschaub](https://github.com/tschaub))
+ * [#13103](https://github.com/openlayers/openlayers/pull/13103) - Assume limited precision when rounding ([@tschaub](https://github.com/tschaub))
+ * [#13097](https://github.com/openlayers/openlayers/pull/13097) - Use correct terrain-rgb tile size and update max zoom ([@mike-000](https://github.com/mike-000))
+ * [#13101](https://github.com/openlayers/openlayers/pull/13101) - Fix View set center to undefined ([@M393](https://github.com/M393))
+ * [#13085](https://github.com/openlayers/openlayers/pull/13085) - Add layer background ([@ahocevar](https://github.com/ahocevar))
+ * [#13083](https://github.com/openlayers/openlayers/pull/13083) - Support expressions for band arguments ([@tschaub](https://github.com/tschaub))
+ * [#13084](https://github.com/openlayers/openlayers/pull/13084) - Normalize relative sprite and glyph urls for style url ([@ahocevar](https://github.com/ahocevar))
+ * [#13020](https://github.com/openlayers/openlayers/pull/13020) - Allow WebGL tile layer style to be updated ([@tschaub](https://github.com/tschaub))
+ * [#13073](https://github.com/openlayers/openlayers/pull/13073) - Fall back to standard load handling when decode fails ([@ahocevar](https://github.com/ahocevar))
+ * [#13077](https://github.com/openlayers/openlayers/pull/13077) - update draw and modify features example ([@jipexu](https://github.com/jipexu))
+ * [#13069](https://github.com/openlayers/openlayers/pull/13069) - Normalize based on GDAL stats metadata ([@tschaub](https://github.com/tschaub))
+ * [#13070](https://github.com/openlayers/openlayers/pull/13070) - Use source minzoom if not configured otherwise ([@ahocevar](https://github.com/ahocevar))
+ * [#13065](https://github.com/openlayers/openlayers/pull/13065) - Fix typo in example ([@jipexu](https://github.com/jipexu))
+ * [#13060](https://github.com/openlayers/openlayers/pull/13060) - Avoid fetching data outside the grid extent ([@tschaub](https://github.com/tschaub))
+ * [#13054](https://github.com/openlayers/openlayers/pull/13054) - Updates for newer version of the OGC API spec draft ([@ahocevar](https://github.com/ahocevar))
+ * [#13045](https://github.com/openlayers/openlayers/pull/13045) - Fix tiles and background handling ([@ahocevar](https://github.com/ahocevar))
+ * [#13030](https://github.com/openlayers/openlayers/pull/13030) - Correctly set popover position in geographic example ([@MoonE](https://github.com/MoonE))
+ * [#13031](https://github.com/openlayers/openlayers/pull/13031) - Allow data tile source loader to return a value or a promise ([@tschaub](https://github.com/tschaub))
+ * [#13026](https://github.com/openlayers/openlayers/pull/13026) - Fix strokeStyle documentation ([@ahocevar](https://github.com/ahocevar))
+ * [#13027](https://github.com/openlayers/openlayers/pull/13027) - Restore the security scan workflow ([@openlayers](https://github.com/openlayers))
+ * [#13025](https://github.com/openlayers/openlayers/pull/13025) - Add background to MapboxVector layer ([@ahocevar](https://github.com/ahocevar))
+ * [#13013](https://github.com/openlayers/openlayers/pull/13013) - Use appropriate UNPACK_ALIGNMENT for data textures ([@mike-000](https://github.com/mike-000))
+ * [#13021](https://github.com/openlayers/openlayers/pull/13021) - Add the renderer type to generic layer template variables ([@tschaub](https://github.com/tschaub))
+ * [#13022](https://github.com/openlayers/openlayers/pull/13022) - Update the security scan task ([@tschaub](https://github.com/tschaub))
+ * [#13015](https://github.com/openlayers/openlayers/pull/13015) - Additional types for WebGL renderer, sources, and tiles ([@tschaub](https://github.com/tschaub))
+ * [#13012](https://github.com/openlayers/openlayers/pull/13012) - Remove unused dependencies ([@tschaub](https://github.com/tschaub))
+ * [#12976](https://github.com/openlayers/openlayers/pull/12976) - Handle ReprojTile in ol/layer/WebGLTile ([@mike-000](https://github.com/mike-000))
+ * [#13011](https://github.com/openlayers/openlayers/pull/13011) - Use registry URL when publishing ([@tschaub](https://github.com/tschaub))
+ * [#13009](https://github.com/openlayers/openlayers/pull/13009) - Use workflow_run event to deploy pull request previews ([@tschaub](https://github.com/tschaub))
+ * [#12965](https://github.com/openlayers/openlayers/pull/12965) - Allow canvas reuse for WebGL layers ([@tschaub](https://github.com/tschaub))
+ * [#12999](https://github.com/openlayers/openlayers/pull/12999) - Fix style related apidoc issues ([@MoonE](https://github.com/MoonE))
+ * [#12978](https://github.com/openlayers/openlayers/pull/12978) - Add null to style jsdoc of VectorImage ([@EvertEt](https://github.com/EvertEt))
+ * [#12997](https://github.com/openlayers/openlayers/pull/12997) - Lazily create the WebGL helper ([@tschaub](https://github.com/tschaub))
+ * [#12996](https://github.com/openlayers/openlayers/pull/12996) - Align labels with the Select elements in the Raster Reprojection example ([@mike-000](https://github.com/mike-000))
+ * [#12994](https://github.com/openlayers/openlayers/pull/12994) - Add a map property to layers ([@tschaub](https://github.com/tschaub))
+ * [#12987](https://github.com/openlayers/openlayers/pull/12987) - Browser test config update ([@tschaub](https://github.com/tschaub))
+ * [#12939](https://github.com/openlayers/openlayers/pull/12939) - Example that demonstrates a color expression using variables ([@tschaub](https://github.com/tschaub))
+ * [#12962](https://github.com/openlayers/openlayers/pull/12962) - No context sharing when layer opacity is set ([@ahocevar](https://github.com/ahocevar))
+ * [#12964](https://github.com/openlayers/openlayers/pull/12964) - Updated Bing Maps key ([@tschaub](https://github.com/tschaub))
+ * [#12958](https://github.com/openlayers/openlayers/pull/12958) - Reuse temporary canvas in getDataAtPixel() ([@mike-000](https://github.com/mike-000))
+ * [#12893](https://github.com/openlayers/openlayers/pull/12893) - Allow map target to be an external window ([@andrewcoder002](https://github.com/andrewcoder002))
+ * [#12955](https://github.com/openlayers/openlayers/pull/12955) - Make MapboxVector layer work in more access key scenarios ([@ahocevar](https://github.com/ahocevar))
+ * [#12935](https://github.com/openlayers/openlayers/pull/12935) - fix bug #12913 ([@mrpan](https://github.com/mrpan))
+ * [#12933](https://github.com/openlayers/openlayers/pull/12933) - Include WebGL context in render events for WebGL layers ([@tschaub](https://github.com/tschaub))
+ * [#12917](https://github.com/openlayers/openlayers/pull/12917) - Make removeFeature consistent with other remove methods ([@mike-000](https://github.com/mike-000))
+ * [#12918](https://github.com/openlayers/openlayers/pull/12918) - Add setDisplacement method to ol/style/Image and subclasses ([@mike-000](https://github.com/mike-000))
+ * [#12930](https://github.com/openlayers/openlayers/pull/12930) - Fix flaky view animation test ([@MoonE](https://github.com/MoonE))
+ * [#12915](https://github.com/openlayers/openlayers/pull/12915) - Test the new pull request deploy previews ([@tschaub](https://github.com/tschaub))
+ * [#12916](https://github.com/openlayers/openlayers/pull/12916) - Updates to deploy-preview job ([@openlayers](https://github.com/openlayers))
+ * [#12914](https://github.com/openlayers/openlayers/pull/12914) - Build site preview as a GitHub action ([@tschaub](https://github.com/tschaub))
+ * [#12891](https://github.com/openlayers/openlayers/pull/12891) - Restore browser compatibility where possible ([@mike-000](https://github.com/mike-000))
+ * [#12899](https://github.com/openlayers/openlayers/pull/12899) - Update docs to mention Vite ([@tschaub](https://github.com/tschaub))
+ * [#12890](https://github.com/openlayers/openlayers/pull/12890) - Release 6.9.0 ([@openlayers](https://github.com/openlayers))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#13162](https://github.com/openlayers/openlayers/pull/13162) - Bump yargs from 17.3.0 to 17.3.1 ([@openlayers](https://github.com/openlayers))
+ * [#13163](https://github.com/openlayers/openlayers/pull/13163) - Bump rollup from 2.61.1 to 2.62.0 ([@openlayers](https://github.com/openlayers))
+ * [#13161](https://github.com/openlayers/openlayers/pull/13161) - Bump webpack-dev-server from 4.6.0 to 4.7.1 ([@openlayers](https://github.com/openlayers))
+ * [#13160](https://github.com/openlayers/openlayers/pull/13160) - Bump puppeteer from 13.0.0 to 13.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#13140](https://github.com/openlayers/openlayers/pull/13140) - Bump @rollup/plugin-node-resolve from 13.0.6 to 13.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#13132](https://github.com/openlayers/openlayers/pull/13132) - Bump copy-webpack-plugin from 10.1.0 to 10.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#13141](https://github.com/openlayers/openlayers/pull/13141) - Bump webpack-dev-middleware from 5.2.2 to 5.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#13133](https://github.com/openlayers/openlayers/pull/13133) - Bump eslint from 8.4.1 to 8.5.0 ([@openlayers](https://github.com/openlayers))
+ * [#13139](https://github.com/openlayers/openlayers/pull/13139) - Bump @babel/core from 7.16.0 to 7.16.5 ([@openlayers](https://github.com/openlayers))
+ * [#13136](https://github.com/openlayers/openlayers/pull/13136) - Bump @babel/preset-env from 7.16.4 to 7.16.5 ([@openlayers](https://github.com/openlayers))
+ * [#13137](https://github.com/openlayers/openlayers/pull/13137) - Bump express from 4.17.1 to 4.17.2 ([@openlayers](https://github.com/openlayers))
+ * [#13138](https://github.com/openlayers/openlayers/pull/13138) - Bump ol-mapbox-style from 6.7.0 to 6.8.1 ([@openlayers](https://github.com/openlayers))
+ * [#13134](https://github.com/openlayers/openlayers/pull/13134) - Bump marked from 4.0.7 to 4.0.8 ([@openlayers](https://github.com/openlayers))
+ * [#13106](https://github.com/openlayers/openlayers/pull/13106) - Bump webpack from 5.64.4 to 5.65.0 ([@openlayers](https://github.com/openlayers))
+ * [#13108](https://github.com/openlayers/openlayers/pull/13108) - Bump rollup from 2.60.2 to 2.61.1 ([@openlayers](https://github.com/openlayers))
+ * [#13107](https://github.com/openlayers/openlayers/pull/13107) - Bump copy-webpack-plugin from 10.0.0 to 10.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#13105](https://github.com/openlayers/openlayers/pull/13105) - Bump eslint from 8.4.0 to 8.4.1 ([@openlayers](https://github.com/openlayers))
+ * [#13109](https://github.com/openlayers/openlayers/pull/13109) - Bump marked from 4.0.6 to 4.0.7 ([@openlayers](https://github.com/openlayers))
+ * [#13110](https://github.com/openlayers/openlayers/pull/13110) - Bump puppeteer from 12.0.1 to 13.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#13111](https://github.com/openlayers/openlayers/pull/13111) - Bump clean-css-cli from 5.4.2 to 5.5.0 ([@openlayers](https://github.com/openlayers))
+ * [#13091](https://github.com/openlayers/openlayers/pull/13091) - Bump rollup from 2.60.1 to 2.60.2 ([@openlayers](https://github.com/openlayers))
+ * [#13089](https://github.com/openlayers/openlayers/pull/13089) - Bump eslint from 8.3.0 to 8.4.0 ([@openlayers](https://github.com/openlayers))
+ * [#13090](https://github.com/openlayers/openlayers/pull/13090) - Bump marked from 4.0.5 to 4.0.6 ([@openlayers](https://github.com/openlayers))
+ * [#13093](https://github.com/openlayers/openlayers/pull/13093) - Bump yargs from 17.2.1 to 17.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#13092](https://github.com/openlayers/openlayers/pull/13092) - Bump puppeteer from 12.0.0 to 12.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#13088](https://github.com/openlayers/openlayers/pull/13088) - Bump geotiff from 1.0.8 to 1.0.9 ([@openlayers](https://github.com/openlayers))
+ * [#13057](https://github.com/openlayers/openlayers/pull/13057) - Bump puppeteer from 11.0.0 to 12.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#13055](https://github.com/openlayers/openlayers/pull/13055) - Bump webpack from 5.64.2 to 5.64.4 ([@openlayers](https://github.com/openlayers))
+ * [#13056](https://github.com/openlayers/openlayers/pull/13056) - Bump webpack-dev-server from 4.5.0 to 4.6.0 ([@openlayers](https://github.com/openlayers))
+ * [#13058](https://github.com/openlayers/openlayers/pull/13058) - Bump marked from 4.0.4 to 4.0.5 ([@openlayers](https://github.com/openlayers))
+ * [#13032](https://github.com/openlayers/openlayers/pull/13032) - Bump webpack from 5.64.0 to 5.64.2 ([@openlayers](https://github.com/openlayers))
+ * [#13033](https://github.com/openlayers/openlayers/pull/13033) - Bump webpack-sources from 3.2.1 to 3.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#13034](https://github.com/openlayers/openlayers/pull/13034) - Bump rollup from 2.60.0 to 2.60.1 ([@openlayers](https://github.com/openlayers))
+ * [#13035](https://github.com/openlayers/openlayers/pull/13035) - Bump copy-webpack-plugin from 9.1.0 to 10.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#13036](https://github.com/openlayers/openlayers/pull/13036) - Bump webpack-dev-middleware from 5.2.1 to 5.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#13037](https://github.com/openlayers/openlayers/pull/13037) - Bump @babel/preset-env from 7.16.0 to 7.16.4 ([@openlayers](https://github.com/openlayers))
+ * [#13038](https://github.com/openlayers/openlayers/pull/13038) - Bump marked from 4.0.3 to 4.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#13039](https://github.com/openlayers/openlayers/pull/13039) - Bump eslint from 8.2.0 to 8.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#13040](https://github.com/openlayers/openlayers/pull/13040) - Bump ol-mapbox-style from 6.5.2 to 6.5.3 ([@openlayers](https://github.com/openlayers))
+ * [#13041](https://github.com/openlayers/openlayers/pull/13041) - Bump karma from 6.3.8 to 6.3.9 ([@openlayers](https://github.com/openlayers))
+ * [#13001](https://github.com/openlayers/openlayers/pull/13001) - Bump webpack from 5.62.1 to 5.64.0 ([@openlayers](https://github.com/openlayers))
+ * [#13002](https://github.com/openlayers/openlayers/pull/13002) - Bump terser-webpack-plugin from 5.2.4 to 5.2.5 ([@openlayers](https://github.com/openlayers))
+ * [#13003](https://github.com/openlayers/openlayers/pull/13003) - Bump copy-webpack-plugin from 9.0.1 to 9.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#13004](https://github.com/openlayers/openlayers/pull/13004) - Bump rollup from 2.59.0 to 2.60.0 ([@openlayers](https://github.com/openlayers))
+ * [#13005](https://github.com/openlayers/openlayers/pull/13005) - Bump webpack-dev-server from 4.4.0 to 4.5.0 ([@openlayers](https://github.com/openlayers))
+ * [#13006](https://github.com/openlayers/openlayers/pull/13006) - Bump ol-mapbox-style from 6.5.1 to 6.5.2 ([@openlayers](https://github.com/openlayers))
+ * [#13007](https://github.com/openlayers/openlayers/pull/13007) - Bump marked from 4.0.0 to 4.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#13008](https://github.com/openlayers/openlayers/pull/13008) - Bump glob from 7.1.7 to 7.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12968](https://github.com/openlayers/openlayers/pull/12968) - Bump sinon from 11.1.2 to 12.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#12969](https://github.com/openlayers/openlayers/pull/12969) - Bump marked from 3.0.8 to 4.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12973](https://github.com/openlayers/openlayers/pull/12973) - Bump eslint from 8.1.0 to 8.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12972](https://github.com/openlayers/openlayers/pull/12972) - Bump karma-firefox-launcher from 2.1.1 to 2.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#12971](https://github.com/openlayers/openlayers/pull/12971) - Bump puppeteer from 10.4.0 to 11.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#12970](https://github.com/openlayers/openlayers/pull/12970) - Bump karma from 6.3.6 to 6.3.8 ([@openlayers](https://github.com/openlayers))
+ * [#12967](https://github.com/openlayers/openlayers/pull/12967) - Bump webpack from 5.61.0 to 5.62.1 ([@openlayers](https://github.com/openlayers))
+ * [#12948](https://github.com/openlayers/openlayers/pull/12948) - Bump webpack from 5.59.1 to 5.61.0 ([@openlayers](https://github.com/openlayers))
+ * [#12945](https://github.com/openlayers/openlayers/pull/12945) - Bump rollup from 2.58.3 to 2.59.0 ([@openlayers](https://github.com/openlayers))
+ * [#12946](https://github.com/openlayers/openlayers/pull/12946) - Bump @babel/preset-env from 7.15.8 to 7.16.0 ([@openlayers](https://github.com/openlayers))
+ * [#12947](https://github.com/openlayers/openlayers/pull/12947) - Bump @babel/core from 7.15.8 to 7.16.0 ([@openlayers](https://github.com/openlayers))
+ * [#12949](https://github.com/openlayers/openlayers/pull/12949) - Bump karma from 6.3.5 to 6.3.6 ([@openlayers](https://github.com/openlayers))
+ * [#12944](https://github.com/openlayers/openlayers/pull/12944) - Bump webpack-dev-server from 4.3.1 to 4.4.0 ([@openlayers](https://github.com/openlayers))
+ * [#12923](https://github.com/openlayers/openlayers/pull/12923) - Bump @rollup/plugin-commonjs from 21.0.0 to 21.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#12922](https://github.com/openlayers/openlayers/pull/12922) - Bump webpack-cli from 4.9.0 to 4.9.1 ([@openlayers](https://github.com/openlayers))
+ * [#12929](https://github.com/openlayers/openlayers/pull/12929) - Bump rollup from 2.58.0 to 2.58.3 ([@openlayers](https://github.com/openlayers))
+ * [#12920](https://github.com/openlayers/openlayers/pull/12920) - Bump marked from 3.0.7 to 3.0.8 ([@openlayers](https://github.com/openlayers))
+ * [#12924](https://github.com/openlayers/openlayers/pull/12924) - Bump clean-css-cli from 5.4.1 to 5.4.2 ([@openlayers](https://github.com/openlayers))
+ * [#12926](https://github.com/openlayers/openlayers/pull/12926) - Bump @rollup/plugin-node-resolve from 13.0.5 to 13.0.6 ([@openlayers](https://github.com/openlayers))
+ * [#12928](https://github.com/openlayers/openlayers/pull/12928) - Bump babel-loader from 8.2.2 to 8.2.3 ([@openlayers](https://github.com/openlayers))
+ * [#12921](https://github.com/openlayers/openlayers/pull/12921) - Bump webpack from 5.58.2 to 5.59.1 ([@openlayers](https://github.com/openlayers))
+ * [#12927](https://github.com/openlayers/openlayers/pull/12927) - Bump eslint from 8.0.1 to 8.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#12919](https://github.com/openlayers/openlayers/pull/12919) - Bump karma from 6.3.4 to 6.3.5 ([@openlayers](https://github.com/openlayers))
+ * [#12902](https://github.com/openlayers/openlayers/pull/12902) - Bump eslint from 7.32.0 to 8.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#12904](https://github.com/openlayers/openlayers/pull/12904) - Bump mocha from 9.1.2 to 9.1.3 ([@openlayers](https://github.com/openlayers))
+ * [#12905](https://github.com/openlayers/openlayers/pull/12905) - Bump glob from 7.1.7 to 7.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#12903](https://github.com/openlayers/openlayers/pull/12903) - Bump webpack from 5.58.1 to 5.58.2 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

changelog/v6.11.0.md

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

changelog/v6.12.0.md

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

changelog/v6.13.0.md

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

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.8.1
+
+This is a patch release which updates `ol.css` to restore a legible control button size in applications that do not have a css `font-size` set for `button` elements.
+
+ * [#12811](https://github.com/openlayers/openlayers/pull/12811) - Controls inherit font size from parent ([@tschaub](https://github.com/tschaub))

changelog/v6.9.0.md

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

config/jsdoc/api/index.md

@@ -27,7 +27,9 @@
         <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_VectorImage-VectorImageLayer.html">ol/layer/VectorImage</a><br>
+        <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a><br>
+        <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
       </div>
     </div>
   </div>
@@ -58,7 +60,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 +73,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/publish.js

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

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

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

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

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

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

@@ -29,7 +29,7 @@ var version = obj.packageInfo.version;
       gtag('js', new Date());
       gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
     </script>
-    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
+    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
     <script>
     window.addEventListener("load", function() {
@@ -64,14 +64,14 @@ var version = obj.packageInfo.version;
     </script>
     <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
-    <script src="scripts/prettify/prettify.js"> </script>
-    <script src="scripts/prettify/lang-css.js"> </script>
-    <script src="scripts/jquery.min.js"> </script>
-    <script src="scripts/bootstrap.bundle.min.js"> </script>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <script src="scripts/jquery.min.js"></script>
+    <script src="scripts/bootstrap.bundle.min.js"></script>
     <!--[if lt IE 9]>
       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
     <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
     <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
@@ -115,15 +115,35 @@ var version = obj.packageInfo.version;
         </nav>
       </header>
       <div id="wrap" class="row">
-          <?js= this.navigationHtml ?>
-          <div class="main col-md-8 col-lg-9">
-              <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
-              <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
-                <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
-              </div>
-              <?js= content ?>
+        <div class="navigation col-md-4 col-lg-3">
+          <div class="search-wrapper">
+            <div class="search">
+              <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
+            </div>
           </div>
+          <div class="navigation-list-wrapper">
+            <ul class="navigation-list search-empty"><?js
+              const item = this.navigationItems[docs[0].longname];
+              const listItem = item
+                ? this.partial('navigation.tmpl', {
+                    item: item,
+                    classes: ' toggle-manual toggle-manual-show',
+                  })
+                : '';
+              ?><?js= listItem ?>
+              <li class="loading">Loading …
+            </ul>
+          </div>
+        </div>
+
+        <div class="main col-md-8 col-lg-9">
+            <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
+            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+            </div>
+            <?js= content ?>
+        </div>
       </div>
       <script>prettyPrint();</script>
       <script src="scripts/linenumber.js"></script>

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

@@ -16,12 +16,12 @@ function getItemCssClass(type) {
 
 const printListItem = (member) => {
     const shortName = toShortName(member.name); ?>
-                    <li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
+            <li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
 };
 const printListItemWithStability = (member) => {
     const shortName = toShortName(member.name);
     const cls = member.stability && member.stability !== 'stable' ? ' class="unstable"' : ''; ?>
-                    <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
+            <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
 };
 const printFiresListItem = (eventName) => {
     const ancestor = self.find({longname: eventName})[0] ||
@@ -32,43 +32,28 @@ const printFiresListItem = (eventName) => {
     } else {
         const cls = ancestor.stability && ancestor.stability !== 'stable' ? ' class="unstable"' : '';
         const shortName = toShortName(ancestor.name); ?>
-                    <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
+            <li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
     }
 };
 
 function listContent(item, title, listItemPrinter) {
     const type = title.toLowerCase();
     if (item[type] && item[type].length) { ?>
-            <div class="member-list" data-type="<?js= type ?>">
-                <span class="subtitle"><?js= title ?></span>
-                <ul><?js
-        item[type].forEach(function (v) {
-            listItemPrinter(v);
-         }); ?>
-                </ul>
-            </div><?js
-    }
-}
-?>
-<div class="navigation col-md-4 col-lg-3">
-    <div class="search-wrapper">
-        <div class="search">
-            <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
-        </div>
-    </div>
-    <div class="navigation-list-wrapper">
-        <ul class="navigation-list search-empty"><?js
-            this.nav.forEach(function (item) { ?>
-            <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
-                <span class="title toggle">
-                    <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
-                    <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
-                </span><?js
-                    listContent(item, 'Members', printListItem);
-                    listContent(item, 'Typedefs', printListItemWithStability);
-                    listContent(item, 'Methods', printListItemWithStability);
-                    listContent(item, 'Fires', printFiresListItem);
-            }); ?>
+    <div class="member-list" data-type="<?js= type ?>">
+        <span class="subtitle"><?js= title ?></span>
+        <ul><?js
+        item[type].forEach((v) => listItemPrinter(v)); ?>
         </ul>
-    </div>
-</div>
+    </div><?js
+    }
+} ?>
+<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
+    <span class="title toggle">
+        <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
+        <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
+    </span><?js
+listContent(item, 'Members', printListItem);
+listContent(item, 'Typedefs', printListItemWithStability);
+listContent(item, 'Methods', printListItemWithStability);
+listContent(item, 'Fires', printFiresListItem);
+?>

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/jsdoc/plugins/markdown.cjs

@@ -9,7 +9,7 @@
  * works around an issue with `~` characters in module paths by escaping them.
  */
 
-const marked = require('marked');
+const {marked} = require('marked');
 const format = require('util').format;
 
 const tags = [

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. */
@@ -51,8 +51,8 @@
     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    "inlineSources": false                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
+    "inlineSources": false,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    "skipLibCheck": true
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */

config/webpack-config-legacy-build.mjs

@@ -1,37 +1,37 @@
 import TerserPlugin from 'terser-webpack-plugin';
-import path, {dirname} from 'path';
-import {fileURLToPath} from 'url';
-
-const baseDir = dirname(fileURLToPath(import.meta.url));
+import path from 'path';
 
 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'),
     },
@@ -48,6 +48,7 @@ export default {
   },
   output: {
     path: path.resolve('./build/legacy'),
+    publicPath: '',
     filename: 'ol.js',
     library: 'ol',
     libraryTarget: 'umd',

doc/errors/index.md

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

doc/quickstart.hbs

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

doc/tutorials/bundle.md

@@ -1,5 +1,5 @@
 ---
-title: Basic project setup using NPM and Parcel
+title: Basic project setup using NPM and Vite
 layout: doc.hbs
 ---
 
@@ -7,7 +7,7 @@ layout: doc.hbs
 
 Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the [`ol`](https://npmjs.com/package/ol) package. This tutorial walks you through setting up a simple dev environment, which requires [node](https://nodejs.org) for everything to work.
 
-In this tutorial, we will be using [Parcel](https://parceljs.org) to bundle our application. There are several other options, some of which are linked from the [README](https://npmjs.com/package/ol).
+In this tutorial, we will be using [Vite](https://vitejs.dev/) as a development tool and to bundle our application for production. There are several other options, some of which are linked from the [README](https://npmjs.com/package/ol).
 
 ## Application setup
 
@@ -15,13 +15,15 @@ Create a new empty directory for your project and navigate to it by running `mkd
 
     npx create-ol-app
 
-This will install the `ol` package, set up a development environment with additional dependencies, and give you an `index.html` and `main.js` starting point for your application.  By default, [Parcel](https://parceljs.org) will be used as a module loader and bundler.  See the [`create-ol-app`](https://github.com/openlayers/create-ol-app) documentation for details on using another bundler.
+*You will need to have `git` installed for the above command to work.  If you receive an error, make sure that [Git is installed](https://github.com/git-guides/install-git) on your system.*
+
+This will install the `ol` package, set up a development environment with additional dependencies, and give you an `index.html` and `main.js` starting point for your application.  By default, [Vite](https://vitejs.dev/) will be used as a module loader and bundler.  See the [`create-ol-app`](https://github.com/openlayers/create-ol-app) documentation for details on using another bundler.
 
 To start the development server
 
     npm start
 
-You can now visit http://localhost:1234/ to view your application.  Begin making changes to the `index.html` and `main.js` files to add additional functionality.
+You can now visit http://localhost:3000/ to view your application.  Begin making changes to the `index.html` and `main.js` files to add additional functionality.
 
 To create a production bundle of your application, simply type
 

examples/.eslintrc

@@ -3,6 +3,7 @@
     "$": false,
     "arc": false,
     "common": false,
+    "chroma": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
     "html2canvas": false,
@@ -13,6 +14,8 @@
     "jsts": false,
     "JSZip": false,
     "mapboxgl": false,
+    "monotoneChainConvexHull": false,
+    "NumpyLoader": false,
     "saveAs": false,
     "toastr": false,
     "topojson": false,

examples/bing-maps.html

@@ -6,7 +6,7 @@ docs: >
   <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol/source/BingMaps</code>.</p>
 tags: "bing, bing-maps"
 cloak:
-  - key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
+  - key: AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN
     value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
 ---
  <div id="map" class="map"></div>

examples/bing-maps.js

@@ -18,7 +18,7 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
       visible: false,
       preload: Infinity,
       source: new BingMaps({
-        key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp',
+        key: 'AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN',
         imagerySet: styles[i],
         // use maxZoom 19 to see stretched tiles instead of the BingMaps
         // "no photos at this zoom level" tiles

examples/box-selection.css

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

examples/box-selection.html

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

examples/box-selection.js

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

examples/canvas-gradient-pattern.html

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

examples/canvas-gradient-pattern.js

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

examples/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/clusters-dynamic.html

@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: Dynamic clusters
+shortdesc: Clusters with zoom-to-cluster, hull view, and uncluttering of overlapping features.
+docs: >
+  <p>This example shows open data of subsidized photovoltaic installations in Vienna. Different style functions
+    are used for cluster display, single feature display, convex hull of a cluster, and an expanded view of
+    overlapping features. Hovering over a cluster shows its convex hull. Clicking on a cluster zooms to the
+    extent of the contained features. Clicking on a cluster consisting of features that are very close to each other reveals an expanded view
+    of the features, along a circle around the cluster.</p>
+  <p>Features are styled differently depending on the power of the photovoltaic installation.</p>
+tags: "marker, cluster, vector, style, convex hull"
+resources:
+  - https://unpkg.com/monotone-chain-convex-hull@1.0.0/lib/index.js
+---
+<div id="map" class="map"></div>

examples/clusters-dynamic.js

@@ -0,0 +1,278 @@
+import Feature from '../src/ol/Feature.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {
+  Circle as CircleStyle,
+  Fill,
+  Icon,
+  Stroke,
+  Style,
+  Text,
+} from '../src/ol/style.js';
+import {Cluster, Vector as VectorSource, XYZ} from '../src/ol/source.js';
+import {LineString, Point, Polygon} from '../src/ol/geom.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {createEmpty, extend, getWidth} from '../src/ol/extent.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+const circleDistanceMultiplier = 1;
+const circleFootSeparation = 28;
+const circleStartAngle = Math.PI / 2;
+
+const convexHullFill = new Fill({
+  color: 'rgba(255, 153, 0, 0.4)',
+});
+const convexHullStroke = new Stroke({
+  color: 'rgba(204, 85, 0, 1)',
+  width: 1.5,
+});
+const outerCircleFill = new Fill({
+  color: 'rgba(255, 153, 102, 0.3)',
+});
+const innerCircleFill = new Fill({
+  color: 'rgba(255, 165, 0, 0.7)',
+});
+const textFill = new Fill({
+  color: '#fff',
+});
+const textStroke = new Stroke({
+  color: 'rgba(0, 0, 0, 0.6)',
+  width: 3,
+});
+const innerCircle = new CircleStyle({
+  radius: 14,
+  fill: innerCircleFill,
+});
+const outerCircle = new CircleStyle({
+  radius: 20,
+  fill: outerCircleFill,
+});
+const darkIcon = new Icon({
+  src: 'data/icons/emoticon-cool.svg',
+});
+const lightIcon = new Icon({
+  src: 'data/icons/emoticon-cool-outline.svg',
+});
+
+/**
+ * Single feature style, users for clusters with 1 feature and cluster circles.
+ * @param {Feature} clusterMember A feature from a cluster.
+ * @return {Style} An icon style for the cluster member's location.
+ */
+function clusterMemberStyle(clusterMember) {
+  return new Style({
+    geometry: clusterMember.getGeometry(),
+    image: clusterMember.get('LEISTUNG') > 5 ? darkIcon : lightIcon,
+  });
+}
+
+let clickFeature, clickResolution;
+/**
+ * Style for clusters with features that are too close to each other, activated on click.
+ * @param {Feature} cluster A cluster with overlapping members.
+ * @param {number} resolution The current view resolution.
+ * @return {Style} A style to render an expanded view of the cluster members.
+ */
+function clusterCircleStyle(cluster, resolution) {
+  if (cluster !== clickFeature || resolution !== clickResolution) {
+    return;
+  }
+  const clusterMembers = cluster.get('features');
+  const centerCoordinates = cluster.getGeometry().getCoordinates();
+  return generatePointsCircle(
+    clusterMembers.length,
+    cluster.getGeometry().getCoordinates(),
+    resolution
+  ).reduce((styles, coordinates, i) => {
+    const point = new Point(coordinates);
+    const line = new LineString([centerCoordinates, coordinates]);
+    styles.unshift(
+      new Style({
+        geometry: line,
+        stroke: convexHullStroke,
+      })
+    );
+    styles.push(
+      clusterMemberStyle(
+        new Feature({
+          ...clusterMembers[i].getProperties(),
+          geometry: point,
+        })
+      )
+    );
+    return styles;
+  }, []);
+}
+
+/**
+ * From
+ * https://github.com/Leaflet/Leaflet.markercluster/blob/31360f2/src/MarkerCluster.Spiderfier.js#L55-L72
+ * Arranges points in a circle around the cluster center, with a line pointing from the center to
+ * each point.
+ * @param {number} count Number of cluster members.
+ * @param {Array<number>} clusterCenter Center coordinate of the cluster.
+ * @param {number} resolution Current view resolution.
+ * @return {Array<Array<number>>} An array of coordinates representing the cluster members.
+ */
+function generatePointsCircle(count, clusterCenter, resolution) {
+  const circumference =
+    circleDistanceMultiplier * circleFootSeparation * (2 + count);
+  let legLength = circumference / (Math.PI * 2); //radius from circumference
+  const angleStep = (Math.PI * 2) / count;
+  const res = [];
+  let angle;
+
+  legLength = Math.max(legLength, 35) * resolution; // Minimum distance to get outside the cluster icon.
+
+  for (let i = 0; i < count; ++i) {
+    // Clockwise, like spiral.
+    angle = circleStartAngle + i * angleStep;
+    res.push([
+      clusterCenter[0] + legLength * Math.cos(angle),
+      clusterCenter[1] + legLength * Math.sin(angle),
+    ]);
+  }
+
+  return res;
+}
+
+let hoverFeature;
+/**
+ * Style for convex hulls of clusters, activated on hover.
+ * @param {Feature} cluster The cluster feature.
+ * @return {Style} Polygon style for the convex hull of the cluster.
+ */
+function clusterHullStyle(cluster) {
+  if (cluster !== hoverFeature) {
+    return;
+  }
+  const originalFeatures = cluster.get('features');
+  const points = originalFeatures.map((feature) =>
+    feature.getGeometry().getCoordinates()
+  );
+  return new Style({
+    geometry: new Polygon([monotoneChainConvexHull(points)]),
+    fill: convexHullFill,
+    stroke: convexHullStroke,
+  });
+}
+
+function clusterStyle(feature) {
+  const size = feature.get('features').length;
+  if (size > 1) {
+    return [
+      new Style({
+        image: outerCircle,
+      }),
+      new Style({
+        image: innerCircle,
+        text: new Text({
+          text: size.toString(),
+          fill: textFill,
+          stroke: textStroke,
+        }),
+      }),
+    ];
+  } else {
+    const originalFeature = feature.get('features')[0];
+    return clusterMemberStyle(originalFeature);
+  }
+}
+
+const vectorSource = new VectorSource({
+  format: new GeoJSON(),
+  url: 'data/geojson/photovoltaic.json',
+});
+
+const clusterSource = new Cluster({
+  attributions:
+    'Data: <a href="https://www.data.gv.at/auftritte/?organisation=stadt-wien">Stadt Wien</a>',
+  distance: 35,
+  source: vectorSource,
+});
+
+// Layer displaying the convex hull of the hovered cluster.
+const clusterHulls = new VectorLayer({
+  source: clusterSource,
+  style: clusterHullStyle,
+});
+
+// Layer displaying the clusters and individual features.
+const clusters = new VectorLayer({
+  source: clusterSource,
+  style: clusterStyle,
+});
+
+// Layer displaying the expanded view of overlapping cluster members.
+const clusterCircles = new VectorLayer({
+  source: clusterSource,
+  style: clusterCircleStyle,
+});
+
+const raster = new TileLayer({
+  source: new XYZ({
+    attributions:
+      'Base map: <a target="_blank" href="https://basemap.at/">basemap.at</a>',
+    url: 'https://maps{1-4}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png',
+  }),
+});
+
+const map = new Map({
+  layers: [raster, clusterHulls, clusters, clusterCircles],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    maxZoom: 19,
+    extent: [
+      ...fromLonLat([16.1793, 48.1124]),
+      ...fromLonLat([16.5559, 48.313]),
+    ],
+    showFullExtent: true,
+  }),
+});
+
+map.on('pointermove', (event) => {
+  clusters.getFeatures(event.pixel).then((features) => {
+    if (features[0] !== hoverFeature) {
+      // Display the convex hull on hover.
+      hoverFeature = features[0];
+      clusterHulls.setStyle(clusterHullStyle);
+      // Change the cursor style to indicate that the cluster is clickable.
+      map.getTargetElement().style.cursor =
+        hoverFeature && hoverFeature.get('features').length > 1
+          ? 'pointer'
+          : '';
+    }
+  });
+});
+
+map.on('click', (event) => {
+  clusters.getFeatures(event.pixel).then((features) => {
+    if (features.length > 0) {
+      const clusterMembers = features[0].get('features');
+      if (clusterMembers.length > 1) {
+        // Calculate the extent of the cluster members.
+        const extent = createEmpty();
+        clusterMembers.forEach((feature) =>
+          extend(extent, feature.getGeometry().getExtent())
+        );
+        const view = map.getView();
+        const resolution = map.getView().getResolution();
+        if (
+          view.getZoom() === view.getMaxZoom() ||
+          (getWidth(extent) < resolution && getWidth(extent) < resolution)
+        ) {
+          // Show an expanded view of the cluster members.
+          clickFeature = features[0];
+          clickResolution = resolution;
+          clusterCircles.setStyle(clusterCircleStyle);
+        } else {
+          // Zoom to the extent of the cluster members.
+          view.fit(extent, {duration: 500, padding: [50, 50, 50, 50]});
+        }
+      }
+    }
+  });
+});

examples/cog-colors.css

@@ -0,0 +1,10 @@
+.data {
+  text-align: right;
+  font-family: monospace;
+}
+td {
+  padding-right: 10px;
+}
+input[type="range"] {
+  vertical-align: text-bottom;
+}

examples/cog-colors.html

@@ -0,0 +1,32 @@
+---
+layout: example.html
+title: NDVI with a Dynamic Color Ramp
+shortdesc: NDVI from a COG with a dynamic color ramp
+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.  The "stop" values
+  for the color ramp are derived from application provided style variables.  Using the inputs above, the min and max
+  colors and values can be adjusted.  The `layer.updateStyleVariables()` method is called to update the
+  variables used in the interpolated color expression.
+tags: "cog, ndvi"
+resources:
+  - https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.2/chroma.min.js
+---
+<div id="map" class="map"></div>
+<table>
+  <tbody>
+    <tr>
+      <td>Min NDVI</td>
+      <td><input type="range" id="min-value-input" min="-1.0" max="-0.1" step="0.01"></td>
+      <td class="data" id="min-value-output"></td>
+      <td><input type="color" id="min-color"></td>
+    </tr>
+    <tr>
+      <td>Max NDVI</td>
+      <td><input type="range" id="max-value-input" min="0.1" max="1.0" step="0.01"></td>
+      <td class="data" id="max-value-output"></td>
+      <td><input type="color" id="max-color"></td>
+    </tr>
+  </tbody>
+</table>

examples/cog-colors.js

@@ -0,0 +1,106 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+
+const segments = 10;
+
+const defaultMinColor = '#0300AD';
+const defaultMaxColor = '#00ff00';
+
+const defaultMinValue = -0.5;
+const defaultMaxValue = 0.7;
+
+const minColorInput = document.getElementById('min-color');
+minColorInput.value = defaultMinColor;
+
+const maxColorInput = document.getElementById('max-color');
+maxColorInput.value = defaultMaxColor;
+
+const minValueOutput = document.getElementById('min-value-output');
+const minValueInput = document.getElementById('min-value-input');
+minValueInput.value = defaultMinValue.toString();
+
+const maxValueOutput = document.getElementById('max-value-output');
+const maxValueInput = document.getElementById('max-value-input');
+maxValueInput.value = defaultMaxValue.toString();
+
+function getVariables() {
+  const variables = {};
+
+  const minColor = minColorInput.value;
+  const maxColor = maxColorInput.value;
+  const scale = chroma.scale([minColor, maxColor]).mode('lab');
+
+  const minValue = parseFloat(minValueInput.value);
+  const maxValue = parseFloat(maxValueInput.value);
+  const delta = (maxValue - minValue) / segments;
+
+  for (let i = 0; i <= segments; ++i) {
+    const color = scale(i / segments).rgb();
+    const value = minValue + i * delta;
+    variables[`value${i}`] = value;
+    variables[`red${i}`] = color[0];
+    variables[`green${i}`] = color[1];
+    variables[`blue${i}`] = color[2];
+  }
+  return variables;
+}
+
+function colors() {
+  const stops = [];
+  for (let i = 0; i <= segments; ++i) {
+    stops[i * 2] = ['var', `value${i}`];
+    const red = ['var', `red${i}`];
+    const green = ['var', `green${i}`];
+    const blue = ['var', `blue${i}`];
+    stops[i * 2 + 1] = ['color', red, green, blue];
+  }
+  return stops;
+}
+
+const ndvi = [
+  '/',
+  ['-', ['band', 2], ['band', 1]],
+  ['+', ['band', 2], ['band', 1]],
+];
+
+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 layer = new TileLayer({
+  style: {
+    variables: getVariables(),
+    color: ['interpolate', ['linear'], ndvi, ...colors()],
+  },
+  source: source,
+});
+
+function update() {
+  layer.updateStyleVariables(getVariables());
+  minValueOutput.innerText = parseFloat(minValueInput.value).toFixed(1);
+  maxValueOutput.innerText = parseFloat(maxValueInput.value).toFixed(1);
+}
+
+minColorInput.addEventListener('input', update);
+maxColorInput.addEventListener('input', update);
+minValueInput.addEventListener('input', update);
+maxValueInput.addEventListener('input', update);
+update();
+
+const map = new Map({
+  target: 'map',
+  layers: [layer],
+  view: source.getView(),
+});

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,14 @@
+---
+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.
+  The `layer.getData()` method can be used to retrieve pixel values from the GeoTIFF.  Move your mouse
+  or tap on the map to see calculated NDVI values based on the red and near-infrared pixel values.
+tags: "cog, ndvi"
+---
+<div id="map" class="map"></div>
+<div>NDVI: <span id="output"></span></div>

examples/cog-math.js

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

examples/cog-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. The `ol/source.sourcesFromTileGrid`
+  helper function creates sources from this pyramid on demand. The GeoTIFFs used by those sources have
+  a resolution range that matches the range of a single z of the pyramid tile grid.
+tags: "cog, tilepyramid, stac"
+---
+<div id="map" class="map"></div>

examples/cog-pyramid.js

@@ -0,0 +1,46 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.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 {sourcesFromTileGrid} from '../src/ol/source.js';
+
+// Metadata from https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/2019_EOxCloudless_rgb.json
+
+// Tile grid of the GeoTIFF pyramid layout
+const tileGrid = new TileGrid({
+  extent: [-180, -90, 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 WebGLTileLayer({
+  sources: sourcesFromTileGrid(
+    tileGrid,
+    ([z, x, y]) =>
+      new GeoTIFF({
+        sources: [
+          {
+            url: `https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/${z}/${y}/${x}.tif`,
+          },
+        ],
+      })
+  ),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [pyramid],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 0,
+    showFullExtent: true,
+  }),
+});

examples/cog-stretch.css

@@ -0,0 +1,6 @@
+.controls {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: baseline;
+  gap: 0 1em;
+}

examples/cog-stretch.html

@@ -0,0 +1,44 @@
+---
+layout: example.html
+title: Band Contrast Stretch
+shortdesc: Choosing bands and applying contrast stretch
+docs: >
+  This example uses the `layer.updateStyleVariables()` method to update the rendering
+  of a GeoTIFF based on user selected bands and contrast stretch parameters.
+tags: "cog, webgl, style"
+---
+<div id="map" class="map"></div>
+<div class="controls">
+  <label for="red">Red channel</label>
+  <select id="red">
+    <option value="1" selected>visible red</option>
+    <option value="2">visible green</option>
+    <option value="3">visible blue</option>
+    <option value="4">near infrared</option>
+  </select>
+  <label>max
+    <input type="range" id="redMax" value="3000" min="2000" max="5000">
+  </label>
+
+  <label for="green">Green channel</label>
+  <select id="green">
+    <option value="1">visible red</option>
+    <option value="2" selected>visible green</option>
+    <option value="3">visible blue</option>
+    <option value="4">near infrared</option>
+  </select>
+  <label>max
+    <input type="range" id="greenMax" value="3000" min="2000" max="5000">
+  </label>
+
+  <label for="blue">Blue channel</label>
+  <select id="blue">
+    <option value="1">visible red</option>
+    <option value="2">visible green</option>
+    <option value="3" selected>visible blue</option>
+    <option value="4">near infrared</option>
+  </select>
+  <label>max
+    <input type="range" id="blueMax" value="3000" min="2000" max="5000">
+  </label>
+</div>

examples/cog-stretch.js

@@ -0,0 +1,62 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+
+const channels = ['red', 'green', 'blue'];
+for (const channel of channels) {
+  const selector = document.getElementById(channel);
+  selector.addEventListener('change', update);
+
+  const input = document.getElementById(`${channel}Max`);
+  input.addEventListener('input', update);
+}
+
+function getVariables() {
+  const variables = {};
+  for (const channel of channels) {
+    const selector = document.getElementById(channel);
+    variables[channel] = parseInt(selector.value, 10);
+
+    const inputId = `${channel}Max`;
+    const input = document.getElementById(inputId);
+    variables[inputId] = parseInt(input.value, 10);
+  }
+  return variables;
+}
+
+const layer = new TileLayer({
+  style: {
+    variables: getVariables(),
+    color: [
+      'array',
+      ['/', ['band', ['var', 'red']], ['var', 'redMax']],
+      ['/', ['band', ['var', 'green']], ['var', 'greenMax']],
+      ['/', ['band', ['var', 'blue']], ['var', 'blueMax']],
+      1,
+    ],
+  },
+  source: new GeoTIFF({
+    normalize: false,
+    sources: [
+      {
+        url: 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif',
+      },
+    ],
+  }),
+});
+
+function update() {
+  layer.updateStyleVariables(getVariables());
+}
+
+const map = new Map({
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 2,
+    maxZoom: 6,
+  }),
+});

examples/cog-style.html

@@ -0,0 +1,20 @@
+---
+layout: example.html
+title: Change Tile Layer Style
+shortdesc: Updating the style of a WebGL tile layer
+docs: >
+  When you want to change the style of a WebGL tile layer based on some change in your
+  application state, you should use the `layer.updateStyleVariables()` method.  A layer can
+  be efficiently rendered even if style variables are changed on every render frame.
+  In cases where you need to completely replace the style of a layer, you can call the
+  `layer.setStyle()` method.  This method should not be called in response to frequent
+  user events (e.g. mouse movement, dragging a slider, etc.).
+tags: "cog, webgl, style"
+---
+<div id="map" class="map"></div>
+Set the layer style
+<select id="style">
+  <option value="trueColor">True Color</option>
+  <option value="falseColor">False Color</option>
+  <option value="ndvi">NDVI</option>
+</select>

examples/cog-style.js

@@ -0,0 +1,105 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+
+const max = 3000;
+function normalize(value) {
+  return ['/', value, max];
+}
+
+const red = normalize(['band', 1]);
+const green = normalize(['band', 2]);
+const blue = normalize(['band', 3]);
+const nir = normalize(['band', 4]);
+
+const trueColor = {
+  color: ['array', red, green, blue, 1],
+  gamma: 1.1,
+};
+
+const falseColor = {
+  color: ['array', nir, red, green, 1],
+  gamma: 1.1,
+};
+
+const ndvi = {
+  color: [
+    'interpolate',
+    ['linear'],
+    ['/', ['-', nir, red], ['+', nir, red]],
+    // 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],
+  ],
+};
+
+const layer = new TileLayer({
+  style: trueColor,
+  source: new GeoTIFF({
+    normalize: false,
+    sources: [
+      {
+        url: 'https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif',
+      },
+    ],
+  }),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 2,
+    maxZoom: 6,
+  }),
+});
+
+const styles = {trueColor, falseColor, ndvi};
+const styleSelector = document.getElementById('style');
+
+function update() {
+  const style = styles[styleSelector.value];
+  layer.setStyle(style);
+}
+styleSelector.addEventListener('change', update);

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-hit-detection-renderer.html

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

examples/custom-hit-detection-renderer.js

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

examples/custom-interactions.html

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

examples/custom-interactions.js

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

examples/data-tiles.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 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/data/icons/emoticon-cool-outline.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,10C19,11.38 16.88,12.5 15.5,12.5C14.12,12.5 12.75,11.38 12.75,10H11.25C11.25,11.38 9.88,12.5 8.5,12.5C7.12,12.5 5,11.38 5,10H4.25C4.09,10.64 4,11.31 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12C20,11.31 19.91,10.64 19.75,10H19M12,4C9.04,4 6.45,5.61 5.07,8H18.93C17.55,5.61 14.96,4 12,4M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" /></svg>

examples/data/icons/emoticon-cool.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M3.22,7.22C4.91,4.11 8.21,2 12,2C15.79,2 19.09,4.11 20.78,7.22L20,8H4L3.22,7.22M21.4,8.6C21.78,9.67 22,10.81 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12C2,10.81 2.22,9.67 2.6,8.6L4,10H5C5,11.38 7.12,12.5 8.5,12.5C9.88,12.5 11.25,11.38 11.25,10H12.75C12.75,11.38 14.12,12.5 15.5,12.5C16.88,12.5 19,11.38 19,10H20L21.4,8.6M16.19,15.42L14.77,14C14.32,14.72 13.25,15.23 12,15.23C10.75,15.23 9.68,14.72 9.23,14L7.81,15.42C8.71,16.5 10.25,17.23 12,17.23C13.75,17.23 15.29,16.5 16.19,15.42Z" /></svg>

examples/draw-and-modify-features.js

@@ -4,6 +4,7 @@ import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {Draw, Modify, Snap} from '../src/ol/interaction.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {get} from '../src/ol/proj.js';
 
 const raster = new TileLayer({
   source: new OSM(),
@@ -29,12 +30,18 @@ const vector = new VectorLayer({
   }),
 });
 
+// Limit multi-world panning to one world east and west of the real world.
+// Geometry coordinates have to be within that range.
+const extent = get('EPSG:3857').getExtent().slice();
+extent[0] += extent[0];
+extent[2] += extent[2];
 const map = new Map({
   layers: [raster, vector],
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
     zoom: 4,
+    extent,
   }),
 });
 

examples/edit-geographic.html

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

examples/edit-geographic.js

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

examples/export-map.js

@@ -1,20 +1,46 @@
 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 {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {Fill, Style} from '../src/ol/style.js';
+import {
+  Heatmap as HeatmapLayer,
+  Vector as VectorLayer,
+} from '../src/ol/layer.js';
+import {asArray} from '../src/ol/color.js';
+
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
 
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
       source: new VectorSource({
-        url: 'data/geojson/countries.geojson',
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
         format: new GeoJSON(),
       }),
-      opacity: 0.5,
+      background: 'white',
+      style: function (feature) {
+        const color = asArray(feature.get('COLOR_NNH') || '#eeeeee');
+        color[3] = 0.75;
+        style.getFill().setColor(color);
+        return style;
+      },
+    }),
+    new HeatmapLayer({
+      source: new VectorSource({
+        url: 'data/geojson/world-cities.geojson',
+        format: new GeoJSON(),
+      }),
+      weight: function (feature) {
+        return feature.get('population') / 1e7;
+      },
+      radius: 15,
+      blur: 15,
+      opacity: 0.75,
     }),
   ],
   target: 'map',
@@ -32,17 +58,37 @@ document.getElementById('export-png').addEventListener('click', function () {
     mapCanvas.height = size[1];
     const mapContext = mapCanvas.getContext('2d');
     Array.prototype.forEach.call(
-      document.querySelectorAll('.ol-layer canvas'),
+      map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
       function (canvas) {
         if (canvas.width > 0) {
-          const opacity = canvas.parentNode.style.opacity;
+          const opacity =
+            canvas.parentNode.style.opacity || canvas.style.opacity;
           mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+
+          const backgroundColor = canvas.parentNode.style.backgroundColor;
+          if (backgroundColor) {
+            mapContext.fillStyle = backgroundColor;
+            mapContext.fillRect(0, 0, canvas.width, canvas.height);
+          }
+
+          let matrix;
           const transform = canvas.style.transform;
-          // Get the transform parameters from the style's transform matrix
-          const matrix = transform
-            .match(/^matrix\(([^\(]*)\)$/)[1]
-            .split(',')
-            .map(Number);
+          if (transform) {
+            // Get the transform parameters from the style's transform matrix
+            matrix = transform
+              .match(/^matrix\(([^\(]*)\)$/)[1]
+              .split(',')
+              .map(Number);
+          } else {
+            matrix = [
+              parseFloat(canvas.style.width) / canvas.width,
+              0,
+              0,
+              parseFloat(canvas.style.height) / canvas.height,
+              0,
+              0,
+            ];
+          }
           // Apply the transform to the export map context
           CanvasRenderingContext2D.prototype.setTransform.apply(
             mapContext,
@@ -52,6 +98,7 @@ document.getElementById('export-png').addEventListener('click', function () {
         }
       }
     );
+    mapContext.globalAlpha = 1;
     if (navigator.msSaveBlob) {
       // link download attribute does not work on MS browsers
       navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');

examples/export-pdf.js

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

examples/extent-interaction.js

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

examples/external-map.html

@@ -0,0 +1,13 @@
+---
+layout: example.html
+title: External map
+shortdesc: Move a map to a seperate window.
+docs: >
+  Move a map to a seperate window.
+tags: "external, window"
+sources:
+  - path: resources/external-map-map.html
+---
+<div id="map" class="map"></div>
+<input id="external-map-button" type="button" value="Open external map"></input>
+<span id="blocker-notice" hidden>Could not open map in external window. If you are using a popup or ad blocker you may need to disable it for this example.</span>

examples/external-map.js

@@ -0,0 +1,112 @@
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {
+  Control,
+  FullScreen,
+  defaults as defaultControls,
+} from '../src/ol/control.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+class UnusableMask extends Control {
+  constructor() {
+    super({
+      element: document.createElement('div'),
+    });
+    this.element.setAttribute('hidden', 'hidden');
+    this.element.className = 'ol-mask';
+    this.element.innerHTML = '<div>Map not usable</div>';
+  }
+}
+
+const localMapTarget = document.getElementById('map');
+
+const map = new Map({
+  target: localMapTarget,
+  controls: defaultControls().extend([new FullScreen(), new UnusableMask()]),
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+  ],
+  view: new View({
+    center: fromLonLat([37.41, 8.82]),
+    zoom: 4,
+  }),
+});
+
+let mapWindow;
+function closeMapWindow() {
+  if (mapWindow) {
+    mapWindow.close();
+    mapWindow = undefined;
+  }
+}
+// Close external window in case the main page is closed or reloaded
+window.addEventListener('pagehide', closeMapWindow);
+
+const button = document.getElementById('external-map-button');
+
+function resetMapTarget() {
+  localMapTarget.style.height = '';
+  map.setTarget(localMapTarget);
+  button.disabled = false;
+}
+
+function updateOverlay() {
+  if (!mapWindow) {
+    return;
+  }
+  const externalMapTarget = mapWindow.document.getElementById('map');
+  if (!externalMapTarget) {
+    return;
+  }
+  if (document.visibilityState === 'visible') {
+    // Show controls and enable keyboard input
+    externalMapTarget.classList.remove('unusable');
+    externalMapTarget.setAttribute('tabindex', '0');
+    externalMapTarget.focus();
+  } else {
+    // Hide all controls and disable keyboard input
+    externalMapTarget.removeAttribute('tabindex');
+    externalMapTarget.classList.add('unusable');
+  }
+}
+window.addEventListener('visibilitychange', updateOverlay);
+
+button.addEventListener('click', function () {
+  const blockerNotice = document.getElementById('blocker-notice');
+  blockerNotice.setAttribute('hidden', 'hidden');
+  button.disabled = true;
+
+  // Reset button and map target in case window did not load or open
+  let timeoutKey = setTimeout(function () {
+    closeMapWindow();
+    resetMapTarget();
+    blockerNotice.removeAttribute('hidden');
+    timeoutKey = undefined;
+  }, 3000);
+
+  mapWindow = window.open(
+    'resources/external-map-map.html',
+    'MapWindow',
+    'toolbar=0,location=0,menubar=0,width=800,height=600'
+  );
+  mapWindow.addEventListener('DOMContentLoaded', function () {
+    const externalMapTarget = mapWindow.document.getElementById('map');
+    localMapTarget.style.height = '0px';
+    map.setTarget(externalMapTarget);
+
+    if (timeoutKey) {
+      timeoutKey = clearTimeout(timeoutKey);
+    }
+    mapWindow.addEventListener('pagehide', function () {
+      resetMapTarget();
+      // Close window in case user does a page reload
+      closeMapWindow();
+    });
+
+    updateOverlay();
+  });
+});

examples/flight-animation.js

@@ -7,6 +7,7 @@ import View from '../src/ol/View.js';
 import {Stroke, Style} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {getVectorContext} from '../src/ol/render.js';
+import {getWidth} from '../src/ol/extent.js';
 
 const tileLayer = new TileLayer({
   source: new Stamen({
@@ -18,7 +19,7 @@ const map = new Map({
   layers: [tileLayer],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: [-11000000, 4600000],
     zoom: 2,
   }),
 });
@@ -31,7 +32,6 @@ const style = new Style({
 });
 
 const flightsSource = new VectorSource({
-  wrapX: false,
   attributions:
     'Flight data by ' +
     '<a href="https://openflights.org/data.html">OpenFlights</a>,',
@@ -55,18 +55,23 @@ const flightsSource = new VectorSource({
           );
 
           const arcLine = arcGenerator.Arc(100, {offset: 10});
-          if (arcLine.geometries.length === 1) {
-            const line = new LineString(arcLine.geometries[0].coords);
+          // paths which cross the -180°/+180° meridian are split
+          // into two sections which will be animated sequentially
+          const features = [];
+          arcLine.geometries.forEach(function (geometry) {
+            const line = new LineString(geometry.coords);
             line.transform('EPSG:4326', 'EPSG:3857');
 
-            const feature = new Feature({
-              geometry: line,
-              finished: false,
-            });
-            // add the feature with a delay so that the animation
-            // for all features does not start at the same time
-            addLater(feature, i * 50);
-          }
+            features.push(
+              new Feature({
+                geometry: line,
+                finished: false,
+              })
+            );
+          });
+          // add the features with a delay so that the animation
+          // for all features does not start at the same time
+          addLater(features, i * 50);
         }
         tileLayer.on('postrender', animateFlights);
       });
@@ -88,7 +93,7 @@ const flightsLayer = new VectorLayer({
 
 map.addLayer(flightsLayer);
 
-const pointsPerMs = 0.1;
+const pointsPerMs = 0.02;
 function animateFlights(event) {
   const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
@@ -101,26 +106,41 @@ function animateFlights(event) {
       // only draw the lines for which the animation has not finished yet
       const coords = feature.getGeometry().getCoordinates();
       const elapsedTime = frameState.time - feature.get('start');
-      const elapsedPoints = elapsedTime * pointsPerMs;
+      if (elapsedTime >= 0) {
+        const elapsedPoints = elapsedTime * pointsPerMs;
 
-      if (elapsedPoints >= coords.length) {
-        feature.set('finished', true);
+        if (elapsedPoints >= coords.length) {
+          feature.set('finished', true);
+        }
+
+        const maxIndex = Math.min(elapsedPoints, coords.length);
+        const currentLine = new LineString(coords.slice(0, maxIndex));
+
+        // animation is needed in the current and nearest adjacent wrapped world
+        const worldWidth = getWidth(map.getView().getProjection().getExtent());
+        const offset = Math.floor(map.getView().getCenter()[0] / worldWidth);
+
+        // directly draw the lines with the vector context
+        currentLine.translate(offset * worldWidth, 0);
+        vectorContext.drawGeometry(currentLine);
+        currentLine.translate(worldWidth, 0);
+        vectorContext.drawGeometry(currentLine);
       }
-
-      const maxIndex = Math.min(elapsedPoints, coords.length);
-      const currentLine = new LineString(coords.slice(0, maxIndex));
-
-      // directly draw the line with the vector context
-      vectorContext.drawGeometry(currentLine);
     }
   }
   // tell OpenLayers to continue the animation
   map.render();
 }
 
-function addLater(feature, timeout) {
+function addLater(features, timeout) {
   window.setTimeout(function () {
-    feature.set('start', Date.now());
-    flightsSource.addFeature(feature);
+    let start = Date.now();
+    features.forEach(function (feature) {
+      feature.set('start', start);
+      flightsSource.addFeature(feature);
+      const duration =
+        (feature.getGeometry().getCoordinates().length - 1) / pointsPerMs;
+      start += duration;
+    });
   }, timeout);
 }

examples/geographic.html

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

examples/geographic.js

@@ -63,10 +63,15 @@ map.on('moveend', function () {
 });
 
 map.on('click', function (event) {
+  $(element).popover('dispose');
+
   const feature = map.getFeaturesAtPixel(event.pixel)[0];
   if (feature) {
     const coordinate = feature.getGeometry().getCoordinates();
-    popup.setPosition(coordinate);
+    popup.setPosition([
+      coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
+      coordinate[1],
+    ]);
     $(element).popover({
       container: element.parentElement,
       html: true,
@@ -75,8 +80,6 @@ map.on('click', function (event) {
       placement: 'top',
     });
     $(element).popover('show');
-  } else {
-    $(element).popover('dispose');
   }
 });
 

examples/geojson-vt.js

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

examples/geolocation-orientation.html

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

examples/getfeatureinfo-image.html

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

examples/getfeatureinfo-image.js

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

examples/getfeatureinfo-tile.html

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

examples/getfeatureinfo-tile.js

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

examples/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/hitdetect-vector.html

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

examples/hitdetect-vector.js

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

examples/igc.js

@@ -179,8 +179,9 @@ const featureOverlay = new VectorLayer({
   }),
 });
 
-document.getElementById('time').addEventListener('input', function () {
-  const value = parseInt(this.value, 10) / 100;
+const control = document.getElementById('time');
+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/image-vector-layer.js

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

examples/immediate-geographic.html

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