fix

Fix control styles on Full Screen Mobile example

.github/dependabot.yml

@@ -6,3 +6,7 @@ updates:
     interval: weekly
   open-pull-requests-limit: 10
   versioning-strategy: increase-if-necessary
+- package-ecosystem: github-actions
+  directory: "/"
+  schedule:
+    interval: weekly

.github/workflows/build-preview.yml

@@ -5,17 +5,20 @@ on:
     branches:
       - main
 
+permissions:
+  contents: read
+
 jobs:
   build-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: '16'
       - run: npm ci
-      - run: npm run build-site
+      - run: ./tasks/build-website.sh -v dev -l dev
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: site
           path: build/site
@@ -23,7 +26,7 @@ jobs:
         run: |
           mkdir -p build/pr
           echo ${{github.event.number}} > build/pr/number
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: pr
           path: build/pr

.github/workflows/deploy-preview.yml

@@ -1,4 +1,4 @@
-name: Deploy Preview
+name: Deploy Website (Preview)
 
 on:
   workflow_run:
@@ -11,14 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'}}
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         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
+        uses: actions/github-script@v6
         id: pull-request-number
         with:
           result-encoding: string
@@ -66,7 +66,7 @@ jobs:
         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
+        uses: actions/github-script@v6
         with:
           script: |
             const pullRequestNumber = parseInt(${{steps.pull-request-number.outputs.result}}, 10);
@@ -85,17 +85,11 @@ jobs:
             );
 
             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
