fix(map): harden protomaps flavor loading with base-style fallback

Event filter: replace reset button with per-select clear icons
Refactor map cleanup: central popup manager and dead code removal
2026-02-27 21:10:26 +01:00 · 2026-02-27 20:30:56 +01:00 · 2026-02-27 19:58:24 +01:00
5 changed files with 270 additions and 243 deletions
@@ -13,6 +13,39 @@ $GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend
 $GLOBALS['TL_DCA']['tl_module']['palettes']['organization_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,logoFolder,organizationTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,eventFolder,termsPage,frontendAuthorId,frontendArchiveId,eventTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';

+$getUsedOrganizationTagOptions = static function (): array {
+    $database = Database::getInstance();
+    $labelExpression = $database->fieldExists('title', 'tl_tags')
+        ? "COALESCE(NULLIF(t.title, ''), t.tag)"
+        : 't.tag';
+
+    $rows = $database
+        ->prepare(sprintf(
+            'SELECT DISTINCT t.id, %1$s AS label
+             FROM tl_tags_rel r
+             INNER JOIN tl_tags t ON t.id=r.tag_id
+             WHERE r.ptable=? AND (r.field=? OR r.field IS NULL OR r.field = \'\')
+             ORDER BY label ASC',
+            $labelExpression,
+        ))
+        ->execute('tl_organization', 'tags')
+        ->fetchAllAssoc();
+
+    $options = [];
+
+    foreach ($rows as $row) {
+        $label = trim((string) ($row['label'] ?? ''));
+
+        if ('' === $label) {
+            continue;
+        }
+
+        $options[(int) $row['id']] = $label;
+    }
+
+    return $options;
+};
+
 $GLOBALS['TL_DCA']['tl_module']['fields']['editPage'] = [
    'label' => &$GLOBALS['TL_LANG']['tl_module']['editPage'],
    'exclude' => true,
@@ -73,38 +106,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['organizationTypeTags'] = [
    'label' => &$GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'],
    'exclude' => true,
    'inputType' => 'checkbox',
-    'options_callback' => static function () {
-        $database = Database::getInstance();
-        $labelExpression = $database->fieldExists('title', 'tl_tags')
-            ? "COALESCE(NULLIF(t.title, ''), t.tag)"
-            : 't.tag';
-
-        $rows = Database::getInstance()
-            ->prepare(sprintf(
-                'SELECT DISTINCT t.id, %1$s AS label
-                 FROM tl_tags_rel r
-                 INNER JOIN tl_tags t ON t.id=r.tag_id
-                 WHERE r.ptable=? AND r.field=?
-                 ORDER BY label ASC',
-                $labelExpression,
-            ))
-            ->execute('tl_organization', 'tags')
-            ->fetchAllAssoc();
-
-        $options = [];
-
-        foreach ($rows as $row) {
-            $label = trim((string) ($row['label'] ?? ''));
-
-            if ('' === $label) {
-                continue;
-            }
-
-            $options[(int) $row['id']] = $label;
-        }
-
-        return $options;
-    },
+    'options_callback' => $getUsedOrganizationTagOptions,
    'eval' => ['multiple' => true, 'tl_class' => 'clr'],
    'sql' => ['type' => 'blob', 'notnull' => false],
    'save_callback' => [
@@ -229,38 +231,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapInitialOrganizationTagId'] = [
    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapInitialOrganizationTagId'],
    'exclude' => true,
    'inputType' => 'select',
-    'options_callback' => static function (): array {
-        $database = Database::getInstance();
-        $labelExpression = $database->fieldExists('title', 'tl_tags')
-            ? "COALESCE(NULLIF(t.title, ''), t.tag)"
-            : 't.tag';
-
-        $rows = $database
-            ->prepare(sprintf(
-                'SELECT DISTINCT t.id, %1$s AS label
-                 FROM tl_tags_rel r
-                 INNER JOIN tl_tags t ON t.id=r.tag_id
-                 WHERE r.ptable=? AND r.field=?
-                 ORDER BY label ASC',
-                $labelExpression,
-            ))
-            ->execute('tl_organization', 'tags')
-            ->fetchAllAssoc();
-
-        $options = [];
-
-        foreach ($rows as $row) {
-            $label = trim((string) ($row['label'] ?? ''));
-
-            if ('' === $label) {
-                continue;
-            }
-
-            $options[(int) $row['id']] = $label;
-        }
-
-        return $options;
-    },
+    'options_callback' => $getUsedOrganizationTagOptions,
    'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
 ];
@@ -8,6 +8,7 @@
                    <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
                {% endfor %}
            </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="tag" aria-label="Kategorie-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
        </div>

        <div class="widget-select places">
@@ -18,6 +19,7 @@
                    <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
                {% endfor %}
            </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="location" aria-label="Ort-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
        </div>

        <div class="widget-select org">
@@ -28,11 +30,10 @@
                    <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
                {% endfor %}
            </select>
+            <button type="button" class="eventfilter-clear" data-eventfilter-clear="org" aria-label="Veranstalter-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
        </div>
    </div>

-    <button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
-
    <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>

@@ -78,7 +79,27 @@
        outline-offset: 3px;
    }

-    #eventfilters .eventfilter-reset[hidden] {
+    #eventfilters .widget-select {
+        position: relative;
+    }
+
+    #eventfilters .eventfilter-clear {
+        position: absolute;
+        top: 50%;
+        right: .5rem;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        padding: .125rem;
+        line-height: 1;
+    }
+
+    #eventfilters .eventfilter-clear[hidden] {
        display: none;
    }

