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

contao/dca/tl_module.php

@@ -9,10 +9,43 @@ use Contao\StringUtil;
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_organizations'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_events'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
-$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,mapOrganizationListPage,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,mapPitch,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $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,20 +106,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['organizationTypeTags'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'],
     'exclude' => true,
     'inputType' => 'checkbox',
-    'options_callback' => static function () {
-        $rows = Database::getInstance()
-            ->prepare('SELECT DISTINCT t.id, t.tag FROM tl_tags t LEFT JOIN tl_tags_rel r ON r.tag_id=t.id AND r.ptable=? AND r.field=? ORDER BY t.tag ASC')
-            ->execute('tl_organization', 'tags')
-            ->fetchAllAssoc();
-
-        $options = [];
-
-        foreach ($rows as $row) {
-            $options[(int) $row['id']] = (string) $row['tag'];
-        }
-
-        return $options;
-    },
+    'options_callback' => $getUsedOrganizationTagOptions,
     'eval' => ['multiple' => true, 'tl_class' => 'clr'],
     'sql' => ['type' => 'blob', 'notnull' => false],
     'save_callback' => [
@@ -173,6 +193,14 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
     'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
 ];
 
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationListPage'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'],
+    'exclude' => true,
+    'inputType' => 'pageTree',
+    'eval' => ['fieldType' => 'radio', 'mandatory' => false, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+];
+
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowExternalOrganizations'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'],
     'exclude' => true,
@@ -203,20 +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 {
-        $rows = Database::getInstance()
-            ->prepare('SELECT DISTINCT t.id, t.tag FROM tl_tags t LEFT JOIN tl_tags_rel r ON r.tag_id=t.id AND r.ptable=? AND r.field=? ORDER BY t.tag ASC')
-            ->execute('tl_organization', 'tags')
-            ->fetchAllAssoc();
-
-        $options = [];
-
-        foreach ($rows as $row) {
-            $options[(int) $row['id']] = (string) $row['tag'];
-        }
-
-        return $options;
-    },
+    'options_callback' => $getUsedOrganizationTagOptions,
     'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
     'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
 ];
@@ -271,6 +286,14 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterZoom'] = [
     'sql' => ['type' => 'smallint', 'unsigned' => true, 'default' => 12],
 ];
 
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapPitch'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapPitch'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['rgxp' => 'digit', 'maxlength' => 2, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'smallint', 'unsigned' => true, 'default' => 0],
+];
+
 if (isset($GLOBALS['TL_DCA']['tl_module']['fields']['list_layout'])) {
     $GLOBALS['TL_DCA']['tl_module']['fields']['list_layout']['options_callback'] = static function (): array {
         $options = Controller::getTemplateGroup('list_');

contao/languages/de/tl_module.php

@@ -14,6 +14,7 @@ $GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'W
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Anzuzeigende Organisationstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Organisationstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltungstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Veranstaltungstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Organisationen anzeigen', 'Wenn aktiviert, werden Organisations-Marker auf der Karte dargestellt.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'] = ['Seite für Organisationsliste', 'Optional: Seite, auf der die Organisationsliste liegt. Wird für den Link „mehr Infos“ im Organisations-Popup verwendet.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Externe Organisationen anzeigen', 'Wenn aktiviert, werden externe Organisationen (isExternal=1) zusätzlich auf der Karte dargestellt. Standard: nein.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Veranstaltungen anzeigen', 'Wenn aktiviert, werden Event- (inkl. Orts-) Marker auf der Karte dargestellt.'];
 $GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'] = ['Initiale Anzeige', 'Definiert, welche Marker beim Laden der Karte initial angezeigt werden.'];
@@ -33,3 +34,4 @@ $GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
 $GLOBALS['TL_LANG']['tl_module']['mapCenterLat'] = ['Breitengrad (Center)', 'Breitengrad für die feste Kartenzentrierung, z. B. 51.0538'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterLng'] = ['Längengrad (Center)', 'Längengrad für die feste Kartenzentrierung, z. B. 13.3080'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'] = ['Zoom-Level (Center)', 'Zoom-Level für die feste Kartenzentrierung (z. B. 12).'];
+$GLOBALS['TL_LANG']['tl_module']['mapPitch'] = ['Pitch (Neigung)', 'Kartenneigung in Grad (0-85). Standard bei leerer Angabe: 0.'];

contao/languages/en/tl_module.php

@@ -14,6 +14,7 @@ $GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Se
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Displayed organization types', 'Optional: Limit which organization type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'Optional: Limit which event type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Show organizations', 'If enabled, organization markers are rendered on the map.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationListPage'] = ['Organization list page', 'Optional: page containing the organization list. Used for the "more info" link in organization popups.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Show external organizations', 'If enabled, external organizations (isExternal=1) are additionally rendered on the map. Default: no.'];
 $GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Show events', 'If enabled, event markers (including related locations) are rendered on the map.'];
 $GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'] = ['Initial display', 'Defines which markers are initially shown when the map is loaded.'];
@@ -33,3 +34,4 @@ $GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
 $GLOBALS['TL_LANG']['tl_module']['mapCenterLat'] = ['Center latitude', 'Latitude for fixed map centering, e.g. 51.0538'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterLng'] = ['Center longitude', 'Longitude for fixed map centering, e.g. 13.3080'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'] = ['Center zoom level', 'Zoom level for fixed map centering (e.g. 12).'];
+$GLOBALS['TL_LANG']['tl_module']['mapPitch'] = ['Pitch', 'Map pitch in degrees (0-85). Default when empty: 0.'];

contao/templates/frontend/event_filter.html.twig

@@ -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();

contao/templates/frontend/event_map.html.twig

@@ -81,6 +81,7 @@
     data-map-center-lat="{{ mapCenterLat|default('')|e('html_attr') }}"
     data-map-center-lng="{{ mapCenterLng|default('')|e('html_attr') }}"
     data-map-center-zoom="{{ mapCenterZoom|default(12)|e('html_attr') }}"
+    data-map-pitch="{{ mapPitch|default(0)|e('html_attr') }}"
 ></div>
 
 <style>
@@ -104,7 +105,11 @@
         width: 100%;
         min-height: 420px;
     }