+                body: `${start} Preview the website for this branch here: https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/.`
               });
             } else {
               console.log(`Preview URL comment already added to PR #${pullRequestNumber}`);

.github/workflows/deploy.yml

@@ -0,0 +1,71 @@
+name: Deploy Website
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*.*.*'
+
+concurrency:
+  group: "deploy"
+
+jobs:
+  deploy-branch:
+    if: startsWith(github.ref, 'refs/heads/')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build Website
+        run: ./tasks/build-website.sh -l $(node tasks/get-latest-release.js)
+      - name: Check out openlayers.github.io
+        uses: actions/checkout@v3
+        with:
+          repository: openlayers/openlayers.github.io
+          ssh-key: ${{ secrets.OPENLAYERS_GITHUB_IO_KEY }}
+          path: openlayers.github.io
+      - run: |
+          cp -r build/site/* openlayers.github.io/dist/
+          cd openlayers.github.io
+          if [ -n "$(git status --porcelain)" ]; then
+            git config user.name "$(git --no-pager log --format=format:'%an' -n 1)"
+            git config user.email "$(git --no-pager log --format=format:'%ae' -n 1)"
+            git add .
+            git commit -m "Website updates"
+            git push origin main
+          fi
+  deploy-tag:
+    if: startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install dependencies
+        run: npm ci
+      - name: Assert Latest Release
+        run: node tasks/newest-tag.js --tag ${GITHUB_REF_NAME}
+      - name: Build Website
+        run: ./tasks/build-website.sh -l ${GITHUB_REF_NAME} -v ${GITHUB_REF_NAME}
+      - name: Check out openlayers.github.io
+        uses: actions/checkout@v3
+        with:
+          repository: openlayers/openlayers.github.io
+          ssh-key: ${{ secrets.OPENLAYERS_GITHUB_IO_KEY }}
+          path: openlayers.github.io
+      - run: |
+          cp -r build/site/* openlayers.github.io/dist/
+          cd openlayers.github.io
+          if [ -n "$(git status --porcelain)" ]; then
+            git config user.name "$(git --no-pager log --format=format:'%an' -n 1)"
+            git config user.email "$(git --no-pager log --format=format:'%ae' -n 1)"
+            git add .
+            git commit -m "Website updates"
+            git push origin main
+          fi

.github/workflows/publish.yml

@@ -1,18 +1,24 @@
-name: Publish
+name: Publish Package
 
 on:
   push:
     branches:
       - main
+    tags:
+      - 'v*.*.*'
+
+permissions:
+  contents: read
 
 jobs:
-  publish-npm:
+  publish-branch:
+    if: startsWith(github.ref, 'refs/heads/')
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies
         run: npm ci
@@ -25,3 +31,23 @@ jobs:
           npm publish --tag dev
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+  publish-tag:
+    if: startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: npm ci
+      - name: Assert Latest Release
+        run: node tasks/newest-tag.js --tag ${GITHUB_REF_NAME}
+      - name: Publish
+        run: |
+          npm run build-package
+          cd build/ol
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/release.yml

@@ -0,0 +1,21 @@
+name: Create Release
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build Release Assets
+        run: ./tasks/build-website.sh -l ${GITHUB_REF_NAME} -v ${GITHUB_REF_NAME}
+      - name: Create Release
+        run: node tasks/create-release.js --token ${{secrets.GITHUB_TOKEN}} --tag ${GITHUB_REF_NAME} --legacy build/${GITHUB_REF_NAME}-legacy.zip --site build/${GITHUB_REF_NAME}-site.zip

.github/workflows/security.yml

@@ -10,18 +10,25 @@ on:
   schedule:
     - cron: '0 0 * * 0'  # At 00:00 on Sunday
 
+permissions:
+  contents: read
+
 jobs:
   codeql:
+    permissions:
+      actions: read  # for github/codeql-action/init to get workflow details
+      contents: read  # for actions/checkout to fetch code
+      security-events: write  # for github/codeql-action/analyze to upload SARIF results
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
+        uses: github/codeql-action/init@v2
         with:
           languages: javascript
           source-root: src
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1
+        uses: github/codeql-action/analyze@v2

.github/workflows/test.yml

@@ -11,6 +11,9 @@ on:
 env:
   CI: true
 
+permissions:
+  contents: read
+
 jobs:
   pretest:
     name: Pre-Test
@@ -21,10 +24,10 @@ jobs:
 
     steps:
       - name: Clone Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
 
@@ -43,10 +46,10 @@ jobs:
 
     steps:
       - name: Clone Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
 
@@ -65,10 +68,10 @@ jobs:
 
     steps:
       - name: Clone Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
 
@@ -87,10 +90,10 @@ jobs:
 
     steps:
       - name: Clone Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
 
@@ -100,8 +103,8 @@ jobs:
       - name: Build the Package
         run: npm run build-package
 
-      - name: Generate the Legacy Build
+      - name: Generate the Full Build
-        run: "npm run build-legacy && npx eslint --rule 'import/no-duplicates: off' --fix build/index.js"
+        run: "npm run build-full"
 
   rendering:
     name: Rendering
@@ -112,10 +115,10 @@ jobs:
 
     steps:
       - name: Clone Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Set Node.js Version
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
 
@@ -127,7 +130,7 @@ jobs:
 
       - name: Store Rendering Test Artifacts
         if: ${{ always() }}
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: rendering-tests
           path: test/rendering/cases/**/actual.png

README.md

@@ -23,7 +23,7 @@ new Map({
   layers: [
     new TileLayer({
       source: new XYZ({
-        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
       })
     })
   ],
@@ -41,6 +41,8 @@ See the following examples for more detail on bundling OpenLayers with your appl
  * Using [webpack](https://github.com/openlayers/ol-webpack)
  * Using [Parcel](https://github.com/openlayers/ol-parcel)
 
+For more detail on quick prototyping without the use of a Node.js based setup, see the [Skypack](https://github.com/openlayers/ol-skypack) example.
+
 ## Sponsors
 
 OpenLayers appreciates contributions of all kinds.  We especially want to thank our fiscal sponsors who contribute to ongoing project maintenance.
@@ -80,30 +82,13 @@ OpenLayers appreciates contributions of all kinds.  We especially want to thank
 
 See our [GitHub sponsors page](https://github.com/sponsors/openlayers) or [Open Collective](https://opencollective.com/openlayers/contribute/sponsors-214/checkout) if you too are interested in becoming a regular sponsor.
 
-## ES Modules
-
-The `ol` package contains a `src/` folder with the sources, authored as [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). To use these untranspiled sources, either import modules from `ol/src` instead of `ol`, or configure your bundler with an alias pointing to `ol/src` for the `ol` package.
-
 ## TypeScript support
 
 The [ol package](https://npmjs.com/package/ol) includes auto-generated TypeScript declarations as `*.d.ts` files.
 
 ## Supported Browsers
 
-OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](https://262.ecma-international.org/5.1/). This includes Chrome, Firefox, Safari and Edge.
+OpenLayers runs on all modern browsers (with greater than 1% global usage).  This includes Chrome, Firefox, Safari and Edge. For older browsers, [polyfills](https://polyfill.io/) will likely need to be added.
-
-For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and older, Safari v12 and older), polyfills may be needed for the following browser features:
-
-* [`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/) 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/) 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
 

changelog/upgrade-notes.md

@@ -1,6 +1,109 @@
 ## Upgrade notes
 
-### Next
+### Next version
+
+#### Notice to full build users
+
+If you have been using the full (or legacy) build of the library, note that the location of these scripts is changing for this and future releases.  The previous locations were not stable, and although we do not recommend linking to the full build for production applications, there are many instances of this that were breaking due to changing URLs.  See the [download page](https://openlayers.org/download/) for details on the new versioned URLs for the full build.
+
+#### Deprecation of `ol/AssertionError` and error codes
+
+Future versions will no longer throw `ol/AssertionError` with an error `code`. Instead, they will throw `Error` with just the error message.
+
+#### Updating parameters in `ol/source/ImageWMS` and `ol/source/TileWMS`
+
+The `updateParams()` method will be the only way to update parameters. Changes made directly to the `params` object passed as a constructor option will have no effect.
+
+### 7.0.0
+
+#### Removal of deprecated properties and methods
+
+ * The `tilePixelRatio` has been removed from the `DataTile` source.
+ * The `imageSmoothing` option has been removed from sources.
+ * The `undefinedHTML` option has been removed from the `MousePosition` control.
+ * The `forEachLayerAtPixel` method has been removed from the `Map` class.
+ * Deprecated options have been removed from the `Overlay` component.
+ * The `labelCache` has been removed from the `ol/render/canvas.js` module.
+
+#### Internet Explorer is no longer supported
+
+Please see https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support.
+
+#### ol/coordinate.js
+
+The `toStringHDMS` function from the `ol/coordinate.js` module now formats longitude, latitude pairs so that the minutes and seconds are omitted if they are zero.  This changes the values displayed on graticules.
+
+#### ol/layer/Graticule
+
+The default `intervals` now align with integer minutes and seconds better suited to the default label formatter.  If formatting in decimal degrees you may wish to specify custom `intervals` suited to that format.
+
+#### ol/Collection
+
+Inserting with `setAt` or `insertAt` beyond the current length used to create a sparse Collection with `undefined` inserted for any missing indexes.  This will now throw an error instead.
+
+#### ol/control/MousePosition
+
+The control will now by default keep displaying the last mouse position when the mouse leaves the viewport.  With `placeholder: ' '` you can keep the old behaviour.  The `placeholder` option no longer accepts `false` as a valid value, instead simply omit the option.  The `undefinedHTML` option has been removed. You should use `placeholder` instead.
+
+#### ol/PluggableMap
+
+The `PluggableMap` class has been removed.  If you want to create a custom map class, extend the `Map` class instead.
+
+#### ol/style/Icon and ol/style/RegularShape
+
+`ol/style/Image` and subclasses `displacement` is no longer scaled with the image.  If you previously expected this unintended behavior you should now increase the displacement when setting the scale.
+
+### 6.15.0
+
+#### Deprecated `tilePixelRatio` option for data tile sources.
+
+If you were previously trying to scale data tiles using the `tilePixelRatio` property for data tile sources (this is rare), you should now use the explicit `tileSize` and `tileGrid` properties.  The source's `tileSize` represents the source tile dimensions and the tile grid's `tileSize` represents the desired rendered dimensions.
+
+```js
+const source = new DataTileSource({
+  tileSize: [512, 512], // source tile size
+  tileGrid: createXYZ({tileSize: [256, 256]}), // rendered tile size
+});
+```
+
+#### Fixed coordinate dimension handling in `ol/proj`'s `addCoordinateTransforms`
+
+The `forward` and `inverse` functions passed to `addCooordinateTransforms` now receive a coordinate with all dimensions of the original coordinate, not just two. If you previosly had coordinates with more than two dimensions and added a transform like
+```js
+addCoordinateTransforms(
+    'EPSG:4326',
+    new Projection({code: 'latlong', units: 'degrees'}),
+    function(coordinate) { return coordinate.reverse(); },
+    function(coordinate) { return coordinate.reverse(); }
+);
+```
+you have to change that to
+```js
+addCoordinateTransforms(
+    'EPSG:4326',
+    new Projection({code: 'latlong', units: 'degrees'}),
+    function(coordinate) { return coordinate.slice(0, 2).reverse() },
+    function(coordinate) { return coordinate.slice(0, 2).reverse() }
+);
+```
+
+#### Replacement of string enums with union types
+
+This change only affects users that were using the non-API string enums
+
+* ol/OverlayPositioning
+* ol/extent/Corner
+* ol/format/FormatType
+* ol/geom/GeometryType
+* ol/source/State
+* ol/source/WMSServerType
+* ol/source/WMTSRequestEncoding
+
+Instead of these, use the respective `string`s, which are now typesafe by means of union types.
+
+### v6.14.0
+
+No special changes are required when upgrading to the 6.14.0 release.
 
 ### v6.13.0
 

changelog/v6.14.0.md

@@ -0,0 +1,55 @@
+# 6.14.0
+
+The 6.14 release includes a few new features and fixes.  The new `loadstart` and `loadend` events make it easy to add loading indicators to your maps.  Enhancements to the snap interaction add support for snapping to points coincident with lines and improve performance.  A change to WebGL rendering works around [an issue](https://bugs.webkit.org/show_bug.cgi?id=238196) in Safari 15.4.  Find detail on these improvements and more in the full list of changes below.
+
+#### List of all changes
+
+See below for a complete list of features and fixes.
+
+ * Store rendered source on the layer instead of the layer state (by @tschaub in https://github.com/openlayers/openlayers/pull/13509)
+ * Change imageSmoothing to interpolate in tests (by @mike-000 in https://github.com/openlayers/openlayers/pull/13506)
+ * Fallback if `OES_texture_float_linear` is not supported (by @mike-000 in https://github.com/openlayers/openlayers/pull/13505)
+ * Workaround for Safari WebGL issue (by @tschaub in https://github.com/openlayers/openlayers/pull/13492)
+ * Separate geometry and extent parsing (by @ahocevar in https://github.com/openlayers/openlayers/pull/13490)
+ * Add loadstart and loadend map events (by @ahocevar in https://github.com/openlayers/openlayers/pull/13491)
+ * Add documentation for precompose and postcopose to ol/layer/WebGLTile (by @ahocevar in https://github.com/openlayers/openlayers/pull/13482)
+ * Fix legacy build (by @ahocevar in https://github.com/openlayers/openlayers/pull/13469)
+ * Fix Text#setText jsDoc (by @rycgar in https://github.com/openlayers/openlayers/pull/13466)
+ * Do not warn about coordinates when view projection is configured (by @ahocevar in https://github.com/openlayers/openlayers/pull/13464)
+ * Reset image when empty (by @ahocevar in https://github.com/openlayers/openlayers/pull/13463)
+ * Revert image transition regression (by @ahocevar in https://github.com/openlayers/openlayers/pull/13460)
+ * Improve Snap interaction performance (by @MoonE in https://github.com/openlayers/openlayers/pull/13455)
+ * Snap Interaction can snap to Point on line segment (by @T-MAPY in https://github.com/openlayers/openlayers/pull/13446)
+ * Initialize variable before use in FullScreen control (by @MoonE in https://github.com/openlayers/openlayers/pull/13447)
+ * Ensure FullScreen button has classname set on render. (by @themoffster in https://github.com/openlayers/openlayers/pull/13444)
+ * Guard PluggableMap against null renderer (by @EvertEt in https://github.com/openlayers/openlayers/pull/13437)
+ * Fix rendercomplete with invisible WebGLPoints layer (by @M393 in https://github.com/openlayers/openlayers/pull/13434)
+ * Handle layers without renderer properly (by @ahocevar in https://github.com/openlayers/openlayers/pull/13424)
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * Bump minimist from 1.2.5 to 1.2.6 (by @openlayers in https://github.com/openlayers/openlayers/pull/13501)
+ * Bump node-forge from 1.2.1 to 1.3.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13498)
+ * Bump yargs from 17.3.1 to 17.4.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13493)
+ * Bump @babel/core from 7.17.5 to 7.17.8 (by @openlayers in https://github.com/openlayers/openlayers/pull/13494)
+ * Bump puppeteer from 13.4.1 to 13.5.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13472)
+ * Bump karma-chrome-launcher from 3.1.0 to 3.1.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13474)
+ * Bump mocha from 9.2.1 to 9.2.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13475)
+ * Bump proj4 from 2.7.5 to 2.8.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13476)
+ * Bump rollup from 2.70.0 to 2.70.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13477)
+ * Bump ol-mapbox-style from 7.0.0 to 7.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13473)
+ * Bump rollup from 2.69.0 to 2.70.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13449)
+ * Bump webpack from 5.69.1 to 5.70.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13450)
+ * Bump puppeteer from 13.4.0 to 13.4.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13451)
+ * Bump karma from 6.3.16 to 6.3.17 (by @openlayers in https://github.com/openlayers/openlayers/pull/13452)
+ * Bump typescript from 4.6.0-beta to 4.6.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13453)
+ * Bump puppeteer from 13.3.2 to 13.4.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13427)
+ * Bump fs-extra from 10.0.0 to 10.0.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13429)
+ * Bump @rollup/plugin-commonjs from 21.0.1 to 21.0.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13430)
+ * Bump rollup from 2.67.3 to 2.69.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13442)
+ * Bump @rollup/plugin-babel from 5.3.0 to 5.3.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13426)
+
+
+</details>

changelog/v6.14.1.md

@@ -0,0 +1,4 @@
+# 6.14.1
+
+The 6.14.1 release is a patch to correct a version discrepancy in the `package-lock.json` file.  See the [changelog for 6.14.0](https://github.com/openlayers/openlayers/releases/tag/v6.14.0) for new features and fixes since 6.13.
+

changelog/v6.15.0.md

@@ -0,0 +1,241 @@
+# 6.15.0
+
+## Overview
+
+The 6.15 release brings several fixes and improvements:
+* Faster vector tile rendering for soures with non-standard tile grids
+* Reduced canvas memory footprint for increased stability on iOS devices and better rendering performance
+* Fixed a bug that prevented tiles from expiring from the tile cache in the correct order
+* Better type safety with an increasing number of `null` checks and union types
+* New `setFill` and `setStroke` methods for `RegularShape` symbols
+* Vector symbol and text decluttering on the style level
+* Fixed pointer event handling on touch devices when layer visibility changes
+* New `justify` option for text styles
+* New `Link` interation for adding center, zoom, rotation and active layers to the URL
+* Easier css styling of the scale bar, and in addition to `minWidth`, the scale line can now also be configured with a `maxWidth`
+
+## Details
+
+### Deprecated `tilePixelRatio` option for data tile sources.
+
+If you were previously trying to scale data tiles using the `tilePixelRatio` property for data tile sources (this is rare), you should now use the explicit `tileSize` and `tileGrid` properties.  The source's `tileSize` represents the source tile dimensions and the tile grid's `tileSize` represents the desired rendered dimensions.
+
+```js
+const source = new DataTileSource({
+  tileSize: [512, 512], // source tile size
+  tileGrid: createXYZ({tileSize: [256, 256]}), // rendered tile size
+});
+```
+
+### Fixed coordinate dimension handling in `ol/proj`'s `addCoordinateTransforms`
+
+The `forward` and `inverse` functions passed to `addCooordinateTransforms` now receive a coordinate with all dimensions of the original coordinate, not just two. If you previosly had coordinates with more than two dimensions and added a transform like
+```js
+addCoordinateTransforms(
+    'EPSG:4326',
+    new Projection({code: 'latlong', units: 'degrees'}),
+    function(coordinate) { return coordinate.reverse(); },
+    function(coordinate) { return coordinate.reverse(); }
+);
+```
+you have to change that to
+```js
+addCoordinateTransforms(
+    'EPSG:4326',
+    new Projection({code: 'latlong', units: 'degrees'}),
+    function(coordinate) { return coordinate.slice(0, 2).reverse() },
+    function(coordinate) { return coordinate.slice(0, 2).reverse() }
+);
+```
+
+### Replacement of string enums with union types
+
+This change only affects users that were using the non-API string enums
+
+* ol/OverlayPositioning
+* ol/extent/Corner
+* ol/format/FormatType
+* ol/geom/GeometryType
+* ol/source/State
+* ol/source/WMSServerType
+* ol/source/WMTSRequestEncoding
+
+Instead of these, use the respective `string`s, which are now typesafe by means of union types.
+
+## List of all changes
+
+See below for a complete list of features and fixes.
+
+ * Base vector tile render tile grid on the source grid (by @mike-000 in https://github.com/openlayers/openlayers/pull/13832)
+ * ability to change the color of the scalebar (by @jipexu in https://github.com/openlayers/openlayers/pull/13834)
+ * Reduce canvas memory footprint for better iOS stability (by @ahocevar in https://github.com/openlayers/openlayers/pull/13823)
+ * Use union types instead of enums (by @ahocevar in https://github.com/openlayers/openlayers/pull/12696)
+ * remove XYZ-ESRI -4326-512 example (by @jipexu in https://github.com/openlayers/openlayers/pull/13817)
+ * Remove HERE Maps example (by @mike-000 in https://github.com/openlayers/openlayers/pull/13819)
+ * Checkcontenteditable (by @jipexu in https://github.com/openlayers/openlayers/pull/13787)
+ * Add null return type for TileGrid functions (by @EvertEt in https://github.com/openlayers/openlayers/pull/13674)
+ * Add setFill and setStroke to Shapes (by @theduckylittle in https://github.com/openlayers/openlayers/pull/13747)
+ * Include displacement and declutterMode in Icon style clone (by @mike-000 in https://github.com/openlayers/openlayers/pull/13803)
+ * Do not refresh use time for tiles when collecting used source tiles (by @M393 in https://github.com/openlayers/openlayers/pull/13799)
+ * Change WKB readFeature(s) return type to Feature (by @mike-000 in https://github.com/openlayers/openlayers/pull/13800)
+ * d3 version update (by @jipexu in https://github.com/openlayers/openlayers/pull/13784)
+ * Better fix for changing pointer ids on event target change (by @ahocevar in https://github.com/openlayers/openlayers/pull/13771)
+ * Fix source band calculation when configured with multiple sources (by @ahocevar in https://github.com/openlayers/openlayers/pull/13762)
+ * Clean up tracked pointers when the event target has changed (by @ahocevar in https://github.com/openlayers/openlayers/pull/13770)
+ * Fix modifying polygons with overlapping vertices (by @hargasinski in https://github.com/openlayers/openlayers/pull/13745)
+ * Support GML polygons with ring curves instead of linear rings (by @ahocevar in https://github.com/openlayers/openlayers/pull/13749)
+ * Fix typo in method names (by @MoonE in https://github.com/openlayers/openlayers/pull/13750)
+ * Load GeoTiff from Blob #13189 #13703 (by @m-mohr in https://github.com/openlayers/openlayers/pull/13724)
+ * improve text width calculation (by @IQGeo in https://github.com/openlayers/openlayers/pull/12106)
+ * Fix tile pyramid getData() (by @mike-000 in https://github.com/openlayers/openlayers/pull/13712)
+ * Improve icon-sprite-webgl example (by @MoonE in https://github.com/openlayers/openlayers/pull/13709)
+ * Fix hitdetection for icon with offset and pixelratio != 1 (by @MoonE in https://github.com/openlayers/openlayers/pull/13627)
+ * Wait for icons to be loaded before firing rendercomplete event (by @MoonE in https://github.com/openlayers/openlayers/pull/13626)
+ * Change typedef to boolean (by @mike-000 in https://github.com/openlayers/openlayers/pull/13702)
+ * #13690 VectorSource#getFeaturesInExtent add projection parameter (by @burleight in https://github.com/openlayers/openlayers/pull/13691)
+ * Update ESLint config and plugins (by @tschaub in https://github.com/openlayers/openlayers/pull/13701)
+ * Flip extent coordinates for projections with ne* axis order (by @ahocevar in https://github.com/openlayers/openlayers/pull/13688)
+ * Link interaction (by @tschaub in https://github.com/openlayers/openlayers/pull/13689)
+ * Test improvements (by @MoonE in https://github.com/openlayers/openlayers/pull/13676)
+ * Add  null return type (by @ahocevar in https://github.com/openlayers/openlayers/pull/13673)
+ * fix currentClip == null (by @CNS-Solutions in https://github.com/openlayers/openlayers/pull/13672)
+ * Handle NaN nodata (by @tschaub in https://github.com/openlayers/openlayers/pull/13669)
+ * Fix for parcel error while building examples (by @arekgotfryd in https://github.com/openlayers/openlayers/pull/13656)
+ * Explicit data tile size (by @tschaub in https://github.com/openlayers/openlayers/pull/13648)
+ * Decluttering mode by style (by @CNS-Solutions in https://github.com/openlayers/openlayers/pull/13566)
+ * Output GeoTIFF tile load errors to console (by @mike-000 in https://github.com/openlayers/openlayers/pull/13645)
+ * Fix typos in upgrade notes (by @openlayers in https://github.com/openlayers/openlayers/pull/13641)
+ * Let transform function transform all dimensions it is capable of (by @ahocevar in https://github.com/openlayers/openlayers/pull/13637)
+ * Fix dependabot config (by @tschaub in https://github.com/openlayers/openlayers/pull/13614)
+ * Include GitHub actions in the dependabot config (by @turrisxyz in https://github.com/openlayers/openlayers/pull/13611)
+ * Do not reload data tiles if already loaded or loading (by @mike-000 in https://github.com/openlayers/openlayers/pull/13594)
+ * Limit permissions for GitHub actions (by @turrisxyz in https://github.com/openlayers/openlayers/pull/13607)
+ * Handle rotation with non-square tiles (by @tschaub in https://github.com/openlayers/openlayers/pull/13603)
+ * Properly document loadstart and loadend events (by @ahocevar in https://github.com/openlayers/openlayers/pull/13595)
+ * Update OSM Vector Tiles attribution (by @mike-000 in https://github.com/openlayers/openlayers/pull/13568)
+ * WebGLPointsLayer wrapX support - partially addressing #11131 (by @burleight in https://github.com/openlayers/openlayers/pull/13528)
+ * Add `justify` option for text style (by @rycgar in https://github.com/openlayers/openlayers/pull/13571)
+ * Do not assert null projection (by @mike-000 in https://github.com/openlayers/openlayers/pull/13565)
+ * Improve Projection and Scale example calculations (by @mike-000 in https://github.com/openlayers/openlayers/pull/13496)
+ * Add geometryLayout property to Draw interaction (by @drnextgis in https://github.com/openlayers/openlayers/pull/13546)
+ * Updates for ol-mapbox-style v8 (by @ahocevar in https://github.com/openlayers/openlayers/pull/13552)
+ * NM symbol unit (by @jipexu in https://github.com/openlayers/openlayers/pull/13554)
+ * Update backgrounds when function returns a different color (by @ahocevar in https://github.com/openlayers/openlayers/pull/13550)
+ * Handle gutter in WebGL tile renderer (by @mike-000 in https://github.com/openlayers/openlayers/pull/13547)
+ * Do not add second interaction in Pinch Zoom example (by @mike-000 in https://github.com/openlayers/openlayers/pull/13551)
+ * Bugfix for GML parsing with multiple property elements with XML attributes (by @ejn in https://github.com/openlayers/openlayers/pull/12936)
+ * Fix small typo in docs (by @bartvde in https://github.com/openlayers/openlayers/pull/13536)
+ * Update type annotations for GMLBase (by @ahocevar in https://github.com/openlayers/openlayers/pull/13533)
+ * Add optional maxWidth for ScaleLine control (by @bartvde in https://github.com/openlayers/openlayers/pull/13531)
+ * Include tile gutter in offsets for getData() methods (by @mike-000 in https://github.com/openlayers/openlayers/pull/13521)
+ * Updates for the 6.14.1 release (by @openlayers in https://github.com/openlayers/openlayers/pull/13511)
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * Bump rollup from 2.76.0 to 2.77.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13841)
+ * Bump @types/geojson from 7946.0.8 to 7946.0.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13842)
+ * Bump @babel/preset-env from 7.18.6 to 7.18.9 (by @openlayers in https://github.com/openlayers/openlayers/pull/13843)
+ * Bump clean-css-cli from 5.6.0 to 5.6.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13844)
+ * Bump marked from 4.0.17 to 4.0.18 (by @openlayers in https://github.com/openlayers/openlayers/pull/13845)
+ * Bump @babel/core from 7.18.6 to 7.18.9 (by @openlayers in https://github.com/openlayers/openlayers/pull/13846)
+ * Bump puppeteer from 15.3.2 to 15.4.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13847)
+ * Bump eslint from 8.19.0 to 8.20.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13848)
+ * Bump puppeteer from 15.3.0 to 15.3.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13824)
+ * Bump rollup from 2.75.7 to 2.76.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13825)
+ * Bump @babel/core from 7.18.5 to 7.18.6 (by @openlayers in https://github.com/openlayers/openlayers/pull/13806)
+ * Bump webpack-dev-server from 4.9.2 to 4.9.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13810)
+ * Bump @babel/preset-env from 7.18.2 to 7.18.6 (by @openlayers in https://github.com/openlayers/openlayers/pull/13808)
+ * Bump puppeteer from 15.1.1 to 15.3.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13807)
+ * Bump es-main from 1.0.2 to 1.2.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13809)
+ * Bump eslint from 8.18.0 to 8.19.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13811)
+ * Bump @rollup/plugin-commonjs from 22.0.0 to 22.0.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13793)
+ * Bump puppeteer from 14.4.1 to 15.1.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13794)
+ * Bump eslint from 8.17.0 to 8.18.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13776)
+ * Bump typescript from 4.7.3 to 4.7.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13777)
+ * Bump karma from 6.3.20 to 6.4.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13775)
+ * Bump puppeteer from 14.3.0 to 14.4.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13778)
+ * Bump rollup from 2.75.6 to 2.75.7 (by @openlayers in https://github.com/openlayers/openlayers/pull/13779)
+ * Bump source-map-loader from 3.0.1 to 4.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13754)
+ * Bump @babel/core from 7.18.2 to 7.18.5 (by @openlayers in https://github.com/openlayers/openlayers/pull/13755)
+ * Bump marked from 4.0.16 to 4.0.17 (by @openlayers in https://github.com/openlayers/openlayers/pull/13756)
+ * Bump puppeteer from 14.2.1 to 14.3.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13757)
+ * Bump rollup from 2.75.5 to 2.75.6 (by @openlayers in https://github.com/openlayers/openlayers/pull/13758)
+ * Bump webpack-cli from 4.9.2 to 4.10.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13759)
+ * Bump webpack-dev-server from 4.9.1 to 4.9.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13760)
+ * Bump globby from 13.1.1 to 13.1.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13761)
+ * Bump eslint from 8.16.0 to 8.17.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13732)
+ * Bump typescript from 4.7.2 to 4.7.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13730)
+ * Bump webpack from 5.72.1 to 5.73.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13731)
+ * Bump rollup from 2.75.3 to 2.75.5 (by @openlayers in https://github.com/openlayers/openlayers/pull/13733)
+ * Bump puppeteer from 14.1.1 to 14.2.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13734)
+ * Bump webpack-dev-server from 4.9.0 to 4.9.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13735)
+ * Bump @babel/core from 7.18.0 to 7.18.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13717)
+ * Bump rollup from 2.74.1 to 2.75.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13718)
+ * Bump @types/offscreencanvas from 2019.6.4 to 2019.7.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13716)
+ * Bump typescript from 4.6.4 to 4.7.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13719)
+ * Bump @babel/preset-env from 7.18.0 to 7.18.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13720)
+ * Bump ol-mapbox-style from 8.0.8 to 8.1.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13715)
+ * Bump eslint from 8.9.0 to 8.16.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13693)
+ * Bump @babel/core from 7.17.10 to 7.18.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13694)
+ * Bump rollup from 2.73.0 to 2.74.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13699)
+ * Bump copy-webpack-plugin from 10.2.4 to 11.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13695)
+ * Bump webpack-dev-middleware from 5.3.1 to 5.3.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13696)
+ * Bump marked from 4.0.15 to 4.0.16 (by @openlayers in https://github.com/openlayers/openlayers/pull/13697)
+ * Bump @babel/preset-env from 7.17.10 to 7.18.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13698)
+ * Bump puppeteer from 14.1.0 to 14.1.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13700)
+ * Bump rollup from 2.72.1 to 2.73.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13680)
+ * Bump webpack from 5.72.0 to 5.72.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13681)
+ * Bump karma from 6.3.19 to 6.3.20 (by @openlayers in https://github.com/openlayers/openlayers/pull/13679)
+ * Bump puppeteer from 13.7.0 to 14.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13678)
+ * Bump ol-mapbox-style from 8.0.7 to 8.0.8 (by @openlayers in https://github.com/openlayers/openlayers/pull/13682)
+ * Bump yargs from 17.4.1 to 17.5.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13683)
+ * Bump rollup from 2.71.1 to 2.72.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13661)
+ * Bump sinon from 13.0.2 to 14.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13659)
+ * Bump webpack-dev-server from 4.8.1 to 4.9.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13662)
+ * Bump @rollup/plugin-node-resolve from 13.2.1 to 13.3.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13663)
+ * Bump ol-mapbox-style from 8.0.5 to 8.0.7 (by @openlayers in https://github.com/openlayers/openlayers/pull/13602)
+ * Bump marked from 4.0.14 to 4.0.15 (by @openlayers in https://github.com/openlayers/openlayers/pull/13628)
+ * Bump express from 4.18.0 to 4.18.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13629)
+ * Bump rollup from 2.70.2 to 2.71.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13630)
+ * Bump typescript from 4.6.3 to 4.6.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13631)
+ * Bump mocha from 9.2.2 to 10.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13632)
+ * Bump @babel/core from 7.17.9 to 7.17.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13633)
+ * Bump @babel/preset-env from 7.16.11 to 7.17.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13634)
+ * Bump github/codeql-action from 1 to 2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13616)
+ * Bump actions/setup-node from 2 to 3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13617)
+ * Bump actions/upload-artifact from 2 to 3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13615)
+ * Bump actions/checkout from 2 to 3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13618)
+ * Bump actions/github-script from 5 to 6 (by @openlayers in https://github.com/openlayers/openlayers/pull/13619)
+ * Bump puppeteer from 13.6.0 to 13.7.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13620)
+ * Bump express from 4.17.3 to 4.18.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13621)
+ * Bump @rollup/plugin-commonjs from 21.1.0 to 22.0.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13596)
+ * Bump puppeteer from 13.5.2 to 13.6.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13600)
+ * Bump pixelmatch from 5.2.1 to 5.3.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13598)
+ * Bump babel-loader from 8.2.4 to 8.2.5 (by @openlayers in https://github.com/openlayers/openlayers/pull/13601)
+ * Bump karma from 6.3.18 to 6.3.19 (by @openlayers in https://github.com/openlayers/openlayers/pull/13599)
+ * Bump sinon from 13.0.1 to 13.0.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13582)
+ * Bump async from 2.6.3 to 2.6.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13583)
+ * Bump @rollup/plugin-commonjs from 21.0.3 to 21.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13578)
+ * Bump fs-extra from 10.0.1 to 10.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13579)
+ * Bump karma from 6.3.17 to 6.3.18 (by @openlayers in https://github.com/openlayers/openlayers/pull/13580)
+ * Bump rollup from 2.70.1 to 2.70.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13581)
+ * Bump @rollup/plugin-node-resolve from 13.1.3 to 13.2.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13577)
+ * Bump webpack from 5.71.0 to 5.72.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13557)
+ * Bump @babel/core from 7.17.8 to 7.17.9 (by @openlayers in https://github.com/openlayers/openlayers/pull/13560)
+ * Bump webpack-dev-server from 4.7.4 to 4.8.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13559)
+ * Bump marked from 4.0.12 to 4.0.14 (by @openlayers in https://github.com/openlayers/openlayers/pull/13558)
+ * Bump yargs from 17.4.0 to 17.4.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13556)
+ * Bump webpack from 5.70.0 to 5.71.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13538)
+ * Bump jsdoc-plugin-typescript from 2.0.6 to 2.0.7 (by @openlayers in https://github.com/openlayers/openlayers/pull/13537)
+ * Bump puppeteer from 13.5.1 to 13.5.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13539)
+ * Bump clean-css-cli from 5.5.2 to 5.6.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13540)
+ * Bump typescript from 4.6.2 to 4.6.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13514)
+ * Bump babel-loader from 8.2.3 to 8.2.4 (by @openlayers in https://github.com/openlayers/openlayers/pull/13513)
+ * Bump @rollup/plugin-commonjs from 21.0.2 to 21.0.3 (by @openlayers in https://github.com/openlayers/openlayers/pull/13515)
+ * Bump serve-static from 1.14.2 to 1.15.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13512)
+ * Bump geotiff from 2.0.4 to 2.0.5 (by @openlayers in https://github.com/openlayers/openlayers/pull/13517)
+
+
+</details>

changelog/v6.15.1.md

@@ -0,0 +1,4 @@
+# 6.15.1
+
+The 6.15.1 release is a patch to ensure that a layer gets rendered when its source has completed loading.  See the [changelog for 6.15.0](https://github.com/openlayers/openlayers/releases/tag/v6.15.0) for new features and fixes since 6.14.
+

changelog/v7.0.0.md

@@ -0,0 +1,169 @@
+# 7.0.0
+
+The 7.0 release includes an impressive batch of features and fixes from over 90 pull requests.  We're excited about a new foundation for WebGL vector rendering.  The previous point rendering functionality has been extended to include lines and polygons.  The rendering API is still low level and experimental.  Future releases will include a higher level styling API.  In developing the new WebGL rendering functionality, we changed the signature for a number of methods on a helper class that had been marked as part of the API in 6.x releases.  While this is technically a breaking change, it is unlikely that applications were using this helper class, so upgrades should be straightforward.
+
+We took advantage of the breaking change in the WebGL helper class to remove a few other deprecated parts of the API.  In addition, since Microsoft ended support for Internet Explorer a few months ago, we decided to do the same.
+
+### Backwards incompatible changes
+
+#### Removal of deprecated properties and methods
+
+ * The `tilePixelRatio` has been removed from the `DataTile` source.
+ * The `imageSmoothing` option has been removed from sources.
+ * The `undefinedHTML` option has been removed from the `MousePosition` control.
+ * The `forEachLayerAtPixel` method has been removed from the `Map` class.
+ * Deprecated options have been removed from the `Overlay` component.
+ * The `labelCache` has been removed from the `ol/render/canvas.js` module.
+
+#### Internet Explorer is no longer supported
+
+Please see https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support.
+
+#### ol/webgl/Helper.js
+
+The `Helper` constructor from the `ol/webgl/Helper.js` module is no longer part of the public API.
+
+#### ol/coordinate.js
+
+The `toStringHDMS` function from the `ol/coordinate.js` module now formats longitude, latitude pairs so that the minutes and seconds are omitted if they are zero.  This changes the values displayed on graticules.
+
+#### ol/layer/Graticule
+
+The default `intervals` now align with integer minutes and seconds better suited to the default label formatter.  If formatting in decimal degrees you may wish to specify custom `intervals` suited to that format.
+
+#### ol/Collection
+
+Inserting with `setAt` or `insertAt` beyond the current length used to create a sparse Collection with `undefined` inserted for any missing indexes.  This will now throw an error instead.
+
+#### ol/control/MousePosition
+
+The control will now by default keep displaying the last mouse position when the mouse leaves the viewport.  With `placeholder: ' '` you can keep the old behaviour.  The `placeholder` option no longer accepts `false` as a valid value, instead simply omit the option.  The `undefinedHTML` option has been removed. You should use `placeholder` instead.
+
+#### ol/PluggableMap
+
+The `PluggableMap` class has been removed.  If you want to create a custom map class, extend the `Map` class instead.
+
+#### ol/style/Icon and ol/style/RegularShape
+
+`ol/style/Image` and subclasses `displacement` is no longer scaled with the image.  If you previously expected this unintended behavior you should now increase the displacement when setting the scale.
+
+### List of all changes
+
+See below for a complete list of features and fixes.
+
+ * Make the website deploy job succeed even if there are no changes (by @tschaub in https://github.com/openlayers/openlayers/pull/14017)
+ * Release actions (by @tschaub in https://github.com/openlayers/openlayers/pull/14014)
+ * Properly clear and refresh reprojected sources (by @ahocevar in https://github.com/openlayers/openlayers/pull/14013)
+ * Remove ENABLE_RASTER_REPROJECTION flag (by @ahocevar in https://github.com/openlayers/openlayers/pull/14011)
+ * Force render after update in Icon Scale example (by @mike-000 in https://github.com/openlayers/openlayers/pull/14012)
+ * Update ol-mapbox-style to v9.0.0 (by @ahocevar in https://github.com/openlayers/openlayers/pull/14009)
+ * Replace the Icon Scale example (by @mike-000 in https://github.com/openlayers/openlayers/pull/14007)
+ * Improve description of displacement in docs (by @mike-000 in https://github.com/openlayers/openlayers/pull/14006)
+ * Remove IE workarounds for legacy build, examples, and workers (by @tschaub in https://github.com/openlayers/openlayers/pull/13995)
+ * Use the full table for constructor options (by @tschaub in https://github.com/openlayers/openlayers/pull/13998)
+ * Do not scale Icon and RegularShape displacement (by @mike-000 in https://github.com/openlayers/openlayers/pull/13975)
+ * Support user projections in Drag and Drop (by @mike-000 in https://github.com/openlayers/openlayers/pull/14003)
+ * Avoid append only cache in WebGL tile layers (by @tschaub in https://github.com/openlayers/openlayers/pull/13997)
+ * Fix immediate renderer text rotation with offset (by @mike-000 in https://github.com/openlayers/openlayers/pull/13981)
+ * Build and deploy the website (by @openlayers in https://github.com/openlayers/openlayers/pull/13984)
+ * Small example template fixes (by @openlayers in https://github.com/openlayers/openlayers/pull/13992)
+ * Fix wording in API docs (by @openlayers in https://github.com/openlayers/openlayers/pull/13991)
+ * Nicer links in the API docs (by @tschaub in https://github.com/openlayers/openlayers/pull/13970)
+ * Minor adjustments to the website style (by @tschaub in https://github.com/openlayers/openlayers/pull/13989)
+ * Fix copying of non-linked ol.css, clean example build (by @MoonE in https://github.com/openlayers/openlayers/pull/13988)
+ * Fix kml-timezone example calculations (by @MoonE in https://github.com/openlayers/openlayers/pull/13982)
+ * Fix some errors in examples (by @MoonE in https://github.com/openlayers/openlayers/pull/13977)
+ * Update FontAwesome to v6.1.2 (by @MoonE in https://github.com/openlayers/openlayers/pull/13978)
+ * Use correct bands with `LUMINANCE_ALPHA` (by @mike-000 in https://github.com/openlayers/openlayers/pull/13974)
+ * Remove opt_ prefix (by @tschaub in https://github.com/openlayers/openlayers/pull/13972)
+ * Fix bandcount per texture for 8, 12, 16, etc. bands (by @mike-000 in https://github.com/openlayers/openlayers/pull/13973)
+ * Do not apply #12467 change to Icons (by @mike-000 in https://github.com/openlayers/openlayers/pull/13955)
+ * Remove more IE compatibility (by @MoonE in https://github.com/openlayers/openlayers/pull/13971)
+ * Remove workaround and docs for IE 11 (by @tschaub in https://github.com/openlayers/openlayers/pull/13965)
+ * Remove circular dependency (by @tschaub in https://github.com/openlayers/openlayers/pull/13967)
+ * Update link to sponsors (by @tschaub in https://github.com/openlayers/openlayers/pull/13968)
+ * Bundle code for the map on the homepage (by @tschaub in https://github.com/openlayers/openlayers/pull/13966)
+ * Website build (by @tschaub in https://github.com/openlayers/openlayers/pull/13961)
+ * Remove polyfills for IE and Android 4 (by @tschaub in https://github.com/openlayers/openlayers/pull/13963)
+ * Replace VERSION in un-transpiled source (by @MoonE in https://github.com/openlayers/openlayers/pull/13957)
+ * Use const in docs and other places (by @MoonE in https://github.com/openlayers/openlayers/pull/13958)
+ * Add few missing new lines in example source listing (by @MoonE in https://github.com/openlayers/openlayers/pull/13959)
+ * Fix js error in api pages on load (by @MoonE in https://github.com/openlayers/openlayers/pull/13956)
+ * Minor simplification (by @JakobMiksch in https://github.com/openlayers/openlayers/pull/13953)
+ * Fix typo and formatting in upgrade notes (by @mike-000 in https://github.com/openlayers/openlayers/pull/13946)
+ * Fixes to export examples (by @mike-000 in https://github.com/openlayers/openlayers/pull/13947)
+ * Fix WebGL points layer flaky test (by @jahow in https://github.com/openlayers/openlayers/pull/13944)
+ * Scaleline (by @MoonE in https://github.com/openlayers/openlayers/pull/13943)
+ * Improve loading of kmz file in example (by @MoonE in https://github.com/openlayers/openlayers/pull/13942)
+ * Fix KML default icon anchor with https icon url (by @MoonE in https://github.com/openlayers/openlayers/pull/13941)
+ * Use nicer functions, remove old code (by @MoonE in https://github.com/openlayers/openlayers/pull/13937)
+ * Render vector tile vectors in correct sequence for the postrender event (by @ahocevar in https://github.com/openlayers/openlayers/pull/13939)
+ * Remove workaround for missing TypedArray.from function (by @MoonE in https://github.com/openlayers/openlayers/pull/13936)
+ * Remove check for context.setLineDash (by @MoonE in https://github.com/openlayers/openlayers/pull/13933)
+ * Remove deprecated DataTile source `tilePixelRatio` (by @mike-000 in https://github.com/openlayers/openlayers/pull/13930)
+ * Remove input type="range" `change` event listeners where `input` events are also used (by @mike-000 in https://github.com/openlayers/openlayers/pull/13932)
+ * Remove deprecated `imageSmoothing` source options (by @mike-000 in https://github.com/openlayers/openlayers/pull/13931)
+ * Updated map background (by @tschaub in https://github.com/openlayers/openlayers/pull/13926)
+ * Include babel for CodeSandbox (by @tschaub in https://github.com/openlayers/openlayers/pull/13923)
+ * Remove reference to ES6 as ES2017 already listed (by @mike-000 in https://github.com/openlayers/openlayers/pull/13922)
+ * Style updates for examples and API docs (by @tschaub in https://github.com/openlayers/openlayers/pull/13917)
+ * Remove Google Analytics and cookie consent (by @tschaub in https://github.com/openlayers/openlayers/pull/13916)
+ * Fix map render test (by @MoonE in https://github.com/openlayers/openlayers/pull/13915)
+ * Uniformly grayscale controls (by @tschaub in https://github.com/openlayers/openlayers/pull/13908)
+ * Remove PluggableMap (by @tschaub in https://github.com/openlayers/openlayers/pull/13914)
+ * Remove MousePosition's deprecated undefinedHTML option (by @MoonE in https://github.com/openlayers/openlayers/pull/13911)
+ * Remove IconImage color fallback for IE (by @MoonE in https://github.com/openlayers/openlayers/pull/13912)
+ * Remove IE fallbacks (by @MoonE in https://github.com/openlayers/openlayers/pull/13907)
+ * Fix editing of export-map example on codesandbox (by @MoonE in https://github.com/openlayers/openlayers/pull/13910)
+ * Improve Collection type-safety (by @MoonE in https://github.com/openlayers/openlayers/pull/13902)
+ * Re-export the link interaction from the interactions module (by @tschaub in https://github.com/openlayers/openlayers/pull/13906)
+ * Replace enums with typedefs (by @MoonE in https://github.com/openlayers/openlayers/pull/13905)
+ * Accept an object literal for static layer styling (by @tschaub in https://github.com/openlayers/openlayers/pull/13900)
+ * Update jsdoc-plugin-typescript to fix markdown in type annotations (by @ahocevar in https://github.com/openlayers/openlayers/pull/13903)
+ * Wait until first load to create icon image (by @tschaub in https://github.com/openlayers/openlayers/pull/13899)
+ * Make Text options typesafe (by @MoonE in https://github.com/openlayers/openlayers/pull/13901)
+ * Align graticule default intervals to minutes and seconds (by @mike-000 in https://github.com/openlayers/openlayers/pull/13897)
+ * Publish untranspiled sources (by @tschaub in https://github.com/openlayers/openlayers/pull/13891)
+ * Improve reprojection WMS config for better performance (by @ahocevar in https://github.com/openlayers/openlayers/pull/13880)
+ * Omit minutes and seconds from HDMS formatting if zero (by @tschaub in https://github.com/openlayers/openlayers/pull/13893)
+ * Use Object.assign (by @tschaub in https://github.com/openlayers/openlayers/pull/13888)
+ * Remove unused worker (by @tschaub in https://github.com/openlayers/openlayers/pull/13892)
+ * Remove find and findIndex from array module (by @tschaub in https://github.com/openlayers/openlayers/pull/13887)
+ * Use Math.cosh and Math.log2 (by @tschaub in https://github.com/openlayers/openlayers/pull/13890)
+ * Use Object.values (by @tschaub in https://github.com/openlayers/openlayers/pull/13889)
+ * Remove workaround for Array.prototype.includes (by @tschaub in https://github.com/openlayers/openlayers/pull/13884)
+ * Codesandbox and bundler improvements for examples (by @ahocevar in https://github.com/openlayers/openlayers/pull/13879)
+ * Remove deprecated method PluggableMap#forEachLayerAtPixel ... (by @MoonE in https://github.com/openlayers/openlayers/pull/13868)
+ * Remove unused assertion numbers (by @MoonE in https://github.com/openlayers/openlayers/pull/13869)
+ * Remove deprecated Overlay options (by @MoonE in https://github.com/openlayers/openlayers/pull/13838)
+ * WebGL vector renderer for polygons, lines and points (by @jahow in https://github.com/openlayers/openlayers/pull/13461)
+ * Fix reloading tiles in case of an error with tile.load() (by @ahocevar in https://github.com/openlayers/openlayers/pull/13863)
+ * Handle multipolygons with empty polygons (by @ahocevar in https://github.com/openlayers/openlayers/pull/13860)
+ * Replace enums with typedef (by @MoonE in https://github.com/openlayers/openlayers/pull/13858)
+ * Remove deprecated label cache (by @MoonE in https://github.com/openlayers/openlayers/pull/13837)
+ * Update dev version to 7.0.0 (by @MoonE in https://github.com/openlayers/openlayers/pull/13850)
+ * Release v6.15.1 (by @openlayers in https://github.com/openlayers/openlayers/pull/13852)
+ * Recover from incorrect rebase after removal of string enums (by @ahocevar in https://github.com/openlayers/openlayers/pull/13835)
+ * Updates for the 6.15.0 release (by @openlayers in https://github.com/openlayers/openlayers/pull/13851)
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * Bump webpack-dev-server from 4.9.3 to 4.10.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13986)
+ * Bump rollup from 2.77.2 to 2.78.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13985)
+ * Bump eslint from 8.21.0 to 8.22.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13987)
+ * Bump @babel/preset-env from 7.18.9 to 7.18.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13948)
+ * Bump @babel/core from 7.18.9 to 7.18.10 (by @openlayers in https://github.com/openlayers/openlayers/pull/13949)
+ * Bump @rollup/plugin-commonjs from 22.0.1 to 22.0.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13951)
+ * Bump puppeteer from 15.5.0 to 16.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13950)
+ * Bump rollup from 2.77.0 to 2.77.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13919)
+ * Bump eslint from 8.20.0 to 8.21.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13920)
+ * Bump jsdoc-plugin-typescript from 2.0.7 to 2.1.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13875)
+ * Bump puppeteer from 15.4.0 to 15.5.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13871)
+ * Bump webpack from 5.73.0 to 5.74.0 (by @openlayers in https://github.com/openlayers/openlayers/pull/13870)
+ * Bump jsdoc from 3.6.10 to 3.6.11 (by @openlayers in https://github.com/openlayers/openlayers/pull/13873)
+ * Bump terser from 5.7.2 to 5.14.2 (by @openlayers in https://github.com/openlayers/openlayers/pull/13859)
+
+
+</details>

config/jsdoc/api/conf.json

@@ -14,6 +14,7 @@
     ]
   },
   "plugins": [
+    "jsdoc-plugin-intersection",
     "config/jsdoc/plugins/markdown.cjs",
     "jsdoc-plugin-typescript",
     "config/jsdoc/plugins/inline-options.cjs",

config/jsdoc/api/index.md

@@ -37,7 +37,7 @@
     <div class="card h-100 bg-light">
       <div class="card-body">
         <h4 class="card-title">Controls</h4>
-        <a href="module-ol_control.html#.defaults">Map default controls</a><br>
+        <a href="module-ol_control_defaults#.defaults">Map default controls</a><br>
         <a href="module-ol_control_Control-Control.html">All controls</a>
       </div>
     </div>
@@ -46,7 +46,7 @@
     <div class="card h-100 bg-light">
       <div class="card-body">
         <h4 class="card-title">Interactions</h4>
-        <a href="module-ol_interaction.html#~defaults">Map default interactions</a><br>
+        <a href="module-ol_interaction_defaults#.defaults">Map default interactions</a><br>
         Interactions for <a href="module-ol_Feature-Feature.html">vector features</a>
         <ul><li><a href="module-ol_interaction_Select-Select.html">ol/interaction/Select</a></li>
           <li><a href="module-ol_interaction_Draw-Draw.html">ol/interaction/Draw</a></li>
@@ -73,8 +73,8 @@
     <div class="card h-100 bg-light">
       <div class="card-body">
         <h4 class="card-title">Projections</h4>
-          <p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform coordinates from and to geographic, use <a href="module-ol_proj.html#.fromLonLat">ol/proj#fromLonLat()</a> and <a href="module-ol_proj.html#.toLonLat">ol/proj#toLonLat()</a>. For extents and other projections, use <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a> and <a href="module-ol_proj.html#.transform">ol/proj#transform()</a>.<p>
+          <p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform coordinates from and to geographic, use <a href="module-ol_proj.html#.fromLonLat">fromLonLat()</a> and <a href="module-ol_proj.html#.toLonLat">toLonLat()</a>. For extents and other projections, use <a href="module-ol_proj.html#.transformExtent">transformExtent()</a> and <a href="module-ol_proj.html#.transform">transform()</a>.</p>
-          <a href="module-ol_proj.html">ol/proj</a>
+          <p>Find these functions and more in the <a href="module-ol_proj.html">ol/proj</a> module.</p>
       </div>
     </div>
   </div>
@@ -82,7 +82,7 @@
     <div class="card h-100 bg-light">
       <div class="card-body">
         <h4 class="card-title">Observable objects</h4>
-        <p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object.ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
+        <p>Changes to all <a href="module-ol_Object-BaseObject.html">Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object.ObjectEvent.html">ObjectEvent</a> with information on the changed property and old value.</p>
       </div>
     </div>
   </div>

config/jsdoc/api/template/publish.js

@@ -17,7 +17,6 @@ const taffy = require('taffydb').taffy;
 const handle = require('jsdoc/lib/jsdoc/util/error').handle;
 const helper = require('jsdoc/lib/jsdoc/util/templateHelper');
 const htmlsafe = helper.htmlsafe;
-const linkto = helper.linkto;
 const resolveAuthorLinks = helper.resolveAuthorLinks;
 const outdir = env.opts.destination;
 
@@ -32,6 +31,78 @@ function find(spec) {
   return helper.find(data, spec);
 }
 
+function getShortName(longname) {
+  if (!longname.includes('module:ol/')) {
+    return longname;
+  }
+  if (longname.includes('|')) {
+    return longname;
+  }
+  if (longname.includes('<')) {
+    return longname;
+  }
+  return longname.split(/[\~\.#\:]/).pop();
+}
+
+function linkto(longname, linkText, cssClass, fragmentId) {
+  if (linkText) {
+    return helper.linkto(longname, linkText, cssClass, fragmentId);
+  }
+
+  if (!longname.includes('module:ol/')) {
+    return helper.linkto(longname, linkText, cssClass, fragmentId);
+  }
+
+  // check for `Array<foo|bar>` types (but allow `Array<foo>|Array<bar>` types)
+  let openBrackets = 0;
+  let parseTypes = false;
+  for (const c of longname) {
+    if (c === '<') {
+      openBrackets += 1;
+      continue;
+    }
+    if (c === '>') {
+      openBrackets -= 1;
+      continue;
+    }
+    if (openBrackets > 0 && c === '|') {
+      parseTypes = true;
+      break;
+    }
+  }
+  if (parseTypes) {
+    // collections or generics with unions get parsed by catharsis and
+    // will unfortunamely include long module:ol/foo names
+    return helper.linkto(longname, '', cssClass, fragmentId);
+  }
+
+  // handle union types
+  if (longname.includes('|')) {
+    return longname
+      .split('|')
+      .map((part) => linkto(part, '', cssClass, fragmentId))
+      .join(' | ');
+  }
+
+  const match = longname.match(/(.+?)\.?<(.+)>$/);
+  // handle generics and collections
+  if (match) {
+    return (
+      linkto(match[1], '', cssClass, fragmentId) +
+      '<' +
+      linkto(match[2], '', cssClass, fragmentId) +
+      '>'
+    );
+  }
+
+  return helper.linkto(
+    longname,
+    htmlsafe(getShortName(longname)),
+    cssClass,
+    fragmentId
+  );
+}
+
 function tutoriallink(tutorial) {
   return helper.toTutorial(tutorial, null, {
     tag: 'em',
@@ -85,15 +156,44 @@ function addSignatureParams(f) {
   f.signature = (f.signature || '') + '(' + params.join(', ') + ')';
 }
 
+/**
+ * Copied from https://github.com/jsdoc/jsdoc/blob/main/packages/jsdoc/lib/jsdoc/util/templateHelper.js
+ * Modified to call our own `linkto` to shorten names.
+ * @param {Object} doclet The doclet.
+ * @param {Array} [doclet.yields] The returns.
+ * @param {Array} [doclet.returns] The returns.
+ * @param {string} cssClass The css class.
+ * @return {Array} The returns.
+ */
+function getSignatureReturns({yields, returns}, cssClass) {
+  let returnTypes = [];
+
+  if (yields || returns) {
+    (yields || returns).forEach((r) => {
+      if (r && r.type && r.type.names) {
+        if (!returnTypes.length) {
+          returnTypes = r.type.names;
+        }
+      }
+    });
+  }
+
+  if (returnTypes && returnTypes.length) {
+    returnTypes = returnTypes.map((r) => linkto(r, '', cssClass));
+  }
+
+  return returnTypes;
+}
+
 function addSignatureReturns(f) {
-  const returnTypes = helper.getSignatureReturns(f);
+  const returnTypes = getSignatureReturns(f);
 
   f.signature = '<span class="signature">' + (f.signature || '') + '</span>';
 
   if (returnTypes.length) {
     f.signature +=
       '<span class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">' +
-      (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') +
+      (returnTypes.length ? '{' + returnTypes.join(' | ') + '}' : '') +
       '</span>';
   }
 }
@@ -110,12 +210,10 @@ function addSignatureTypes(f) {
 
 function shortenPaths(files, commonPrefix) {
   // always use forward slashes
-  const regexp = new RegExp('\\\\', 'g');
-
   Object.keys(files).forEach(function (file) {
     files[file].shortened = files[file].resolved
       .replace(commonPrefix, '')
-      .replace(regexp, '/');
+      .replaceAll('\\', '/');
   });
 
   return files;
@@ -138,6 +236,13 @@ function getPathFromDoclet(doclet) {
   return filepath;
 }
 
+function preprocessLinks(text) {
+  return text.replaceAll(
+    /\{@link (module:ol\/\S+?)\}/g,
+    (match, longname) => `{@link ${longname} ${getShortName(longname)}}`
+  );
+}
+
 function generate(title, docs, filename, resolveLinks) {
   resolveLinks = resolveLinks === false ? false : true;
 
@@ -152,7 +257,7 @@ function generate(title, docs, filename, resolveLinks) {
   let html = view.render('container.tmpl', docData);
 
   if (resolveLinks) {
-    html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
+    html = helper.resolveLinks(preprocessLinks(html)); // turn {@link foo} into <a href="foodoc.html">foo</a>
   }
 
   fs.writeFileSync(outpath, html, 'utf8');
@@ -223,7 +328,7 @@ function getPrettyName(doclet) {
 
 /**
  * Create the navigation sidebar.
- * @param {object} members The members that will be used to create the sidebar.
+ * @param {Object} members The members that will be used to create the sidebar.
  * @param {Array<Object>} members.classes Classes.
  * @param {Array<Object>} members.externals Externals.
  * @param {Array<Object>} members.globals Globals.
@@ -364,13 +469,12 @@ exports.publish = function (taffyData, opts, tutorials) {
       doclet.examples = doclet.examples.map(function (example) {
         let caption, code;
 
-        if (
+        const match = example.match(
-          example.match(
+          /^\s*<caption>([\s\S]+?)<\/caption>(?:\s*[\n\r])([\s\S]+)$/i
-            /^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i
+        );
-          )
+        if (match) {
-        ) {
+          caption = match[1];
-          caption = RegExp.$1;
+          code = match[2];
-          code = RegExp.$3;
         }
 
         return {
@@ -461,7 +565,7 @@ exports.publish = function (taffyData, opts, tutorials) {
   data().each(function (doclet) {
     const url = helper.longnameToUrl[doclet.longname];
 
-    if (url.indexOf('#') > -1) {
+    if (url.includes('#')) {
       doclet.id = helper.longnameToUrl[doclet.longname].split(/#/).pop();
     } else {
       doclet.id = doclet.name;
@@ -493,6 +597,7 @@ exports.publish = function (taffyData, opts, tutorials) {
   // add template helpers
   view.find = find;
   view.linkto = linkto;
+  view.getShortName = getShortName;
   view.resolveAuthorLinks = resolveAuthorLinks;
   view.tutoriallink = tutoriallink;
   view.htmlsafe = htmlsafe;

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

@@ -1,17 +1,11 @@
 (function() {
-    var counter = 0;
+    const source = document.querySelector('.prettyprint.source > code');
-    var numbered;
+    if (source) {
-    var source = document.getElementsByClassName('prettyprint source');
+        source.innerHTML = source.innerHTML
-
+            .split('\n')
-    if (source && source[0]) {
+            .map(function (item, i) {
-        source = source[0].getElementsByTagName('code')[0];
+                return '<span id="line' + (i + 1) + '"></span>' + item;
-
+            })
-        numbered = source.innerHTML.split('\n');
+            .join('\n');
-        numbered = numbered.map(function(item) {
-            counter++;
-            return '<span id="line' + counter + '"></span>' + item;
-        });
-
-        source.innerHTML = numbered.join('\n');
     }
 })();

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

@@ -87,17 +87,19 @@ $(function () {
       manualToggles = {};
       const lastTerm = search.lastSearchTerm;
       search.lastSearchTerm = undefined;
-      const fa = currentItem.querySelector('.title > .fa');
+      if (currentItem) {
-      fa.classList.add('no-transition');
+        const fa = currentItem.querySelector('.title > .fa');
+        fa.classList.add('no-transition');
+        setTimeout(function () {
+          fa.classList.remove('no-transition');
+        }, 0);
+      }
       doSearch(lastTerm || '');
 
       // Transfer manual toggle state to newly loaded current node
       if (initialCurrent && initialCurrent.classList.contains('toggle-manual')) {
         search.manualToggle(search.$currentItem, initialCurrent.classList.contains('toggle-manual-show'));
       }
-      setTimeout(function () {
-        fa.classList.remove('no-transition');
-      }, 0);
     });
 
     return {
@@ -275,28 +277,28 @@ $(function () {
   });
 
   // warn about outdated version
-  var currentVersion = document.getElementById('package-version').innerHTML;
+  const currentVersion = document.getElementById('package-version').innerHTML;
-  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
+  const releaseUrl = 'https://cdn.jsdelivr.net/npm/ol/package.json';
-  fetch(packageUrl).then(function(response) {
+  fetch(releaseUrl).then(function(response) {
     return response.json();
   }).then(function(json) {
-    var latestVersion = json.version;
+    const latestVersion = json.version;
     document.getElementById('latest-version').innerHTML = latestVersion;
-    var url = window.location.href;
+    const url = window.location.href;
-    var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
+    const branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
-    var cookieText = 'dismissed=-' + latestVersion + '-';
+    const storageKey = 'dismissed=-' + latestVersion;
-    var dismissed = document.cookie.indexOf(cookieText) != -1;
+    const dismissed = localStorage.getItem(storageKey) === 'true';
     if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
-      var link = url.replace(branchSearch[0], '/latest/apidoc/');
+      const link = url.replace(branchSearch[0], '/latest/apidoc/');
       fetch(link, {method: 'head'}).then(function(response) {
-        var a = document.getElementById('latest-link');
+        const a = document.getElementById('latest-link');
         a.href = response.status == 200 ? link : '../../latest/apidoc/';
       });
-      var latestCheck = document.getElementById('latest-check');
+      const latestCheck = document.getElementById('latest-check');
       latestCheck.style.display = '';
       document.getElementById('latest-dismiss').onclick = function() {
         latestCheck.style.display = 'none';
-        document.cookie = cookieText;
+        localStorage.setItem(storageKey, 'true');
       }
     }
   });

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

@@ -172,7 +172,6 @@ li {
 }
 .navigation li.item .title {
   cursor: pointer;
-  display: -ms-flexbox;
   display: flex;
   font-size: 0.85em;
 }

config/jsdoc/api/template/static/theme

@@ -0,0 +1 @@
+../../../../../site/src/theme

config/jsdoc/api/template/tmpl/container.tmpl

@@ -46,7 +46,7 @@
         <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
       </div>
     <?js if (doc.classdesc) { ?>
-      <div class="class-description col-lg-7 align-self-center pl-0"><?js= doc.classdesc ?></div>
+      <div class="class-description col-lg-7 align-self-center ps-0"><?js= doc.classdesc ?></div>
     <?js } ?>
     </div>
 </header>
@@ -79,13 +79,13 @@
 
     <?js if (doc.kind == 'class') {
       var subclasses = self.find(function() {
-        return this.augments && this.augments.indexOf(doc.longname) > -1;
+        return this.augments && this.augments.includes(doc.longname);
       })
       if (subclasses.length) {
     ?>
         <h3 class="subsection-title">Subclasses</h3>
         <ul><?js subclasses.forEach(function(s) { ?>
-          <li><?js= self.linkto(s.longname, s.longname) ?>
+          <li><?js= self.linkto(s.longname) ?>
             <?js= (s.interface ? '(Interface)' : '') ?>
           </li>
         <?js }); ?></ul>
@@ -95,7 +95,7 @@
         <h3 class="subsection-title">Extends</h3>
 
         <ul><?js doc.augments.forEach(function(a) { ?>
-            <li><?js= self.linkto(a, a) ?></li>
+            <li><?js= self.linkto(a) ?></li>
         <?js }); ?></ul>
     <?js } ?>
 
@@ -103,7 +103,7 @@
         <h3 class="subsection-title">Mixes In</h3>
 
         <ul><?js doc.mixes.forEach(function(a) { ?>
-            <li><?js= self.linkto(a, a) ?></li>
+            <li><?js= self.linkto(a) ?></li>
         <?js }); ?></ul>
     <?js } ?>
 
@@ -111,7 +111,7 @@
         <h3 class="subsection-title">Requires</h3>
 
         <ul><?js doc.requires.forEach(function(r) { ?>
-            <li><?js= self.linkto(r, r) ?></li>
+            <li><?js= self.linkto(r) ?></li>
         <?js }); ?></ul>
     <?js } ?>
 
@@ -162,7 +162,7 @@
         var methods = self.find({kind: 'function', memberof: title === 'Global' ? {isUndefined: true} : doc.longname});
         if (methods && methods.length && methods.forEach) {
     ?>
-        <h3 class="subsection-title">Methods</h3>
+        <h3 class="subsection-title"><?js= doc.kind === 'module' ? 'Functions' : 'Methods' ?></h3>
 
         <dl><?js methods.forEach(function(m) { ?>
             <?js m.parent = doc ?>

config/jsdoc/api/template/tmpl/examples.tmpl

@@ -6,7 +6,7 @@
         <p class="code-caption"><?js= example.caption ?></p>
     <?js } ?>
 
-    <?js if (example.code.toString().indexOf('<pre>') === -1) { ?>
+    <?js if (!example.code.toString().includes('<pre>')) { ?>
     <pre class="prettyprint"><code><?js= example.code ?></code></pre>
     <?js } else { ?>
     <?js= example.code.replace(/<pre>/g, '<pre class="prettyprint">') ?>

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

@@ -4,116 +4,59 @@ var version = obj.packageInfo.version;
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
-    <script>
-    var gaProperty = 'UA-2577926-1';
-    // Disable tracking if the opt-out cookie exists.
-    var disableStr = 'ga-disable-' + gaProperty;
-    if (document.cookie.indexOf(disableStr + '=true') > -1) {
-      window[disableStr] = true;
-    }
-    function gaOptout() {
-      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
-      window[disableStr] = true;
-    }
-    function gaOptoutRevoke() {
-      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
-      window[disableStr] = false;
-    }
-    </script>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
-    </script>
-    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
-    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
-    <script>
-    window.addEventListener("load", function() {
-      window.cookieconsent.initialise({
-        'palette': {
-          'popup': {
-            'background': '#eaf7f7',
-            'text': '#5c7291'
-          },
-          'button': {
-            'background': '#56cbdb',
-            'text': '#ffffff'
-          }
-        },
-        'theme': 'edgeless',
-        'type': 'opt-out',
-        'onInitialise': function (status) {
-          if (!this.hasConsented()) {
-            gaOptout()
-          }
-        },
-        'onStatusChange': function(status, chosenBefore) {
-          if (!this.hasConsented()) {
-            gaOptout()
-          }
-        },
-        'onRevokeChoice': function() {
-          gaOptoutRevoke()
-        }
-      })
-    });
-    </script>
     <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
-    <script src="scripts/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
-    <script src="scripts/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
-    <!--[if lt IE 9]>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
-      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
-    <![endif]-->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
-    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
-    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
-    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
-    <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
+    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
-    <link type="text/css" rel="stylesheet" href="styles/site.css">
+    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
+    <link rel="stylesheet" type="text/css" href="/theme/site.css">
   </head>
   <body>
-    <div class="container-fluid">
+    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
-      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
+      <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt="">&nbsp;OpenLayers</a>
-        <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
+      <!-- menu items that get hidden below 768px width -->
-          <span class="navbar-toggler-icon"></span>
+      <nav class="collapse navbar-collapse" id="olmenu">
-        </button>
+        <ul class="navbar-nav ms-auto">
-
-        <!-- menu items that get hidden below 768px width -->
-        <nav class="collapse navbar-collapse" id="olmenu">
-          <ul class="navbar-nav ml-auto">
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
+            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="docdropdown">
-              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
+              <a class="dropdown-item" href="/doc/">Docs</a>
               <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
+                <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
-                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
+                <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
-                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
+                <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
-                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
+                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
+                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
             </div>
           </li>
           <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
-          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
+          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
+            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="codedropdown">
-              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
+              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
-              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
+              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
             </div>
-           </li>
+          </li>
-          </ul>
+        </ul>
-        </nav>
+      </nav>
-      </header>
+    </header>
+
+    <div class="container-fluid">
       <div id="wrap" class="row">
         <div class="navigation col-md-4 col-lg-3">
           <div class="search-wrapper">
@@ -137,17 +80,17 @@ var version = obj.packageInfo.version;
         </div>
 
         <div class="main col-md-8 col-lg-9">
-            <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
+          <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
-            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+          <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
-              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+            This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
-            </div>
+          </div>
-            <?js= content ?>
+          <?js= content ?>
         </div>
       </div>
-      <script>prettyPrint();</script>
-      <script src="scripts/linenumber.js"></script>
-      <script src="scripts/main.js"></script>
     </div>
+    <script>prettyPrint();</script>
+    <script src="scripts/linenumber.js"></script>
+    <script src="scripts/main.js"></script>
   </body>
 </html>

config/jsdoc/api/template/tmpl/members.tmpl

@@ -5,7 +5,7 @@ var typeSignature = '';
 
 if (data.type && data.type.names) {
     data.type.names.forEach(function (name) {
-        typeSignature += '<span class="type-signature type ' + name.toLowerCase() + '">{' + self.linkto(name, self.htmlsafe(name)) + '}</span> ';
+        typeSignature += '<span class="type-signature type ' + name.toLowerCase() + '">{' + self.linkto(name) + '}</span> ';
     });
 }
 ?>
@@ -14,7 +14,7 @@ if (data.type && data.type.names) {
         <div class="anchor" id="<?js= id ?>">
         </div>
         <h4 class="name">
-            <?js= data.attribs + (data.scope === 'static' ? longname : name.indexOf('module:') === 0 ? name.split('/').pop() : name)  + typeSignature ?>
+            <?js= data.attribs + (data.scope === 'static' ? longname : name.startsWith('module:') ? name.split('/').pop() : name)  + typeSignature ?>
             <?js= this.partial('stability.tmpl', data) ?>
         </h4>
     </div>

config/jsdoc/api/template/tmpl/method.tmpl

@@ -14,7 +14,7 @@ if (/-dev$/.test(version)) {
         <div class="anchor" id="<?js= id ?>">
         </div>
         <h4 class="name">
-            <?js= data.attribs + (kind === 'class' ? 'new ' : '') + (data.scope === 'static' ? longname : name) + (kind !== 'event' ? data.signature : '') ?>
+            <?js= data.attribs + (kind === 'class' ? 'new ' : '') + this.getShortName(longname) + (kind !== 'event' ? data.signature : '') ?>
             <?js if (data.inherited || data.inherits) { ?>
                 <span class="inherited"><?js= this.linkto(data.inherits, 'inherited') ?></span>
             <?js } ?>
@@ -34,8 +34,9 @@ if (/-dev$/.test(version)) {
 </dt>
 <dd class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
 
-<?js if (data.parent && data.parent.kind == 'module' && data.parent.name.split('ol/').length < 3) { ?>
+<?js if (data.parent && data.parent.kind == 'module') { ?>
-  <pre class="prettyprint source"><code>import {<?js= data.name ?>} from '<?js= data.parent.name ?>';</code></pre>
+    <?js const importName = data.isDefaultExport ? data.name : `{${data.name}}`; ?>
+    <pre class="prettyprint source"><code>import <?js= importName ?> from '<?js= data.parent.name ?>';</code></pre>
 <?js } ?>
 
     <?js if (data.description) { ?>
@@ -55,7 +56,7 @@ if (/-dev$/.test(version)) {
 
     <?js if (data['this']) { ?>
         <h5>This:</h5>
-        <ul><li><?js= this.linkto(data['this'], data['this']) ?></li></ul>
+        <ul><li><?js= this.linkto(data['this']) ?></li></ul>
     <?js } ?>
 
     <?js if (data.stability || kind !== 'class') { ?>

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

@@ -2,7 +2,7 @@
 var self = this;
 
 function toShortName(name) {
-    return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
+    return name.startsWith('module:') ? name.split('/').pop() : name;
 }
 
 function getItemCssClass(type) {
@@ -49,7 +49,7 @@ function listContent(item, title, listItemPrinter) {
 } ?>
 <li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
     <span class="title toggle">
-        <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
+        <span class="fa <?js= getItemCssClass(item.type) ?> me-2 mt-1"></span>
         <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
     </span><?js
 listContent(item, 'Members', printListItem);

config/jsdoc/api/template/tmpl/observables.tmpl

@@ -8,7 +8,7 @@
     <th>Name</th>
     <th>Type</th>
     <th>Settable</th>
-    <th><a href="module-ol_Object.ObjectEvent.html">ol/Object.ObjectEvent</a> type</th>
+    <th><a href="module-ol_Object.ObjectEvent.html">ObjectEvent</a> type</th>
     <th class="last">Description</th>
   </tr>
   </thead>

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

@@ -1,11 +1,11 @@
 <?js
     var params = obj;
-    
+
     /* sort subparams under their parent params (like opts.classname) */
     var parentParam = null;
     params.forEach(function(param, i) {
         if (!param) { return; }
-        if ( parentParam && param.name && param.name.indexOf(parentParam.name + '.') === 0 ) {
+        if (parentParam && param.name && param.name.startsWith(parentParam.name + '.')) {
             param.name = param.name.substr(parentParam.name.length+1);
             parentParam.subparams = parentParam.subparams || [];
             parentParam.subparams.push(param);
@@ -15,30 +15,30 @@
             parentParam = param;
         }
     });
-    
+
     /* determine if we need extra "attributes" column */
     params.hasAttributes = false;
     params.hasName = false;
-    
+
     var colspan = 2;
     params.forEach(function(param) {
         if (!param) { return; }
-        if (param.type && param.type.names && param.type.names.indexOf('undefined') !== -1) {
+        if (param.type && param.type.names && param.type.names.includes('undefined')) {
             param.optional = true;
         }
-        if (param.name.indexOf('var_') == 0) {
+        if (param.name.startsWith('var_')) {
             params.hasAttributes = true;
             param.variable = true;
         }
-        
+
         if (param.optional || param.nullable) {
             params.hasAttributes = true;
         }
-        
+
         if (param.name) {
             params.hasName = true;
         }
-        
+
     });
 ?>
 
@@ -48,29 +48,45 @@
 		<?js if (params.hasName) {?>
 		<th>Name</th>
 		<?js } ?>
-		
+
 		<th>Type</th>
-		
+
 		<th class="last">Description</th>
 	</tr>
 	</thead>
-	
+
 	<tbody>
 	<?js
         var self = this;
+
+        if (params[0].name === 'options' && params[0].subparams) {
+            var onlyOptions = true;
+            for (var i = 1; i < params.length; ++i) {
+                if (params[i]) {
+                    onlyOptions = false;
+                    break;
+                }
+            }
+            if (onlyOptions) {
+                var hasName = params.hasName;
+                params = params[0].subparams;
+                params.hasName = hasName;
+            }
+        }
+
 	    params.forEach(function(param) {
 	        if (!param) { return; }
 	?>
-	
+
         <tr class="<?js= (param.stability && param.stability !== 'stable') ? 'unstable' : '' ?>">
             <?js if (params.hasName) {?>
-                <td class="name"><code><?js= param.name.replace(/^opt_/, "") ?></code></td>
+                <td class="name"><code><?js= param.name ?></code></td>
             <?js } ?>
-            
+
             <?js if (!param.subparams) {?>
             <td class="type">
             <?js if (param.type && param.type.names) {?>
-                <?js= self.partial('type.tmpl', param.type.names) + (param.optional && typeof param.defaultvalue === 'undefined' && param.type.names.indexOf('undefined') === -1 ? ' | undefined' : '') ?>
+                <?js= self.partial('type.tmpl', param.type.names) + (param.optional && typeof param.defaultvalue === 'undefined' && !param.type.names.includes('undefined') ? ' | undefined' : '') ?>
                 <?js if (typeof param.defaultvalue !== 'undefined') { ?>
                     (defaults to <?js= self.htmlsafe(param.defaultvalue) ?>)
                 <?js } ?>
@@ -87,7 +103,7 @@
                 <?js= self.partial('params.tmpl', param.subparams) ?>
             <?js } ?></td>
         </tr>
-	
+
 	<?js }); ?>
 	</tbody>
 </table>

config/jsdoc/api/template/tmpl/properties.tmpl

@@ -1,11 +1,11 @@
 <?js
     var props = obj;
-    
+
     /* sort subprops under their parent props (like opts.classname) */
     var parentProp = null;
     props.forEach(function(prop, i) {
         if (!prop) { return; }
-        if ( parentProp && prop.name && prop.name.indexOf(parentProp.name + '.') === 0 ) {
+        if (parentProp && prop.name && prop.name.startsWith(parentProp.name + '.')) {
             prop.name = prop.name.substr(parentProp.name.length+1);
             parentProp.subprops = parentProp.subprops || [];
             parentProp.subprops.push(prop);
@@ -15,23 +15,23 @@
             parentProp = prop;
         }
     });
-    
+
     /* determine if we need extra columns, "attributes" and "default" */
     props.hasAttributes = false;
     props.hasDefault = false;
     props.hasName = false;
-    
+
     props.forEach(function(prop) {
         if (!prop) { return; }
-        
+
         if (prop.optional || prop.nullable) {
             props.hasAttributes = true;
         }
-        
+
         if (prop.name) {
             props.hasName = true;
         }
-        
+
         if (typeof prop.defaultvalue !== 'undefined') {
             props.hasDefault = true;
         }
@@ -44,51 +44,51 @@
 		<?js if (props.hasName) {?>
 		<th>Name</th>
 		<?js } ?>
-		
+
 		<th>Type</th>
-		
+
 		<?js if (props.hasAttributes) {?>
 		<th>Argument</th>
 		<?js } ?>
-		
+
 		<?js if (props.hasDefault) {?>
 		<th>Default</th>
 		<?js } ?>
-		
+
 		<th class="last">Description</th>
 	</tr>
 	</thead>
-	
+
 	<tbody>
 	<?js
         var self = this;
 	    props.forEach(function(prop) {
 	        if (!prop) { return; }
 	?>
-	
+
         <tr>
             <?js if (props.hasName) {?>
                 <td class="name"><code><?js= prop.name ?></code></td>
             <?js } ?>
-            
+
             <td class="type">
             <?js if (prop.type && prop.type.names) {?>
                 <?js= self.partial('type.tmpl', prop.type.names) ?>
             <?js } ?>
             </td>
-            
+
             <?js if (props.hasAttributes) {?>
                 <td class="attributes">
                 <?js if (prop.optional) { ?>
                     &lt;optional><br>
                 <?js } ?>
-                    
+
                 <?js if (prop.nullable) { ?>
                     &lt;nullable><br>
                 <?js } ?>
                 </td>
             <?js } ?>
-            
+
             <?js if (props.hasDefault) {?>
                 <td class="default">
                 <?js if (typeof prop.defaultvalue !== 'undefined') { ?>
@@ -96,12 +96,12 @@
                 <?js } ?>
                 </td>
             <?js } ?>
-            
+
             <td class="description last"><?js= prop.description ?><?js if (prop.subprops) { ?>
                 <h6>Properties</h6><?js= self.partial('properties.tmpl', prop.subprops) ?>
             <?js } ?></td>
         </tr>
-	
+
 	<?js }); ?>
 	</tbody>
 </table>

config/jsdoc/api/template/tmpl/returns.tmpl

@@ -10,9 +10,9 @@ returns.forEach(function (ret, i) {
         var name = ret.name || ret.description;
         var startSpacePos = name.indexOf(" ");
 
-        if (parentReturn !== null && name.indexOf(parentReturn.name + '.') === 0) {
+        if (parentReturn !== null && name.startsWith(parentReturn.name + '.')) {
             ret.name = isNamed ? name.substr(parentReturn.name.length + 1) : name.substr(parentReturn.name.length + 1, startSpacePos - (parentReturn.name.length + 1));
-        
+
             parentReturn.subReturns = parentReturn.subReturns || [];
             parentReturn.subReturns.push(ret);
             returns[i] = null;
@@ -20,7 +20,7 @@ returns.forEach(function (ret, i) {
             if (!isNamed) {
                 ret.name = ret.description.substr(0, startSpacePos !== -1 ? startSpacePos : ret.description.length);
             }
-            
+
             parentReturn = ret;
         }
     }
@@ -52,9 +52,9 @@ if (returns.length > 1) {
             <?js
                 if (ret.type && ret.type.names) {
                     ret.type.names.forEach(function(name, i) { ?>
-                        <?js= self.linkto(name, self.htmlsafe(name)) ?>
+                        <?js= self.linkto(name) ?>
                         <?js if (i < ret.type.names.length-1) { ?> | <?js } ?>
-                    <?js }); 
+                    <?js });
                 }
             ?>
             </td>

config/jsdoc/api/template/tmpl/type.tmpl

@@ -2,6 +2,6 @@
 	var data = obj;
     var self = this;
     data.forEach(function(name, i) { ?>
-<span class="param-type"><?js= self.linkto(name, self.htmlsafe(name)) ?></span>
+<span class="param-type"><?js= self.linkto(name) ?></span>
 <?js if (i < data.length-1) { ?>|<?js } ?>
 <?js }); ?>

config/jsdoc/info/publish.js

@@ -14,11 +14,7 @@ const path = require('path');
  */
 exports.publish = function (data, opts) {
   function getTypes(data) {
-    const types = [];
+    return data.map((name) => name.replace(/^function$/, 'Function'));
-    data.forEach(function (name) {
-      types.push(name.replace(/^function$/, 'Function'));
-    });
-    return types;
   }
 
   // get all doclets that have exports
@@ -34,7 +30,7 @@ exports.publish = function (data, opts) {
         return (
           this.meta &&
           this.meta.path &&
-          this.longname.indexOf('<anonymous>') !== 0 &&
+          !this.longname.startsWith('<anonymous>') &&
           this.longname !== 'module:ol'
         );
       },
@@ -59,7 +55,7 @@ exports.publish = function (data, opts) {
       if (
         constructor &&
         constructor.substr(-1) === '_' &&
-        constructor.indexOf('module:') === -1
+        !constructor.includes('module:')
       ) {
         assert.strictEqual(
           doc.inherited,

config/jsdoc/plugins/api.cjs

@@ -37,7 +37,7 @@ function includeAugments(doclet) {
   if (doclet.fires && cls.fires) {
     for (let i = 0, ii = cls.fires.length; i < ii; ++i) {
       const fires = cls.fires[i];
-      if (doclet.fires.indexOf(fires) == -1) {
+      if (!doclet.fires.includes(fires)) {
         doclet.fires.push(fires);
       }
     }
@@ -58,7 +58,7 @@ function includeAugments(doclet) {
             doclet.fires = [];
           }
           cls.fires.forEach(function (f) {
-            if (doclet.fires.indexOf(f) == -1) {
+            if (!doclet.fires.includes(f)) {
               doclet.fires.push(f);
             }
           });
@@ -68,7 +68,7 @@ function includeAugments(doclet) {
             doclet.observables = [];
           }
           cls.observables.forEach(function (f) {
-            if (doclet.observables.indexOf(f) == -1) {
+            if (!doclet.observables.includes(f)) {
               doclet.observables.push(f);
             }
           });
@@ -81,10 +81,10 @@ function includeAugments(doclet) {
 
 function extractTypes(item) {
   item.type.names.forEach(function (type) {
-    const match = type.match(/^(.*<)?([^>]*)>?$/);
+    const match = type.match(/^(?:.*<)?([^>]*)>?$/);
     if (match) {
-      modules[match[2]] = true;
+      modules[match[1]] = true;
-      types[match[2]] = true;
+      types[match[1]] = true;
     }
   });
 }

config/jsdoc/plugins/markdown.cjs

@@ -76,7 +76,7 @@ function shouldProcessString(tagName, text) {
   let shouldProcess = true;
 
   // we only want to process `@author` and `@see` tags that contain Markdown links
-  if ((tagName === 'author' || tagName === 'see') && text.indexOf('[') === -1) {
+  if ((tagName === 'author' || tagName === 'see') && !text.includes('[')) {
     shouldProcess = false;
   }
 

config/jsdoc/plugins/observable.cjs

@@ -29,10 +29,10 @@ exports.handlers = {
         observable.name = name;
         observable.readonly =
           typeof observable.readonly == 'boolean' ? observable.readonly : true;
-        if (doclet.name.indexOf('get') === 0) {
+        if (doclet.name.startsWith('get')) {
           observable.type = doclet.returns[0].type;
           observable.description = doclet.returns[0].description;
-        } else if (doclet.name.indexOf('set') === 0) {
+        } else if (doclet.name.startsWith('set')) {
           observable.readonly = false;
         }
         if (doclet.stability) {
@@ -42,14 +42,14 @@ exports.handlers = {
           cls.observables = [];
         }
         observable = observables[doclet.observable];
-        if (observable.type && cls.observables.indexOf(observable) == -1) {
+        if (observable.type && !cls.observables.includes(observable)) {
           cls.observables.push(observable);
         }
         if (!cls.fires) {
           cls.fires = [];
         }
         event = 'module:ol/Object.ObjectEvent#event:change:' + name;
-        if (cls.fires.indexOf(event) == -1) {
+        if (!cls.fires.includes(event)) {
           cls.fires.push(event);
         }
       }

config/rollup-full-build.js

@@ -0,0 +1,24 @@
+import commonjs from '@rollup/plugin-commonjs';
+import externalGlobals from 'rollup-plugin-external-globals';
+import resolve from '@rollup/plugin-node-resolve';
+import {terser} from 'rollup-plugin-terser';
+
+export default {
+  input: 'build/index.js',
+  output: {
+    name: 'ol',
+    format: 'iife',
+    exports: 'default',
+    file: 'build/full/ol.js',
+    sourcemap: true,
+  },
+  plugins: [
+    resolve({moduleDirectories: ['build', 'node_modules']}),
+    commonjs(),
+    externalGlobals({
+      geotiff: 'GeoTIFF',
+      'ol-mapbox-style': 'olms',
+    }),
+    terser(),
+  ],
+};

config/tsconfig-build.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     /* Basic Options */
-    "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "module": "es2020",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
@@ -58,7 +58,7 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include": [
-    "../build/ol/src/**/*.js"
+    "../build/ol/**/*.js"
   ],
   "exclude": []
 }

config/webpack-config-legacy-build.mjs

@@ -1,57 +0,0 @@
-import TerserPlugin from 'terser-webpack-plugin';
-import path from 'path';
-
-export default {
-  entry: ['regenerator-runtime/runtime', './build/index.js'],
-  devtool: 'source-map',
-  mode: 'production',
-  target: ['web', 'es5'],
-  module: {
-    rules: [
-      {
-        test: /\.m?js$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              [
-                '@babel/preset-env',
-                {
-                  targets: 'last 2 versions, not dead',
-                },
-              ],
-            ],
-          },
-        },
-      },
-    ],
-  },
-  resolve: {
-    fallback: {
-      fs: false,
-      http: false,
-      https: false,
-    },
-    alias: {
-      ol: path.resolve('./build/ol'),
-    },
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          // Mangle private members convention with underscore suffix
-          mangle: {properties: {regex: /_$/}},
-        },
-      }),
-    ],
-  },
-  output: {
-    path: path.resolve('./build/legacy'),
-    publicPath: 'auto',
-    filename: 'ol.js',
-    library: 'ol',
-    libraryTarget: 'umd',
-    libraryExport: 'default',
-  },
-};

doc/quickstart.hbs

@@ -1,145 +0,0 @@
----
-title: Quick Start
-layout: doc.hbs
----
-
-# Quick Start
-
-This primer shows you how to put a simple map on a web page.
-
-**For production, we strongly recommend bundling the application together with its dependencies, as explained in the [Building an OpenLayers Application](./tutorials/bundle.html) tutorial.**
-
-
-## Put a map on a page
-
-Below you'll find a complete working example.  Create a new file, copy in the contents below, and open in a browser:
-
-```xml
-<!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 {
-        height: 400px;
-        width: 100%;
-      }
-    </style>
-    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/build/ol.js"></script>
-    <title>OpenLayers example</title>
-  </head>
-  <body>
-    <h2>My Map</h2>
-    <div id="map" class="map"></div>
-    <script type="text/javascript">
-      var map = new ol.Map({
-        target: 'map',
-        layers: [
-          new ol.layer.Tile({
-            source: new ol.source.OSM()
-          })
-        ],
-        view: new ol.View({
-          center: ol.proj.fromLonLat([37.41, 8.82]),
-          zoom: 4
-        })
-      });
-    </script>
-  </body>
-</html>
-```
-
-## Understanding what is going on
-
-To include a map a web page you will need 3 things:
-
- 1. Include OpenLayers
- 2. `<div>` map container
- 3. JavaScript to create a simple map
-
-### Include OpenLayers
-
-```xml
-  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/build/ol.js"></script>
-```
-
-The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
-
-**Optional:** If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:
-
-```xml
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
-```
-
-
-### `<div>` to contain the map
-
-```xml
-  <div id="map" class="map"></div>
-```
-
-The map in the application is contained in a [`<div>` HTML element](https://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
-
-```xml
-  <style>
-    .map {
-      height: 400px;
-      width: 100%;
-    }
-  </style>
-```
-
-### JavaScript to create a simple map
-
-```js
-  var map = new ol.Map({
-    target: 'map',
-    layers: [
-      new ol.layer.Tile({
-        source: new ol.source.OSM()
-      })
-    ],
-    view: new ol.View({
-      center: ol.proj.fromLonLat([37.41, 8.82]),
-      zoom: 4
-    })
-  });
-```
-
-With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:
-
-The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
-
-```js
-  var map = new ol.Map({ ... });
-```
-
-To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
-
-```js
-    target: 'map'
-```
-
-The `layers: [ ... ]` array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
-
-```js
-    layers: [
-      new ol.layer.Tile({
-        source: new ol.source.OSM()
-      })
-    ]
-```
-
-Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
-
-The next part of the `Map` object is the `View`. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level.  Note that zoom level 0 is zoomed out.
-
-```js
-    view: new ol.View({
-      center: ol.proj.fromLonLat([37.41, 8.82]),
-      zoom: 4
-    })
-```
-
-You will notice that the `center` specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

doc/tutorials/bundle.md

@@ -1,32 +0,0 @@
----
-title: Basic project setup using NPM and Vite
-layout: doc.hbs
----
-
-# Introduction
-
-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 [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
-
-Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project with
-
-    npx create-ol-app
-
-*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: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
-
-    npm run build
-
-and copy the `dist/` folder to your production server.

examples/.eslintrc

@@ -2,14 +2,15 @@
   "globals": {
     "$": false,
     "arc": false,
-    "common": false,
+    "bootstrap": false,
     "chroma": false,
+    "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
-    "html2canvas": false,
     "geojsonvt": false,
     "gifler": false,
     "GyroNorm": false,
+    "html2canvas": false,
     "jspdf": false,
     "jsts": false,
     "JSZip": false,

examples/button-title.css

@@ -1,3 +0,0 @@
-.tooltip-inner {
-  white-space: nowrap;
-}

examples/button-title.html

@@ -3,12 +3,11 @@ layout: example.html
 title: Custom Tooltips
 shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >
-  This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/components/tooltips/">Bootstrap</a>.
+  This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/5.2/components/tooltips/">Bootstrap</a>.
   For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
 tags: "custom, tooltip"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
 <div id="map" class="map"></div>

examples/button-title.js

@@ -17,11 +17,10 @@ const map = new Map({
   }),
 });
 
-$('.ol-zoom-in, .ol-zoom-out').tooltip({
+document
-  placement: 'right',
+  .querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
-  container: '#map',
+  .forEach(function (el) {
-});
+    new bootstrap.Tooltip(el, {
-$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
+      container: '#map',
-  placement: 'left',
+    });
-  container: '#map',
+  });
-});

examples/canvas-gradient-pattern.js

@@ -4,7 +4,6 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 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';
 
 // Gradient and pattern are in canvas pixel space, so we adjust for the
@@ -29,13 +28,11 @@ const vectorLayer = new VectorLayer({
     url: 'data/kml/states.kml',
     format: new KML({extractStyles: false}),
   }),
-  style: new Style({
+  style: {
-    fill: new Fill({color: gradient}),
+    'fill-color': gradient,
-    stroke: new Stroke({
+    'stroke-width': 1,
-      color: '#333',
+    'stroke-color': '#333',
-      width: 1,
+  },
-    }),
-  }),
 });
 
 const map = new Map({

examples/cartodb.html

@@ -5,22 +5,21 @@ shortdesc: Example of a cartodb map.
 docs: >
   A simple example with an anonymous cartodb map
 tags: "simple, openstreetmap, attribution"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<form class="row">
-    <div id="map" class="map"></div>
+  <div class="col-auto">
-    <div>
+    <div class="input-group">
-    <form class="form-horizontal">
+      <label for="country-area" class="input-group-text">Show european countries larger than</label>
-      <label>
+      <select id="country-area" class="form-select">
-        Show countries larger than
+        <option value="0" default>0 ㎢</option>
-        <select id="country-area" class="form-control">
+        <option value="5000">5000 ㎢</option>
-          <option value="0" default>0 ㎢</option>
+        <option value="10000">10000 ㎢</option>
-          <option value="5000">5000 ㎢</option>
+        <option value="50000">50000 ㎢</option>
-          <option value="10000">10000 ㎢</option>
+        <option value="100000">100000 ㎢</option>
-          <option value="50000">50000 ㎢</option>
+      </select>
-          <option value="100000">100000 ㎢</option>
+    </div>
-        </select>
-      </label>
-    </form>
   </div>
-</div>
+</form>

examples/cartodb.js

@@ -10,17 +10,28 @@ const mapConfig = {
       'options': {
         'cartocss_version': '2.1.1',
         'cartocss': '#layer { polygon-fill: #F00; }',
-        'sql': 'select * from european_countries_e where area > 0',
       },
     },
   ],
 };
 
+function setArea(n) {
+  mapConfig.layers[0].options.sql =
+    'select * from european_countries_e where area > ' + n;
+}
+const areaSelect = document.getElementById('country-area');
+setArea(areaSelect.value);
+
 const cartoDBSource = new CartoDB({
   account: 'documentation',
   config: mapConfig,
 });
 
+areaSelect.addEventListener('change', function () {
+  setArea(this.value);
+  cartoDBSource.setConfig(mapConfig);
+});
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -32,17 +43,7 @@ const map = new Map({
   ],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: [8500000, 8500000],
     zoom: 2,
   }),
 });
-
-function setArea(n) {
-  mapConfig.layers[0].options.sql =
-    'select * from european_countries_e where area > ' + n;
-  cartoDBSource.setConfig(mapConfig);
-}
-
-document.getElementById('country-area').addEventListener('change', function () {
-  setArea(this.value);
-});

examples/center.js

@@ -1,38 +1,27 @@
 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, 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';
 
-/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
   format: new GeoJSON(),
 });
-const style = new Style({
+
-  fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  image: new CircleStyle({
-    radius: 5,
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.6)',
-    }),
-    stroke: new Stroke({
-      color: '#319FD3',
-      width: 1,
-    }),
-  }),
-});
 const vectorLayer = new VectorLayer({
   source: source,
-  style: style,
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.6)',
+    'stroke-width': 1,
+    'stroke-color': '#319FD3',
+    'circle-radius': 5,
+    'circle-fill-color': 'rgba(255, 255, 255, 0.6)',
+    'circle-stroke-width': 1,
+    'circle-stroke-color': '#319FD3',
+  },
 });
+
 const view = new View({
   center: [0, 0],
   zoom: 1,

examples/chaikin.html

@@ -12,7 +12,7 @@ docs: >
 tags: "smooth, smoothing, chaikin"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="shall-smoothen">Smooth drawn geometry?</label>
   <input id="shall-smoothen" type="checkbox" checked><br>
   <label for="iterations">Number of smoothings</label>

examples/cluster.html

@@ -5,19 +5,21 @@ shortdesc: Example of using ol/source/Cluster.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
 <form>
   <div class="form-group">
-    <label for="distance" class="col-form-label">Cluster distance</label>
+    <label for="distance" class="col-form-label pb-0">Cluster distance</label>
-    <input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
+    <input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
     <small class="form-text text-muted">
       The distance within which features will be clustered together.
     </small>
   </div>
   <div class="form-group">
-    <label for="min-distance" class="col-form-label">Minimum distance</label>
+    <label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
-    <input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
+    <input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
     <small class="form-text text-muted">
       The minimum distance between clusters. Can't be larger than the configured distance.
     </small>

examples/cluster.js

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

examples/cog-blob.html

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

examples/cog-blob.js

@@ -0,0 +1,28 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+
+fetch('data/example.tif')
+  .then((response) => response.blob())
+  .then((blob) => {
+    const source = new GeoTIFF({
+      sources: [
+        {
+          blob: blob,
+        },
+      ],
+    });
+
+    const map = new Map({
+      target: 'map',
+      layers: [
+        new TileLayer({
+          source: source,
+        }),
+      ],
+      view: source.getView().then((viewConfig) => {
+        viewConfig.showFullExtent = true;
+        return viewConfig;
+      }),
+    });
+  });

examples/color-manipulation.js

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

examples/custom-interactions.js

@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 import {LineString, Point, Polygon} from '../src/ol/geom.js';
 import {
   Pointer as PointerInteraction,
@@ -147,22 +146,16 @@ const map = new Map({
       source: new VectorSource({
         features: [pointFeature, lineFeature, polygonFeature],
       }),
-      style: new Style({
+      style: {
-        image: new Icon({
+        'icon-src': 'data/icon.png',
-          anchor: [0.5, 46],
+        'icon-opacity': 0.95,
-          anchorXUnits: 'fraction',
+        'icon-anchor': [0.5, 46],
-          anchorYUnits: 'pixels',
+        'icon-anchor-x-units': 'fraction',
-          opacity: 0.95,
+        'icon-anchor-y-units': 'pixels',
-          src: 'data/icon.png',
+        'stroke-width': 3,
-        }),
+        'stroke-color': [255, 0, 0, 1],
-        stroke: new Stroke({
+        'fill-color': [0, 0, 255, 0.6],
-          width: 3,
+      },
-          color: [255, 0, 0, 1],
-        }),
-        fill: new Fill({
-          color: [0, 0, 255, 0.6],
-        }),
-      }),
     }),
   ],
   target: 'map',

examples/d3.html

@@ -6,7 +6,7 @@ docs: >
   The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a SVG element.
 tags: "d3"
 resources:
-  - https://unpkg.com/d3@6.7.0/dist/d3.min.js
+  - https://unpkg.com/d3@7.4.4/dist/d3.min.js
   - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

examples/d3.js

@@ -1,5 +1,4 @@
 import Map from '../src/ol/Map.js';
-import SourceState from '../src/ol/source/State.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import View from '../src/ol/View.js';
 import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
@@ -21,7 +20,7 @@ class CanvasLayer extends Layer {
   }
 
   getSourceState() {
-    return SourceState.READY;
+    return 'ready';
   }
 
   render(frameState) {

examples/data/kml/timezones.kml

@@ -5,38 +5,38 @@
 
   <Style id="nStylem1200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStylem1100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
-  <Style id="nStylem1000"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>			
+  <Style id="nStylem1000"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>
   <Style id="nStylem0950"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
   <Style id="nStylem0900"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>
   <Style id="nStylem0850"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
   <Style id="nStylem0800"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStylem0700"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
-  <Style id="nStylem0600"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>			
+  <Style id="nStylem0600"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>
-  <Style id="nStylem0500"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>	
+  <Style id="nStylem0500"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>
   <Style id="nStylem0400"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStylem0350"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
   <Style id="nStylem0300"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
-  <Style id="nStylem0200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>			
+  <Style id="nStylem0200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>
-  <Style id="nStylem0100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>		
+  <Style id="nStylem0100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>
   <Style id="nStyle0000"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStyle0100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
-  <Style id="nStyle0200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>			
+  <Style id="nStyle0200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>
-  <Style id="nStyle0300"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>	
+  <Style id="nStyle0300"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>
   <Style id="nStyle0350"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
   <Style id="nStyle0400"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStyle0450"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2f8f6e2</color></PolyStyle></Style>
   <Style id="nStyle0500"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
   <Style id="nStyle0550"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
   <Style id="nStyle0575"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2f8f6e2</color></PolyStyle></Style>
-  <Style id="nStyle0600"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>			
+  <Style id="nStyle0600"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>
   <Style id="nStyle0650"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
-  <Style id="nStyle0700"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>	
+  <Style id="nStyle0700"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>
   <Style id="nStyle0800"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStyle0900"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>
   <Style id="nStyle0950"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
-  <Style id="nStyle1000"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>			
+  <Style id="nStyle1000"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d20c939c</color></PolyStyle></Style>
   <Style id="nStyle1050"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
-  <Style id="nStyle1100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>	
+  <Style id="nStyle1100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</color></PolyStyle></Style>
   <Style id="nStyle1150"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2f8f6e2</color></PolyStyle></Style>
   <Style id="nStyle1200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
   <Style id="nStyle1275"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d2eafeff</color></PolyStyle></Style>
@@ -44,38 +44,38 @@
 
   <Style id="hStylem1200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStylem1100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
-  <Style id="hStylem1000"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>			
+  <Style id="hStylem1000"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>
   <Style id="hStylem0950"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
   <Style id="hStylem0900"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>
   <Style id="hStylem0850"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
   <Style id="hStylem0800"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStylem0700"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
-  <Style id="hStylem0600"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>			
+  <Style id="hStylem0600"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>
-  <Style id="hStylem0500"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>	
+  <Style id="hStylem0500"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>
   <Style id="hStylem0400"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStylem0350"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
   <Style id="hStylem0300"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
-  <Style id="hStylem0200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>			
+  <Style id="hStylem0200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>
-  <Style id="hStylem0100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>		
+  <Style id="hStylem0100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>
   <Style id="hStyle0000"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStyle0100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
-  <Style id="hStyle0200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>			
+  <Style id="hStyle0200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>
-  <Style id="hStyle0300"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>	
+  <Style id="hStyle0300"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>
   <Style id="hStyle0350"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
   <Style id="hStyle0400"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStyle0450"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daf8f6e2</color></PolyStyle></Style>
   <Style id="hStyle0500"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
   <Style id="hStyle0550"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
   <Style id="hStyle0575"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daf8f6e2</color></PolyStyle></Style>
-  <Style id="hStyle0600"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>			
+  <Style id="hStyle0600"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>
   <Style id="hStyle0650"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
-  <Style id="hStyle0700"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>	
+  <Style id="hStyle0700"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>
   <Style id="hStyle0800"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStyle0900"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>
   <Style id="hStyle0950"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
-  <Style id="hStyle1000"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>			
+  <Style id="hStyle1000"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da0c939c</color></PolyStyle></Style>
   <Style id="hStyle1050"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
-  <Style id="hStyle1100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>	
+  <Style id="hStyle1100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</color></PolyStyle></Style>
   <Style id="hStyle1150"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daf8f6e2</color></PolyStyle></Style>
   <Style id="hStyle1200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
   <Style id="hStyle1275"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>daeafeff</color></PolyStyle></Style>
@@ -398,7 +398,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>			
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT -07:00</name>
@@ -530,7 +530,7 @@
 			</MultiGeometry>
 		</Placemark>
 		<Placemark>
-			<name>GMT -03.30</name>
+			<name>GMT -03:30</name>
 		<description><![CDATA[<div style="width:300px;height:50px;"  id="clock" ></div>
 <script language="JavaScript">
       var int=self.setInterval("tick()",50);
@@ -602,7 +602,7 @@
 				</innerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>			
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT -02:00</name>
@@ -640,7 +640,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>	
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT -01:00</name>
@@ -687,7 +687,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>	
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT +00:00</name>
@@ -799,7 +799,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>	
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT +03:00</name>
@@ -837,7 +837,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>	
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT +03:30</name>
@@ -1056,7 +1056,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>	
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT +05:45</name>
@@ -1537,7 +1537,7 @@
 				</outerBoundaryIs>
 				<tessellate>1</tessellate>
 			</Polygon>
-			</MultiGeometry>	
+			</MultiGeometry>
 		</Placemark>
 		<Placemark>
 			<name>GMT +12:45</name>

examples/drag-and-drop-custom-kmz.js

@@ -16,7 +16,7 @@ const zip = new JSZip();
 function getKMLData(buffer) {
   let kmlData;
   zip.load(buffer);
-  const kmlFile = zip.file(/.kml$/i)[0];
+  const kmlFile = zip.file(/\.kml$/i)[0];
   if (kmlFile) {
     kmlData = kmlFile.asText();
   }
@@ -24,17 +24,14 @@ function getKMLData(buffer) {
 }
 
 function getKMLImage(href) {
-  let url = href;
+  const index = window.location.href.lastIndexOf('/');
-  let path = window.location.href;
+  if (index !== -1) {
-  path = path.slice(0, path.lastIndexOf('/') + 1);
+    const kmlFile = zip.file(href.slice(index + 1));
-  if (href.indexOf(path) === 0) {
-    const regexp = new RegExp(href.replace(path, '') + '$', 'i');
-    const kmlFile = zip.file(regexp)[0];
     if (kmlFile) {
-      url = URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
+      return URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
     }
   }
-  return url;
+  return href;
 }
 
 // Define a KMZ format class by subclassing ol/format/KML
@@ -139,14 +136,9 @@ function download(fullpath, filename) {
       return response.blob();
     })
     .then(function (blob) {
-      if (navigator.msSaveBlob) {
+      link.href = URL.createObjectURL(blob);
-        // link download attribute does not work on MS browsers
+      link.download = filename;
-        navigator.msSaveBlob(blob, filename);
+      link.click();
-      } else {
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        link.click();
-      }
     });
 }
 

examples/drag-and-drop-custom-mvt.js

@@ -107,14 +107,9 @@ function download(fullpath, filename) {
       return response.blob();
     })
     .then(function (blob) {
-      if (navigator.msSaveBlob) {
+      link.href = URL.createObjectURL(blob);
-        // link download attribute does not work on MS browsers
+      link.download = filename;
-        navigator.msSaveBlob(blob, filename);
+      link.click();
-      } else {
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        link.click();
-      }
     });
 }
 

examples/drag-and-drop.js

@@ -101,14 +101,9 @@ function download(fullpath, filename) {
       return response.blob();
     })
     .then(function (blob) {
-      if (navigator.msSaveBlob) {
+      link.href = URL.createObjectURL(blob);
-        // link download attribute does not work on MS browsers
+      link.download = filename;
-        navigator.msSaveBlob(blob, filename);
+      link.click();
-      } else {
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        link.click();
-      }
     });
 }
 

examples/draw-and-modify-features.html

@@ -7,7 +7,7 @@ docs: >
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>

examples/draw-and-modify-features.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-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';
@@ -13,21 +12,13 @@ const raster = new TileLayer({
 const source = new VectorSource();
 const vector = new VectorLayer({
   source: source,
-  style: new Style({
+  style: {
-    fill: new Fill({
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
-      color: 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
-    }),
+    'stroke-width': 2,
-    stroke: new Stroke({
+    'circle-radius': 7,
-      color: '#ffcc33',
+    'circle-fill-color': '#ffcc33',
-      width: 2,
+  },
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
 });
 
 // Limit multi-world panning to one world east and west of the real world.

examples/draw-and-modify-geodesic.html

@@ -13,7 +13,7 @@ docs: >
 tags: "draw, edit, modify, vector, circle, sphere, geodesic"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>

examples/draw-features.html

@@ -8,16 +8,22 @@ docs: >
   point. To activate freehand drawing for lines, polygons, and circles, hold
   the `Shift` key. To remove the last point of a line or polygon, press "Undo".
 tags: "draw, edit, freehand, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<div class="row">
-  <label for="type">Geometry type: &nbsp;</label>
+  <div class="col-auto">
-  <select class="form-control mr-2 mb-2 mt-2" id="type">
+    <span class="input-group">
-    <option value="Point">Point</option>
+      <label class="input-group-text" for="type">Geometry type:</label>
-    <option value="LineString">LineString</option>
+      <select class="form-select" id="type">
-    <option value="Polygon">Polygon</option>
+        <option value="Point">Point</option>
-    <option value="Circle">Circle</option>
+        <option value="LineString">LineString</option>
-    <option value="None">None</option>
+        <option value="Polygon">Polygon</option>
-  </select>
+        <option value="Circle">Circle</option>
-  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
+        <option value="None">None</option>
-</form>
+      </select>
+      <input class="form-control" type="button" value="Undo" id="undo">
+    </span>
+  </div>
+</div>

examples/draw-freehand.html

@@ -11,7 +11,7 @@ docs: >
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<form>
   <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="LineString">LineString</option>

examples/draw-shapes.html

@@ -12,16 +12,22 @@ docs: >
   circle. Star drawing uses a custom geometry function that converts a circle
   into a star using the center and radius provided by the draw interaction.
 tags: "draw, edit, freehand, vector"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
 ---
 <div id="map" class="map"></div>
-<form class="form-inline">
+<div class="row">
-  <label for="type">Shape type: &nbsp;</label>
+  <div class="col-auto">
-  <select class="form-control mr-2 mb-2 mt-2" id="type">
+    <span class="input-group">
-    <option value="Circle">Circle</option>
+      <label class="input-group-text" for="type">Shape type:</label>
-    <option value="Square">Square</option>
+      <select class="form-select" id="type">
-    <option value="Box">Box</option>
+        <option value="Circle">Circle</option>
-    <option value="Star">Star</option>
+        <option value="Square">Square</option>
-    <option value="None">None</option>
+        <option value="Box">Box</option>
-  </select>
+        <option value="Star">Star</option>
-  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
+        <option value="None">None</option>
-</form>
+      </select>
+      <input class="form-control" type="button" value="Undo" id="undo">
+    </span>
+  </div>
+</div>

examples/es2015-custom-element.js

@@ -9,7 +9,7 @@ class OLComponent extends HTMLElement {
     this.shadow = this.attachShadow({mode: 'open'});
     const link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
-    link.setAttribute('href', 'css/ol.css');
+    link.setAttribute('href', 'theme/ol.css');
     this.shadow.appendChild(link);
     const style = document.createElement('style');
     style.innerText = `

examples/export-map.html

@@ -5,7 +5,11 @@ shortdesc: Example of exporting a map as a PNG image.
 docs: >
   Example of exporting a map as a PNG image.
 tags: "export, png, openstreetmap"
+resources:
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css
+  - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css
 ---
 <div id="map" class="map"></div>
-<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
+<a id="export-png" class="btn btn-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>

examples/export-map.js

@@ -64,13 +64,6 @@ document.getElementById('export-png').addEventListener('click', function () {
           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;
           if (transform) {
@@ -94,19 +87,20 @@ document.getElementById('export-png').addEventListener('click', function () {
             mapContext,
             matrix
           );
+          const backgroundColor = canvas.parentNode.style.backgroundColor;
+          if (backgroundColor) {
+            mapContext.fillStyle = backgroundColor;
+            mapContext.fillRect(0, 0, canvas.width, canvas.height);
+          }
           mapContext.drawImage(canvas, 0, 0);
         }
       }
     );
     mapContext.globalAlpha = 1;
-    if (navigator.msSaveBlob) {
+    mapContext.setTransform(1, 0, 0, 1, 0, 0);
-      // link download attribute does not work on MS browsers
+    const link = document.getElementById('image-download');
-      navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
+    link.href = mapCanvas.toDataURL();
-    } else {
+    link.click();
-      const link = document.getElementById('image-download');
-      link.href = mapCanvas.toDataURL();
-      link.click();
-    }
   });
   map.renderSync();
 });

examples/export-pdf.js

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

examples/filter-points-webgl.js

@@ -55,27 +55,23 @@ const style = {
 const minYearInput = document.getElementById('min-year');
 const maxYearInput = document.getElementById('max-year');
 
-function updateMinYear() {
-  style.variables.minYear = parseInt(minYearInput.value);
-  updateStatusText();
-}
-function updateMaxYear() {
-  style.variables.maxYear = parseInt(maxYearInput.value);
-  updateStatusText();
-}
 function updateStatusText() {
   const div = document.getElementById('status');
   div.querySelector('span.min-year').textContent = minYearInput.value;
   div.querySelector('span.max-year').textContent = maxYearInput.value;
 }
 
-minYearInput.addEventListener('input', updateMinYear);
+minYearInput.addEventListener('input', function () {
-minYearInput.addEventListener('change', updateMinYear);
+  style.variables.minYear = parseInt(minYearInput.value);
-maxYearInput.addEventListener('input', updateMaxYear);
+  updateStatusText();
-maxYearInput.addEventListener('change', updateMaxYear);
+});
+maxYearInput.addEventListener('input', function () {
+  style.variables.maxYear = parseInt(maxYearInput.value);
+  updateStatusText();
+});
 updateStatusText();
 
-// load data
+// load data;
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/meteorite_landings.csv');
 client.onload = function () {

examples/full-screen-drag-rotate-and-zoom.css

@@ -2,9 +2,6 @@
   height: 100%;
   margin: 0;
 }
-.map:-ms-fullscreen {
-  height: 100%;
-}
 .map:fullscreen {
   height: 100%;
 }

examples/full-screen-source.css

@@ -2,9 +2,6 @@
   height: 100%;
   margin: 0;
 }
-.fullscreen:-ms-fullscreen {
-  height: 100%;
-}
 
 .fullscreen:fullscreen {
   height: 100%;

examples/full-screen.css

@@ -2,9 +2,6 @@
   height: 100%;
   margin: 0;
 }
-.map:-ms-fullscreen {
-  height: 100%;
-}
 .map:fullscreen {
   height: 100%;
 }

examples/geographic.html

@@ -8,9 +8,8 @@ docs: >
   not geographic).
 tags: "geographic"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
 <div id="map" class="map">
   <div id="popup"></div>

examples/geographic.js

@@ -1,4 +1,3 @@
-import {Circle, Fill, Style} from '../src/ol/style.js';
 import {Feature, Map, Overlay, View} from '../src/ol/index.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Point} from '../src/ol/geom.js';
@@ -25,12 +24,10 @@ const map = new Map({
       source: new VectorSource({
         features: [new Feature(point)],
       }),
-      style: new Style({
+      style: {
-        image: new Circle({
+        'circle-radius': 9,
-          radius: 9,
+        'circle-fill-color': 'red',
-          fill: new Fill({color: 'red'}),
+      },
-        }),
-      }),
     }),
   ],
 });
@@ -39,9 +36,7 @@ const element = document.getElementById('popup');
 
 const popup = new Overlay({
   element: element,
-  positioning: 'bottom-center',
   stopEvent: false,
-  offset: [0, -10],
 });
 map.addOverlay(popup);
 
@@ -62,31 +57,34 @@ map.on('moveend', function () {
   info.innerHTML = formatCoordinate(center);
 });
 
+let popover;
 map.on('click', function (event) {
-  $(element).popover('dispose');
+  if (popover) {
-
+    popover.dispose();
-  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+    popover = undefined;
-  if (feature) {
-    const coordinate = feature.getGeometry().getCoordinates();
-    popup.setPosition([
-      coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
-      coordinate[1],
-    ]);
-    $(element).popover({
-      container: element.parentElement,
-      html: true,
-      sanitize: false,
-      content: formatCoordinate(coordinate),
-      placement: 'top',
-    });
-    $(element).popover('show');
   }
+  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+  if (!feature) {
+    return;
+  }
+  const coordinate = feature.getGeometry().getCoordinates();
+  popup.setPosition([
+    coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
+    coordinate[1],
+  ]);
+
+  popover = new bootstrap.Popover(element, {
+    container: element.parentElement,
+    content: formatCoordinate(coordinate),
+    html: true,
+    offset: [0, 20],
+    placement: 'top',
+    sanitize: false,
+  });
+  popover.show();
 });
 
 map.on('pointermove', function (event) {
-  if (map.hasFeatureAtPixel(event.pixel)) {
+  const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
-    map.getViewport().style.cursor = 'pointer';
+  map.getViewport().style.cursor = type;
-  } else {
-    map.getViewport().style.cursor = 'inherit';
-  }
 });

examples/geolocation-orientation.html

@@ -4,17 +4,16 @@ title: Geolocation Tracking with Orientation
 shortdesc: Example of a geolocated and oriented map.
 tags: "fullscreen, geolocation, orientation, mobile"
 ---
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
-    <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     <title>Mobile Geolocation Tracking with Orientation</title>
-    <style type="text/css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
+    <link rel="stylesheet" type="text/css" href="/theme/site.css">
+    <style>
       html, body, .map {
         margin: 0;
         padding: 0;
@@ -29,24 +28,23 @@ tags: "fullscreen, geolocation, orientation, mobile"
           background-color: lightgrey;
           padding: 4px;
       }
-      .button {
+      .geolocate-buttons {
           position: absolute;
           bottom: 40px;
           left: 10px;
       }
     </style>
-    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
   </head>
   <body>
     <div id="map" class="map"></div>
     <div id="info"></div>
     <img id="geolocation_marker" src="data/geolocation_marker.png" />
-    <div class="button">
+    <div class="geolocate-buttons">
-        <button id="geolocate">Geolocate Me!</button>
+      <button id="geolocate" class="btn btn-primary">Geolocate Me!</button>
-        <button id="simulate">Simulate</button>
+      <button id="simulate" class="btn btn-secondary">Simulate</button>
     </div>
-    <script src="common.js"></script>
+    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
     <script src="geolocation-orientation.js"></script>
+    <script src="common.js"></script>
   </body>
 </html>

examples/heatmap-earthquakes.js

@@ -42,14 +42,10 @@ new Map({
   }),
 });
 
-const blurHandler = function () {
+blur.addEventListener('input', function () {
   vector.setBlur(parseInt(blur.value, 10));
-};
+});
-blur.addEventListener('input', blurHandler);
-blur.addEventListener('change', blurHandler);
 
-const radiusHandler = function () {
+radius.addEventListener('input', function () {
   vector.setRadius(parseInt(radius.value, 10));
-};
+});
-radius.addEventListener('input', radiusHandler);
-radius.addEventListener('change', radiusHandler);

examples/here-maps.html

@@ -1,21 +0,0 @@
----
-layout: example.html
-title: HERE Map Tile API
-shortdesc: Example of a map with map tiles from HERE.
-docs: >
-  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile" target="_blank">HERE Map Tile API</a> used with <code>ol/source/XYZ</code>.</p>
-  <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/" target="_blank">HERE Service Terms</a> when using their tile API.</p>
-tags: "here, here-maps, here-tile-api"
-cloak:
-  - key: x13yMxvFSo8FIKFDDTnQaJ57Gakt11ZaIyqIctoSD3Y
-    value: Your HERE Maps API key from https://developer.here.com/
----
-<div id="map" class="map"></div>
-<select id="layer-select">
-  <option value="normal.day" selected>Normal Day</option>
-  <option value="normal.day.transit">Normal Day Transit</option>
-  <option value="pedestrian.day">Pedestrian Day</option>
-  <option value="terrain.day">Terrain Day</option>
-  <option value="satellite.day">Satellite Day</option>
-  <option value="hybrid.day">Hybrid Day</option>
-</select>

examples/here-maps.js

@@ -1,94 +0,0 @@
-import Map from '../src/ol/Map.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
-
-const apiKey = 'x13yMxvFSo8FIKFDDTnQaJ57Gakt11ZaIyqIctoSD3Y';
-const hereLayers = [
-  {
-    base: 'base',
-    type: 'maptile',
-    scheme: 'normal.day',
-    apiKey: apiKey,
-  },
-  {
-    base: 'base',
-    type: 'maptile',
-    scheme: 'normal.day.transit',
-    apiKey: apiKey,
-  },
-  {
-    base: 'base',
-    type: 'maptile',
-    scheme: 'pedestrian.day',
-    apiKey: apiKey,
-  },
-  {
-    base: 'aerial',
-    type: 'maptile',
-    scheme: 'terrain.day',
-    apiKey: apiKey,
-  },
-  {
-    base: 'aerial',
-    type: 'maptile',
-    scheme: 'satellite.day',
-    apiKey: apiKey,
-  },
-  {
-    base: 'aerial',
-    type: 'maptile',
-    scheme: 'hybrid.day',
-    apiKey: apiKey,
-  },
-];
-const urlTpl =
-  'https://{1-4}.{base}.maps.ls.hereapi.com' +
-  '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
-  '?apiKey={apiKey}';
-const layers = [];
-let i, ii;
-for (i = 0, ii = hereLayers.length; i < ii; ++i) {
-  const layerDesc = hereLayers[i];
-  layers.push(
-    new TileLayer({
-      visible: false,
-      preload: Infinity,
-      source: new XYZ({
-        url: createUrl(urlTpl, layerDesc),
-        attributions:
-          'Map Tiles &copy; ' +
-          new Date().getFullYear() +
-          ' ' +
-          '<a href="https://developer.here.com/" target="_blank">HERE</a>',
-      }),
-    })
-  );
-}
-
-const map = new Map({
-  layers: layers,
-  target: 'map',
-  view: new View({
-    center: [921371.9389, 6358337.7609],
-    zoom: 10,
-  }),
-});
-
-function createUrl(tpl, layerDesc) {
-  return tpl
-    .replace('{base}', layerDesc.base)
-    .replace('{type}', layerDesc.type)
-    .replace('{scheme}', layerDesc.scheme)
-    .replace('{apiKey}', layerDesc.apiKey);
-}
-
-const select = document.getElementById('layer-select');
-function onChange() {
-  const scheme = select.value;
-  for (let i = 0, ii = layers.length; i < ii; ++i) {
-    layers[i].setVisible(hereLayers[i].scheme === scheme);
-  }
-}
-select.addEventListener('change', onChange);
-onChange();

examples/hit-tolerance.html

@@ -12,13 +12,13 @@ tags: "hitTolerance"
 ---
 <div id="map" class="map"></div>
 <span id="status">Try to click the line in the map.</span>
-<form class="form-inline">
+<form>
   <label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</label>
-  <select id="hitTolerance" class="form-control">
+  <select id="hitTolerance">
     <option value="0" selected>0 Pixels</option>
     <option value="5">5 Pixels</option>
     <option value="10">10 Pixels</option>
   </select>
   &nbsp; Area: &nbsp;
-  <canvas id="circle" style="vertical-align: middle" />
+  <canvas id="circle" style="vertical-align: middle"></canvas>
 </form>

examples/icon-color.js

@@ -31,8 +31,6 @@ rome.setStyle(
     image: new Icon({
       color: '#BADA55',
       crossOrigin: 'anonymous',
-      // For Internet Explorer 11
-      imgSize: [20, 20],
       src: 'data/square.svg',
     }),
   })
@@ -64,8 +62,6 @@ paris.setStyle(
     image: new Icon({
       color: '#8959A8',
       crossOrigin: 'anonymous',
-      // For Internet Explorer 11
-      imgSize: [20, 20],
       src: 'data/dot.svg',
     }),
   })
