diff --git a/contao/templates/frontend/event_map.html.twig b/contao/templates/frontend/event_map.html.twig index 5e1a07c..7b68ecf 100644 --- a/contao/templates/frontend/event_map.html.twig +++ b/contao/templates/frontend/event_map.html.twig @@ -85,4 +85,4 @@ > - + diff --git a/public/assets/map-module.js b/public/assets/map-module.js index 3a0f5f8..4d99043 100644 --- a/public/assets/map-module.js +++ b/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') { - await loadScript(MAPLIBRE_JS_URL); + if (!maplibregl) { + 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 missingImageId = event?.id || ''; - + const resolveMissingStyleImage = (missingImageId) => { 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 }));