Load MapLibre 6 as ESM in the map module

MapLibre GL JS 6 ships ESM only; the UMD bundle and the global
maplibregl no longer exist. Load maplibre-gl.mjs via dynamic import
into a module-scoped binding instead, keeping the UMD build as a
fallback so a server-side rollback needs no code change.

styleimagemissing is notify-only in v6, so the transparent 1x1
placeholder is now supplied through setMissingStyleImageResolver,
falling back to the event on v5.

Also drop the setFog block: MapLibre has never implemented setFog,
so the typeof guard never passed.

Verified against MapLibre 6.5.0 and pmtiles 4.5.0 in the browser:
map init, protomaps vector tiles, globe projection, organisation
markers, event clustering, spiderfy including leaf popups, and the
satellite style switch all work without console errors.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

contao/templates/frontend/event_map.html.twig

@@ -85,4 +85,4 @@
 ></div>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/eventmanager/assets/map-module.js?v=20260227b"></script>
+<script type="module" src="/bundles/eventmanager/assets/map-module.js?v=20260822a"></script>

public/assets/map-module.js

@@ -2,7 +2,8 @@ import Spiderfy from './vendor/map-gl-js-spiderfy.js';
 
 const MAP_SELECTOR = '[data-eventmanager-map="1"]';
 const MAPLIBRE_CSS_URL = 'https://maps.mummert.media/libraries/maplibre-gl.css';
-const MAPLIBRE_JS_URL = 'https://maps.mummert.media/libraries/maplibre-gl.js';
+const MAPLIBRE_ESM_URL = 'https://maps.mummert.media/libraries/maplibre-gl.mjs';
+const MAPLIBRE_LEGACY_JS_URL = 'https://maps.mummert.media/libraries/maplibre-gl.js';
 const PMTILES_JS_URL = 'https://maps.mummert.media/libraries/pmtiles.js';
 const GLYPH_FONTSTACK = 'Noto Sans Regular';
 const DEFAULT_CENTER = [13.404954, 52.520008];
@@ -34,6 +35,7 @@ const PROTOMAPS_BASEMAPS_ESM_URLS = [
 ];
 const PROTOMAPS_BASEMAPS_UMD_URL = 'https://unpkg.com/@protomaps/basemaps@5/dist/basemaps.js';
 
+let maplibregl = null;
 let dependenciesPromise = null;
 let basemapsApiPromise = null;
 const protomapsStylePromises = new Map();
@@ -134,8 +136,14 @@ const ensureDependencies = async () => {
     dependenciesPromise = (async () => {
         ensureStylesheet(MAPLIBRE_CSS_URL);
 
-        if (typeof maplibregl === 'undefined') {
+        if (!maplibregl) {
-            await loadScript(MAPLIBRE_JS_URL);
+            try {
+                maplibregl = await import(MAPLIBRE_ESM_URL);
+            } catch (error) {
+                // Fallback auf den UMD-Build (MapLibre 5), falls der ESM-Build nicht erreichbar ist.
+                await loadScript(MAPLIBRE_LEGACY_JS_URL);
+                maplibregl = window.maplibregl || null;
+            }
         }
 
         if (typeof pmtiles === 'undefined') {
@@ -370,19 +378,6 @@ const applyDefaultProjection = (map) => {
         return;
     }
 
-    if (typeof map.setFog === 'function') {
-        try {
-            map.setFog({
-                color: 'rgb(186, 210, 235)',
-                'high-color': 'rgb(36, 92, 223)',
-                'horizon-blend': 0.08,
-                'space-color': 'rgb(11, 11, 25)',
-                'star-intensity': 0.2,
-            });
-        } catch (error) {
-        }
-    }
-
     if (typeof map.setSky === 'function') {
         try {
             map.setSky({
@@ -1268,7 +1263,7 @@ const initSingleMap = (container) => {
 
     ensureDependencies()
         .then(async () => {
-            if (typeof maplibregl === 'undefined') {
+            if (!maplibregl) {
                 return;
             }
 
@@ -1342,9 +1337,7 @@ const initSingleMap = (container) => {
                 applyDefaultProjection(map);
             });
 
-            map.on('styleimagemissing', (event) => {
+            const resolveMissingStyleImage = (missingImageId) => {
-                const missingImageId = event?.id || '';
-
                 if (!missingImageId || map.hasImage(missingImageId)) {
                     return;
                 }
@@ -1354,7 +1347,13 @@ const initSingleMap = (container) => {
                     height: 1,
                     data: new Uint8Array([0, 0, 0, 0]),
                 });
-            });
+            };
+
+            if ('function' === typeof map.setMissingStyleImageResolver) {
+                map.setMissingStyleImageResolver((missingImageId) => resolveMissingStyleImage(missingImageId));
+            } else {
+                map.on('styleimagemissing', (event) => resolveMissingStyleImage(event?.id || ''));
+            }
 
             map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));