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 }));