+
+    .maplibregl-popup {
+        z-index: 2147483647;
+    }
 </style>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226d"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>

public/assets/map-module.js

@@ -10,14 +10,71 @@ 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';
 const SATELLITE_TILE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
+const SATELLITE_LABELS_SOURCE_ID = 'eventmanager-satellite-labels-source';
+const SATELLITE_LABELS_LAYER_ID = 'eventmanager-satellite-labels-layer';
+const SATELLITE_LABELS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}';
+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 = '© 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) {
@@ -89,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;
@@ -118,6 +238,21 @@ const escapeHtml = (value) => {
         .replace(/'/g, '&#039;');
 };
 
+const decodeHtmlEntities = (value) => {
+    const stringValue = String(value ?? '');
+
+    if ('undefined' === typeof document || !document.createElement) {
+        return stringValue;
+    }
+
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = stringValue;
+
+    return textarea.value;
+};
+
+const sanitizeDisplayText = (value) => escapeHtml(decodeHtmlEntities(value));
+
 const parseItems = (container) => {
     const dataElementId = container.dataset.mapDataId || '';
 
@@ -141,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;
             }
 
@@ -276,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));
 
@@ -297,6 +430,44 @@ const ensureSatelliteLayer = (map) => {
             'raster-saturation': 0,
         },
     }, beforeId);