@@ -107,7 +128,9 @@
    const tagWidget = tagSelect?.closest('.widget-select');
    const locationWidget = locationSelect?.closest('.widget-select');
    const orgWidget = orgSelect?.closest('.widget-select');
-    const resetButton = filters.querySelector('#eventfilter-reset');
+    const clearTagButton = filters.querySelector('[data-eventfilter-clear="tag"]');
+    const clearLocationButton = filters.querySelector('[data-eventfilter-clear="location"]');
+    const clearOrgButton = filters.querySelector('[data-eventfilter-clear="org"]');
    const status = filters.querySelector('#eventfilter-status');
    const stateStorageKey = 'event-filter-state';
    const stateQueryKey = 'event_filter';
@@ -279,9 +302,25 @@
        locationWidget?.classList.toggle('active', hasActiveLocation);
        orgWidget?.classList.toggle('active', hasActiveOrg);

-        if (resetButton) {
-            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+        if (clearTagButton) {
+            clearTagButton.hidden = !hasActiveTag;
        }
+
+        if (clearLocationButton) {
+            clearLocationButton.hidden = !hasActiveLocation;
+        }
+
+        if (clearOrgButton) {
+            clearOrgButton.hidden = !hasActiveOrg;
+        }
+    };
+
+    const resetAllFilters = () => {
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter({ type: 'all', value: '' });
    };

    const parseIdList = (rawValue) => (rawValue ?? '')
@@ -402,13 +441,9 @@
        );
    });

-    resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, '');
-        setSelectValue(locationSelect, '');
-        setSelectValue(orgSelect, '');
-
-        applyFilter({ type: 'all', value: '' });
-    });
+    clearTagButton?.addEventListener('click', resetAllFilters);
+    clearLocationButton?.addEventListener('click', resetAllFilters);
+    clearOrgButton?.addEventListener('click', resetAllFilters);

    const urlState = readUrlState();
    const storedState = readStoredState();
@@ -112,4 +112,4 @@
 </style>

 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227a"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>
@@ -10,7 +10,6 @@ const DEFAULT_ZOOM = 6;
 const DEFAULT_EVENT_COLOR = '#BC5067';
 const EVENT_FADE_DURATION_MS = 200;
 const EVENT_CLUSTER_LAYER_ID = 'eventmanager-events-clusters';
-const EVENT_CLUSTER_SPIDERFY_LAYER_ID = 'eventmanager-events-clusters-spiderfy';
 const EVENT_UNCLUSTERED_LAYER_ID = 'eventmanager-events-unclustered';
 const SATELLITE_SOURCE_ID = 'eventmanager-satellite-source';
 const SATELLITE_LAYER_ID = 'eventmanager-satellite-layer';
