mummert/eventmanager-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Load MapLibre 6 as ESM in the map module

Browse Source 
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>
This commit is contained in:
Jürgen Mummert
2026-08-22 20:18:25 +02:00
co-authored by Claude Opus 5
parent 7541c12f66
commit 3ee0afa60e
2 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/templates/frontend/event_map.html.twig
+1 -1
View File
@@ -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
+20 -21
View File
@@ -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 }));