fix(map): support MapLibre v6 runtime

Author: Medformatik

apps/web/scripts/build-runtime-modules.mjs

@@ -29,12 +29,14 @@ import { mkdirSync, writeFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { build } from "esbuild";
+import { copyMapLibreRuntimeAssets } from "./maplibre-runtime.mjs";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const webRoot = resolve(__dirname, "..");
 const outDir = resolve(webRoot, "public/runtime");
 
 mkdirSync(outDir, { recursive: true });
+copyMapLibreRuntimeAssets(outDir);
 
 const GLOBAL = "globalThis.__OMX_RUNTIME__";
 

apps/web/scripts/build-sw.mjs

@@ -9,7 +9,12 @@
 //   2. the local git short SHA (dev builds)
 //   3. a timestamp fallback (no env, no git)
 import { execFileSync } from "node:child_process";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { build } from "esbuild";
+import { copyMapLibreRuntimeAssets, maplibreVersion } from "./maplibre-runtime.mjs";
+
+const webRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 
 export function resolveSwBuildId(env = process.env) {
   const fromEnv = (env.SW_BUILD_ID ?? "").trim();
@@ -28,6 +33,7 @@ export function resolveSwBuildId(env = process.env) {
 
 if (process.argv[1]?.endsWith("build-sw.mjs")) {
   const buildId = resolveSwBuildId();
+  copyMapLibreRuntimeAssets(resolve(webRoot, "public/runtime"));
   await build({
     entryPoints: ["src/sw.ts"],
     bundle: true,
@@ -36,6 +42,7 @@ if (process.argv[1]?.endsWith("build-sw.mjs")) {
     platform: "browser",
     define: {
       "process.env.NODE_ENV": '"production"',
+      __MAPLIBRE_VERSION__: JSON.stringify(maplibreVersion),
       __SW_BUILD_ID__: JSON.stringify(buildId),
     },
   });

apps/web/scripts/maplibre-runtime.mjs

@@ -0,0 +1,27 @@
+import { copyFileSync, mkdirSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
+
+const require = createRequire(import.meta.url);
+const packageJsonPath = require.resolve("maplibre-gl/package.json");
+const packageRoot = dirname(packageJsonPath);
+const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+
+if (
+  typeof packageJson.version !== "string" ||
+  !/^[A-Za-z0-9._+-]{1,128}$/.test(packageJson.version)
+) {
+  throw new Error("maplibre-gl package has an invalid version");
+}
+
+export const maplibreVersion = packageJson.version;
+
+const RUNTIME_FILES = ["maplibre-gl-worker.mjs", "maplibre-gl-shared.mjs"];
+
+export function copyMapLibreRuntimeAssets(runtimeRoot) {
+  const versionDir = resolve(runtimeRoot, "maplibre-gl", maplibreVersion);
+  mkdirSync(versionDir, { recursive: true });
+  for (const filename of RUNTIME_FILES) {
+    copyFileSync(resolve(packageRoot, "dist", filename), resolve(versionDir, filename));
+  }
+}

apps/web/src/app/settings/offline/AreaPickerMap.test.tsx

@@ -19,8 +19,10 @@ vi.mock("@/components/map/MapCredits", () => ({
 }));
 
 vi.mock("maplibre-gl", () => {
+  let workerUrl = "";
   class FakeMap {
     static instances: FakeMap[] = [];
+    static workerUrlsAtConstruction: string[] = [];
 
     remove = vi.fn();
     touchZoomRotate = { disableRotation: vi.fn() };
@@ -29,6 +31,7 @@ vi.mock("maplibre-gl", () => {
 
     constructor() {
       FakeMap.instances.push(this);
+      FakeMap.workerUrlsAtConstruction.push(workerUrl);
     }
 
     on = vi.fn((event: unknown, handler: unknown) => {
@@ -56,7 +59,14 @@ vi.mock("maplibre-gl", () => {
     }
   }
 
-  return { Map: FakeMap };
+  return {
+    getVersion: () => "6.1.0",
+    getWorkerUrl: () => workerUrl,
+    Map: FakeMap,
+    setWorkerUrl: (url: string) => {
+      workerUrl = url;
+    },
+  };
 });
 
 import * as maplibregl from "maplibre-gl";
@@ -67,10 +77,12 @@ const fakeMapClass = maplibregl.Map as unknown as {
     remove: ReturnType<typeof vi.fn>;
     trigger: (event: string) => void;
   }>;
+  workerUrlsAtConstruction: string[];
 };
 
 afterEach(() => {
   fakeMapClass.instances.length = 0;
+  fakeMapClass.workerUrlsAtConstruction.length = 0;
 });
 
 describe("AreaPickerMap", () => {
@@ -82,6 +94,9 @@ describe("AreaPickerMap", () => {
     );
 
     await waitFor(() => expect(fakeMapClass.instances).toHaveLength(1));
+    expect(fakeMapClass.workerUrlsAtConstruction).toEqual([
+      "/runtime/maplibre-gl/6.1.0/maplibre-gl-worker.mjs",
+    ]);
 
     rerender(
       <AreaPickerMap initialCenter={[10.45, 51.16]} initialZoom={4} onChange={latestOnChange} />,

apps/web/src/app/settings/offline/AreaPickerMap.tsx

@@ -9,6 +9,7 @@ import { createGeoJsonSourceDataBridge } from "@/components/map/layers/layerStyl
 import { MapCredits } from "@/components/map/MapCredits";
 import { useEnv } from "@/lib/EnvProvider";
 import { baseMapCreditsHtml, loadMaptilerStyle, loadOpenMapXStyle } from "@/lib/map";
+import { loadMapLibreRuntime } from "@/lib/maplibreRuntime";
 import type { OfflinePackageBbox } from "@/lib/offlineAreas";
 
 const BOUNDARY_SOURCE = "picker-boundary-source";
@@ -97,7 +98,7 @@ export function AreaPickerMap({ initialCenter, initialZoom, onChange, fitBbox, b
     let replayBoundary: (() => void) | null = null;
 
     const init = async () => {
-      const maplibregl = await import("maplibre-gl");
+      const maplibregl = await loadMapLibreRuntime();
       if (destroyed || !containerRef.current) return;
       const style =
         env.styleProvider === "openmapx"

apps/web/src/app/settings/offline/OfflineMapView.test.tsx

@@ -34,15 +34,30 @@ vi.mock("@/lib/offlineAreas", () => {
 });
 
 vi.mock("maplibre-gl", () => {
+  let workerUrl = "";
   class FakeMap {
+    static workerUrlsAtConstruction: string[] = [];
+
     touchZoomRotate = { disableRotation: vi.fn() };
     keyboard = { disableRotation: vi.fn() };
     on = vi.fn();
     remove = vi.fn();
+
+    constructor() {
+      FakeMap.workerUrlsAtConstruction.push(workerUrl);
+    }
   }
-  return { Map: FakeMap };
+  return {
+    getVersion: () => "6.1.0",
+    getWorkerUrl: () => workerUrl,
+    Map: FakeMap,
+    setWorkerUrl: (url: string) => {
+      workerUrl = url;
+    },
+  };
 });
 
+import * as maplibregl from "maplibre-gl";
 import * as offlineAreas from "@/lib/offlineAreas";
 import { OfflineMapView } from "./OfflineMapView";
 
@@ -54,6 +69,7 @@ const mocks = (
     };
   }
 ).__test;
+const fakeMapClass = maplibregl.Map as unknown as { workerUrlsAtConstruction: string[] };
 
 const record = {
   id: `omp2-${"d".repeat(64)}`,
@@ -67,6 +83,7 @@ const record = {
 } as OfflinePackageRecord;
 
 afterEach(() => {
+  fakeMapClass.workerUrlsAtConstruction.length = 0;
   vi.clearAllMocks();
 });
 
@@ -76,5 +93,8 @@ describe("OfflineMapView", () => {
 
     await waitFor(() => expect(mocks.refresh).toHaveBeenCalledTimes(1));
     expect(mocks.register).toHaveBeenCalledTimes(1);
+    expect(fakeMapClass.workerUrlsAtConstruction).toEqual([
+      "/runtime/maplibre-gl/6.1.0/maplibre-gl-worker.mjs",
+    ]);
   });
 });

apps/web/src/app/settings/offline/OfflineMapView.tsx

@@ -7,6 +7,7 @@ import { useEffect, useRef } from "react";
 import { MapCredits } from "@/components/map/MapCredits";
 import { useEnv } from "@/lib/EnvProvider";
 import { baseMapCreditsHtml, loadOpenMapXStyle } from "@/lib/map";
+import { loadMapLibreRuntime } from "@/lib/maplibreRuntime";
 import {
   configureDefaultOfflinePackageResolver,
   getDefaultOfflinePackageResolver,
@@ -93,7 +94,7 @@ export function OfflineMapView({ packages, fitTo, height = 360 }: Props) {
     const frame = fitTo ?? unionBbox(packages);
 
     void (async () => {
-      const maplibregl = await import("maplibre-gl");
+      const maplibregl = await loadMapLibreRuntime();
       let resolver = getDefaultOfflinePackageResolver();
       if (!resolver) {
         resolver = configureDefaultOfflinePackageResolver({

apps/web/src/components/map/LocationMinimap.test.tsx

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+
+import { render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@mui/material/styles", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@mui/material/styles")>()),
+  useColorScheme: () => ({ mode: "light", systemMode: "light" }),
+}));
+
+vi.mock("@/lib/EnvProvider", () => ({
+  useEnv: () => ({ styleProvider: "openmapx" }),
+}));
+
+vi.mock("@/lib/map", () => ({
+  baseMapCreditsHtml: () => [],
+  loadMaptilerStyle: vi.fn().mockResolvedValue({}),
+  loadOpenMapXStyle: vi.fn().mockResolvedValue({}),
+}));
+
+vi.mock("./MapCredits", () => ({ MapCredits: () => null }));
+
+vi.mock("maplibre-gl", () => {
+  let workerUrl = "";
+  const workerUrlsAtConstruction: string[] = [];
+  class FakeMap {
+    flyTo = vi.fn();
+    remove = vi.fn();
+
+    constructor() {
+      workerUrlsAtConstruction.push(workerUrl);
+    }
+  }
+  class FakeMarker {
+    addTo = vi.fn(() => this);
+    setLngLat = vi.fn(() => this);
+  }
+  return {
+    __test: { workerUrlsAtConstruction },
+    getVersion: () => "6.1.0",
+    getWorkerUrl: () => workerUrl,
+    Map: FakeMap,
+    Marker: FakeMarker,
+    setWorkerUrl: (url: string) => {
+      workerUrl = url;
+    },
+  };
+});
+
+import * as maplibregl from "maplibre-gl";
+import { LocationMinimap } from "./LocationMinimap";
+
+const maplibreTest = (maplibregl as unknown as { __test: { workerUrlsAtConstruction: string[] } })
+  .__test;
+
+afterEach(() => {
+  maplibreTest.workerUrlsAtConstruction.length = 0;
+});
+
+describe("LocationMinimap", () => {
+  it("configures the versioned worker before constructing its map", async () => {
+    render(<LocationMinimap lng={6.084959} lat={50.780558} />);
+
+    await waitFor(() => expect(maplibreTest.workerUrlsAtConstruction).toHaveLength(1));
+    expect(maplibreTest.workerUrlsAtConstruction).toEqual([
+      "/runtime/maplibre-gl/6.1.0/maplibre-gl-worker.mjs",
+    ]);
+  });
+});

apps/web/src/components/map/LocationMinimap.tsx

@@ -6,6 +6,7 @@ import type { StyleSpecification } from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useEnv } from "@/lib/EnvProvider";
 import { baseMapCreditsHtml, loadMaptilerStyle, loadOpenMapXStyle } from "@/lib/map";
+import { loadMapLibreRuntime } from "@/lib/maplibreRuntime";
 import { MapCredits } from "./MapCredits";
 
 interface LocationMinimapProps {
@@ -38,7 +39,7 @@ export function LocationMinimap({ lng, lat, zoom = 16, onClick, sx }: LocationMi
 
     (async () => {
       const [maplibregl, style] = await Promise.all([
-        import("maplibre-gl"),
+        loadMapLibreRuntime(),
         env.styleProvider === "openmapx"
           ? loadOpenMapXStyle(env, variant)
           : loadMaptilerStyle("bright-v2", env),

apps/web/src/components/map/MapCanvas.test.tsx

@@ -73,6 +73,8 @@ vi.mock("@/lib/offlineAreas", () => ({
 vi.mock("maplibre-gl", () => {
   const instances: FakeMap[] = [];
   const options: Array<{ center: [number, number]; container: HTMLElement; zoom: number }> = [];
+  const workerUrlsAtConstruction: string[] = [];
+  let workerUrl = "";
   let setupError: Error | undefined;
   let setupErrorOnCall = 1;
   let onCallCount = 0;
@@ -82,6 +84,7 @@ vi.mock("maplibre-gl", () => {
     constructor(mapOptions: { center: [number, number]; container: HTMLElement; zoom: number }) {
       instances.push(this);
       options.push(mapOptions);
+      workerUrlsAtConstruction.push(workerUrl);
       mapOptions.container.append(document.createElement("canvas"));
     }
 
@@ -101,19 +104,27 @@ vi.mock("maplibre-gl", () => {
     __test: {
       instances,
       options,
+      workerUrlsAtConstruction,
       failSetup(error: Error, onCall = 1) {
         setupError = error;
         setupErrorOnCall = onCall;
       },
       reset() {
         instances.length = 0;
         options.length = 0;
+        workerUrlsAtConstruction.length = 0;
+        workerUrl = "";
         setupError = undefined;
         setupErrorOnCall = 1;
         onCallCount = 0;
       },
     },
+    getVersion: () => "6.1.0",
+    getWorkerUrl: () => workerUrl,
     Map: FakeMap,
+    setWorkerUrl: (url: string) => {
+      workerUrl = url;
+    },
   };
 });
 
@@ -131,6 +142,7 @@ const maplibreTest = (
         remove: ReturnType<typeof vi.fn>;
       }>;
       options: Array<{ center: [number, number]; zoom: number }>;
+      workerUrlsAtConstruction: string[];
       failSetup(error: Error, onCall?: number): void;
       reset(): void;
     };
@@ -174,6 +186,9 @@ describe("MapCanvas", () => {
     const { container } = render(<MapCanvas />);
 
     await waitFor(() => expect(container.querySelector("canvas")).not.toBeNull());
+    expect(maplibreTest.workerUrlsAtConstruction).toEqual([
+      "/runtime/maplibre-gl/6.1.0/maplibre-gl-worker.mjs",
+    ]);
   });
 
   it("applies a fast granted location only after the saved viewport map exists", async () => {