Fix spiderfy reliability after event toggle

contao/dca/tl_module.php

@@ -9,7 +9,7 @@ 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,mapShowExternalOrganizations,mapShowEvents,mapEventColor,mapOrganizationColorScheme,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,organizationTypeTags,mapShowExternalOrganizations,mapShowEvents,mapInitialDisplay,mapEventColor,mapOrganizationColor,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';
 
@@ -161,7 +161,9 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
 ];
 
 $GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'][] = 'mapCenterMode';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'][] = 'mapInitialDisplay';
 $GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapCenterMode_custom'] = 'mapCenterLat,mapCenterLng,mapCenterZoom';
+$GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapInitialDisplay_organization_tag'] = 'mapInitialOrganizationTagId';
 
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'],
@@ -187,6 +189,38 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapShowEvents'] = [
     'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
 ];
 
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapInitialDisplay'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options' => ['random', 'events', 'organization_tag'],
+    'reference' => &$GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay_options'],
+    'eval' => ['mandatory' => true, 'submitOnChange' => true, 'tl_class' => 'w50', 'includeBlankOption' => false],
+    'sql' => ['type' => 'string', 'length' => 32, 'default' => 'random'],
+];
+
+$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;
+    },
+    'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
+];
+
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapEventColor'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_module']['mapEventColor'],
     'exclude' => true,
@@ -195,12 +229,12 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapEventColor'] = [
     'sql' => ['type' => 'string', 'length' => 7, 'default' => '#BC5067'],
 ];
 
-$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationColorScheme'] = [
-    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'],
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationColor'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColor'],
     'exclude' => true,
     'inputType' => 'text',
-    'eval' => ['maxlength' => 1024, 'tl_class' => 'clr long'],
-    'sql' => ['type' => 'string', 'length' => 1024, 'default' => ''],
+    'eval' => ['maxlength' => 7, 'rgxp' => 'hexcolor', 'colorpicker' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 7, 'default' => '#BC5067'],
 ];
 
 $GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterMode'] = [

contao/languages/de/tl_module.php

@@ -16,8 +16,15 @@ $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltung
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Organisationen anzeigen', 'Wenn aktiviert, werden Organisations-Marker auf der Karte dargestellt.'];
 $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.'];
+$GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay_options'] = [
+	'random' => 'Zufällig',
+	'events' => 'Veranstaltungen',
+	'organization_tag' => 'Organisation mit Tag',
+];
+$GLOBALS['TL_LANG']['tl_module']['mapInitialOrganizationTagId'] = ['Initialer Organisationstag', 'Wählen Sie den Tag, der initial angezeigt werden soll (nur bei „Organisation mit Tag“).'];
 $GLOBALS['TL_LANG']['tl_module']['mapEventColor'] = ['Event-Farbe (Kreise/Linien)', 'Farbe für Event-Cluster, Event-Punkte und Spiderfy-Verbindungslinien (Hex, z. B. #BC5067).'];