@@ -22,8 +21,60 @@ const SATELLITE_ROADS_SOURCE_ID = 'eventmanager-satellite-roads-source';
 const SATELLITE_ROADS_LAYER_ID = 'eventmanager-satellite-roads-layer';
 const SATELLITE_ROADS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
 const SATELLITE_ATTRIBUTION = '&copy; Esri, Maxar';
+const PROTOMAPS_SOURCE_ID = 'protomaps';
+const DEFAULT_BASE_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
+const PROTOMAPS_PM_TILES_URL = 'pmtiles://https://maps.mummert.media/tiles/world.pmtiles';
+const PROTOMAPS_ATTRIBUTION = '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
+const PROTOMAPS_GLYPHS_URL = 'https://maps.mummert.media/fonts/{fontstack}/{range}.pbf';
+const PROTOMAPS_SPRITE_URL = 'https://maps.mummert.media/sprites/v4/light';
+const PROTOMAPS_FLAVOR_URL = 'https://maps.mummert.media/metadaten/flavors/bio.json';
+const PROTOMAPS_BASEMAPS_ESM_URLS = [
+    'https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/+esm',
+    'https://esm.sh/@protomaps/basemaps@5',
+];
+const PROTOMAPS_BASEMAPS_UMD_URL = 'https://unpkg.com/@protomaps/basemaps@5/dist/basemaps.js';

 let dependenciesPromise = null;