@@ -75,8 +71,6 @@ berlin.setStyle(
   new Style({
     image: new Icon({
       crossOrigin: 'anonymous',
-      // For Internet Explorer 11
-      imgSize: [20, 20],
       src: 'data/dot.svg',
     }),
   })

examples/icon-scale.html

@@ -1,16 +1,211 @@
 ---
 layout: example.html
-title: Icon Scale
+title: Icon and Label Scale
 shortdesc: Example of scaling icons and labels.
 docs: >
   Icons and labels can be scaled in both dimensions if required. A negative value will flip the image
-  or text around its anchor point (reversed text is <b>not</b> suitable for line placement). A newline
+  or text around its anchor point (reversed text is <b>not</b> suitable for line placement).
-  character inserted in label text is interpreted in a <b>vector layer</b>, but will not be shown in
-  a <b>vector context</b>.
 tags: "vector, style, icon, label, scale"
-resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
-<div id="map" class="map"><div id="popup"></div></div>
+<div id="map" class="map"></div>
+<table class="controls">
+  <tr>
+    <th>
+      Image
+    </th>
+    <th></th>
+    <th style="visibility: hidden;">-0.00 π</th>
+    <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
+    <th>
+      Text
+    </th>
+    <th></th>
+    <th></th>
+  </tr>
+  <tr>
+    <td><label for="rotateWithView">Rotate with view</label>&nbsp;&nbsp;</td>
+    <td>
+      <input id="rotateWithView" type="checkbox" />
+    </td>
+    <td><span id="rotateWithViewOut"></span></td>
+    <td></td>
+    <td><label for="textRotateWithView">Rotate with view</label>&nbsp;&nbsp;</td>
+    <td>
+      <input id="textRotateWithView" type="checkbox" />
+    </td>
+    <td><span id="textRotateWithViewOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="rotation">Rotation</label></td>
+    <td>
+      <input
+        id="rotation"
+        type="range"
+        min="-1"
+        max="1"
+        step="0.05"
+        value="0.25"
+      />
+    </td>
+    <td><span id="rotationOut"></span> π</td>
+    <td></td>
+    <td><label for="textRotation">Rotation</label></td>
+    <td>
+      <input
+        id="textRotation"
+        type="range"
+        min="-1"
+        max="1"
+        step="0.05"
+        value="0.25"
+      />
+    </td>
+    <td><span id="textRotationOut"></span> π</td>
+  </tr>
+  <tr>
+    <td><label for="scaleX">Scale X</label></td>
+    <td>
+      <input
+        id="scaleX"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="scaleXOut"></span></td>
+    <td></td>
+    <td><label for="textScaleX">Scale X</label></td>
+    <td>
+      <input
+        id="textScaleX"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="textScaleXOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="scaleY">Scale Y</label></td>
+    <td>
+      <input
+        id="scaleY"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="scaleYOut"></span></td>
+    <td></td>
+    <td><label for="textScaleY">Scale Y</label></td>
+    <td>
+      <input
+        id="textScaleY"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="textScaleYOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="anchorX">Anchor X</label></td>
+    <td>
+      <input
+        id="anchorX"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value="0.5"
+      />
+    </td>
+    <td><span id="anchorXOut"></span></td>
+    <td></td>
+    <td><label for="textAlign">Align</label></td>
+    <td>
+      <input
+        id="textAlign"
+        type="range"
+        min="0"
+        max="2"
+        step="1"
+        value="1"
+      />
+    </td>
+    <td><span id="textAlignOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="anchorY">Anchor Y</label></td>
+    <td>
+      <input
+        id="anchorY"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value="1"
+      />
+    </td>
+    <td><span id="anchorYOut"></span></td>
+    <td></td>
+    <td><label for="textBaseline">Baseline</label></td>
+    <td>
+      <input
+        id="textBaseline"
+        type="range"
+        min="0"
+        max="2"
+        step="1"
+        value="0"
+      />
+    </td>
+    <td><span id="textBaselineOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="displacementX">Displacement X</label></td>
+    <td>
+      <input
+        id="displacementX"
+        type="range"
+        min="-100"
+        max="100"
+        value="0"
+      />
+    </td>
+    <td><span id="displacementXOut"></span></td>
+    <td></td>
+    <td><label for="textOffsetX">Offset X</label></td>
+    <td>
+      <input id="textOffsetX" type="range" min="-100" max="100" value="0" />
+    </td>
+    <td><span id="textOffsetXOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="displacementY">Displacement Y</label></td>
+    <td>
+      <input
+        id="displacementY"
+        type="range"
+        min="-100"
+        max="100"
+        value="0"
+      />
+    </td>
+    <td><span id="displacementYOut"></span></td>
+    <td></td>
+    <td><label for="textOffsetY">Offset Y</label></td>
+    <td>
+      <input id="textOffsetY" type="range" min="-100" max="100" value="0" />
+    </td>
+    <td><span id="textOffsetYOut"></span></td>
+  </tr>
+</table>

examples/icon-scale.js

@@ -1,14 +1,56 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import Overlay from '../src/ol/Overlay.js';
 import Point from '../src/ol/geom/Point.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Icon, Style, Text} from '../src/ol/style.js';
+import {Circle, Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {fromLonLat} from '../src/ol/proj.js';
+
-import {getVectorContext} from '../src/ol/render.js';
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+});
+
+const iconStyle = new Style({
+  image: new Icon({
+    anchor: [0.5, 1],
+    src: 'data/world.png',
+  }),
+  text: new Text({
+    text: 'World\nText',
+    font: 'bold 30px Calibri,sans-serif',
+    fill: new Fill({
+      color: 'black',
+    }),
+    stroke: new Stroke({
+      color: 'white',
+      width: 2,
+    }),
+  }),
+});
+
+const pointStyle = new Style({
+  image: new Circle({
+    radius: 7,
+    fill: new Fill({
+      color: 'black',
+    }),
+    stroke: new Stroke({
+      color: 'white',
+      width: 2,
+    }),
+  }),
+});
+
+iconFeature.setStyle([pointStyle, iconStyle]);
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
@@ -17,115 +59,119 @@ const rasterLayer = new TileLayer({
   }),
 });
 