-$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'] = ['Farbschema (Organisationstypen)', 'Kommagetrennte Farben für Organisationstypen/Tags, z. B. ff6600,77dd33,ff99bb. Markerfarbe richtet sich nach dem ersten Tag.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColor'] = ['Organisationsfarbe', 'Einheitliche Farbe für alle Organisations-Marker (Hex, z. B. #BC5067).'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode'] = ['Karten-Zentrierung', 'Wählen Sie, ob die Karte anhand der Marker oder mit festen Koordinaten zentriert werden soll.'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
 	'markers' => 'Anhand der Marker (alle Marker sichtbar)',

contao/languages/en/tl_module.php

@@ -16,8 +16,15 @@ $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'O
 $GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Show organizations', 'If enabled, organization markers are rendered on the map.'];
 $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.'];
+$GLOBALS['TL_LANG']['tl_module']['mapInitialDisplay_options'] = [
+	'random' => 'Random',
+	'events' => 'Events',
+	'organization_tag' => 'Organization with tag',
+];
+$GLOBALS['TL_LANG']['tl_module']['mapInitialOrganizationTagId'] = ['Initial organization tag', 'Select the tag to be initially shown (only for "Organization with tag").'];
 $GLOBALS['TL_LANG']['tl_module']['mapEventColor'] = ['Event color (circles/lines)', 'Color for event clusters, event points and spiderfy connector lines (hex, e.g. #BC5067).'];
-$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'] = ['Color scheme (organization types)', 'Comma-separated colors for organization type tags, e.g. ff6600,77dd33,ff99bb. Marker color follows the first tag.'];
+$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColor'] = ['Organization color', 'Unified color for all organization markers (hex, e.g. #BC5067).'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode'] = ['Map centering', 'Choose whether the map should center by markers or fixed coordinates.'];
 $GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
 	'markers' => 'By markers (fit all visible markers)',

contao/templates/frontend/event_map.html.twig

@@ -1,4 +1,9 @@
 {% set tags = mapOrganizationTags|default([]) %}
+{% set showOrganizations = mapShowOrganizations|default(false) %}
+{% set showEvents = mapShowEvents|default(false) %}
+{% set showTagButtons = showOrganizations and tags is iterable and tags|length > 0 %}
+{% set showEventButton = showOrganizations and showEvents %}
+{% set showFilterButtons = showTagButtons or showEventButton %}
 
 <section
     id="{{ mapFilterWrapperId|e('html_attr') }}"
@@ -7,15 +12,18 @@
     role="region"
     aria-label="Kartenfilter"
 >
-    <button
-        type="button"
-        class="eventmanager-map-filter__toggle"
-        data-map-filter-toggle="1"
-        aria-expanded="true"
-        aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
-    >
-        Bereiche ausblenden
-    </button>
+    {% if showFilterButtons %}
+        <button
+            type="button"
+            class="eventmanager-map-filter__toggle is-expanded"
+            data-map-filter-toggle="1"
+            aria-expanded="true"
+            aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
+        >
+            <span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--expand">Filter einblenden</span>
+            <span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--collapse">Filter ausblenden</span>
+        </button>
+    {% endif %}
 
     <div
         id="{{ mapFilterGroupId|e('html_attr') }}"
@@ -23,29 +31,38 @@
         role="group"
         aria-label="Organisationstypen"
     >
-        {% if tags is iterable and tags|length > 0 %}
+        {% if showTagButtons %}
             {% for tag in tags %}
                 <button
                     type="button"
-                    class="eventmanager-map-filter__tag is-active"
+                    class="eventmanager-map-filter__tag"
                     data-map-tag-filter="{{ tag.id|e('html_attr') }}"
-                    aria-pressed="true"
+                    aria-pressed="false"
                 >{{ tag.label|e }}</button>
             {% endfor %}
         {% endif %}
+        {% if showEventButton %}
+            <button
+                type="button"
+                class="eventmanager-map-filter__tag"
+                data-map-event-toggle="1"
+                aria-pressed="false"
+            >Veranstaltungen</button>
+        {% endif %}
+
         <button
             type="button"
-            class="eventmanager-map-filter__tag is-active"
-            data-map-event-toggle="1"
+            class="eventmanager-map-filter__tag"
+            data-map-style-mode="street"
             aria-pressed="true"
-        >Veranstaltungen</button>
-    </div>
+        >Straße</button>
 
-    <div class="eventmanager-map-filter__actions">
-        <button type="button" data-map-filter-action="all">Alle auswählen</button>
-        <button type="button" data-map-filter-action="none">Alle abwählen</button>
-        <button type="button" data-map-style-mode="street" aria-pressed="true">Straße</button>
-        <button type="button" data-map-style-mode="satellite" aria-pressed="false">Satellit</button>
+        <button
+            type="button"
+            class="eventmanager-map-filter__tag"
+            data-map-style-mode="satellite"
+            aria-pressed="false"
+        >Satellit</button>
     </div>
 </section>
 
@@ -57,7 +74,9 @@
     data-map-style="{{ mapStyleUrl|e('html_attr') }}"
     data-map-data-id="{{ mapDataElementId|e('html_attr') }}"
     data-map-event-color="{{ mapEventColor|default('#BC5067')|e('html_attr') }}"
-    data-map-organization-colors="{{ mapOrganizationColorScheme|default('')|e('html_attr') }}"
+    data-map-organization-color="{{ mapOrganizationColor|default('#BC5067')|e('html_attr') }}"
+    data-map-initial-display="{{ mapInitialDisplay|default('all')|e('html_attr') }}"
+    data-map-initial-tag-id="{{ mapInitialTagId|default(0)|e('html_attr') }}"
     data-map-center-mode="{{ mapCenterMode|default('markers')|e('html_attr') }}"
     data-map-center-lat="{{ mapCenterLat|default('')|e('html_attr') }}"
     data-map-center-lng="{{ mapCenterLng|default('')|e('html_attr') }}"
@@ -71,8 +90,7 @@
         margin-bottom: .75rem;
     }
 
-    .eventmanager-map-filter__group,
-    .eventmanager-map-filter__actions {
+    .eventmanager-map-filter__group {
         display: flex;
         flex-wrap: wrap;
         gap: .5rem;
@@ -89,4 +107,4 @@
 </style>
 
 <script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
-<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js"></script>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226g"></script>

public/assets/map-module.js

@@ -199,70 +199,6 @@ const normalizeHexColor = (value, fallback = DEFAULT_EVENT_COLOR) => {
     return fallback;
 };
 
-const normalizeHexColorOrNull = (value) => {
-    const fallback = '__INVALID__';
-    const normalized = normalizeHexColor(value, fallback);
-
-    return normalized === fallback ? null : normalized;
-};
-
-const parseOrganizationColorScheme = (value) => {
-    const raw = String(value || '').trim();
-
-    if ('' === raw) {
-        return [];
-    }
-
-    return raw
-        .split(',')
-        .map((part) => normalizeHexColorOrNull(part))
-        .filter((part) => null !== part);
-};
-
-const buildOrganizationTagColorMap = (container, colors, organizationItems) => {
-    if (!colors.length) {
-        return {
-            byTagId: {},
-            fallbackColor: null,
-        };
-    }
-
-    const fallbackColor = colors[0];
-    const wrapperId = container.dataset.mapFilterWrapperId || '';
-    const wrapper = wrapperId ? document.getElementById(wrapperId) : null;
-    let orderedTagIds = [];
-
-    if (wrapper) {
-        orderedTagIds = Array.from(wrapper.querySelectorAll('[data-map-tag-filter]'))
-            .map((button) => String(button.dataset.mapTagFilter || '').trim())
-            .filter((value) => /^\d+$/.test(value));
-    }
-
-    if (!orderedTagIds.length) {
-        const seen = new Set();
-
-        organizationItems.forEach((item) => {
-            const firstTagId = String(item?.extra?.organizationTagIds?.[0] || '').trim();
-
-            if (/^\d+$/.test(firstTagId) && !seen.has(firstTagId)) {
-                seen.add(firstTagId);
-                orderedTagIds.push(firstTagId);
-            }
-        });
-    }
-
-    const byTagId = {};
-
-    orderedTagIds.forEach((tagId, index) => {
-        byTagId[tagId] = colors[index] || fallbackColor;
-    });
-
-    return {
-        byTagId,
-        fallbackColor,
-    };
-};
-
 const applyDefaultProjection = (map) => {
     if (!map || typeof map.setProjection !== 'function') {
         return;
@@ -409,6 +345,65 @@ const normalizeTagIds = (value) => {
     return Array.from(unique.values());
 };
 
+const getMarkerImageId = (prefix, color) => `${prefix}-${String(color || '').replace('#', '').toLowerCase() || 'default'}`;
+const SVG_MARKER_WIDTH = 68;
+const SVG_MARKER_HEIGHT = 104;
+
+const createPinSvgDataUrl = (color, options = {}) => {
+    const withInnerDot = options.withInnerDot !== false;
+    const innerDotMarkup = withInnerDot
+        ? '<g transform="translate(8.0, 8.0)"><circle fill="#000000" opacity="0.25" cx="5.5" cy="5.5" r="5.4999962"></circle><circle fill="#FFFFFF" cx="5.5" cy="5.5" r="5.4999962"></circle></g>'
+        : '';
+
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" display="block" width="27" height="41" viewBox="0 0 27 41"><g fill-rule="nonzero"><g transform="translate(3.0, 29.0)" fill="#000000"><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="9.5" ry="4.77275007"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="8.5" ry="4.29549936"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="7.5" ry="3.81822308"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="6.5" ry="3.34094679"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="5.5" ry="2.86367051"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="4.5" ry="2.38636864"></ellipse></g><g fill="${color}"><path d="M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"></path></g><g opacity="0.25" fill="#000000"><path d="M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"></path></g>${innerDotMarkup}</g></svg>`;
+
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+};
+
+const loadSvgImageData = (dataUrl) => new Promise((resolve, reject) => {
+    const image = new Image();
+
+    image.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = SVG_MARKER_WIDTH;
+        canvas.height = SVG_MARKER_HEIGHT;
+
+        const context = canvas.getContext('2d');
+
+        if (!context) {
+            reject(new Error('Failed to get canvas context for SVG marker'));
+
+            return;
+        }
+
+        context.clearRect(0, 0, SVG_MARKER_WIDTH, SVG_MARKER_HEIGHT);
+        context.drawImage(image, 0, 0, SVG_MARKER_WIDTH, SVG_MARKER_HEIGHT);
+        resolve(context.getImageData(0, 0, SVG_MARKER_WIDTH, SVG_MARKER_HEIGHT));
+    };
+
+    image.onerror = () => reject(new Error('Failed to load SVG marker image'));
+    image.src = dataUrl;
+});
+
+const ensureMarkerImage = (map, color, prefix = 'eventmanager-marker', options = {}) => {
+    const imageId = getMarkerImageId(prefix, color);
+
+    if (map.hasImage(imageId)) {
+        return Promise.resolve(imageId);
+    }
+
+    const dataUrl = createPinSvgDataUrl(color, options);
+
+    return loadSvgImageData(dataUrl)
+        .then((imageData) => {
+            if (!map.hasImage(imageId)) {
+                map.addImage(imageId, imageData, { pixelRatio: 2 });
+            }
+
+            return imageId;
+        });
+};
+
 const popupHtmlFor = (item) => {
     if (item.type === 'event') {
         const locationTitle = escapeHtml(item.extra.locationTitle || '');
@@ -441,21 +436,18 @@ const toFeature = (item) => ({
     },
 });
 
-const initOrganizationMarkers = (map, organizationItems, organizationTagColorMap) => {
+const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
     if (!organizationItems.length) {
         return {
-            setActiveTagIds: () => {},
+            setOnlyTagId: () => {},
             setAllVisible: () => {},
+            setVisible: () => {},
         };
     }
 
     const markerEntries = organizationItems.map((item) => {
         const popupHtml = popupHtmlFor(item);
-        const primaryTagId = String(item?.extra?.organizationTagIds?.[0] || '').trim();
-        const configuredColor = /^\d+$/.test(primaryTagId)
-            ? (organizationTagColorMap?.byTagId?.[primaryTagId] || organizationTagColorMap?.fallbackColor || null)
-            : null;
-        const marker = new maplibregl.Marker(configuredColor ? { color: configuredColor } : undefined)
+        const marker = new maplibregl.Marker(organizationColor ? { color: organizationColor } : undefined)
             .setLngLat([item.longitude, item.latitude]);
 
         if (popupHtml) {
@@ -471,8 +463,9 @@ const initOrganizationMarkers = (map, organizationItems, organizationTagColorMap
     });
 
     return {
-        setActiveTagIds: (activeTagIds) => {
-            const activeSet = new Set(normalizeTagIds(activeTagIds));
+        setOnlyTagId: (activeTagId) => {
+            const normalizedTagId = String(activeTagId ?? '').trim();
+            const hasActiveTag = /^\d+$/.test(normalizedTagId);
 
             markerEntries.forEach((entry) => {
                 const markerElement = entry.marker.getElement();
@@ -482,8 +475,9 @@ const initOrganizationMarkers = (map, organizationItems, organizationTagColorMap
                 }
 
                 const hasTags = entry.tagIds.length > 0;
-                const isVisible = !hasTags
-                    || entry.tagIds.some((tagId) => activeSet.has(tagId));
+                const isVisible = !hasActiveTag
+                    || !hasTags
+                    || entry.tagIds.includes(normalizedTagId);
 
                 markerElement.style.display = isVisible ? '' : 'none';
             });
@@ -499,6 +493,17 @@ const initOrganizationMarkers = (map, organizationItems, organizationTagColorMap
                 markerElement.style.display = '';
             });
         },
+        setVisible: (isVisible) => {
+            markerEntries.forEach((entry) => {
+                const markerElement = entry.marker.getElement();
+
+                if (!markerElement) {
+                    return;
+                }
+
+                markerElement.style.display = isVisible ? '' : 'none';
+            });
+        },
     };
 };
 
@@ -516,11 +521,8 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
     }
 
     const tagButtons = Array.from(wrapper.querySelectorAll('[data-map-tag-filter]'));
-
-    const collectActiveTagIds = () => tagButtons
-        .filter((button) => button.getAttribute('aria-pressed') === 'true')
-        .map((button) => String(button.dataset.mapTagFilter || '').trim())
-        .filter((value) => /^\d+$/.test(value));
+    const initialDisplayModeRaw = String(container.dataset.mapInitialDisplay || '').trim();
+    const initialTagIdRaw = String(container.dataset.mapInitialTagId || '').trim();
 
     const setButtonState = (button, isActive) => {
         button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
@@ -528,6 +530,9 @@ 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) {
@@ -538,51 +543,89 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
         eventToggleButton.classList.toggle('is-active', isActive);
     };
 
-    const applyFilter = () => {
-        if (!tagButtons.length) {
-            organizationMarkerManager.setAllVisible();
+    const availableTagIds = tagButtons
+        .map((button) => String(button.dataset.mapTagFilter || '').trim())
+        .filter((tagId) => /^\d+$/.test(tagId));
+
+    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;
         }
 
-        organizationMarkerManager.setActiveTagIds(collectActiveTagIds());
+        const isEventActive = eventToggleButton.getAttribute('aria-pressed') === 'true';
+        eventToggleButton.setAttribute('aria-disabled', isEventActive ? 'true' : 'false');
+    };
+
+    const applyFilter = () => {
+        if (eventsOnly) {
+            organizationMarkerManager.setVisible(false);
+
+            if (eventLayerManager) {
+                eventLayerManager.setVisible(true);
+            }
+
+            return;
+        }
+
+        organizationMarkerManager.setVisible(true);
+
+        if (activeTagId) {
+            organizationMarkerManager.setOnlyTagId(activeTagId);
+
+            if (eventLayerManager) {
+                eventLayerManager.setVisible(false);
+            }
+
+            return;
+        }
+
+        organizationMarkerManager.setAllVisible();
+
+        if (eventLayerManager) {
+            eventLayerManager.setVisible(true);
+        }
     };
 
     tagButtons.forEach((button) => {
         button.addEventListener('click', () => {
-            const isActive = button.getAttribute('aria-pressed') === 'true';
-            setButtonState(button, !isActive);
+            if (button.getAttribute('aria-disabled') === 'true') {
+                return;
+            }
+
+            const clickedTagId = String(button.dataset.mapTagFilter || '').trim();
+
+            if (!/^\d+$/.test(clickedTagId)) {
+                return;
+            }
+
+            activeTagId = clickedTagId;
+            eventsOnly = false;
+
+            tagButtons.forEach((otherButton) => {
+                const otherTagId = String(otherButton.dataset.mapTagFilter || '').trim();
+                setButtonState(otherButton, !!activeTagId && otherTagId === activeTagId);
+            });
+
+            setEventButtonState(false);
+            updateExclusiveButtonAccessibility();
             applyFilter();
         });
     });
 
-    const actionAll = wrapper.querySelector('[data-map-filter-action="all"]');
-    const actionNone = wrapper.querySelector('[data-map-filter-action="none"]');
-
-    if (actionAll) {
-        actionAll.addEventListener('click', () => {
-            tagButtons.forEach((button) => setButtonState(button, true));
-            applyFilter();
-
-            if (eventLayerManager) {
-                setEventButtonState(true);
-                eventLayerManager.setVisible(true);
-            }
-        });
-    }
-
-    if (actionNone) {
-        actionNone.addEventListener('click', () => {
-            tagButtons.forEach((button) => setButtonState(button, false));
-            applyFilter();
-
-            if (eventLayerManager) {
-                setEventButtonState(false);
-                eventLayerManager.setVisible(false);
-            }
-        });
-    }
-
     const toggleButton = wrapper.querySelector('[data-map-filter-toggle="1"]');
     const filterGroup = wrapper.querySelector('.eventmanager-map-filter__group');
 
@@ -593,17 +636,34 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
 
             toggleButton.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
             filterGroup.hidden = !nextExpanded;
-            toggleButton.textContent = nextExpanded ? 'Bereiche ausblenden' : 'Bereiche anzeigen';
+            toggleButton.classList.toggle('is-expanded', nextExpanded);
+            toggleButton.classList.toggle('is-collapsed', !nextExpanded);
+
+            wrapper.classList.toggle('is-filter-expanded', nextExpanded);
+            wrapper.classList.toggle('is-filter-collapsed', !nextExpanded);
         });
+
+        const initiallyExpanded = toggleButton.getAttribute('aria-expanded') !== 'false';
+        filterGroup.hidden = !initiallyExpanded;
+        toggleButton.classList.toggle('is-expanded', initiallyExpanded);
+        toggleButton.classList.toggle('is-collapsed', !initiallyExpanded);
+        wrapper.classList.toggle('is-filter-expanded', initiallyExpanded);
+        wrapper.classList.toggle('is-filter-collapsed', !initiallyExpanded);
     }
 
     if (eventToggleButton && eventLayerManager) {
         eventToggleButton.addEventListener('click', () => {
-            const isActive = eventToggleButton.getAttribute('aria-pressed') === 'true';
-            const nextActive = !isActive;
+            if (eventToggleButton.getAttribute('aria-disabled') === 'true') {
+                return;
+            }
 
-            setEventButtonState(nextActive);
-            eventLayerManager.setVisible(nextActive);
+            eventsOnly = true;
+            activeTagId = null;
+
+            tagButtons.forEach((button) => setButtonState(button, false));
+            setEventButtonState(eventsOnly);
+            updateExclusiveButtonAccessibility();
+            applyFilter();
         });
     } else if (eventToggleButton) {
         eventToggleButton.disabled = true;
@@ -644,11 +704,52 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
         });
     }
 
+    const applyInitialDisplayMode = () => {
+        const validModes = new Set(['random', 'events', 'organization_tag']);
+        const mode = validModes.has(initialDisplayModeRaw) ? initialDisplayModeRaw : 'random';
+        const randomTagId = canFilterByTag && availableTagIds.length
+            ? availableTagIds[Math.floor(Math.random() * availableTagIds.length)]
+            : null;
+        const configuredTagId = canFilterByTag && /^\d+$/.test(initialTagIdRaw) && availableTagIds.includes(initialTagIdRaw)
+            ? initialTagIdRaw
+            : null;
+
+        activeTagId = null;
+        eventsOnly = false;
+
+        if ('events' === mode && canFilterByEvents) {
+            eventsOnly = true;
+        } else if ('organization_tag' === mode && canFilterByTag) {
+            activeTagId = configuredTagId || randomTagId;
+        } else if ('random' === mode) {
+            if (canFilterByTag && canFilterByEvents) {
+                if (randomTagId && Math.random() >= 0.5) {
+                    activeTagId = randomTagId;
+                } else {
+                    eventsOnly = true;
+                }
+            } else if (canFilterByTag) {
+                activeTagId = randomTagId;
+            } else if (canFilterByEvents) {
+                eventsOnly = true;
+            }
+        }
+
+        tagButtons.forEach((button) => {
+            const tagId = String(button.dataset.mapTagFilter || '').trim();
+            setButtonState(button, null !== activeTagId && tagId === activeTagId);
+        });
+        setEventButtonState(eventsOnly);
+        updateExclusiveButtonAccessibility();
+    };
+
+    applyInitialDisplayMode();
+    updateExclusiveButtonAccessibility();
     applyFilter();
     applyMapStyleMode();
 };
 