+let basemapsApiPromise = null;
+const protomapsStylePromises = new Map();
+
+const getBasemapsApi = async () => {
+    if (basemapsApiPromise) {
+        return basemapsApiPromise;
+    }
+
+    basemapsApiPromise = (async () => {
+        for (const url of PROTOMAPS_BASEMAPS_ESM_URLS) {
+            try {
+                const module = await import(url);
+                const moduleApi = module && 'object' === typeof module
+                    ? (module.layers ? module : (module.default && module.default.layers ? module.default : null))
+                    : null;
+
+                if (moduleApi && 'function' === typeof moduleApi.layers) {
+                    return moduleApi;
+                }
+            } catch (error) {
+                continue;
+            }
+        }
+
+        await loadScript(PROTOMAPS_BASEMAPS_UMD_URL);
+
+        if (window.basemaps && 'function' === typeof window.basemaps.layers) {
+            return window.basemaps;
+        }
+
+        throw new Error('Failed to load Protomaps basemaps API');
+    })();
+
+    basemapsApiPromise = basemapsApiPromise.catch((error) => {
+        basemapsApiPromise = null;
+        throw error;
+    });
+
+    return basemapsApiPromise;
+};

 const ensureStylesheet = (href) => {
    if (!href) {
@@ -95,6 +146,69 @@ const ensureDependencies = async () => {
    return dependenciesPromise;
 };

+const getProtomapsStyle = async (baseStyleUrl = DEFAULT_BASE_STYLE_URL) => {
+    const normalizedBaseStyleUrl = String(baseStyleUrl || DEFAULT_BASE_STYLE_URL).trim() || DEFAULT_BASE_STYLE_URL;
+
+    if (protomapsStylePromises.has(normalizedBaseStyleUrl)) {
+        return protomapsStylePromises.get(normalizedBaseStyleUrl);
+    }
+
+    const stylePromise = (async () => {
+        const baseStyleResponse = await fetch(normalizedBaseStyleUrl, { credentials: 'omit' });
+
+        if (!baseStyleResponse.ok) {
+            throw new Error(`Failed to load base map style: ${baseStyleResponse.status}`);
+        }
+
+        const baseStyle = await baseStyleResponse.json();
+        const baseSources = baseStyle?.sources && 'object' === typeof baseStyle.sources
+            ? baseStyle.sources
+            : {};
+        const protomapsSource = baseSources[PROTOMAPS_SOURCE_ID] && 'object' === typeof baseSources[PROTOMAPS_SOURCE_ID]
+            ? baseSources[PROTOMAPS_SOURCE_ID]
+            : {
+                type: 'vector',
+                attribution: PROTOMAPS_ATTRIBUTION,
+                url: PROTOMAPS_PM_TILES_URL,
+            };
+
+        try {
+            const basemapsApi = await getBasemapsApi();
+            const flavorResponse = await fetch(PROTOMAPS_FLAVOR_URL, { credentials: 'omit' });
+
+            if (!flavorResponse.ok) {
+                throw new Error(`Failed to load Protomaps flavor: ${flavorResponse.status}`);
+            }
+
+            const flavor = await flavorResponse.json();
+            const generatedLayers = basemapsApi.layers(PROTOMAPS_SOURCE_ID, flavor, { lang: 'de' });
+
+            return {
+                ...baseStyle,
+                version: 8,
+                glyphs: baseStyle?.glyphs || PROTOMAPS_GLYPHS_URL,
+                sprite: baseStyle?.sprite || PROTOMAPS_SPRITE_URL,
+                sources: {
+                    ...baseSources,
+                    [PROTOMAPS_SOURCE_ID]: protomapsSource,
+                },
+                layers: generatedLayers,
+            };
+        } catch (error) {
+            return baseStyle;
+        }
+    })();
+
+    const cachedStylePromise = stylePromise.catch((error) => {
+        protomapsStylePromises.delete(normalizedBaseStyleUrl);
+        throw error;
+    });
+
+    protomapsStylePromises.set(normalizedBaseStyleUrl, cachedStylePromise);
+
+    return cachedStylePromise;
+};
+
 const rewriteGlyphUrl = (url) => {
    if (!url) {
        return url;
@@ -162,7 +276,7 @@ const parseItems = (container) => {
        const unique = new Map();

        parsed.forEach((item) => {
-            if (!item || !['event', 'location', 'organisation'].includes(item.type)) {
+            if (!item || !['event', 'organisation'].includes(item.type)) {
                return;
            }

@@ -297,9 +411,7 @@ const ensureSatelliteLayer = (map) => {

    const markerLayerCandidates = [
        EVENT_CLUSTER_LAYER_ID,
-        EVENT_CLUSTER_SPIDERFY_LAYER_ID,
        EVENT_UNCLUSTERED_LAYER_ID,
-        'eventmanager-non-events',
    ];
    const beforeId = markerLayerCandidates.find((layerId) => map.getLayer(layerId));

@@ -526,7 +638,7 @@ const toFeature = (item) => ({
    },
 });

-const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
+const initOrganizationMarkers = (map, organizationItems, organizationColor, openPopup) => {
    if (!organizationItems.length) {
        return {
            setOnlyTagId: () => {},
@@ -542,16 +654,21 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
        const marker = new maplibregl.Marker(organizationColor ? { color: organizationColor } : undefined)
            .setLngLat([item.longitude, item.latitude]);

-        if (popupHtml) {
-            marker.setPopup(new maplibregl.Popup({ offset: 15 }).setHTML(String(popupHtml)));
-        }
-
        marker.addTo(map);

        const markerElement = marker.getElement();

        if (markerElement) {
            markerElement.style.zIndex = String(Math.round((90 - item.latitude) * 1000));
+            markerElement.style.cursor = 'pointer';
+
+            if (popupHtml && typeof openPopup === 'function') {
+                markerElement.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    openPopup([item.longitude, item.latitude], String(popupHtml));
+                });
+            }
        }

        return {
@@ -605,7 +722,7 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
    };
 };

-const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager) => {
+const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager, closePopup) => {
    const wrapperId = container.dataset.mapFilterWrapperId || '';

    if (!wrapperId || !organizationMarkerManager) {
@@ -720,6 +837,9 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event

            setEventButtonState(false);
            updateExclusiveButtonAccessibility();
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
            applyFilter();
        });
    });
@@ -761,6 +881,9 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
            tagButtons.forEach((button) => setButtonState(button, false));
            setEventButtonState(eventsOnly);
            updateExclusiveButtonAccessibility();
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
            applyFilter();
        });
    } else if (eventToggleButton) {
@@ -847,119 +970,7 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
    applyMapStyleMode();
 };

-const initLocationLayers = (map, locationItems, markerImageId) => {
-    if (!locationItems.length) {
-        return {
-            setVisible: () => {},
-        };
-    }
-
-    const sourceId = 'eventmanager-non-events-source';
-    const layerId = 'eventmanager-non-events';
-    map.addSource(sourceId, {
-        type: 'geojson',
-        data: {
-            type: 'FeatureCollection',
-            features: locationItems.map(toFeature),
-        },
-    });
-
-    map.addLayer({
-        id: layerId,
-        type: 'symbol',
-        source: sourceId,
-        layout: {
-            'icon-image': markerImageId,
-            'icon-size': 1,
-            'icon-anchor': 'bottom',
-            'icon-allow-overlap': true,
-            'icon-ignore-placement': true,
-            'symbol-sort-key': ['*', -1, ['to-number', ['get', 'latitude'], 0]],
-        },
-        paint: {
-            'icon-opacity': 1,
-            'icon-translate': [0, 4],
-        },
-    });
-
-    map.on('click', layerId, (event) => {
-        const blockingLayers = [
-            EVENT_CLUSTER_LAYER_ID,
-            EVENT_CLUSTER_SPIDERFY_LAYER_ID,
-            EVENT_UNCLUSTERED_LAYER_ID,
-        ].filter((id) => map.getLayer(id));
-
-        if (blockingLayers.length) {
-            const topEventFeatures = map.queryRenderedFeatures(event.point, { layers: blockingLayers });
-
-            if (topEventFeatures.length) {
-                return;
-            }
-        }
-
-        const feature = event.features && event.features[0] ? event.features[0] : null;
-
-        if (!feature) {
-            return;
-        }
-
-        const popupHtml = feature?.properties?.popupHtml || '';
-        const coordinates = event.lngLat ? [event.lngLat.lng, event.lngLat.lat] : null;
-
-        if (!coordinates) {
-            return;
-        }
-
-        new maplibregl.Popup({ offset: 15 })
-            .setLngLat(coordinates)
-            .setHTML(String(popupHtml))
-            .addTo(map);
-    });
-
-    map.on('mouseenter', layerId, () => {
-        map.getCanvas().style.cursor = 'pointer';
-    });
-
-    map.on('mouseleave', layerId, () => {
-        map.getCanvas().style.cursor = '';
-    });
-
-    const setLayerLayoutVisibility = (isVisible) => {
-        if (!map.getLayer(layerId)) {
-            return;
-        }
-
-        map.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
-    };
-
-    const fadeLayerOpacity = (value) => {
-        if (!map.getLayer(layerId)) {
-            return;
-        }
-
-        map.setPaintProperty(layerId, 'icon-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
-        map.setPaintProperty(layerId, 'icon-opacity', value);
-    };
-
-    return {
-        setVisible: (isVisible) => {
-            if (isVisible) {
-                setLayerLayoutVisibility(true);
-                fadeLayerOpacity(1);
-
-                return;
-            }
-
-            fadeLayerOpacity(0);
-
-            window.setTimeout(() => {
-                setLayerLayoutVisibility(false);
-            }, EVENT_FADE_DURATION_MS + 10);
-        },
-    };
-};
-
-const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId) => {
+const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId, openPopup, closePopup) => {
    const sourceId = 'eventmanager-events-source';
    const clusterLayerId = EVENT_CLUSTER_LAYER_ID;
    const unclusteredLayerId = EVENT_UNCLUSTERED_LAYER_ID;
@@ -1036,10 +1047,9 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
            return;
        }

-        new maplibregl.Popup({ offset: 15 })
-            .setLngLat([lng, lat])
-            .setHTML(String(popupHtml))
-            .addTo(map);
+        if (typeof openPopup === 'function') {
+            openPopup([lng, lat], String(popupHtml));
+        }
    };

    map.on('click', unclusteredLayerId, (event) => {
@@ -1124,7 +1134,7 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
                },
                spiderLeavesPaint: {
                    'icon-opacity': 1,
-                    'icon-translate': [0, 9],
+                    'icon-translate': [-3, 9],
                },
                onLeafClick: (feature, spiderEvent) => {
                    const clickCoordinates = spiderEvent?.lngLat
@@ -1208,6 +1218,10 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
                }
            }

+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
+
            fadeLayerOpacity(clusterLayerId, 'icon-opacity', 0);
            fadeLayerOpacity(clusterLayerId, 'text-opacity', 0);
            fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 0);