-const iconFeature = new Feature({
-  geometry: new Point(fromLonLat([0, -10])),
-  name: 'Fish.1',
-});
-
-const feature1 = new Feature({
-  geometry: new Point(fromLonLat([0, -10])),
-  name: 'Fish.1 Island',
-});
-
-const feature2 = new Feature({
-  geometry: new Point(fromLonLat([-30, 10])),
-  name: 'Fish.2 Island',
-});
-
-const iconStyle = new Style({
-  image: new Icon({
-    anchor: [0.5, 0.9],
-    src: 'data/fish.png',
-    crossOrigin: '',
-    scale: [0, 0],
-    rotation: Math.PI / 4,
-  }),
-  text: new Text({
-    text: 'FISH\nTEXT',
-    scale: [0, 0],
-    rotation: Math.PI / 4,
-    textAlign: 'center',
-    textBaseline: 'top',
-  }),
-});
-
-let i = 0;
-let j = 45;
-
-iconFeature.setStyle(function () {
-  const x = Math.sin((i * Math.PI) / 180) * 3;
-  const y = Math.sin((j * Math.PI) / 180) * 4;
-  iconStyle.getImage().setScale([x, y]);
-  iconStyle.getText().setScale([x, y]);
-  return iconStyle;
-});
-
-rasterLayer.on('postrender', function (event) {
-  const vectorContext = getVectorContext(event);
-  const x = Math.cos((i * Math.PI) / 180) * 3;
-  const y = Math.cos((j * Math.PI) / 180) * 4;
-  iconStyle.getImage().setScale([x, y]);
-  iconStyle.getText().setScale([x, y]);
-  vectorContext.drawFeature(feature2, iconStyle);
-});
-
-const vectorSource = new VectorSource({
-  features: [iconFeature, feature1, feature2],
-});
-
-const vectorLayer = new VectorLayer({
-  source: vectorSource,
-});
-
 const map = new Map({
   layers: [rasterLayer, vectorLayer],
-  target: document.getElementById('map'),
+  target: 'map',
   view: new View({
-    center: fromLonLat([-15, 0]),
+    center: [0, 0],
     zoom: 3,
   }),
 });
 