-const initLocationLayers = (map, locationItems, eventColor) => {
+const initLocationLayers = (map, locationItems, markerImageId) => {
     if (!locationItems.length) {
         return {
             setVisible: () => {},
@@ -657,7 +758,6 @@ const initLocationLayers = (map, locationItems, eventColor) => {
 
     const sourceId = 'eventmanager-non-events-source';
     const layerId = 'eventmanager-non-events';
-
     map.addSource(sourceId, {
         type: 'geojson',
         data: {
@@ -668,13 +768,18 @@ const initLocationLayers = (map, locationItems, eventColor) => {
 
     map.addLayer({
         id: layerId,
-        type: 'circle',
+        type: 'symbol',
         source: sourceId,
+        layout: {
+            'icon-image': markerImageId,
+            'icon-size': 1,
+            'icon-anchor': 'bottom',
+            'icon-allow-overlap': true,
+            'icon-ignore-placement': true,
+        },
         paint: {
-            'circle-radius': 8,
-            'circle-stroke-width': 0,
-            'circle-color': eventColor,
-            'circle-opacity': 1,
+            'icon-opacity': 1,
+            'icon-translate': [0, 4],
         },
     });
 
@@ -733,8 +838,8 @@ const initLocationLayers = (map, locationItems, eventColor) => {
             return;
         }
 
-        map.setPaintProperty(layerId, 'circle-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
-        map.setPaintProperty(layerId, 'circle-opacity', value);
+        map.setPaintProperty(layerId, 'icon-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
+        map.setPaintProperty(layerId, 'icon-opacity', value);
     };
 
     return {
@@ -755,24 +860,12 @@ const initLocationLayers = (map, locationItems, eventColor) => {
     };
 };
 
-const initEventLayers = (map, eventItems, eventColor) => {
+const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId) => {
     const sourceId = 'eventmanager-events-source';
     const clusterLayerId = EVENT_CLUSTER_LAYER_ID;
-    const clusterSpiderfyLayerId = EVENT_CLUSTER_SPIDERFY_LAYER_ID;
-    const clusterCountLayerId = 'eventmanager-events-cluster-count';
     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: {
@@ -786,60 +879,46 @@ const initEventLayers = (map, eventItems, eventColor) => {
 
     map.addLayer({
         id: clusterLayerId,
-        type: 'circle',
-        source: sourceId,
-        filter: ['has', 'point_count'],
-        paint: {
-            'circle-radius': 18,
-            'circle-opacity': 1,
-            'circle-color': eventColor,
-            'circle-stroke-width': 0,
-        },
-    });
-
-    map.addLayer({
-        id: clusterCountLayerId,
         type: 'symbol',
         source: sourceId,
         filter: ['has', 'point_count'],
         layout: {
+            'icon-image': clusterMarkerImageId,
+            'icon-size': 1,
+            'icon-anchor': 'bottom',
+            'icon-allow-overlap': true,
+            'icon-ignore-placement': true,
             'text-field': ['get', 'point_count'],
-            'text-size': 16,
+            'text-size': 18,
             'text-font': [GLYPH_FONTSTACK],
             'text-allow-overlap': true,
             'text-ignore-placement': true,
+            'text-offset': [0, -1.85],
         },
         paint: {
-            'text-color': '#ffffff',
+            '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-allow-overlap': true,
-        },
-        paint: {
-            'icon-opacity': 0,
+            'text-translate': [0, 4],
         },
     });
 
     map.addLayer({
         id: unclusteredLayerId,
-        type: 'circle',
+        type: 'symbol',
         source: sourceId,
         filter: ['!', ['has', 'point_count']],
+        layout: {
+            'icon-image': markerImageId,
+            'icon-size': 1,
+            'icon-anchor': 'bottom',
+            'icon-allow-overlap': true,
+            'icon-ignore-placement': true,
+        },
         paint: {
-            'circle-radius': 11,
-            'circle-color': eventColor,
-            'circle-stroke-width': 0,
-            'circle-opacity': 1,
+            'icon-opacity': 1,
+            'icon-translate': [0, 4],
         },
     });
 
@@ -938,13 +1017,14 @@ const initEventLayers = (map, eventItems, eventColor) => {
                 spiderLegsWidth: 2,
                 spiderLegsColor: eventColor,
                 spiderLeavesLayout: {
-                    'text-field': '●',
-                    'text-size': 18,
-                    'text-allow-overlap': true,
+                    'icon-image': markerImageId,
+                    'icon-size': 0.9,
+                    'icon-anchor': 'bottom',
+                    'icon-allow-overlap': true,
                 },
                 spiderLeavesPaint: {
-                    'text-color': eventColor,
-                    'text-opacity': 1,
+                    'icon-opacity': 1,
+                    'icon-translate': [0, 9],
                 },
                 onLeafClick: (feature, spiderEvent) => {
                     const clickCoordinates = spiderEvent?.lngLat
@@ -955,11 +1035,11 @@ const initEventLayers = (map, eventItems, eventColor) => {
                 },
             });
 
-            spiderfy.applyTo(clusterSpiderfyLayerId);
+            spiderfy.applyTo(clusterLayerId);
             spiderfyInstance = spiderfy;
 
-            if (map.getLayer(clusterCountLayerId)) {
-                map.moveLayer(clusterCountLayerId);
+            if (map.getLayer(clusterLayerId)) {
+                map.moveLayer(clusterLayerId);
             }
         } catch (error) {
             bindClusterZoomFallback();
@@ -976,14 +1056,6 @@ const initEventLayers = (map, eventItems, eventColor) => {
         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;
@@ -995,33 +1067,55 @@ const initEventLayers = (map, eventItems, eventColor) => {
 
     const eventLayerIds = [
         clusterLayerId,
-        clusterCountLayerId,
-        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;
+                }
 
-                fadeLayerOpacity(clusterLayerId, 'circle-opacity', 1);
-                fadeLayerOpacity(unclusteredLayerId, 'circle-opacity', 1);
-                fadeLayerOpacity(clusterCountLayerId, 'text-opacity', 1);
+                setLayerFilter(clusterLayerId, clusterFilter);
+                setLayerFilter(unclusteredLayerId, unclusteredFilter);
+
+                fadeLayerOpacity(clusterLayerId, 'icon-opacity', 1);
+                fadeLayerOpacity(clusterLayerId, 'text-opacity', 1);
+                fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 1);
 
                 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();
+                }
             }
 
-            fadeLayerOpacity(clusterLayerId, 'circle-opacity', 0);
-            fadeLayerOpacity(unclusteredLayerId, 'circle-opacity', 0);
-            fadeLayerOpacity(clusterCountLayerId, 'text-opacity', 0);
+            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);
         },
     };
@@ -1130,22 +1224,35 @@ const initSingleMap = (container) => {
                 });
             };
 
-            map.on('load', () => {
+            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 allCoordinates = items.map((item) => [item.longitude, item.latitude]);
-                const organizationColors = parseOrganizationColorScheme(container.dataset.mapOrganizationColors);
-                const organizationTagColorMap = buildOrganizationTagColorMap(container, organizationColors, organizationItems);
+                const organizationColor = normalizeHexColor(
+                    container.dataset.mapOrganizationColor,
+                    eventColor,
+                );
+                let eventMarkerImageId = null;
+                let clusterMarkerImageId = null;
 
-                const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationTagColorMap);
-                const locationLayerManager = initLocationLayers(map, locationItems, eventColor);
+                try {
+                    [eventMarkerImageId, clusterMarkerImageId] = await Promise.all([
+                        ensureMarkerImage(map, eventColor, 'eventmanager-event-marker', { withInnerDot: true }),
+                        ensureMarkerImage(map, eventColor, 'eventmanager-event-cluster-marker', { withInnerDot: false }),
+                    ]);
+                } catch (error) {
+                    return;
+                }
+
+                const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor);
+                const locationLayerManager = initLocationLayers(map, locationItems, eventMarkerImageId);
                 let eventLayerManager = null;
 
                 if (eventItems.length) {
-                    eventLayerManager = initEventLayers(map, eventItems, eventColor);
+                    eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId);
                 }
 
                 const combinedEventLayerManager = {

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\StringUtil;
 use MummertMedia\EventManagerBundle\Service\MapModuleDataProvider;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -18,6 +19,12 @@ class EventMapController extends AbstractFrontendModuleController
     private const MAP_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
     private const DEFAULT_CENTER_MODE = 'markers';
     private const DEFAULT_EVENT_COLOR = '#BC5067';
+    private const DEFAULT_INITIAL_DISPLAY = 'random';
+
+    /**
+     * @var list<string>
+     */
+    private const ALLOWED_INITIAL_DISPLAYS = ['random', 'events', 'organization_tag'];
 
     public function __construct(
         private readonly MapModuleDataProvider $mapModuleDataProvider,
@@ -33,35 +40,53 @@ class EventMapController extends AbstractFrontendModuleController
         $showOrganizations = '1' === (string) ($model->mapShowOrganizations ?? '');
         $showExternalOrganizations = '1' === (string) ($model->mapShowExternalOrganizations ?? '');
         $showEvents = '1' === (string) ($model->mapShowEvents ?? '');
+        $selectedOrganizationTagIds = array_values(array_unique(array_filter(
+            array_map('intval', StringUtil::deserialize($model->organizationTypeTags ?? null, true)),
+            static fn (int $tagId): bool => $tagId > 0,
+        )));
+        $initialDisplay = (string) ($model->mapInitialDisplay ?? self::DEFAULT_INITIAL_DISPLAY);
+        $initialOrganizationTagId = (int) ($model->mapInitialOrganizationTagId ?? 0);
         $centerMode = (string) ($model->mapCenterMode ?? self::DEFAULT_CENTER_MODE);
         $eventColor = $this->normalizeHexColor((string) ($model->mapEventColor ?? self::DEFAULT_EVENT_COLOR));
-        $organizationColorScheme = trim((string) ($model->mapOrganizationColorScheme ?? ''));
+        $organizationColor = $this->normalizeHexColor((string) ($model->mapOrganizationColor ?? $eventColor), $eventColor);
 
         if (!in_array($centerMode, ['markers', 'custom'], true)) {
             $centerMode = self::DEFAULT_CENTER_MODE;
         }
 
+        if (!in_array($initialDisplay, self::ALLOWED_INITIAL_DISPLAYS, true)) {
+            $initialDisplay = self::DEFAULT_INITIAL_DISPLAY;
+        }
+
+        if ($initialOrganizationTagId < 0) {
+            $initialOrganizationTagId = 0;
+        }
+
         $template->set('mapContainerId', $containerId);
         $template->set('mapDataElementId', $dataElementId);
         $template->set('mapFilterWrapperId', $filterWrapperId);
         $template->set('mapFilterGroupId', $filterGroupId);
         $template->set('mapStyleUrl', self::MAP_STYLE_URL);
+        $template->set('mapShowOrganizations', $showOrganizations);
+        $template->set('mapShowEvents', $showEvents);
         $template->set('mapCenterMode', $centerMode);
         $template->set('mapEventColor', $eventColor);
-        $template->set('mapOrganizationColorScheme', $organizationColorScheme);
+        $template->set('mapOrganizationColor', $organizationColor);
+        $template->set('mapInitialDisplay', $initialDisplay);
+        $template->set('mapInitialTagId', $initialOrganizationTagId);
         $template->set('mapCenterLat', trim((string) ($model->mapCenterLat ?? '')));
         $template->set('mapCenterLng', trim((string) ($model->mapCenterLng ?? '')));
         $template->set('mapCenterZoom', (int) ($model->mapCenterZoom ?? 12));
         $template->set('mapItemsJson', json_encode(
-            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations),
+            $this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations, $selectedOrganizationTagIds),
             \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());
+        $template->set('mapOrganizationTags', $this->mapModuleDataProvider->getOrganizationTags($selectedOrganizationTagIds));
 
         return $template->getResponse();
     }
 
-    private function normalizeHexColor(string $value): string
+    private function normalizeHexColor(string $value, string $fallback = self::DEFAULT_EVENT_COLOR): string
     {
         $normalized = strtoupper(trim($value));
 
@@ -91,6 +116,6 @@ class EventMapController extends AbstractFrontendModuleController
             );
         }
 
-        return self::DEFAULT_EVENT_COLOR;
+        return $fallback;
     }
 }

src/Service/MapModuleDataProvider.php

@@ -26,12 +26,17 @@ class MapModuleDataProvider
     /**
         * @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
+    public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false, array $selectedOrganizationTagIds = []): array
     {
         if (!$includeOrganizations && !$includeEvents) {
             return [];
         }
 
+        $selectedOrganizationTagIds = array_values(array_unique(array_map(
+            static fn (int|string $tagId): string => (string) (int) $tagId,
+            array_filter($selectedOrganizationTagIds, static fn (int|string $tagId): bool => (int) $tagId > 0),
+        )));
+
         $locationTable = $this->resolveExistingTable(['tl_location']);
         $organizationTable = $this->resolveExistingTable(['tl_organization', 'tl_organisation']);
         $locationGeoColumns = null !== $locationTable ? $this->resolveGeoColumns($locationTable) : null;
@@ -76,6 +81,12 @@ class MapModuleDataProvider
 
                 $seen['organisation'][$id] = true;
                 $tagData = $organizationTagMap[$id] ?? ['ids' => [], 'labels' => []];
+
+                if ([] !== $selectedOrganizationTagIds
+                    && [] === array_intersect($selectedOrganizationTagIds, $tagData['ids'] ?? [])) {
+                    continue;
+                }
+
                 $items[] = [
                     'type' => 'organisation',
                     'markerType' => $this->buildOrganizationMarkerType($tagData['ids']),
@@ -152,12 +163,17 @@ class MapModuleDataProvider
     /**
      * @return list<array{id:int,label:string}>
      */
-    public function getOrganizationTags(): array
+    public function getOrganizationTags(array $selectedTagIds = []): array
     {
         if (!$this->tableExists('tl_tags')) {
             return [];
         }
 
+        $selectedTagIds = array_values(array_unique(array_filter(
+            array_map('intval', $selectedTagIds),
+            static fn (int $tagId): bool => $tagId > 0,
+        )));
+
         $columns = $this->getColumnMap('tl_tags');
         $labelColumn = isset($columns['title']) ? 'title' : (isset($columns['tag']) ? 'tag' : null);
 
@@ -171,6 +187,12 @@ class MapModuleDataProvider
             ->from('tl_tags', 't')
             ->orderBy(sprintf('t.%s', $labelColumn), 'ASC');
 
+        if ([] !== $selectedTagIds) {
+            $qb
+                ->andWhere('t.id IN (:selectedTagIds)')
+                ->setParameter('selectedTagIds', $selectedTagIds, ArrayParameterType::INTEGER);
+        }
+
         if (isset($columns['invisible'])) {
             $qb->andWhere("(t.invisible IS NULL OR t.invisible = '' OR t.invisible = '0')");
         }