+
+    map.addSource(SATELLITE_ROADS_SOURCE_ID, {
+        type: 'raster',
+        tiles: [SATELLITE_ROADS_TILE_URL],
+        tileSize: 256,
+        attribution: SATELLITE_ATTRIBUTION,
+    });
+
+    map.addLayer({
+        id: SATELLITE_ROADS_LAYER_ID,
+        type: 'raster',
+        source: SATELLITE_ROADS_SOURCE_ID,
+        layout: {
+            visibility: 'none',
+        },
+        paint: {
+            'raster-opacity': 1,
+        },
+    }, beforeId);
+
+    map.addSource(SATELLITE_LABELS_SOURCE_ID, {
+        type: 'raster',
+        tiles: [SATELLITE_LABELS_TILE_URL],
+        tileSize: 256,
+        attribution: SATELLITE_ATTRIBUTION,
+    });
+
+    map.addLayer({
+        id: SATELLITE_LABELS_LAYER_ID,
+        type: 'raster',
+        source: SATELLITE_LABELS_SOURCE_ID,
+        layout: {
+            visibility: 'none',
+        },
+        paint: {
+            'raster-opacity': 1,
+        },
+    }, beforeId);
 };
 
 const setSatelliteMode = (map, enabled) => {
@@ -310,7 +481,16 @@ const setSatelliteMode = (map, enabled) => {
         return;
     }
 
+    const hybridOverlayLayerIds = [SATELLITE_ROADS_LAYER_ID, SATELLITE_LABELS_LAYER_ID];
+
     map.setLayoutProperty(SATELLITE_LAYER_ID, 'visibility', enabled ? 'visible' : 'none');
+    hybridOverlayLayerIds.forEach((layerId) => {
+        if (map.getLayer(layerId)) {
+            map.setLayoutProperty(layerId, 'visibility', enabled ? 'visible' : 'none');
+            map.setPaintProperty(layerId, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
+            map.setPaintProperty(layerId, 'raster-opacity', enabled ? 1 : 0);
+        }
+    });
     map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
     map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-min-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
     map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-max-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
@@ -406,17 +586,38 @@ const ensureMarkerImage = (map, color, prefix = 'eventmanager-marker', options =
 
 const popupHtmlFor = (item) => {
     if (item.type === 'event') {
-        const locationTitle = escapeHtml(item.extra.locationTitle || '');
-        const startDate = escapeHtml(item.extra.startDate || '');
+        const title = sanitizeDisplayText(item.title || '');
+        const locationTitle = sanitizeDisplayText(item.extra.locationTitle || '');
+        const startDate = sanitizeDisplayText(item.extra.startDate || '');
+        const detailUrl = String(item.extra.detailUrl || '').trim();
+        const hasDetailUrl = /^(https?:\/\/|\/)/i.test(detailUrl);
+        const detailLink = hasDetailUrl
+            ? `<div><a href="${escapeHtml(detailUrl)}">mehr Infos</a></div>`
+            : '';
 
         return [
-            `<strong>${escapeHtml(item.title)}</strong>`,
+            `<strong>${title}</strong>`,
             locationTitle ? `<div>${locationTitle}</div>` : '',
             startDate ? `<div>${startDate}</div>` : '',
+            detailLink,
         ].join('');
     }
 
-    return `<strong>${escapeHtml(item.title)}</strong>`;
+    if (item.type === 'organisation') {
+        const title = sanitizeDisplayText(item.title || '');
+        const detailUrl = String(item.extra?.detailUrl || '').trim();
+        const hasDetailUrl = /^(https?:\/\/|\/)/i.test(detailUrl);
+        const detailLink = hasDetailUrl
+            ? `<div><a href="${escapeHtml(detailUrl)}">mehr Infos</a></div>`
+            : '';
+
+        return [
+            `<strong>${title}</strong>`,
+            detailLink,
+        ].join('');
+    }
+
+    return `<strong>${sanitizeDisplayText(item.title)}</strong>`;
 };
 
 const toFeature = (item) => ({
@@ -432,11 +633,12 @@ const toFeature = (item) => ({
         markerTagIds: Array.isArray(item.extra?.organizationTagIds) ? item.extra.organizationTagIds : [],
         markerTagLabels: Array.isArray(item.extra?.organizationTagLabels) ? item.extra.organizationTagLabels : [],
         title: item.title,
+        latitude: item.latitude,
         popupHtml: popupHtmlFor(item),
     },
 });
 
-const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
+const initOrganizationMarkers = (map, organizationItems, organizationColor, openPopup) => {
     if (!organizationItems.length) {
         return {
             setOnlyTagId: () => {},
@@ -445,17 +647,30 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
         };
     }
 
-    const markerEntries = organizationItems.map((item) => {
+    const sortedOrganizationItems = [...organizationItems].sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
+
+    const markerEntries = sortedOrganizationItems.map((item) => {
         const popupHtml = popupHtmlFor(item);
         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 {
             marker,
             tagIds: normalizeTagIds(item.extra?.organizationTagIds),
@@ -507,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) {
@@ -532,6 +747,7 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
     const eventToggleButton = wrapper.querySelector('[data-map-event-toggle="1"]');
     const canFilterByTag = tagButtons.length > 0;
     const canFilterByEvents = !!eventToggleButton;
+    const canToggleEvents = !!(eventToggleButton && eventLayerManager);
 
     const setEventButtonState = (isActive) => {
         if (!eventToggleButton) {
@@ -549,6 +765,26 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
     let activeTagId = null;
     let eventsOnly = false;
 
+    const updateExclusiveButtonAccessibility = () => {
+        tagButtons.forEach((button) => {
+            const isActive = button.getAttribute('aria-pressed') === 'true';
+            button.setAttribute('aria-disabled', isActive ? 'true' : 'false');
+        });
+
+        if (!eventToggleButton) {
+            return;
+        }
+
+        if (!canToggleEvents) {
+            eventToggleButton.setAttribute('aria-disabled', 'true');
+
+            return;
+        }
+
+        const isEventActive = eventToggleButton.getAttribute('aria-pressed') === 'true';
+        eventToggleButton.setAttribute('aria-disabled', isEventActive ? 'true' : 'false');
+    };
+
     const applyFilter = () => {
         if (eventsOnly) {
             organizationMarkerManager.setVisible(false);
@@ -581,14 +817,17 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
 
     tagButtons.forEach((button) => {
         button.addEventListener('click', () => {
+            if (button.getAttribute('aria-disabled') === 'true') {
+                return;
+            }
+
             const clickedTagId = String(button.dataset.mapTagFilter || '').trim();
 
             if (!/^\d+$/.test(clickedTagId)) {
                 return;
             }
 
-            const isActive = button.getAttribute('aria-pressed') === 'true';
-            activeTagId = isActive ? null : clickedTagId;
+            activeTagId = clickedTagId;
             eventsOnly = false;
 
             tagButtons.forEach((otherButton) => {
@@ -597,6 +836,10 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
             });
 
             setEventButtonState(false);
+            updateExclusiveButtonAccessibility();
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
             applyFilter();
         });
     });
@@ -628,12 +871,19 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
 
     if (eventToggleButton && eventLayerManager) {
         eventToggleButton.addEventListener('click', () => {
-            const isActive = eventToggleButton.getAttribute('aria-pressed') === 'true';
-            eventsOnly = !isActive;
+            if (eventToggleButton.getAttribute('aria-disabled') === 'true') {
+                return;
+            }
+
+            eventsOnly = true;
             activeTagId = null;
 
             tagButtons.forEach((button) => setButtonState(button, false));
             setEventButtonState(eventsOnly);
+            updateExclusiveButtonAccessibility();
+            if (typeof closePopup === 'function') {
+                closePopup();
+            }
             applyFilter();
         });
     } else if (eventToggleButton) {
@@ -711,139 +961,21 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
             setButtonState(button, null !== activeTagId && tagId === activeTagId);
         });
         setEventButtonState(eventsOnly);
+        updateExclusiveButtonAccessibility();
     };
 
     applyInitialDisplayMode();
+    updateExclusiveButtonAccessibility();
     applyFilter();
     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,
-        },
-        paint: {
-            'icon-opacity': 1,
-        },
-    });
-
-    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 clusterSpiderfyLayerId = EVENT_CLUSTER_SPIDERFY_LAYER_ID;
     const unclusteredLayerId = EVENT_UNCLUSTERED_LAYER_ID;
-    const spiderfyHitAreaImageId = 'eventmanager-spiderfy-hit-area';
     const features = eventItems.map(toFeature);
 
-    if (!map.hasImage(spiderfyHitAreaImageId)) {
-        map.addImage(spiderfyHitAreaImageId, {
-            width: 1,
-            height: 1,
-            data: new Uint8Array([0, 0, 0, 0]),
-        });
-    }
-
     map.addSource(sourceId, {
         type: 'geojson',
         data: {
@@ -875,25 +1007,10 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
         },
         paint: {
             'icon-opacity': 1,
+            'icon-translate': [0, 4],
             'text-color': '#FFFFFF',
             'text-opacity': 1,
-        },
-    });
-
-    map.addLayer({
-        id: clusterSpiderfyLayerId,
-        type: 'symbol',
-        source: sourceId,
-        filter: ['has', 'point_count'],
-        layout: {
-            'icon-image': spiderfyHitAreaImageId,
-            'icon-size': 36,
-            'icon-anchor': 'bottom',
-            'icon-offset': [0, -1.0],
-            'icon-allow-overlap': true,
-        },
-        paint: {
-            'icon-opacity': 0,
+            'text-translate': [0, 4],
         },
     });
 
@@ -908,9 +1025,11 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
             '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],
         },
     });
 
@@ -928,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) => {
@@ -1016,7 +1134,7 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
                 },
                 spiderLeavesPaint: {
                     'icon-opacity': 1,
-                    'icon-translate': [0, 8],
+                    'icon-translate': [-3, 9],
                 },
                 onLeafClick: (feature, spiderEvent) => {
                     const clickCoordinates = spiderEvent?.lngLat
@@ -1048,14 +1166,6 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
         map.getCanvas().style.cursor = '';
     });
 
-    const setLayerLayoutVisibility = (layerId, isVisible) => {
-        if (!map.getLayer(layerId)) {
-            return;
-        }
-
-        map.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
-    };
-
     const fadeLayerOpacity = (layerId, property, value, duration = EVENT_FADE_DURATION_MS) => {
         if (!map.getLayer(layerId)) {
             return;
@@ -1067,14 +1177,31 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
 
     const eventLayerIds = [
         clusterLayerId,
-        clusterSpiderfyLayerId,
         unclusteredLayerId,
     ];
+    const clusterFilter = ['has', 'point_count'];
+    const unclusteredFilter = ['!', ['has', 'point_count']];
+    const hiddenFilter = ['has', '__eventmanager_hidden__'];
+    let hideLayersTimeoutId = null;
+
+    const setLayerFilter = (layerId, filter) => {
+        if (!map.getLayer(layerId)) {
+            return;
+        }
+
+        map.setFilter(layerId, filter);
+    };
 
     return {
         setVisible: (isVisible) => {
             if (isVisible) {
-                eventLayerIds.forEach((layerId) => setLayerLayoutVisibility(layerId, true));
+                if (null !== hideLayersTimeoutId) {
+                    window.clearTimeout(hideLayersTimeoutId);
+                    hideLayersTimeoutId = null;
+                }
+
+                setLayerFilter(clusterLayerId, clusterFilter);
+                setLayerFilter(unclusteredLayerId, unclusteredFilter);
 
                 fadeLayerOpacity(clusterLayerId, 'icon-opacity', 1);
                 fadeLayerOpacity(clusterLayerId, 'text-opacity', 1);
@@ -1083,16 +1210,26 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
                 return;
             }
 
-            if (spiderfyInstance && typeof spiderfyInstance.unspiderfyAll === 'function') {
-                spiderfyInstance.unspiderfyAll();
+            if (spiderfyInstance) {
+                if (typeof spiderfyInstance._clearSpiderifiedCluster === 'function') {
+                    spiderfyInstance._clearSpiderifiedCluster();
+                } else if (typeof spiderfyInstance.unspiderfyAll === 'function') {
+                    spiderfyInstance.unspiderfyAll();
+                }
+            }
+
+            if (typeof closePopup === 'function') {
+                closePopup();
             }
 
             fadeLayerOpacity(clusterLayerId, 'icon-opacity', 0);
             fadeLayerOpacity(clusterLayerId, 'text-opacity', 0);
             fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 0);
 
-            window.setTimeout(() => {
-                eventLayerIds.forEach((layerId) => setLayerLayoutVisibility(layerId, false));
+            hideLayersTimeoutId = window.setTimeout(() => {
+                setLayerFilter(clusterLayerId, hiddenFilter);
+                setLayerFilter(unclusteredLayerId, hiddenFilter);
+                hideLayersTimeoutId = null;
             }, EVENT_FADE_DURATION_MS + 10);
         },
     };
@@ -1109,8 +1246,12 @@ const initSingleMap = (container) => {
     const customLat = parseCoordinate(container.dataset.mapCenterLat);
     const customLng = parseCoordinate(container.dataset.mapCenterLng);
     const customZoom = Number(container.dataset.mapCenterZoom);
+    const customPitch = Number(container.dataset.mapPitch);
     const eventColor = normalizeHexColor(container.dataset.mapEventColor, DEFAULT_EVENT_COLOR);
     const hasCustomCenter = null !== customLat && null !== customLng;
+    const initialPitch = Number.isFinite(customPitch)
+        ? Math.max(0, Math.min(85, customPitch))
+        : 0;
 
     let initialCenter = DEFAULT_CENTER;
     let initialZoom = DEFAULT_ZOOM;
@@ -1126,7 +1267,7 @@ const initSingleMap = (container) => {
     container.dataset.mapInitialized = '1';
 
     ensureDependencies()
-        .then(() => {
+        .then(async () => {
             if (typeof maplibregl === 'undefined') {
                 return;
             }
@@ -1137,12 +1278,13 @@ 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,
                 zoom: initialZoom,
-                pitch: 0,
+                pitch: initialPitch,
                 bearing: 0,
                 center: initialCenter,
                 transformRequest: (url, resourceType) => {
@@ -1158,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);
             });
@@ -1204,9 +1384,12 @@ const initSingleMap = (container) => {
             map.on('load', async () => {
                 applyDefaultProjection(map);
 
-                const organizationItems = items.filter((item) => item.type === 'organisation');
-                const locationItems = items.filter((item) => item.type === 'location');
-                const eventItems = items.filter((item) => item.type === 'event');
+                const organizationItems = items
+                    .filter((item) => item.type === 'organisation')
+                    .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
+                const eventItems = items
+                    .filter((item) => item.type === 'event')
+                    .sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
                 const allCoordinates = items.map((item) => [item.longitude, item.latitude]);
                 const organizationColor = normalizeHexColor(
                     container.dataset.mapOrganizationColor,
@@ -1224,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);

src/Controller/Frontend/EventMapController.php

@@ -8,6 +8,7 @@ use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController
 use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
 use Contao\CoreBundle\Twig\FragmentTemplate;
 use Contao\ModuleModel;
+use Contao\PageModel;
 use Contao\StringUtil;
 use MummertMedia\EventManagerBundle\Service\MapModuleDataProvider;
 use Symfony\Component\HttpFoundation\Request;
@@ -44,9 +45,20 @@ class EventMapController extends AbstractFrontendModuleController
             array_map('intval', StringUtil::deserialize($model->organizationTypeTags ?? null, true)),
             static fn (int $tagId): bool => $tagId > 0,
         )));
+        $availableOrganizationTags = $this->mapModuleDataProvider->getOrganizationTags();
+        $availableOrganizationTagIds = array_map(
+            static fn (array $tag): int => (int) ($tag['id'] ?? 0),
+            $availableOrganizationTags,
+        );
+        $selectedOrganizationTagIds = [] === $selectedOrganizationTagIds
+            ? []
+            : array_values(array_intersect($selectedOrganizationTagIds, $availableOrganizationTagIds));
+        $organizationListPageId = (int) ($model->mapOrganizationListPage ?? 0);
+        $organizationListBaseUrl = $this->buildOrganizationListBaseUrl($organizationListPageId, $request);
         $initialDisplay = (string) ($model->mapInitialDisplay ?? self::DEFAULT_INITIAL_DISPLAY);
         $initialOrganizationTagId = (int) ($model->mapInitialOrganizationTagId ?? 0);
         $centerMode = (string) ($model->mapCenterMode ?? self::DEFAULT_CENTER_MODE);
+        $mapPitch = $this->normalizePitch($model->mapPitch ?? 0);
         $eventColor = $this->normalizeHexColor((string) ($model->mapEventColor ?? self::DEFAULT_EVENT_COLOR));
         $organizationColor = $this->normalizeHexColor((string) ($model->mapOrganizationColor ?? $eventColor), $eventColor);
 
@@ -77,8 +89,9 @@ class EventMapController extends AbstractFrontendModuleController
         $template->set('mapCenterLat', trim((string) ($model->mapCenterLat ?? '')));
         $template->set('mapCenterLng', trim((string) ($model->mapCenterLng ?? '')));
         $template->set('mapCenterZoom', (int) ($model->mapCenterZoom ?? 12));
+        $template->set('mapPitch', $mapPitch);
         $template->set('mapItemsJson', json_encode(
-            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds),
+            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds, $organizationListBaseUrl),
             \JSON_HEX_TAG | \JSON_HEX_AMP | \JSON_HEX_APOS | \JSON_HEX_QUOT | \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR,
         ));
         $template->set('mapOrganizationTags', $this->mapModuleDataProvider->getOrganizationTags($selectedOrganizationTagIds));
@@ -118,4 +131,48 @@ class EventMapController extends AbstractFrontendModuleController
 
         return $fallback;
     }
+
+    private function normalizePitch(mixed $value): int
+    {
+        if (!is_scalar($value)) {
+            return 0;
+        }
+
+        $parsedPitch = (int) round((float) str_replace(',', '.', (string) $value));
+
+        if ($parsedPitch < 0) {
+            return 0;
+        }
+
+        if ($parsedPitch > 85) {
+            return 85;
+        }
+
+        return $parsedPitch;
+    }
+
+    private function buildOrganizationListBaseUrl(int $pageId, Request $request): string
+    {
+        if ($pageId <= 0) {
+            return '';
+        }
+
+        $pageModel = PageModel::findById($pageId);
+
+        if (null === $pageModel) {
+            return '';
+        }
+
+        $frontendUrl = trim((string) $pageModel->getFrontendUrl());
+
+        if ('' === $frontendUrl) {
+            return '';
+        }
+
+        if (preg_match('#^https?://#i', $frontendUrl)) {
+            return $frontendUrl;
+        }
+
+        return rtrim($request->getSchemeAndHttpHost(), '/').'/'.ltrim($frontendUrl, '/');
+    }
 }

src/Service/MapModuleDataProvider.php

@@ -4,12 +4,15 @@ declare(strict_types=1);
 
 namespace MummertMedia\EventManagerBundle\Service;
 
-use Contao\Config;
-use Contao\Date;
+use Contao\CalendarEventsModel;
+use Contao\CoreBundle\Framework\ContaoFramework;
+use Contao\CoreBundle\Routing\ContentUrlGenerator;
 use Doctrine\DBAL\ArrayParameterType;
 use Doctrine\DBAL\Connection;
 use Doctrine\DBAL\ParameterType;
 use Doctrine\DBAL\Query\QueryBuilder;
+use Symfony\Component\Routing\Exception\ExceptionInterface;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 class MapModuleDataProvider
 {
@@ -20,13 +23,15 @@ class MapModuleDataProvider
 
     public function __construct(
         private readonly Connection $connection,
+        private readonly ContaoFramework $framework,
+        private readonly ContentUrlGenerator $urlGenerator,
     ) {
     }
 
     /**
         * @return list<array{type:string,markerType:string,id:int,title:string,latitude:float,longitude:float,extra:array<string,mixed>}>
      */
-    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = []): array
+    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = [], string $organizationListBaseUrl = ''): array
     {
         if (!$includeOrganizations && !$includeEvents) {
             return [];
@@ -97,37 +102,13 @@ class MapModuleDataProvider
                     'extra' => [
                         'organizationTagIds' => $tagData['ids'],
                         'organizationTagLabels' => $tagData['labels'],
+                        'detailUrl' => $this->buildOrganizationDetailUrl($organizationListBaseUrl, $id),
                     ],
                 ];
             }
         }
 
         if ($includeEvents) {
-            foreach ($this->fetchLocationRows($locationTable, $locationGeoColumns) as $row) {
-                $id = (int) ($row['id'] ?? 0);
-
-                if ($id <= 0 || isset($seen['location'][$id])) {
-                    continue;
-                }
-
-                $coords = $this->extractCoordinates($row['latitude'] ?? null, $row['longitude'] ?? null);
-
-                if (null === $coords) {
-                    continue;
-                }
-
-                $seen['location'][$id] = true;
-                $items[] = [
-                    'type' => 'location',
-                    'markerType' => 'location',
-                    'id' => $id,
-                    'title' => trim((string) ($row['title'] ?? '')),
-                    'latitude' => $coords['latitude'],
-                    'longitude' => $coords['longitude'],
-                    'extra' => [],
-                ];
-            }
-
             foreach ($this->fetchEventRows($locationTable, $locationGeoColumns) as $row) {
                 $id = (int) ($row['event_id'] ?? 0);
 
@@ -151,7 +132,12 @@ class MapModuleDataProvider
                     'longitude' => $coords['longitude'],
                     'extra' => [
                         'locationTitle' => trim((string) ($row['location_title'] ?? '')),
-                        'startDate' => $this->formatStartDate((int) ($row['startDate'] ?? 0)),
+                        'startDate' => $this->formatStartDateTime(
+                            (int) ($row['startDate'] ?? 0),
+                            (string) ($row['addTime'] ?? ''),
+                            (int) ($row['startTime'] ?? 0),
+                        ),
+                        'detailUrl' => $this->resolveEventDetailUrl($id),
                     ],
                 ];
             }
@@ -165,7 +151,7 @@ class MapModuleDataProvider
      */
     public function getOrganizationTags(array $selectedTagIds = []): array
     {
-        if (!$this->tableExists('tl_tags')) {
+        if (!$this->tableExists('tl_tags') || !$this->tableExists('tl_tags_rel')) {
             return [];
         }
 
@@ -183,8 +169,13 @@ class MapModuleDataProvider
 
         $qb = $this->connection->createQueryBuilder();
         $qb
-            ->select('t.id', sprintf('t.%s AS label', $labelColumn))
-            ->from('tl_tags', 't')
+            ->select('DISTINCT t.id', sprintf('t.%s AS label', $labelColumn))
+            ->from('tl_tags_rel', 'r')
+            ->innerJoin('r', 'tl_tags', 't', 't.id = r.tag_id')
+            ->andWhere('r.ptable = :organization_ptable')
+            ->andWhere('(r.field = :organization_field OR r.field IS NULL OR r.field = \'\')')
+            ->setParameter('organization_ptable', 'tl_organization')
+            ->setParameter('organization_field', 'tags')
             ->orderBy(sprintf('t.%s', $labelColumn), 'ASC');
 
         if ([] !== $selectedTagIds) {
@@ -231,23 +222,36 @@ class MapModuleDataProvider
             return [];
         }
 
+        $tagColumns = $this->getColumnMap('tl_tags');
+        $tagLabelColumn = isset($tagColumns['title']) ? 'title' : (isset($tagColumns['tag']) ? 'tag' : null);
+
+        if (null === $tagLabelColumn) {
+            return [];
+        }
+
         $rows = $this->connection->executeQuery(
-            'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+            sprintf(
+                'SELECT r.pid AS organization_id, r.tag_id, t.%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 = ? AND r.pid IN (?)
              ORDER BY r.pid ASC, r.tag_id ASC',
+                $tagLabelColumn,
+            ),
             ['tl_organization', 'tags', $organizationIds],
             [ParameterType::STRING, ParameterType::STRING, ArrayParameterType::INTEGER],
         )->fetchAllAssociative();
 
         if ([] === $rows) {
             $rows = $this->connection->executeQuery(
-                'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+                sprintf(
+                    'SELECT r.pid AS organization_id, r.tag_id, t.%s AS label
                  FROM tl_tags_rel r
                  INNER JOIN tl_tags t ON t.id = r.tag_id
                  WHERE r.ptable = ? AND r.pid IN (?)
                  ORDER BY r.pid ASC, r.tag_id ASC',
+                    $tagLabelColumn,
+                ),
                 ['tl_organization', $organizationIds],
                 [ParameterType::STRING, ArrayParameterType::INTEGER],
             )->fetchAllAssociative();
@@ -261,13 +265,16 @@ class MapModuleDataProvider
             $tagId = (int) ($row['tag_id'] ?? 0);
             $label = trim((string) ($row['label'] ?? ''));
 
-            if ($organizationId <= 0 || $tagId <= 0 || '' === $label || isset($seen[$organizationId][$tagId])) {
+            if ($organizationId <= 0 || $tagId <= 0 || isset($seen[$organizationId][$tagId])) {
                 continue;
             }
 
             $seen[$organizationId][$tagId] = true;
             $map[$organizationId]['ids'][] = (string) $tagId;
-            $map[$organizationId]['labels'][] = $label;
+
+            if ('' !== $label) {
+                $map[$organizationId]['labels'][] = $label;
+            }
         }
 
         foreach ($map as $organizationId => $tagData) {
@@ -340,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>>
      */
@@ -376,6 +365,8 @@ class MapModuleDataProvider
                 'e.id AS event_id',
                 'e.title AS event_title',
                 'e.startDate',
+                'e.addTime',
+                'e.startTime',
                 'l.title AS location_title',
                 sprintf('l.%s AS latitude', $locationGeoColumns['latitude']),
                 sprintf('l.%s AS longitude', $locationGeoColumns['longitude'])
@@ -454,15 +445,53 @@ class MapModuleDataProvider
         ];
     }
 
-    private function formatStartDate(int $timestamp): string
+    private function formatStartDateTime(int $startDate, string $addTime, int $startTime): string
     {
-        if ($timestamp <= 0) {
+        if ($startDate <= 0) {
             return '';
         }
 
-        $format = (string) Config::get('dateFormat');
+        $formattedDate = date('d.m.Y', $startDate);
 
-        return Date::parse('' !== $format ? $format : 'd.m.Y', $timestamp);
+        if ('1' !== $addTime || $startTime <= 0) {
+            return $formattedDate;
+        }
+
+        return sprintf('%s %s Uhr', $formattedDate, date('H:i', $startTime));
+    }
+
+    private function resolveEventDetailUrl(int $eventId): string
+    {
+        if ($eventId <= 0) {
+            return '';
+        }
+
+        $eventModel = $this->framework
+            ->getAdapter(CalendarEventsModel::class)
+            ->findById($eventId);
+
+        if (null === $eventModel) {
+            return '';
+        }
+
+        try {
+            return (string) $this->urlGenerator->generate($eventModel, [], UrlGeneratorInterface::ABSOLUTE_PATH);
+        } catch (ExceptionInterface) {
+            return '';
+        }
+    }
+
+    private function buildOrganizationDetailUrl(string $baseUrl, int $organizationId): string
+    {
+        $normalizedBaseUrl = trim($baseUrl);
+
+        if ('' === $normalizedBaseUrl || $organizationId <= 0) {
+            return '';
+        }
+
+        $separator = str_contains($normalizedBaseUrl, '?') ? '&' : '?';
+
+        return sprintf('%s%sshow=%d', $normalizedBaseUrl, $separator, $organizationId);
     }
 
     /**