-setInterval(function () {
+const textAlignments = ['left', 'center', 'right'];
-  i = (i + 4) % 360;
+const textBaselines = ['top', 'middle', 'bottom'];
-  j = (j + 5) % 360;
+const controls = {};
-  vectorSource.changed();
+const controlIds = [
-}, 1000);
+  'rotation',
-
+  'rotateWithView',
-const element = document.getElementById('popup');
+  'scaleX',
-
+  'scaleY',
-const popup = new Overlay({
+  'anchorX',
-  element: element,
+  'anchorY',
-  positioning: 'bottom-center',
+  'displacementX',
-  stopEvent: false,
+  'displacementY',
-});
+  'textRotation',
-map.addOverlay(popup);
+  'textRotateWithView',
-
+  'textScaleX',
-// display popup on click
+  'textScaleY',
-map.on('click', function (evt) {
+  'textAlign',
-  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+  'textBaseline',
-    return feature;
+  'textOffsetX',
-  });
+  'textOffsetY',
-  $(element).popover('dispose');
+];
-  if (feature) {
+controlIds.forEach(function (id) {
-    popup.setPosition(evt.coordinate);
+  const control = document.getElementById(id);
-    $(element).popover({
+  const output = document.getElementById(id + 'Out');
-      placement: 'top',
+  function setOutput() {
-      html: true,
+    const value = parseFloat(control.value);
-      animation: false,
+    if (control.type === 'checkbox') {
-      content: feature.get('name'),
+      output.innerText = control.checked;
-    });
+    } else if (id === 'textAlign') {
-    $(element).popover('show');
+      output.innerText = textAlignments[value];
+    } else if (id === 'textBaseline') {
+      output.innerText = textBaselines[value];
+    } else {
+      output.innerText = control.step.startsWith('0.')
+        ? value.toFixed(2)
+        : value;
+    }
   }
+  control.addEventListener('input', function () {
+    setOutput();
+    updateStyle();
+  });
+  setOutput();
+  controls[id] = control;
 });
 
+function updateStyle() {
+  iconStyle
+    .getImage()
+    .setRotation(parseFloat(controls['rotation'].value) * Math.PI);
+
+  iconStyle.getImage().setRotateWithView(controls['rotateWithView'].checked);
+
+  iconStyle
+    .getImage()
+    .setScale([
+      parseFloat(controls['scaleX'].value),
+      parseFloat(controls['scaleY'].value),
+    ]);
+
+  iconStyle
+    .getImage()
+    .setAnchor([
+      parseFloat(controls['anchorX'].value),
+      parseFloat(controls['anchorY'].value),
+    ]);
+
+  iconStyle
+    .getImage()
+    .setDisplacement([
+      parseFloat(controls['displacementX'].value),
+      parseFloat(controls['displacementY'].value),
+    ]);
+
+  iconStyle
+    .getText()
+    .setRotation(parseFloat(controls['textRotation'].value) * Math.PI);
+
+  iconStyle.getText().setRotateWithView(controls['textRotateWithView'].checked);
+
+  iconStyle
+    .getText()
+    .setScale([
+      parseFloat(controls['textScaleX'].value),
+      parseFloat(controls['textScaleY'].value),
+    ]);
+
+  iconStyle
+    .getText()
+    .setTextAlign(textAlignments[parseFloat(controls['textAlign'].value)]);
+
+  iconStyle
+    .getText()
+    .setTextBaseline(textBaselines[parseFloat(controls['textBaseline'].value)]);
+
+  iconStyle.getText().setOffsetX(parseFloat(controls['textOffsetX'].value));
+  iconStyle.getText().setOffsetY(parseFloat(controls['textOffsetY'].value));
+
+  iconFeature.changed();
+}
+updateStyle();
+
 // change mouse cursor when over marker
 map.on('pointermove', function (e) {
-  const pixel = map.getEventPixel(e.originalEvent);
+  const hit = map.hasFeatureAtPixel(e.pixel);
-  const hit = map.hasFeatureAtPixel(pixel);
+  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
-  map.getTarget().style.cursor = hit ? 'pointer' : '';
-});
-// Close the popup when the map is moved
-map.on('movestart', function () {
-  $(element).popover('dispose');
 });

examples/icon-sprite-webgl.js

@@ -1,11 +1,11 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import Point from '../src/ol/geom/Point.js';
-import TileLayer from '../src/ol/layer/Tile.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 import XYZ from '../src/ol/source/XYZ.js';
-import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
@@ -31,11 +31,6 @@ const map = new Map({
   }),
 });
 