@@ -1253,7 +1267,7 @@ const initSingleMap = (container) => {
    container.dataset.mapInitialized = '1';

    ensureDependencies()
-        .then(() => {
+        .then(async () => {
            if (typeof maplibregl === 'undefined') {
                return;
            }
@@ -1264,7 +1278,8 @@ const initSingleMap = (container) => {
                window.__eventmanagerPmtilesRegistered = true;
            }

-            const style = container.dataset.mapStyle || 'https://maps.mummert.media/metadaten/world-light.json';
+            const baseStyleUrl = container.dataset.mapStyle || DEFAULT_BASE_STYLE_URL;
+            const style = await getProtomapsStyle(baseStyleUrl);
            const map = new maplibregl.Map({
                container,
                style,
@@ -1285,6 +1300,44 @@ const initSingleMap = (container) => {
                },
            });

+            let activePopup = null;
+
+            const closePopup = () => {
+                if (!activePopup) {
+                    return;
+                }
+
+                activePopup.remove();
+                activePopup = null;
+            };
+
+            const openPopup = (coordinates, popupHtml) => {
+                if (!Array.isArray(coordinates) || coordinates.length !== 2 || !popupHtml) {
+                    return;
+                }
+
+                const [lng, lat] = coordinates.map((value) => Number(value));
+
+                if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+                    return;
+                }
+
+                closePopup();
+
+                const popup = new maplibregl.Popup({ offset: 15 })
+                    .setLngLat([lng, lat])
+                    .setHTML(String(popupHtml))
+                    .addTo(map);
+
+                popup.on('close', () => {
+                    if (activePopup === popup) {
+                        activePopup = null;
+                    }
+                });
+
+                activePopup = popup;
+            };
+
            map.on('style.load', () => {
                applyDefaultProjection(map);
            });
@@ -1334,9 +1387,6 @@ const initSingleMap = (container) => {
                const organizationItems = items
                    .filter((item) => item.type === 'organisation')
                    .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
-                const locationItems = items
-                    .filter((item) => item.type === 'location')
-                    .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
                const eventItems = items
                    .filter((item) => item.type === 'event')
                    .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
@@ -1357,25 +1407,14 @@ const initSingleMap = (container) => {
                    return;
                }

-                const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor);
-                const locationLayerManager = initLocationLayers(map, locationItems, eventMarkerImageId);
+                const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor, openPopup);
                let eventLayerManager = null;

                if (eventItems.length) {
-                    eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId);
+                    eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId, openPopup, closePopup);
                }

-                const combinedEventLayerManager = {
-                    setVisible: (isVisible) => {
-                        locationLayerManager.setVisible(isVisible);
-
-                        if (eventLayerManager) {
-                            eventLayerManager.setVisible(isVisible);
-                        }
-                    },
-                };
-
-                bindExternalTagFilters(container, map, organizationMarkerManager, combinedEventLayerManager);
+                bindExternalTagFilters(container, map, organizationMarkerManager, eventLayerManager, closePopup);

                if ('markers' === centerMode) {
                    fitBounds(allCoordinates);
@@ -347,24 +347,6 @@ class MapModuleDataProvider
        return $qb->executeQuery()->fetchAllAssociative();
    }

-    /**
-     * @return list<array<string,mixed>>
-     */
-    private function fetchLocationRows(string $locationTable, array $locationGeoColumns): array
-    {
-        $qb = $this->connection->createQueryBuilder();
-        $qb
-            ->select('l.id', 'l.title')
-            ->addSelect(sprintf('l.%s AS latitude', $locationGeoColumns['latitude']))
-            ->addSelect(sprintf('l.%s AS longitude', $locationGeoColumns['longitude']))
-            ->from($locationTable, 'l')
-            ->orderBy('l.id', 'ASC');
-
-        $this->applyPublicationConstraints($qb, 'l', $locationTable);
-
-        return $qb->executeQuery()->fetchAllAssociative();
-    }
-
    /**
     * @return list<array<string,mixed>>
     */
Author	SHA1	Message	Date
Jürgen Mummert	8b213ec619	fix(map): harden protomaps flavor loading with base-style fallback	2026-02-27 21:10:26 +01:00
Jürgen Mummert	b29aaaa1a3	Event filter: replace reset button with per-select clear icons	2026-02-27 20:30:56 +01:00
Jürgen Mummert	7cb1097899	Refactor map cleanup: central popup manager and dead code removal	2026-02-27 19:58:24 +01:00