Bump eslint from 8.9.0 to 8.11.0

Bumps [eslint](https://github.com/eslint/eslint) from 8.9.0 to 8.11.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v8.9.0...v8.11.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
2022-03-14 10:02:34 +00:00
663 changed files with 16794 additions and 26699 deletions
@@ -6,7 +6,3 @@ updates:
    interval: weekly
  open-pull-requests-limit: 10
  versioning-strategy: increase-if-necessary
- package-ecosystem: github-actions
-  directory: "/"
-  schedule:
-    interval: weekly
@@ -5,20 +5,17 @@ on:
    branches:
      - main

-permissions:
-  contents: read
-
 jobs:
  build-preview:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
-      - run: ./tasks/build-website.sh -v dev -l dev
-      - uses: actions/upload-artifact@v3
+      - run: npm run build-site
+      - uses: actions/upload-artifact@v2
        with:
          name: site
          path: build/site
@@ -26,7 +23,7 @@ jobs:
        run: |
          mkdir -p build/pr
          echo ${{github.event.number}} > build/pr/number
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
        with:
          name: pr
          path: build/pr
@@ -1,4 +1,4 @@
-name: Deploy Website (Preview)
+name: Deploy 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@v3
+      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm install --global netlify-cli@6
      - run: npm install unzipper@0.10

      - name: Get pull request number
-        uses: actions/github-script@v6
+        uses: actions/github-script@v5
        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@v6
+        uses: actions/github-script@v5
        with:
          script: |
            const pullRequestNumber = parseInt(${{steps.pull-request-number.outputs.result}}, 10);
@@ -85,11 +85,17 @@ 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: `${start} Preview the website for this branch here: https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/.`
+                body: body
              });
            } else {
              console.log(`Preview URL comment already added to PR #${pullRequestNumber}`);
@@ -1,71 +0,0 @@
-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
@@ -1,24 +1,18 @@
-name: Publish Package
+name: Publish

 on:
  push:
    branches:
      - main
-    tags:
-      - 'v*.*.*'
-
-permissions:
-  contents: read

 jobs:
-  publish-branch:
-    if: startsWith(github.ref, 'refs/heads/')
+  publish-npm:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
        with:
-          node-version: '18'
+          node-version: '16'
          registry-url: 'https://registry.npmjs.org'
      - name: Install dependencies
        run: npm ci
@@ -31,23 +25,3 @@ 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}}
@@ -1,21 +0,0 @@
-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
@@ -10,25 +10,18 @@ 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@v3
+      - uses: actions/checkout@v2

      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v1
        with:
          languages: javascript
          source-root: src

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v1
@@ -11,9 +11,6 @@ on:
 env:
  CI: true

-permissions:
-  contents: read
-
 jobs:
  pretest:
    name: Pre-Test
@@ -24,10 +21,10 @@ jobs:

    steps:
      - name: Clone Repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2

      - name: Set Node.js Version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
        with:
          node-version: '16'

@@ -46,10 +43,10 @@ jobs:

    steps:
      - name: Clone Repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2

      - name: Set Node.js Version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
        with:
          node-version: '16'

@@ -68,10 +65,10 @@ jobs:

    steps:
      - name: Clone Repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2

      - name: Set Node.js Version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
        with:
          node-version: '16'

@@ -90,10 +87,10 @@ jobs:

    steps:
      - name: Clone Repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2

      - name: Set Node.js Version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
        with:
          node-version: '16'

@@ -103,8 +100,8 @@ jobs:
      - name: Build the Package
        run: npm run build-package

-      - name: Generate the Full Build
-        run: "npm run build-full"
+      - name: Generate the Legacy Build
+        run: "npm run build-legacy && npx eslint --rule 'import/no-duplicates: off' --fix build/index.js"

  rendering:
    name: Rendering
@@ -115,10 +112,10 @@ jobs:

    steps:
      - name: Clone Repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2

      - name: Set Node.js Version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
        with:
          node-version: '16'