-const vectorSource = new Vector({
-  features: [],
-  attributions: 'National UFO Reporting Center',
-});
-
 const oldColor = [255, 160, 110];
 const newColor = [180, 255, 200];
 const size = 16;
@@ -45,10 +40,9 @@ const style = {
     filterShape: 'all',
   },
   filter: [
-    'case',
+    'any',
-    ['!=', ['var', 'filterShape'], 'all'],
+    ['==', ['var', 'filterShape'], 'all'],
-    ['==', ['get', 'shape'], ['var', 'filterShape']],
+    ['==', ['var', 'filterShape'], ['get', 'shape']],
-    true,
   ],
   symbol: {
     symbolType: 'image',
@@ -87,24 +81,22 @@ const style = {
   },
 };
 
-// key is shape name, value is sightings count
-const shapeTypes = {
-  all: 0,
-};
 const shapeSelect = document.getElementById('shape-filter');
 shapeSelect.addEventListener('input', function () {
-  style.variables.filterShape =
+  style.variables.filterShape = shapeSelect.value;
-    shapeSelect.options[shapeSelect.selectedIndex].value;
   map.render();
 });
-function fillShapeSelect() {
+function fillShapeSelect(shapeTypes) {
   Object.keys(shapeTypes)
     .sort(function (a, b) {
       return shapeTypes[b] - shapeTypes[a];
     })
     .forEach(function (shape) {
       const option = document.createElement('option');
-      option.text = `${shape} (${shapeTypes[shape]} sightings)`;
+      const sightings = shapeTypes[shape];
+      option.text = `${shape} (${sightings} sighting${
+        sightings === 1 ? '' : 's'
+      })`;
       option.value = shape;
       shapeSelect.appendChild(option);
     });
@@ -112,68 +104,56 @@ function fillShapeSelect() {
 
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/ufo_sighting_data.csv');
-client.onload = function () {
+client.addEventListener('load', function () {
   const csv = client.responseText;
+  // key is shape name, value is sightings count
+  const shapeTypes = {};
   const features = [];
 
   let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
-
   let curIndex;
-  while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+  while ((curIndex = csv.indexOf('\n', prevIndex)) !== -1) {
-    const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+    const line = csv.substring(prevIndex, curIndex).split(',');
     prevIndex = curIndex + 1;
 
-    const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);
+    const coords = [parseFloat(line[5]), parseFloat(line[4])];
-
-    // only keep valid points
-    if (isNaN(coords[0]) || isNaN(coords[1])) {
-      continue;
-    }
-
     const shape = line[2];
-    shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1;
+    shapeTypes[shape] = (shapeTypes[shape] || 0) + 1;
-    shapeTypes['all']++;
 
     features.push(
       new Feature({
         datetime: line[0],
-        year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
+        year: parseInt(/[0-9]{4}/.exec(line[0])[0], 10), // extract the year as int
         shape: shape,
         duration: line[3],
-        geometry: new Point(coords),
+        geometry: new Point(fromLonLat(coords)),
       })
     );
   }
-  vectorSource.addFeatures(features);
+  shapeTypes['all'] = features.length;
-  fillShapeSelect();
+  map.addLayer(
-};
+    new WebGLPointsLayer({
+      source: new VectorSource({
+        features: features,
+        attributions: 'National UFO Reporting Center',
+      }),
+      style: style,
+    })
+  );
+  fillShapeSelect(shapeTypes);
+});
 client.send();
 
-map.addLayer(
-  new WebGLPointsLayer({
-    source: vectorSource,
-    style: style,
-  })
-);
-
 const info = document.getElementById('info');
 map.on('pointermove', function (evt) {
   if (map.getView().getInteracting() || map.getView().getAnimating()) {
     return;
   }
-  const pixel = evt.pixel;
+  const text = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
-  info.innerText = '';
-  map.forEachFeatureAtPixel(pixel, function (feature) {
     const datetime = feature.get('datetime');
     const duration = feature.get('duration');
     const shape = feature.get('shape');
-    info.innerText =
+    return `On ${datetime}, lasted ${duration} seconds and had a "${shape}" shape.`;
-      'On ' +
-      datetime +
-      ', lasted ' +
-      duration +
-      ' seconds and had a "' +
-      shape +
-      '" shape.';
   });
+  info.innerText = text || '';
 });

examples/icon.html

@@ -6,8 +6,7 @@ docs: >
   Example using an icon to symbolize a point.
 tags: "vector, style, icon, marker, popup"
 resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
+  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
 <div id="map" class="map"><div id="popup"></div></div>