Allow loading OL using an import map if another version than the...

default one in package.json is specified.

cases/common.js

@@ -18,7 +18,7 @@ import VectorTileLayer from 'ol/layer/VectorTile.js';
 import View from 'ol/View.js';
 import WebGLVectorLayerRenderer from 'ol/renderer/webgl/VectorLayer.js';
 import WebGLVectorTileLayerRenderer from 'ol/renderer/webgl/VectorTileLayer.js';
-import {defaults as defaultInteractions} from 'ol/interaction/defaults.js';
+import {Layer} from 'ol/layer.js';
 import {
   defineFrameContainer,
   showGraph,
@@ -50,18 +50,35 @@ export function createMap(useWebGL, useCanvas) {
   map = new Map({
     layers: [],
     target: 'map',
-    view: new View({
+  });
+  map.setView(
+    new View({
       center: [0, 0],
       zoom: 4,
       multiWorld: true,
-    }),
-    interactions: defaultInteractions().extend([link]),
-  });
+    })
+  );
   useWebGLCallback = useWebGL;
   useCanvasCallback = useCanvas;
+  map.addInteraction(link);
   return map;
 }
 
+/**
+ * @extends {Layer<VectorSource, WebGLVectorLayerRenderer>}
+ */
+export class WebGLVectorLayer extends Layer {
+  /**
+   * @return {WebGLVectorLayerRenderer} The renderer.
+   */
+  createRenderer() {
+    return new WebGLVectorLayerRenderer(this, {
+      style: this.get('style'),
+      variables: {},
+    });
+  }
+}
+
 /**
  * @extends {BaseTileLayer<import("ol/source/VectorTile.js").default, WebGLVectorTileLayerRenderer>}
  */
@@ -436,6 +453,24 @@ function animate() {
 }
 
 export function initializeGui() {
+  // @ts-ignore
+  const olVersion =
+    new URL(window.location.href).searchParams.get('olVersion') ??
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    __DEFAULT_OL_VERSION; // defined at build time by Vite
+  gui
+    .add({olVersion}, 'olVersion')
+    .name('OpenLayers Version')
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    .options(__OL_VERSIONS) // defined at build time by Vite
+    .onFinishChange((/** @type {string} */ rawValue) => {
+      const newUrl = new URL(window.location.href);
+      newUrl.searchParams.set('olVersion', rawValue);
+      window.location.href = newUrl.href;
+    });
+
   registerGuiParameter('animate', 'Start Animation', [], animate, () => {});
   registerGuiParameter(
     'renderer',

cases/create-importmap.js

@@ -0,0 +1,83 @@
+const currentUrl = new URL(window.location.href);
+const olVersion = currentUrl.searchParams.get('olVersion');
+
+if (document.currentScript) {
+  const importMap = document.createElement('script');
+  importMap.type = 'importmap';
+
+  const commonImports = `
+    "color-rgba": "/node_modules/color-rgba/index.js",
+    "color-parse": "/node_modules/color-parse/index.js",
+    "color-name": "/node_modules/color-name/index.js",
+    "color-name/": "/node_modules/color-name/",
+    "color-space/": "/node_modules/color-space/",
+    "rbush": "/node_modules/rbush/index.js",
+    "quickselect": "/node_modules/quickselect/index.js",
+    "earcut": "/node_modules/earcut/src/earcut.js"`;
+
+  // this import map is used if we're asking for a specific version
+  if (olVersion) {
+    importMap.textContent = `
+{
+  "imports": {
+    "ol/": "https://unpkg.com/ol@${olVersion}/",
+    "/node_modules/ol/": "https://unpkg.com/ol@${olVersion}/",
+    ${commonImports}
+  }
+}
+`;
+  } else {
+    importMap.textContent = `
+{
+  "imports": {
+    "ol/": "/node_modules/ol/",
+    ${commonImports}
+  }
+}
+`;
+  }
+  document.currentScript.insertAdjacentElement('beforebegin', importMap);
+
+  // trying to import this module to make sure we have a chance of the Webgl renderer to work
+  import('ol/render/webgl/VectorStyleRenderer.js')
+    .then(() => {
+      // do nothing: it worked
+    })
+    .catch((error) => {
+      const withoutOlVersion = new URL(window.location.href);
+      withoutOlVersion.searchParams.delete('olVersion');
+
+      // show error in page
+      const errorBlock = document.createElement('div');
+      errorBlock.innerHTML = `
+<p><strong>OpenLayers version "${
+        olVersion ?? 'unknown'
+      }" failed to load properly</strong></p>
+<p>First make sure that the version specified is valid. If it is, try reloading the page a few times (the CDN might have timed out when fetching the library).</p>
+<p><a href="${withoutOlVersion}">Click here to reload the page with the latest OpenLayers version (this should work!)</a></p>
+<p><small>Error was: ${error.message}</small></p>
+      `;
+      errorBlock.style.cssText = `
+background-color: rgb(255, 243, 205);
+border: 1px solid rgb(255 235 175);
+border-radius: 6px;
+color: rgb(133, 100, 4);
+font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+font-size: 16px;
+padding: 12px 20px;
+box-sizing: border-box;
+width: 800px;
+max-width: calc(100vw - 20px);`;
+      const container = document.createElement('div');
+      container.style.cssText = `
+position: relative;
+height: 100%;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+`;
+      container.append(errorBlock);
+      document.body.append(container);
+    });
+}

cases/filtering-shapes/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
   <title>Filtering Shapes</title>
   <link rel="stylesheet" href="../../style.css">
+  <script src="../create-importmap.js"></script>
 </head>
 
 <body>

cases/line-rendering/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
   <title>Line Rendering</title>
   <link rel="stylesheet" href="../../style.css">
+  <script src="../create-importmap.js"></script>
 </head>
 
 <body>

cases/point-rendering/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <title>Point Rendering</title>
     <link rel="stylesheet" href="../../style.css">
+    <script src="../create-importmap.js"></script>
 </head>
 
 <body>

cases/polygon-rendering/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
   <title>Polygon Rendering</title>
   <link rel="stylesheet" href="../../style.css">
+  <script src="../create-importmap.js"></script>
 </head>
 
 <body>

cases/polygon-rendering/main.js

@@ -1,7 +1,7 @@
 import VectorLayer from 'ol/layer/Vector.js';
 import VectorSource from 'ol/source/Vector.js';
-import WebGLVectorLayer from 'ol/layer/WebGLVector.js';
 import {
+  WebGLVectorLayer,
   addGeoJsonToSource,
   createMap,
   generatePolygons,
@@ -33,7 +33,7 @@ function resetData(count, numVertices) {
 function main() {
   createMap(
     (map) => {
-      map.addLayer(new WebGLVectorLayer({source, style}));
+      map.addLayer(new WebGLVectorLayer({source, properties: {style}}));
     },
     (map) => {
       map.addLayer(new VectorLayer({source, style}));

cases/vector-tiles-rendering/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <title>Vector Tiles Rendering</title>
     <link rel="stylesheet" href="../../style.css">
+    <script src="../create-importmap.js"></script>
 </head>
 
 <body>