Updates for the 6.12.0 release

Transitive dependency update

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

@@ -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
 
@@ -97,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,5 +1,45 @@
 ## Upgrade notes
 
+### 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.

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

@@ -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,33 +1,28 @@
 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'
-          ),
-        ],
       },
     ],
   },
@@ -53,6 +48,7 @@ export default {
   },
   output: {
     path: path.resolve('./build/legacy'),
+    publicPath: '',
     filename: 'ol.js',
     library: 'ol',
     libraryTarget: 'umd',

doc/errors/index.md

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

doc/quickstart.hbs

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

doc/tutorials/bundle.md

@@ -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.js

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

examples/cog-math.js

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

examples/cog-overviews.js

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

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

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

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

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

@@ -1,22 +1,22 @@
 ---
 layout: example.html
-title: Disable Image Smoothing
-shortdesc: Example of disabling image smoothing
+title: Interpolation
+shortdesc: Example of data interpolation
 docs: >
-  Example of disabling image smoothing when using raster DEM (digital elevation model) data.
-  The <code>imageSmoothing: false</code> setting is used to disable canvas image smoothing during
+  Example of data resampling when using raster DEM (digital elevation model) data.
+  The <code>interpolate: false</code> setting is used to disable interpolation of data values during
   reprojection and rendering. Elevation data is
   calculated from the pixel value returned by <b>forEachLayerAtPixel</b>. For comparison a second map
-  with smoothing enabled returns inaccuate elevations which are very noticeable close to 3107 meters
+  with interpolation enabled returns inaccurate elevations which are very noticeable close to 3107 meters
   due to how elevation is calculated from the pixel value.
-tags: "disable image smoothing, xyz, maptiler, reprojection"
+tags: "disable image interpolation, xyz, maptiler, reprojection"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div class="wrapper">
   <div class="half">
-    <h4>Smoothing Disabled</h4>
+    <h4>Not Interpolated</h4>
     <div id="map1" class="map"></div>
     <div>
       <label>
@@ -24,16 +24,9 @@ cloak:
         <span id="info1">0.0</span> meters
       </label>
     </div>
-    <div>
-      <label>
-        Imagery opacity
-        <input id="opacity" type="range" min="0" max="100" value="80" />
-        <span id="output"></span> %
-      </label>
-    </div>
   </div>
   <div class="half">
-    <h4>Uncorrected Comparison</h4>
+    <h4>Interpolated</h4>
     <div id="map2" class="map"></div>
     <div>
       <label>

examples/interpolation.js

@@ -8,61 +8,31 @@ const attributions =
   '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
-const disabledLayer = new TileLayer({
+const notInterpolated = new TileLayer({
   // specify className so forEachLayerAtPixel can distinguish layers
   className: 'ol-layer-dem',
   source: new XYZ({
     attributions: attributions,
     url:
       'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
-    maxZoom: 10,
+    tileSize: 512,
+    maxZoom: 12,
     crossOrigin: '',
-    imageSmoothing: false,
+    interpolate: false,
   }),
 });
 
-const imagery = new TileLayer({
-  className: 'ol-layer-imagery',
-  source: new XYZ({
-    attributions: attributions,
-    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-    maxZoom: 20,
-    crossOrigin: '',
-  }),
-});
-
-const enabledLayer = new TileLayer({
+const interpolated = new TileLayer({
   source: new XYZ({
     attributions: attributions,
     url:
       'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
-    maxZoom: 10,
+    tileSize: 512,
+    maxZoom: 12,
     crossOrigin: '',
   }),
 });
 
-imagery.on('prerender', function (evt) {
-  // use opaque background to conceal DEM while fully opaque imagery renders
-  if (imagery.getOpacity() === 1) {
-    evt.context.fillStyle = 'white';
-    evt.context.fillRect(
-      0,
-      0,
-      evt.context.canvas.width,
-      evt.context.canvas.height
-    );
-  }
-});
-
-const control = document.getElementById('opacity');
-const output = document.getElementById('output');
-control.addEventListener('input', function () {
-  output.innerText = control.value;
-  imagery.setOpacity(control.value / 100);
-});
-output.innerText = control.value;
-imagery.setOpacity(control.value / 100);
-
 const view = new View({
   center: [6.893, 45.8295],
   zoom: 16,
@@ -71,13 +41,13 @@ const view = new View({
 
 const map1 = new Map({
   target: 'map1',
-  layers: [disabledLayer, imagery],
+  layers: [notInterpolated],
   view: view,
 });
 
 const map2 = new Map({
   target: 'map2',
-  layers: [enabledLayer],
+  layers: [interpolated],
   view: view,
 });
 
@@ -97,7 +67,7 @@ const showElevations = function (evt) {
     },
     {
       layerFilter: function (layer) {
-        return layer === disabledLayer;
+        return layer === notInterpolated;
       },
     }
   );
@@ -110,7 +80,7 @@ const showElevations = function (evt) {
     },
     {
       layerFilter: function (layer) {
-        return layer === enabledLayer;
+        return layer === interpolated;
       },
     }
   );

examples/layer-extent.html

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

examples/layer-extent.js

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

examples/layer-group.html

@@ -8,7 +8,7 @@ tags: "tilejson, input, bind, group, layergroup"
 resources:
   - https://code.jquery.com/jquery-3.5.1.min.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
@@ -18,7 +18,7 @@ cloak:
     <li><span>OSM layer</span>
       <fieldset id="layer0">
         <label class="checkbox" for="visible0">
-          visibile <input id="visible0" class="visible" type="checkbox"/>
+          visible <input id="visible0" class="visible" type="checkbox"/>
         </label>
         <label>
           opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
@@ -29,7 +29,7 @@ cloak:
       <span>Layer group</span>
       <fieldset id="layer1">
         <label class="checkbox" for="visible1">
-          visibile <input id="visible1" class="visible" type="checkbox"/>
+          visible <input id="visible1" class="visible" type="checkbox"/>
         </label>
         <label>
           opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
@@ -40,7 +40,7 @@ cloak:
           <span>Food insecurity layer</span>
           <fieldset id="layer10">
             <label class="checkbox" for="visible10">
-              visibile <input id="visible10" class="visible" type="checkbox"/>
+              visible <input id="visible10" class="visible" type="checkbox"/>
             </label>
             <label>
               opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
@@ -51,7 +51,7 @@ cloak:
           <span>World borders layer</span>
           <fieldset id="layer11">
             <label class="checkbox" for="visible11">
-              visibile <input id="visible11" class="visible" type="checkbox"/>
+              visible <input id="visible11" class="visible" type="checkbox"/>
             </label>
             <label>
               opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>

examples/layer-group.js

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

examples/layer-opacity.html

@@ -0,0 +1,17 @@
+---
+layout: example.html
+title: Layer Opacity
+shortdesc: Adjust layer opacity based on user input
+docs: >
+  The `layer.setOpacity()` method can be called to adjust the opacity of a layer.
+tags: "opacity"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+---
+<div id="map" class="map"></div>
+<label>
+  Layer opacity
+  <input id="opacity-input" type="range" min="0" max="1" step="0.01" value="1" />
+  <span id="opacity-output"></span>
+</label>

examples/layer-opacity.js

@@ -0,0 +1,42 @@
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+
+const imagery = new TileLayer({
+  className: 'ol-layer-imagery',
+  source: new XYZ({
+    attributions:
+      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ',
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+    crossOrigin: '',
+  }),
+});
+
+const osm = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  layers: [imagery, osm],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+const opacityInput = document.getElementById('opacity-input');
+const opacityOutput = document.getElementById('opacity-output');
+function update() {
+  const opacity = parseFloat(opacityInput.value);
+  osm.setOpacity(opacity);
+  opacityOutput.innerText = opacity.toFixed(2);
+}
+opacityInput.addEventListener('input', update);
+opacityInput.addEventListener('change', update);
+update();

examples/layer-swipe.js

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

examples/line-arrows.js

@@ -5,6 +5,7 @@ import View from '../src/ol/View.js';
 import {Icon, Stroke, Style} from '../src/ol/style.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(),
@@ -49,12 +50,19 @@ const vector = new VectorLayer({
   style: styleFunction,
 });
 
+// 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/mapbox-layer.js

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

examples/mapbox-vector-layer.css

@@ -1,3 +0,0 @@
-.map {
-  background: #f8f4f0;
-}

examples/mapbox-vector-layer.html

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

examples/mapbox-vector-layer.js

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

examples/mapbox-vector-tiles-advanced.html

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

examples/mapbox-vector-tiles-advanced.js

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

examples/mapbox-vector-tiles.html

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

examples/mapbox-vector-tiles.js

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

examples/min-max-resolution.html

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

examples/min-max-resolution.js

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

examples/mobile-full-screen.html

@@ -4,7 +4,7 @@ title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"
 cloak:
-  - key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
+  - key: AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN
     value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
 ---
 <!doctype html>

examples/mobile-full-screen.js

@@ -13,7 +13,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new BingMaps({
-        key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ',
+        key: 'AlEoTLTlzFB6Uf4Sy-ugXcRO21skQO7K8eObA5_L-8d20rjqZJLs2nkO1RMjGSPN',
         imagerySet: 'RoadOnDemand',
       }),
     }),

examples/modify-features.js

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

examples/numpytile.css

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

examples/numpytile.html

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

examples/numpytile.js

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

examples/offscreen-canvas.html

@@ -6,10 +6,12 @@ docs: >
   The map in this example is rendered in a web worker, using `OffscreenCanvas`. **Note:** This is currently only supported in Chrome and Edge.
 tags: "worker, offscreencanvas, vector-tiles"
 experimental: true
+sources:
+  - path: offscreen-canvas.worker.js
+    as: worker.js
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
-
 ---
 <div id="map" class="map">
   <pre id="info" class="info"/>

examples/offscreen-canvas.worker.js

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

examples/popup.js

@@ -18,9 +18,10 @@ const closer = document.getElementById('popup-closer');
  */
 const overlay = new Overlay({
   element: container,
-  autoPan: true,
-  autoPanAnimation: {
-    duration: 250,
+  autoPan: {
+    animation: {
+      duration: 250,
+    },
   },
 });