@@ -130,7 +127,7 @@ jobs:

      - name: Store Rendering Test Artifacts
        if: ${{ always() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v2
        with:
          name: rendering-tests
          path: test/rendering/cases/**/actual.png
@@ -23,7 +23,7 @@ new Map({
  layers: [
    new TileLayer({
      source: new XYZ({
-        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
+        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
@@ -41,8 +41,6 @@ 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.
@@ -82,13 +80,30 @@ 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 (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.
+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.
+
+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

@@ -1,109 +1,6 @@
 ## Upgrade notes

-### 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: '&#160;'` 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.
+### Next

 ### v6.13.0

@@ -1,55 +0,0 @@
-# 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>
@@ -1,4 +0,0 @@
-# 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.
-
@@ -1,241 +0,0 @@
-# 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>
@@ -1,4 +0,0 @@
-# 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.
-
@@ -1,169 +0,0 @@
-# 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: '&#160;'` 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>
@@ -14,7 +14,6 @@
    ]
  },
  "plugins": [
-    "jsdoc-plugin-intersection",
    "config/jsdoc/plugins/markdown.cjs",
    "jsdoc-plugin-typescript",
    "config/jsdoc/plugins/inline-options.cjs",
@@ -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_defaults#.defaults">Map default controls</a><br>
+        <a href="module-ol_control.html#.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_defaults#.defaults">Map default interactions</a><br>
+        <a href="module-ol_interaction.html#~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">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>
-          <p>Find these functions and more in the <a href="module-ol_proj.html">ol/proj</a> module.</p>
+          <p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform coordinates from and to geographic, use <a href="module-ol_proj.html#.fromLonLat">ol/proj#fromLonLat()</a> and <a href="module-ol_proj.html#.toLonLat">ol/proj#toLonLat()</a>. For extents and other projections, use <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a> and <a href="module-ol_proj.html#.transform">ol/proj#transform()</a>.<p>
+          <a href="module-ol_proj.html">ol/proj</a>
      </div>
    </div>
  </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">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>
+        <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>
      </div>
    </div>
  </div>
@@ -17,6 +17,7 @@ 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;

@@ -31,78 +32,6 @@ 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',
@@ -156,44 +85,15 @@ 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 = getSignatureReturns(f);
+  const returnTypes = helper.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>';
  }
 }
@@ -210,10 +110,12 @@ 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, '')
-      .replaceAll('\\', '/');
+      .replace(regexp, '/');
  });

  return files;
@@ -236,13 +138,6 @@ 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;

@@ -257,7 +152,7 @@ function generate(title, docs, filename, resolveLinks) {
  let html = view.render('container.tmpl', docData);

  if (resolveLinks) {
-    html = helper.resolveLinks(preprocessLinks(html)); // turn {@link foo} into <a href="foodoc.html">foo</a>
+    html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
  }

  fs.writeFileSync(outpath, html, 'utf8');
@@ -328,7 +223,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.
@@ -469,12 +364,13 @@ exports.publish = function (taffyData, opts, tutorials) {
      doclet.examples = doclet.examples.map(function (example) {
        let caption, code;

-        const match = example.match(
-          /^\s*<caption>([\s\S]+?)<\/caption>(?:\s*[\n\r])([\s\S]+)$/i
-        );
-        if (match) {
-          caption = match[1];
-          code = match[2];
+        if (
+          example.match(
+            /^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i
+          )
+        ) {
+          caption = RegExp.$1;
+          code = RegExp.$3;
        }

        return {
@@ -565,7 +461,7 @@ exports.publish = function (taffyData, opts, tutorials) {
  data().each(function (doclet) {
    const url = helper.longnameToUrl[doclet.longname];

-    if (url.includes('#')) {
+    if (url.indexOf('#') > -1) {
      doclet.id = helper.longnameToUrl[doclet.longname].split(/#/).pop();
    } else {
      doclet.id = doclet.name;
@@ -597,7 +493,6 @@ 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;
@@ -1,11 +1,17 @@
 (function() {
-    const source = document.querySelector('.prettyprint.source > code');
-    if (source) {
-        source.innerHTML = source.innerHTML
-            .split('\n')
-            .map(function (item, i) {
-                return '<span id="line' + (i + 1) + '"></span>' + item;
-            })
-            .join('\n');
+    var counter = 0;
+    var numbered;
+    var source = document.getElementsByClassName('prettyprint source');
+
+    if (source && source[0]) {
+        source = source[0].getElementsByTagName('code')[0];
+
+        numbered = source.innerHTML.split('\n');
+        numbered = numbered.map(function(item) {
+            counter++;
+            return '<span id="line' + counter + '"></span>' + item;
+        });
+
+        source.innerHTML = numbered.join('\n');
    }
 })();
@@ -87,19 +87,17 @@ $(function () {
      manualToggles = {};
      const lastTerm = search.lastSearchTerm;
      search.lastSearchTerm = undefined;
-      if (currentItem) {
-        const fa = currentItem.querySelector('.title > .fa');
-        fa.classList.add('no-transition');
-        setTimeout(function () {
-          fa.classList.remove('no-transition');
-        }, 0);
-      }
+      const fa = currentItem.querySelector('.title > .fa');
+      fa.classList.add('no-transition');
      doSearch(lastTerm || '');

      // Transfer manual toggle state to newly loaded current node
      if (initialCurrent && initialCurrent.classList.contains('toggle-manual')) {
        search.manualToggle(search.$currentItem, initialCurrent.classList.contains('toggle-manual-show'));
      }
+      setTimeout(function () {
+        fa.classList.remove('no-transition');
+      }, 0);
    });

    return {
@@ -277,28 +275,28 @@ $(function () {
  });

  // warn about outdated version
-  const currentVersion = document.getElementById('package-version').innerHTML;
-  const releaseUrl = 'https://cdn.jsdelivr.net/npm/ol/package.json';
-  fetch(releaseUrl).then(function(response) {
+  var currentVersion = document.getElementById('package-version').innerHTML;
+  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
+  fetch(packageUrl).then(function(response) {
    return response.json();
  }).then(function(json) {
-    const latestVersion = json.version;
+    var latestVersion = json.version;
    document.getElementById('latest-version').innerHTML = latestVersion;
-    const url = window.location.href;
-    const branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
-    const storageKey = 'dismissed=-' + latestVersion;
-    const dismissed = localStorage.getItem(storageKey) === 'true';
+    var url = window.location.href;
+    var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
+    var cookieText = 'dismissed=-' + latestVersion + '-';
+    var dismissed = document.cookie.indexOf(cookieText) != -1;
    if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
-      const link = url.replace(branchSearch[0], '/latest/apidoc/');
+      var link = url.replace(branchSearch[0], '/latest/apidoc/');
      fetch(link, {method: 'head'}).then(function(response) {
-        const a = document.getElementById('latest-link');
+        var a = document.getElementById('latest-link');
        a.href = response.status == 200 ? link : '../../latest/apidoc/';
      });
-      const latestCheck = document.getElementById('latest-check');
+      var latestCheck = document.getElementById('latest-check');
      latestCheck.style.display = '';
      document.getElementById('latest-dismiss').onclick = function() {
        latestCheck.style.display = 'none';
-        localStorage.setItem(storageKey, 'true');
+        document.cookie = cookieText;
      }
    }
  });
@@ -172,6 +172,7 @@ li {
 }
 .navigation li.item .title {
  cursor: pointer;
+  display: -ms-flexbox;
  display: flex;
  font-size: 0.85em;
 }
@@ -1 +0,0 @@
-../../../../../site/src/theme
@@ -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 ps-0"><?js= doc.classdesc ?></div>
+      <div class="class-description col-lg-7 align-self-center pl-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.includes(doc.longname);
+        return this.augments && this.augments.indexOf(doc.longname) > -1;
      })
      if (subclasses.length) {
    ?>
        <h3 class="subsection-title">Subclasses</h3>
        <ul><?js subclasses.forEach(function(s) { ?>
-          <li><?js= self.linkto(s.longname) ?>
+          <li><?js= self.linkto(s.longname, 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) ?></li>
+            <li><?js= self.linkto(a, 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) ?></li>
+            <li><?js= self.linkto(a, 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) ?></li>
+            <li><?js= self.linkto(r, 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"><?js= doc.kind === 'module' ? 'Functions' : 'Methods' ?></h3>
+        <h3 class="subsection-title">Methods</h3>

        <dl><?js methods.forEach(function(m) { ?>
            <?js m.parent = doc ?>
@@ -6,7 +6,7 @@
        <p class="code-caption"><?js= example.caption ?></p>
    <?js } ?>

-    <?js if (!example.code.toString().includes('<pre>')) { ?>
+    <?js if (example.code.toString().indexOf('<pre>') === -1) { ?>
    <pre class="prettyprint"><code><?js= example.code ?></code></pre>
    <?js } else { ?>
    <?js= example.code.replace(/<pre>/g, '<pre class="prettyprint">') ?>
@@ -4,59 +4,116 @@ 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="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
-    <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="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
-    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
-    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
-    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
-    <link rel="stylesheet" type="text/css" href="/theme/site.css">
+    <script src="scripts/jquery.min.js"></script>
+    <script src="scripts/bootstrap.bundle.min.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
+    <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
+    <link type="text/css" rel="stylesheet" href="styles/site.css">
  </head>
  <body>
-    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-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>
-      <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>
+    <div class="container-fluid">
+      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
+        <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>

-      <!-- menu items that get hidden below 768px width -->
-      <nav class="collapse navbar-collapse" id="olmenu">
-        <ul class="navbar-nav ms-auto">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- 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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
-            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="docdropdown">
-              <a class="dropdown-item" href="/doc/">Docs</a>
+            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
+              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
-                <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 me-2 fa-lg"></i>FAQ</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 me-2 fa-lg"></i>Workshop</a>
+                <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/faq.html"><i class="fa fa-question fa-fw mr-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="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
-                <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>
+                <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>
            </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 me-1"></i>API</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 dropdown">
-            <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-end" aria-labelledby="codedropdown">
-              <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 me-2 fa-lg"></i>Download</a>
+            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
+            <div class="dropdown-menu dropdown-menu-right" 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="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
-          </li>
-        </ul>
-      </nav>
-    </header>
-
-    <div class="container-fluid">
+           </li>
+          </ul>
+        </nav>
+      </header>
      <div id="wrap" class="row">
        <div class="navigation col-md-4 col-lg-3">
          <div class="search-wrapper">
@@ -80,17 +137,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>
-          <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
-            <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>.
-          </div>
-          <?js= content ?>
+            <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
+            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+              This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+            </div>
+            <?js= content ?>
        </div>
      </div>
+      <script>prettyPrint();</script>
+      <script src="scripts/linenumber.js"></script>
+      <script src="scripts/main.js"></script>
    </div>
-    <script>prettyPrint();</script>
-    <script src="scripts/linenumber.js"></script>
-    <script src="scripts/main.js"></script>
  </body>
 </html>
@@ -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) + '}</span> ';
+        typeSignature += '<span class="type-signature type ' + name.toLowerCase() + '">{' + self.linkto(name, self.htmlsafe(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.startsWith('module:') ? name.split('/').pop() : name)  + typeSignature ?>
+            <?js= data.attribs + (data.scope === 'static' ? longname : name.indexOf('module:') === 0 ? name.split('/').pop() : name)  + typeSignature ?>
            <?js= this.partial('stability.tmpl', data) ?>
        </h4>
    </div>
@@ -14,7 +14,7 @@ if (/-dev$/.test(version)) {
        <div class="anchor" id="<?js= id ?>">
        </div>
        <h4 class="name">
-            <?js= data.attribs + (kind === 'class' ? 'new ' : '') + this.getShortName(longname) + (kind !== 'event' ? data.signature : '') ?>
+            <?js= data.attribs + (kind === 'class' ? 'new ' : '') + (data.scope === 'static' ? longname : name) + (kind !== 'event' ? data.signature : '') ?>
            <?js if (data.inherited || data.inherits) { ?>
                <span class="inherited"><?js= this.linkto(data.inherits, 'inherited') ?></span>
            <?js } ?>
@@ -34,9 +34,8 @@ if (/-dev$/.test(version)) {
 </dt>
 <dd class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">

-<?js if (data.parent && data.parent.kind == 'module') { ?>
-    <?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 if (data.parent && data.parent.kind == 'module' && data.parent.name.split('ol/').length < 3) { ?>
+  <pre class="prettyprint source"><code>import {<?js= data.name ?>} from '<?js= data.parent.name ?>';</code></pre>
 <?js } ?>

    <?js if (data.description) { ?>
@@ -56,7 +55,7 @@ if (/-dev$/.test(version)) {

    <?js if (data['this']) { ?>
        <h5>This:</h5>
-        <ul><li><?js= this.linkto(data['this']) ?></li></ul>
+        <ul><li><?js= this.linkto(data['this'], data['this']) ?></li></ul>
    <?js } ?>

    <?js if (data.stability || kind !== 'class') { ?>
@@ -2,7 +2,7 @@
 var self = this;

 function toShortName(name) {
-    return name.startsWith('module:') ? name.split('/').pop() : name;
+    return name.indexOf('module:') === 0 ? 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) ?> me-2 mt-1"></span>
+        <span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
        <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
    </span><?js
 listContent(item, 'Members', printListItem);
@@ -8,7 +8,7 @@
    <th>Name</th>
    <th>Type</th>
    <th>Settable</th>
-    <th><a href="module-ol_Object.ObjectEvent.html">ObjectEvent</a> type</th>
+    <th><a href="module-ol_Object.ObjectEvent.html">ol/Object.ObjectEvent</a> type</th>
    <th class="last">Description</th>
  </tr>
  </thead>
@@ -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.startsWith(parentParam.name + '.')) {
+        if ( parentParam && param.name && param.name.indexOf(parentParam.name + '.') === 0 ) {
            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.includes('undefined')) {
+        if (param.type && param.type.names && param.type.names.indexOf('undefined') !== -1) {
            param.optional = true;
        }
-        if (param.name.startsWith('var_')) {
+        if (param.name.indexOf('var_') == 0) {
            params.hasAttributes = true;
            param.variable = true;
        }
-
+        
        if (param.optional || param.nullable) {
            params.hasAttributes = true;
        }
-
+        
        if (param.name) {
            params.hasName = true;
        }
-
+        
    });
 ?>

@@ -48,45 +48,29 @@
 		<?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 ?></code></td>
+                <td class="name"><code><?js= param.name.replace(/^opt_/, "") ?></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.includes('undefined') ? ' | undefined' : '') ?>
+                <?js= self.partial('type.tmpl', param.type.names) + (param.optional && typeof param.defaultvalue === 'undefined' && param.type.names.indexOf('undefined') === -1 ? ' | undefined' : '') ?>
                <?js if (typeof param.defaultvalue !== 'undefined') { ?>
                    (defaults to <?js= self.htmlsafe(param.defaultvalue) ?>)
                <?js } ?>
@@ -103,7 +87,7 @@
                <?js= self.partial('params.tmpl', param.subparams) ?>
            <?js } ?></td>
        </tr>
-
+	
 	<?js }); ?>
 	</tbody>
 </table>
@@ -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.startsWith(parentProp.name + '.')) {
+        if ( parentProp && prop.name && prop.name.indexOf(parentProp.name + '.') === 0 ) {
            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>
@@ -10,9 +10,9 @@ returns.forEach(function (ret, i) {
        var name = ret.name || ret.description;
        var startSpacePos = name.indexOf(" ");

-        if (parentReturn !== null && name.startsWith(parentReturn.name + '.')) {
+        if (parentReturn !== null && name.indexOf(parentReturn.name + '.') === 0) {
            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) ?>
+                        <?js= self.linkto(name, self.htmlsafe(name)) ?>
                        <?js if (i < ret.type.names.length-1) { ?> | <?js } ?>
-                    <?js });
+                    <?js }); 
                }
            ?>
            </td>
@@ -2,6 +2,6 @@
 	var data = obj;
    var self = this;
    data.forEach(function(name, i) { ?>
-<span class="param-type"><?js= self.linkto(name) ?></span>
+<span class="param-type"><?js= self.linkto(name, self.htmlsafe(name)) ?></span>
 <?js if (i < data.length-1) { ?>|<?js } ?>
 <?js }); ?>
@@ -14,7 +14,11 @@ const path = require('path');
 */
 exports.publish = function (data, opts) {
  function getTypes(data) {
-    return data.map((name) => name.replace(/^function$/, 'Function'));
+    const types = [];
+    data.forEach(function (name) {
+      types.push(name.replace(/^function$/, 'Function'));
+    });
+    return types;
  }

  // get all doclets that have exports
@@ -30,7 +34,7 @@ exports.publish = function (data, opts) {
        return (
          this.meta &&
          this.meta.path &&
-          !this.longname.startsWith('<anonymous>') &&
+          this.longname.indexOf('<anonymous>') !== 0 &&
          this.longname !== 'module:ol'
        );
      },
@@ -55,7 +59,7 @@ exports.publish = function (data, opts) {
      if (
        constructor &&
        constructor.substr(-1) === '_' &&
-        !constructor.includes('module:')
+        constructor.indexOf('module:') === -1
      ) {
        assert.strictEqual(
          doc.inherited,
@@ -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.includes(fires)) {
+      if (doclet.fires.indexOf(fires) == -1) {
        doclet.fires.push(fires);
      }
    }
@@ -58,7 +58,7 @@ function includeAugments(doclet) {
            doclet.fires = [];
          }
          cls.fires.forEach(function (f) {
-            if (!doclet.fires.includes(f)) {
+            if (doclet.fires.indexOf(f) == -1) {
              doclet.fires.push(f);
            }
          });
@@ -68,7 +68,7 @@ function includeAugments(doclet) {
            doclet.observables = [];
          }
          cls.observables.forEach(function (f) {
-            if (!doclet.observables.includes(f)) {
+            if (doclet.observables.indexOf(f) == -1) {
              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[1]] = true;
-      types[match[1]] = true;
+      modules[match[2]] = true;
+      types[match[2]] = true;
    }
  });
 }
@@ -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.includes('[')) {
+  if ((tagName === 'author' || tagName === 'see') && text.indexOf('[') === -1) {
    shouldProcess = false;
  }

@@ -29,10 +29,10 @@ exports.handlers = {
        observable.name = name;
        observable.readonly =
          typeof observable.readonly == 'boolean' ? observable.readonly : true;
-        if (doclet.name.startsWith('get')) {
+        if (doclet.name.indexOf('get') === 0) {
          observable.type = doclet.returns[0].type;
          observable.description = doclet.returns[0].description;
-        } else if (doclet.name.startsWith('set')) {
+        } else if (doclet.name.indexOf('set') === 0) {
          observable.readonly = false;
        }
        if (doclet.stability) {
@@ -42,14 +42,14 @@ exports.handlers = {
          cls.observables = [];
        }
        observable = observables[doclet.observable];
-        if (observable.type && !cls.observables.includes(observable)) {
+        if (observable.type && cls.observables.indexOf(observable) == -1) {
          cls.observables.push(observable);
        }
        if (!cls.fires) {
          cls.fires = [];
        }
        event = 'module:ol/Object.ObjectEvent#event:change:' + name;
-        if (!cls.fires.includes(event)) {
+        if (cls.fires.indexOf(event) == -1) {
          cls.fires.push(event);
        }
      }
@@ -1,24 +0,0 @@
-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(),
-  ],
-};
@@ -1,8 +1,8 @@
 {
  "compilerOptions": {
    /* Basic Options */
-    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "es2020",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "target": "ES5",                          /* 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'. */
    // "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/**/*.js"
+    "../build/ol/src/**/*.js"
  ],
  "exclude": []
 }
@@ -0,0 +1,57 @@
+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',
+  },
+};
@@ -1,6 +1,6 @@
 ---
 title: Errors
-layout: default.hbs
+layout: doc.hbs
 ---

 # Errors
@@ -89,6 +89,10 @@ Number of `origins` and `resolutions` must be equal.

 Either `tileSize` or `tileSizes` must be configured, never both.

+### 23
+
+The passed `ol.TileCoord`s must all have the same `z` value.
+
 ### 24

 Invalid extent or geometry provided as `geometry`.
@@ -109,6 +113,9 @@ Features for `updates` must have an id set by the feature reader or `ol.Feature#

 `renderMode` must be `'hybrid'` or `'vector'`.

+### 29
+
+`x` must be greater than `0`.

 ### 30

@@ -158,6 +165,10 @@ Expected an `ol.style.Style` or an array of `ol.style.Style`.

 Expected `layers` to be an array or an `ol.Collection`.

+### 46
+
+Incorrect format for `renderer` option.
+
 ### 47

 Expected `controls` to be an array or an `ol.Collection`.
@@ -186,6 +197,10 @@ Unknown `serverType` configured.

 Unknown `tierSizeCalculation` configured.

+### 54
+
+Hex color should have 3 or 6 digits.
+
 ### 55

 The `{-y}` placeholder requires a tile grid with extent.
@@ -1,6 +1,6 @@
 ---
 title: Frequently Asked Questions (FAQ)
-layout: default.hbs
+layout: doc.hbs
 ---

 # Frequently Asked Questions (FAQ)
@@ -1,21 +1,21 @@
 ---
 title: Documentation
-layout: default.hbs
+layout: doc.hbs
 ---

 # Documentation

-If you're eager to get your first OpenLayers map on a page, dive into the [quick start](./quickstart.html).
+If you're eager to get your first OpenLayers map on a page, dive into the [quick start](quickstart.html).

-For a more in-depth overview of OpenLayers core concepts, check out the [tutorials](./tutorials/).
+For a more in-depth overview of OpenLayers core concepts, check out the [tutorials](tutorials/).

 Make sure to also check out the [OpenLayers workshop](/workshop/).

-Find additional reference material in the [API docs](/en/latest/apidoc/) and [examples](/en/latest/examples/).
+Find additional reference material in the [API docs](../apidoc) and [examples](../examples).

 # Frequently Asked Questions (FAQ)

-We have put together a document that lists [Frequently Asked Questions (FAQ)](./faq.html) and our answers. Common problems that may arise when using OpenLayers are explained there, and chances are you'll find an appropriate solution in this document.
+We have put together a document that lists [Frequently Asked Questions (FAQ)](faq.html) and our answers. Common problems that may arise when using OpenLayers are explained there, and chances are you'll find an appropriate solution in this document.

 # More questions?

@@ -0,0 +1,145 @@
+---
+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.
@@ -1,11 +1,11 @@
 ---
-title: Background
-layout: default.hbs
+title: Introduction
+layout: doc.hbs
 ---

-# Background
+# Introduction

-## Overview
+## Objectives

 OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.

@@ -15,9 +15,11 @@ The library comes with built-in support for a wide range of commercial and free

 OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), which provides all modules of the officially supported [API](../../apidoc).

-## Browser Support
+## Renderers and Browser Support

-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.
+By default, OpenLayers uses a performance optimized Canvas renderer.
+
+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. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](https://polyfill.io/), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io/)) and bundled with polyfills for `fetch`, `requestAnimationFrame`, `Element.prototype.classList`, `URL`, `TextDecoder` and `Number.isInteger`.

 The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.

@@ -0,0 +1,32 @@
+---
+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.
@@ -1,13 +1,13 @@
 ---
 title: Basic Concepts
-layout: default.hbs
+layout: doc.hbs
 ---

 # Basic Concepts

 ## Map

-The core component of OpenLayers is the map (from the `ol/Map` module). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+The core component of OpenLayers is the map (`ol/Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.

 The markup below could be used to create a `<div>` that contains your map.

@@ -20,7 +20,7 @@ The script below constructs a map that is rendered in the `<div>` above, using t
 ```js
 import Map from 'ol/Map';

-const map = new Map({target: 'map'});
+var map = new Map({target: 'map'});
 ```

 ## View
@@ -32,7 +32,7 @@ import View from 'ol/View';

 map.setView(new View({
  center: [0, 0],
-  zoom: 2,
+  zoom: 2
 }));
 ```

@@ -48,12 +48,12 @@ To get remote data for a layer, OpenLayers uses `ol/source/Source` subclasses. T
 ```js
 import OSM from 'ol/source/OSM';

-const source = OSM();
+var osmSource = OSM();
 ```

 ## Layer

-A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:
+A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers:

 * `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
 * `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions.
@@ -63,9 +63,8 @@ A layer is a visual representation of data from a source. OpenLayers has four ba
 ```js
 import TileLayer from 'ol/layer/Tile';

-// ...
-const layer = new TileLayer({source: source});
-map.addLayer(layer);
+var osmLayer = new TileLayer({source: osmSource});
+map.addLayer(osmLayer);
 ```

 ## Putting it all together
@@ -80,12 +79,12 @@ import TileLayer from 'ol/layer/Tile';

 new Map({
  layers: [
-    new TileLayer({source: new OSM()}),
+    new TileLayer({source: new OSM()})
  ],
  view: new View({
    center: [0, 0],
-    zoom: 2,
+    zoom: 2
  }),
-  target: 'map',
+  target: 'map'
 });
 ```
@@ -1,10 +1,11 @@
 ---
 title: Tutorials
-layout: default.hbs
+layout: doc.hbs
 ---

 # Tutorials

+* [Building an OpenLayers Application](bundle.html)
 * [Basic Concepts](concepts.html)
 * [Some Background on OpenLayers](background.html)
 * [Raster Reprojection](raster-reprojection.html)
@@ -1,6 +1,6 @@
 ---
 title: Raster Reprojection
-layout: default.hbs
+layout: doc.hbs
 ---

 # Raster Reprojection
@@ -10,46 +10,41 @@ Transformation of the map projections of the image happens directly in a web bro
 The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.

 # Usage
-
 The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`:
-
 ```js
 import {Map, View} from 'ol';
 import TileLayer from 'ol/layer/Tile';
 import TileWMS from 'ol/source/TileWMS';

-const map = new Map({
+var map = new Map({
  target: 'map',
  view: new View({
-    projection: 'EPSG:3857', // here is the view projection
+    projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
    center: [0, 0],
-    zoom: 2,
+    zoom: 2
  }),
  layers: [
    new TileLayer({
      source: new TileWMS({
-        projection: 'EPSG:4326', // here is the source projection
+        projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
        url: 'https://ahocevar.com/geoserver/wms',
        params: {
-          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
-        },
-      }),
-    }),
-  ],
+          'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
+        }
+      })
+    })
+  ]
 });
 ```
-
 If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood.

 ### Examples
-
- [Raster reprojection demo](/en/latest/examples/reprojection.html)
- [OpenStreetMap to WGS84 reprojection](/en/latest/examples/reprojection-wgs84.html)
- [Reprojection with EPSG.io database search](/en/latest/examples/reprojection-by-code.html)
- [Image reprojection](/en/latest/examples/reprojection-image.html)
+- [Raster reprojection demo](https://openlayers.org/en/latest/examples/reprojection.html)
+- [OpenStreetMap to WGS84 reprojection](https://openlayers.org/en/latest/examples/reprojection-wgs84.html)
+- [Reprojection with EPSG.io database search](https://openlayers.org/en/latest/examples/reprojection-by-code.html)
+- [Image reprojection](https://openlayers.org/en/latest/examples/reprojection-image.html)

 ### Custom projection
-
 The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string. It can be installed with

    npm install proj4
@@ -58,32 +53,28 @@ Following example shows definition of a [British National Grid](https://epsg.io/

 ```js
 import proj4 from 'proj4';
-import {get as getProjection} from 'ol/proj';
-import {register} from 'ol/proj/proj4';
+import {get as getProjection, register} from 'ol/proj';

 proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
    '+x_0=400000 +y_0=-100000 +ellps=airy ' +
    '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
    '+units=m +no_defs');
 register(proj4);
-const proj27700 = getProjection('EPSG:27700');
+var proj27700 = getProjection('EPSG:27700');
 proj27700.setExtent([0, 0, 700000, 1300000]);
 ```

 ### Change of the view projection
-
 To switch the projection used to display the map you have to set a new `ol/View` with selected projection on the `ol/Map`:
-
-```js
+``` javascript
 map.setView(new View({
-  projection: 'EPSG:27700',
-  center: [400000, 650000],
-  zoom: 4,
-}));
+    projection: 'EPSG:27700',
+    center: [400000, 650000],
+    zoom: 4
+  }));
 ```

 ## TileGrid and Extents
-
 When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles.
 The TileGrid of the reprojected tiles is by default internally constructed using `ol/tilegrid~getForProjection(projection)`.
 The projection should have extent defined (see above) for this to work properly.
@@ -94,7 +85,7 @@ In certain cases, this can be used to optimize performance (by tweaking tile siz

 # How it works

-The reprojection process is based on triangles – the target raster is divided into a limited number of triangles with vertices transformed using `ol/proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
+The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol/proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
 The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):

 <img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" />
@@ -105,7 +96,7 @@ The precision of the reprojection is then limited by the number of triangles.

 The reprojection process preserves transparency on the raster data supplied from the source (png or gif) and the gaps and no-data pixels generated by reprojection are automatically transparent.

-### Dynamic triangulation
+###Dynamic triangulation

 The above image above shows a noticeable error (especially on the edges) when the original image (left; EPSG:27700) is transformed with only a limited number of triangles (right; EPSG:3857).
 The error can be minimized by increasing the number of triangles used.
@@ -119,11 +110,10 @@ For debugging, rendering of the reprojection edges can be enabled by `ol.source.
 # Advanced

 ### Triangulation precision threshold
-
 The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ERROR_THRESHOLD` (0.5 pixel).
 In case a different threshold needs to be defined for different sources, the `reprojectionErrorThreshold` option can be passed when constructing the tile image source.

-### Limiting visibility of reprojected map by extent
+###Limiting visibility of reprojected map by extent

 The reprojection algorithm uses inverse transformation (from *view projection* to *data projection*).
 For certain coordinate systems this can result in a "double occurrence" of the source data on a map.
@@ -2,15 +2,14 @@
  "globals": {
    "$": false,
    "arc": false,
-    "bootstrap": false,
-    "chroma": false,
    "common": false,
+    "chroma": false,
    "createMapboxStreetsV6Style": false,
    "d3": false,
+    "html2canvas": false,
    "geojsonvt": false,
    "gifler": false,
    "GyroNorm": false,
-    "html2canvas": false,
    "jspdf": false,
    "jsts": false,
    "JSZip": false,
@@ -0,0 +1,3 @@
+.tooltip-inner {
+  white-space: nowrap;
+}
@@ -3,11 +3,12 @@ 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/5.2/components/tooltips/">Bootstrap</a>.
+  This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/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://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
-  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
+  - 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>
@@ -17,10 +17,11 @@ const map = new Map({
  }),
 });

-document
-  .querySelectorAll('.ol-zoom-in, .ol-zoom-out, .ol-rotate-reset')
-  .forEach(function (el) {
-    new bootstrap.Tooltip(el, {
-      container: '#map',
-    });
-  });
+$('.ol-zoom-in, .ol-zoom-out').tooltip({
+  placement: 'right',
+  container: '#map',
+});
+$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
+  placement: 'left',
+  container: '#map',
+});
@@ -4,6 +4,7 @@ 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
@@ -28,11 +29,13 @@ const vectorLayer = new VectorLayer({
    url: 'data/kml/states.kml',
    format: new KML({extractStyles: false}),
  }),
-  style: {
-    'fill-color': gradient,
-    'stroke-width': 1,
-    'stroke-color': '#333',
-  },
+  style: new Style({
+    fill: new Fill({color: gradient}),
+    stroke: new Stroke({
+      color: '#333',
+      width: 1,
+    }),
+  }),
 });

 const map = new Map({
@@ -5,21 +5,22 @@ 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 id="map" class="map"></div>
-<form class="row">
-  <div class="col-auto">
-    <div class="input-group">
-      <label for="country-area" class="input-group-text">Show european countries larger than</label>
-      <select id="country-area" class="form-select">
-        <option value="0" default>0 ㎢</option>
-        <option value="5000">5000 ㎢</option>
-        <option value="10000">10000 ㎢</option>
-        <option value="50000">50000 ㎢</option>
-        <option value="100000">100000 ㎢</option>
-      </select>
-    </div>
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+    <div>
+    <form class="form-horizontal">
+      <label>
+        Show countries larger than
+        <select id="country-area" class="form-control">
+          <option value="0" default>0 ㎢</option>
+          <option value="5000">5000 ㎢</option>
+          <option value="10000">10000 ㎢</option>
+          <option value="50000">50000 ㎢</option>
+          <option value="100000">100000 ㎢</option>
+        </select>
+      </label>
+    </form>
  </div>
-</form>
+</div>
@@ -10,28 +10,17 @@ 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({
@@ -43,7 +32,17 @@ const map = new Map({
  ],
  target: 'map',
  view: new View({
-    center: [8500000, 8500000],
+    center: [0, 0],
    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);
+});
@@ -1,27 +1,38 @@
 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: {
-    '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',
-  },
+  style: style,
 });
-
 const view = new View({
  center: [0, 0],
  zoom: 1,
@@ -12,7 +12,7 @@ docs: >
 tags: "smooth, smoothing, chaikin"
 ---
 <div id="map" class="map"></div>
-<form>
+<form class="form-inline">
  <label for="shall-smoothen">Smooth drawn geometry?</label>
  <input id="shall-smoothen" type="checkbox" checked><br>
  <label for="iterations">Number of smoothings</label>
@@ -5,21 +5,19 @@ 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 pb-0">Cluster distance</label>
-    <input id="distance" class="form-range" type="range" min="0" max="200" step="1" value="40"/>
+    <label for="distance" class="col-form-label">Cluster distance</label>
+    <input id="distance" class="form-control-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 pb-0">Minimum distance</label>
-    <input id="min-distance" class="form-range" type="range" min="0" max="200" step="1" value="20"/>
+    <label for="min-distance" class="col-form-label">Minimum distance</label>
+    <input id="min-distance" class="form-control-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>
@@ -77,13 +77,17 @@ const map = new Map({
  }),
 });

-distanceInput.addEventListener('input', function () {
+const distanceHandler = function () {
  clusterSource.setDistance(parseInt(distanceInput.value, 10));
-});
+};
+distanceInput.addEventListener('input', distanceHandler);
+distanceInput.addEventListener('change', distanceHandler);

-minDistanceInput.addEventListener('input', function () {
+const minDistanceHandler = function () {
  clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
-});
+};
+minDistanceInput.addEventListener('input', minDistanceHandler);
+minDistanceInput.addEventListener('change', minDistanceHandler);

 map.on('click', (e) => {
  clusters.getFeatures(e.pixel).then((clickedFeatures) => {
@@ -1,10 +0,0 @@
---
-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>
@@ -1,28 +0,0 @@
-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;
-      }),
-    });
-  });
@@ -166,10 +166,12 @@ const controlIds = ['hue', 'chroma', 'lightness'];
 controlIds.forEach(function (id) {
  const control = document.getElementById(id);
  const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
    output.innerText = control.value;
    raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
  output.innerText = control.value;
  controls[id] = control;
 });
@@ -1,6 +1,7 @@
 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,
@@ -146,16 +147,22 @@ const map = new Map({
      source: new VectorSource({
        features: [pointFeature, lineFeature, polygonFeature],
      }),
-      style: {
-        'icon-src': 'data/icon.png',
-        'icon-opacity': 0.95,
-        'icon-anchor': [0.5, 46],
-        'icon-anchor-x-units': 'fraction',
-        'icon-anchor-y-units': 'pixels',
-        'stroke-width': 3,
-        'stroke-color': [255, 0, 0, 1],
-        'fill-color': [0, 0, 255, 0.6],
-      },
+      style: new Style({
+        image: new Icon({
+          anchor: [0.5, 46],
+          anchorXUnits: 'fraction',
+          anchorYUnits: 'pixels',
+          opacity: 0.95,
+          src: 'data/icon.png',
+        }),
+        stroke: new Stroke({
+          width: 3,
+          color: [255, 0, 0, 1],
+        }),
+        fill: new Fill({
+          color: [0, 0, 255, 0.6],
+        }),
+      }),
    }),
  ],
  target: 'map',
@@ -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@7.4.4/dist/d3.min.js
+  - https://unpkg.com/d3@6.7.0/dist/d3.min.js
  - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>
@@ -1,4 +1,5 @@
 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';
@@ -20,7 +21,7 @@ class CanvasLayer extends Layer {
  }

  getSourceState() {
-    return 'ready';
+    return SourceState.READY;
  }

  render(frameState) {
@@ -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="nStylem0500"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</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="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="nStylem0100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</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="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="nStyle0300"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d299f7ff</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="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="hStylem0500"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</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="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="hStylem0100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</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="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="hStyle0300"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da99f7ff</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="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>
@@ -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,14 +24,17 @@ function getKMLData(buffer) {
 }

 function getKMLImage(href) {
-  const index = window.location.href.lastIndexOf('/');
-  if (index !== -1) {
-    const kmlFile = zip.file(href.slice(index + 1));
+  let url = href;
+  let path = window.location.href;
+  path = path.slice(0, path.lastIndexOf('/') + 1);
+  if (href.indexOf(path) === 0) {
+    const regexp = new RegExp(href.replace(path, '') + '$', 'i');
+    const kmlFile = zip.file(regexp)[0];
    if (kmlFile) {
-      return URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
+      url = URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
    }
  }
-  return href;
+  return url;
 }

 // Define a KMZ format class by subclassing ol/format/KML
@@ -136,9 +139,14 @@ function download(fullpath, filename) {
      return response.blob();
    })
    .then(function (blob) {
-      link.href = URL.createObjectURL(blob);
-      link.download = filename;
-      link.click();
+      if (navigator.msSaveBlob) {
+        // link download attribute does not work on MS browsers
+        navigator.msSaveBlob(blob, filename);
+      } else {
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+      }
    });
 }

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

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

@@ -7,7 +7,7 @@ docs: >
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
-<form>
+<form class="form-inline">
  <label for="type">Geometry type &nbsp;</label>
  <select id="type">
    <option value="Point">Point</option>
@@ -1,5 +1,6 @@
 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';
@@ -12,13 +13,21 @@ const raster = new TileLayer({
 const source = new VectorSource();
 const vector = new VectorLayer({
  source: source,
-  style: {
-    'fill-color': 'rgba(255, 255, 255, 0.2)',
-    'stroke-color': '#ffcc33',
-    'stroke-width': 2,
-    'circle-radius': 7,
-    'circle-fill-color': '#ffcc33',
-  },
+  style: new Style({
+    fill: new Fill({
+      color: 'rgba(255, 255, 255, 0.2)',
+    }),
+    stroke: new Stroke({
+      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.
@@ -13,7 +13,7 @@ docs: >
 tags: "draw, edit, modify, vector, circle, sphere, geodesic"
 ---
 <div id="map" class="map"></div>
-<form>
+<form class="form-inline">
  <label for="type">Geometry type &nbsp;</label>
  <select id="type">
    <option value="Point">Point</option>
@@ -8,22 +8,16 @@ 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>
-<div class="row">
-  <div class="col-auto">
-    <span class="input-group">
-      <label class="input-group-text" for="type">Geometry type:</label>
-      <select class="form-select" id="type">
-        <option value="Point">Point</option>
-        <option value="LineString">LineString</option>
-        <option value="Polygon">Polygon</option>
-        <option value="Circle">Circle</option>
-        <option value="None">None</option>
-      </select>
-      <input class="form-control" type="button" value="Undo" id="undo">
-    </span>
-  </div>
-</div>
+<form class="form-inline">
+  <label for="type">Geometry type: &nbsp;</label>
+  <select class="form-control mr-2 mb-2 mt-2" id="type">
+    <option value="Point">Point</option>
+    <option value="LineString">LineString</option>
+    <option value="Polygon">Polygon</option>
+    <option value="Circle">Circle</option>
+    <option value="None">None</option>
+  </select>
+  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
+</form>
@@ -11,7 +11,7 @@ docs: >
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
-<form>
+<form class="form-inline">
  <label for="type">Geometry type &nbsp;</label>
  <select id="type">
    <option value="LineString">LineString</option>
@@ -12,22 +12,16 @@ 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>
-<div class="row">
-  <div class="col-auto">
-    <span class="input-group">
-      <label class="input-group-text" for="type">Shape type:</label>
-      <select class="form-select" id="type">
-        <option value="Circle">Circle</option>
-        <option value="Square">Square</option>
-        <option value="Box">Box</option>
-        <option value="Star">Star</option>
-        <option value="None">None</option>
-      </select>
-      <input class="form-control" type="button" value="Undo" id="undo">
-    </span>
-  </div>
-</div>
+<form class="form-inline">
+  <label for="type">Shape type: &nbsp;</label>
+  <select class="form-control mr-2 mb-2 mt-2" id="type">
+    <option value="Circle">Circle</option>
+    <option value="Square">Square</option>
+    <option value="Box">Box</option>
+    <option value="Star">Star</option>
+    <option value="None">None</option>
+  </select>
+  <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
+</form>
@@ -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', 'theme/ol.css');
+    link.setAttribute('href', 'css/ol.css');
    this.shadow.appendChild(link);
    const style = document.createElement('style');
    style.innerText = `
@@ -5,11 +5,7 @@ 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-outline-dark" role="button"><i class="fa fa-download"></i> Download PNG</a>
+<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>
@@ -64,6 +64,13 @@ 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) {
@@ -87,20 +94,19 @@ 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;
-    mapContext.setTransform(1, 0, 0, 1, 0, 0);
-    const link = document.getElementById('image-download');
-    link.href = mapCanvas.toDataURL();
-    link.click();
+    if (navigator.msSaveBlob) {
+      // link download attribute does not work on MS browsers
+      navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
+    } else {
+      const link = document.getElementById('image-download');
+      link.href = mapCanvas.toDataURL();
+      link.click();
+    }
  });
  map.renderSync();
 });
@@ -84,7 +84,6 @@ 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'),
@@ -55,23 +55,27 @@ 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', function () {
-  style.variables.minYear = parseInt(minYearInput.value);
-  updateStatusText();
-});
-maxYearInput.addEventListener('input', function () {
-  style.variables.maxYear = parseInt(maxYearInput.value);
-  updateStatusText();
-});
+minYearInput.addEventListener('input', updateMinYear);
+minYearInput.addEventListener('change', updateMinYear);
+maxYearInput.addEventListener('input', updateMaxYear);
+maxYearInput.addEventListener('change', updateMaxYear);
 updateStatusText();

-// load data;
+// load data
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/meteorite_landings.csv');
 client.onload = function () {
@@ -2,6 +2,9 @@
  height: 100%;
  margin: 0;
 }
+.map:-ms-fullscreen {
+  height: 100%;
+}
 .map:fullscreen {
  height: 100%;
 }
@@ -2,6 +2,9 @@
  height: 100%;
  margin: 0;
 }
+.fullscreen:-ms-fullscreen {
+  height: 100%;
+}

 .fullscreen:fullscreen {
  height: 100%;
@@ -2,6 +2,9 @@
  height: 100%;
  margin: 0;
 }
+.map:-ms-fullscreen {
+  height: 100%;
+}
 .map:fullscreen {
  height: 100%;
 }
@@ -8,8 +8,9 @@ docs: >
  not geographic).
 tags: "geographic"
 resources:
-  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
-  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js
+  - 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>
@@ -1,3 +1,4 @@
+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';
@@ -24,10 +25,12 @@ const map = new Map({
      source: new VectorSource({
        features: [new Feature(point)],
      }),
-      style: {
-        'circle-radius': 9,
-        'circle-fill-color': 'red',
-      },
+      style: new Style({
+        image: new Circle({
+          radius: 9,
+          fill: new Fill({color: 'red'}),
+        }),
+      }),
    }),
  ],
 });
@@ -36,7 +39,9 @@ const element = document.getElementById('popup');

 const popup = new Overlay({
  element: element,
+  positioning: 'bottom-center',
  stopEvent: false,
+  offset: [0, -10],
 });
 map.addOverlay(popup);

@@ -57,34 +62,31 @@ map.on('moveend', function () {
  info.innerHTML = formatCoordinate(center);
 });

-let popover;
 map.on('click', function (event) {
-  if (popover) {
-    popover.dispose();
-    popover = undefined;
-  }
-  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],
-  ]);
+  $(element).popover('dispose');

-  popover = new bootstrap.Popover(element, {
-    container: element.parentElement,
-    content: formatCoordinate(coordinate),
-    html: true,
-    offset: [0, 20],
-    placement: 'top',
-    sanitize: false,
-  });
-  popover.show();
+  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+  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');
+  }
 });

 map.on('pointermove', function (event) {
-  const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
-  map.getViewport().style.cursor = type;
+  if (map.hasFeatureAtPixel(event.pixel)) {
+    map.getViewport().style.cursor = 'pointer';
+  } else {
+    map.getViewport().style.cursor = 'inherit';
+  }
 });
--- a/Show More
+++ b/Show More