feat: add frontend map module with maplibre and spiderfy

config/services.yaml

@@ -14,3 +14,5 @@ services:
     tags:
       - { name: contao.callback, table: tl_organization, target: config.onbeforesubmit, method: onBeforeSubmit }
       - { name: contao.callback, table: tl_location, target: config.onbeforesubmit, method: onBeforeSubmit }
+
+  MummertMedia\EventManagerBundle\Service\MapModuleDataProvider: ~

contao/dca/tl_module.php

@@ -3,10 +3,13 @@
 declare(strict_types=1);
 
 use Contao\Database;
+use Contao\Controller;
 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;{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';
 
@@ -119,3 +122,52 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventTypeTags'] = [
         },
     ],
 ];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['eventListDomId'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options_callback' => static function (): array {
+        $rows = Database::getInstance()
+            ->prepare('SELECT id, name, cssID FROM tl_module WHERE type=? ORDER BY name ASC, id ASC')
+            ->execute('eventlist')
+            ->fetchAllAssoc();
+
+        $options = [];
+
+        foreach ($rows as $row) {
+            $moduleId = (int) ($row['id'] ?? 0);
+
+            if ($moduleId <= 0) {
+                continue;
+            }
+
+            $cssId = StringUtil::deserialize($row['cssID'] ?? null, true);
+            $domId = trim((string) ($cssId[0] ?? ''));
+            $domId = '' !== $domId ? $domId : sprintf('mod_eventlist_%d', $moduleId);
+            $moduleName = trim((string) ($row['name'] ?? ''));
+
+            if ('' === $moduleName) {
+                $moduleName = sprintf('Eventliste %d', $moduleId);
+            }
+
+            $options[$domId] = sprintf('%s [%s]', $moduleName, $domId);
+        }
+
+        return $options;
+    },
+    'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 128, 'default' => ''],
+];
+
+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_');
+
+        if (!isset($options['list_default_organisationen'])) {
+            $options['list_default_organisationen'] = 'list_default_organisationen';
+        }
+
+        return $options;
+    };
+}

contao/languages/de/modules.php

@@ -9,4 +9,6 @@ $GLOBALS['TL_LANG']['FMD']['eventmanager'] = 'Event-Manager';
 $GLOBALS['TL_LANG']['FMD']['member_organizations'] = ['Meine Organisationen', 'Listet Organisationen des eingeloggten Mitglieds auf.'];
 $GLOBALS['TL_LANG']['FMD']['organization_edit'] = ['Organisation bearbeiten', 'Bearbeitungsformular für eine Organisation.'];
 $GLOBALS['TL_LANG']['FMD']['member_events'] = ['Meine Veranstaltungen', 'Listet Veranstaltungen der zugeordneten Organisationen auf.'];
+$GLOBALS['TL_LANG']['FMD']['event_filter'] = ['Eventfilter', 'Filter für kommende Veranstaltungen (Tags, Orte, Veranstalter).'];
+$GLOBALS['TL_LANG']['FMD']['eventmanager_map'] = ['Eventkarte', 'Zeigt Veranstaltungsorte, Organisationen und Events auf einer Karte an.'];
 $GLOBALS['TL_LANG']['FMD']['event_edit'] = ['Veranstaltung bearbeiten', 'Bearbeitungsformular für eine Veranstaltung.'];

contao/languages/de/tl_module.php

@@ -10,5 +10,6 @@ $GLOBALS['TL_LANG']['tl_module']['eventFolder'] = ['Event-Ordner', 'Bitte wähle
 $GLOBALS['TL_LANG']['tl_module']['termsPage'] = ['Seite mit Nutzungsbedingungen', 'Optional: Seite mit den Nutzungsbedingungen, die im Frontend beim Zustimmungs-Label verlinkt wird.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendAuthorId'] = ['Backend Benutzer ID', 'ID des Backend-Benutzers, der als Autor für frontendseitig angelegte Events gesetzt wird.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['ID des Newsarchivs', 'Archiv-ID (pid), in das frontendseitig angelegte Events gespeichert werden.'];
+$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'Wählen Sie die ID der Eventliste, die durch das Event-Filter-Modul gefiltert werden soll.'];
 $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.'];

contao/languages/en/modules.php

@@ -9,4 +9,6 @@ $GLOBALS['TL_LANG']['FMD']['eventmanager'] = 'Event manager';
 $GLOBALS['TL_LANG']['FMD']['member_organizations'] = ['My organizations', 'Lists organizations of the logged-in member.'];
 $GLOBALS['TL_LANG']['FMD']['organization_edit'] = ['Edit organization', 'Edit form for one organization.'];
 $GLOBALS['TL_LANG']['FMD']['member_events'] = ['My events', 'Lists events of the member organizations.'];
+$GLOBALS['TL_LANG']['FMD']['event_filter'] = ['Event filter', 'Filters upcoming events (tags, locations, organizers).'];
+$GLOBALS['TL_LANG']['FMD']['eventmanager_map'] = ['Event map', 'Displays locations, organizations and events on a map.'];
 $GLOBALS['TL_LANG']['FMD']['event_edit'] = ['Edit event', 'Edit form for one event.'];

contao/languages/en/tl_module.php

@@ -10,5 +10,6 @@ $GLOBALS['TL_LANG']['tl_module']['eventFolder'] = ['Event folder', 'Please selec
 $GLOBALS['TL_LANG']['tl_module']['termsPage'] = ['Terms page', 'Optional: page containing the terms of use linked from the frontend consent label.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendAuthorId'] = ['Backend user ID', 'Backend user ID that should be set as author for events created from the frontend.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['News archive ID', 'Archive ID (pid) where events created from the frontend should be stored.'];
+$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Select the event list ID that should be filtered by the event filter module.'];
 $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.'];

contao/templates/frontend/event_filter.html.twig

@@ -0,0 +1,425 @@
+<div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
+    <div class="select-filters">
+        <div class="widget-select category">
+            <label for="tag-filter" class="visually-hidden">Kategorie wählen</label>
+            <select id="tag-filter" placeholder="Kategorie wählen" autocomplete="off">
+                <option value="">Kategorie wählen</option>
+                {% for tag in tagButtons|default([]) %}
+                    <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="widget-select places">
+            <label for="location-filter" class="visually-hidden">Ort wählen</label>
+            <select id="location-filter" placeholder="Ort wählen" autocomplete="off">
+                <option value="">Ort wählen</option>
+                {% for location in locations|default([]) %}
+                    <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="widget-select org">
+            <label for="org-filter" class="visually-hidden">Veranstalter wählen</label>
+            <select id="org-filter" placeholder="Veranstalter wählen" autocomplete="off">
+                <option value="">Veranstalter wählen</option>
+                {% for organization in organizations|default([]) %}
+                    <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
+                {% endfor %}
+            </select>
+        </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>
+
+<style>
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .event-filter-target-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1rem;
+    }
+
+    .event-filter-target-list .event {
+        opacity: 1;
+        transform: translateY(0);
+        transition: opacity 220ms ease, transform 220ms ease;
+        will-change: opacity, transform;
+    }
+
+    .event-filter-target-list .event.is-filtered-out {
+        opacity: 0;
+        transform: translateY(6px);
+        pointer-events: none;
+    }
+
+    #eventfilters .widget-select.active select {
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
+    }
+
+    #eventfilters select:focus-visible {
+        outline: 3px solid currentColor;
+        outline-offset: 3px;
+    }
+
+    #eventfilters .eventfilter-reset[hidden] {
+        display: none;
+    }
+
+</style>
+
+<script type="module">
+    const filters = document.getElementById('eventfilters');
+
+    if (!filters) {
+        throw new Error('Event filter requires #eventfilters.');
+    }
+
+    const targetEventListId = filters.dataset.eventlistId || 'eventlist';
+    const list = document.getElementById(targetEventListId);
+
+    if (!list) {
+        console.warn(`[event_filter] Target event list #${targetEventListId} was not found.`);
+    }
+
+    list?.classList.add('event-filter-target-list');
+
+    const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : [];
+    const tagSelect = filters.querySelector('#tag-filter');
+    const locationSelect = filters.querySelector('#location-filter');
+    const orgSelect = filters.querySelector('#org-filter');
+    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 status = filters.querySelector('#eventfilter-status');
+    const stateStorageKey = 'event-filter-state';
+    const stateQueryKey = 'event_filter';
+
+    const animationMs = 220;
+    let hideTimers = new WeakMap();
+    let currentFilter = { type: 'all', value: '' };
+    let suppressedChangeEvents = 0;
+
+    const hasOptionValue = (selectElement, value) => {
+        if (!selectElement) {
+            return false;
+        }
+
+        return Array.from(selectElement.options).some((option) => option.value === value);
+    };
+
+    const rawValueToFilterState = (rawValue) => {
+        const value = (rawValue || '').trim();
+
+        if (!value) {
+            return { type: 'all', value: '' };
+        }
+
+        if (value.startsWith('tag-') && hasOptionValue(tagSelect, value)) {
+            return { type: 'tag', value: value.replace('tag-', '') };
+        }
+
+        if (value.startsWith('location-') && hasOptionValue(locationSelect, value)) {
+            return { type: 'location', value: value.replace('location-', '') };
+        }
+
+        if (value.startsWith('org-') && hasOptionValue(orgSelect, value)) {
+            return { type: 'org', value: value.replace('org-', '') };
+        }
+
+        return { type: 'all', value: '' };
+    };
+
+    const filterStateToRawValue = (filterState) => {
+        if (!filterState.value || filterState.type === 'all') {
+            return '';
+        }
+
+        if (filterState.type === 'tag') {
+            return `tag-${filterState.value}`;
+        }
+
+        if (filterState.type === 'location') {
+            return `location-${filterState.value}`;
+        }
+
+        if (filterState.type === 'org') {
+            return `org-${filterState.value}`;
+        }
+
+        return '';
+    };
+
+    const readUrlState = () => {
+        const url = new URL(window.location.href);
+        return (url.searchParams.get(stateQueryKey) || '').trim();
+    };
+
+    const writeUrlState = (value) => {
+        const url = new URL(window.location.href);
+
+        if (value) {
+            url.searchParams.set(stateQueryKey, value);
+        } else {
+            url.searchParams.delete(stateQueryKey);
+        }
+
+        window.history.replaceState(window.history.state, '', url);
+    };
+
+    const readStoredState = () => {
+        try {
+            return (window.sessionStorage.getItem(stateStorageKey) || '').trim();
+        } catch (error) {
+            return '';
+        }
+    };
+
+    const writeStoredState = (value) => {
+        try {
+            if (value) {
+                window.sessionStorage.setItem(stateStorageKey, value);
+            } else {
+                window.sessionStorage.removeItem(stateStorageKey);
+            }
+        } catch (error) {
+            // noop
+        }
+    };
+
+    const syncState = (filterState) => {
+        const rawValue = filterStateToRawValue(filterState);
+        writeStoredState(rawValue);
+        writeUrlState(rawValue);
+    };
+
+    const applyControlState = (filterState) => {
+        const tagValue = filterState.type === 'tag' ? `tag-${filterState.value}` : '';
+        const locationValue = filterState.type === 'location' ? `location-${filterState.value}` : '';
+        const orgValue = filterState.type === 'org' ? `org-${filterState.value}` : '';
+
+        setSelectValue(tagSelect, tagValue);
+        setSelectValue(locationSelect, locationValue);
+        setSelectValue(orgSelect, orgValue);
+    };
+
+    const setSelectValue = (selectElement, value) => {
+        if (!selectElement) {
+            return;
+        }
+
+        if (selectElement.value === value) {
+            return;
+        }
+
+        suppressedChangeEvents += 1;
+
+        try {
+            selectElement.value = value;
+        } finally {
+            queueMicrotask(() => {
+                suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
+            });
+        }
+    };
+
+    const clearHideTimer = (eventItem) => {
+        const timer = hideTimers.get(eventItem);
+
+        if (timer) {
+            window.clearTimeout(timer);
+            hideTimers.delete(eventItem);
+        }
+    };
+
+    const showEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        eventItem.hidden = false;
+
+        requestAnimationFrame(() => {
+            eventItem.classList.remove('is-filtered-out');
+        });
+    };
+
+    const hideEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        eventItem.classList.add('is-filtered-out');
+
+        const timer = window.setTimeout(() => {
+            eventItem.hidden = true;
+            hideTimers.delete(eventItem);
+        }, animationMs);
+
+        hideTimers.set(eventItem, timer);
+    };
+
+    const setActiveControl = ({ type, value }) => {
+        const hasActiveTag = type === 'tag' && Boolean(value);
+        const hasActiveLocation = type === 'location' && Boolean(value);
+        const hasActiveOrg = type === 'org' && Boolean(value);
+
+        tagWidget?.classList.toggle('active', hasActiveTag);
+        locationWidget?.classList.toggle('active', hasActiveLocation);
+        orgWidget?.classList.toggle('active', hasActiveOrg);
+
+        if (resetButton) {
+            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+        }
+    };
+
+    const parseIdList = (rawValue) => (rawValue ?? '')
+        .split(',')
+        .map((value) => value.trim())
+        .filter(Boolean);
+
+    const matches = (eventItem, filterState) => {
+        if (!filterState.value || filterState.type === 'all') {
+            return true;
+        }
+
+        if (filterState.type === 'tag') {
+            return parseIdList(eventItem.dataset.tags).includes(filterState.value);
+        }
+
+        if (filterState.type === 'location') {
+            return eventItem.dataset.location === filterState.value;
+        }
+
+        if (filterState.type === 'org') {
+            return parseIdList(eventItem.dataset.org).includes(filterState.value);
+        }
+
+        return true;
+    };
+
+    const updateStatus = (filterState) => {
+        if (!status) {
+            return;
+        }
+
+        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        let filterText = 'alle';
+
+        if (filterState.type === 'tag' && tagSelect) {
+            const option = tagSelect.options[tagSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Kategorie wählen';
+        }
+
+        if (filterState.type === 'location' && locationSelect) {
+            const option = locationSelect.options[locationSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Ort';
+        }
+
+        if (filterState.type === 'org' && orgSelect) {
+            const option = orgSelect.options[orgSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Veranstalter';
+        }
+
+        status.textContent = `${visibleCount} Veranstaltungen angezeigt, Filter: ${filterText}.`;
+    };
+
+    const applyFilter = (filterState) => {
+        currentFilter = filterState;
+        setActiveControl(filterState);
+
+        events.forEach((eventItem) => {
+            if (matches(eventItem, filterState)) {
+                showEvent(eventItem);
+            } else {
+                hideEvent(eventItem);
+            }
+        });
+
+        updateStatus(filterState);
+        syncState(filterState);
+    };
+
+    tagSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = tagSelect.value;
+
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter(
+            !selectedValue
+                ? { type: 'all', value: '' }
+                : { type: 'tag', value: selectedValue.replace('tag-', '') },
+        );
+    });
+
+    locationSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = locationSelect.value;
+
+        setSelectValue(tagSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter(
+            !selectedValue
+                ? { type: 'all', value: '' }
+                : { type: 'location', value: selectedValue.replace('location-', '') },
+        );
+    });
+
+    orgSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = orgSelect.value;
+
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+
+        applyFilter(
+            !selectedValue
+                ? { type: 'all', value: '' }
+                : { type: 'org', value: selectedValue.replace('org-', '') },
+        );
+    });
+
+    resetButton?.addEventListener('click', () => {
+        setSelectValue(tagSelect, '');
+        setSelectValue(locationSelect, '');
+        setSelectValue(orgSelect, '');
+
+        applyFilter({ type: 'all', value: '' });
+    });
+
+    const urlState = readUrlState();
+    const storedState = readStoredState();
+    const initialState = rawValueToFilterState(urlState || storedState);
+
+    applyControlState(initialState);
+    applyFilter(initialState);
+
+    window.addEventListener('popstate', () => {
+        const stateFromUrl = rawValueToFilterState(readUrlState());
+        applyControlState(stateFromUrl);
+        applyFilter(stateFromUrl);
+    });
+</script>

contao/templates/frontend/event_map.html.twig

@@ -0,0 +1,17 @@
+<div
+    id="{{ mapContainerId|e('html_attr') }}"
+    class="eventmanager-map"
+    data-eventmanager-map="1"
+    data-map-style="{{ mapStyleUrl|e('html_attr') }}"
+    data-map-data-id="{{ mapDataElementId|e('html_attr') }}"
+></div>
+
+<style>
+    .eventmanager-map {
+        width: 100%;
+        min-height: 420px;
+    }
+</style>
+
+<script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
+<script type="module" src="{{ asset('bundles/eventmanager/assets/map-module.js') }}"></script>

public/assets/map-module.js

@@ -0,0 +1,331 @@
+import Spiderfy from 'https://cdn.jsdelivr.net/npm/@nazka/map-gl-js-spiderfy@1.2.10/dist/index.modern.js';
+
+const MAP_SELECTOR = '[data-eventmanager-map="1"]';
+
+const escapeHtml = (value) => {
+    const stringValue = String(value ?? '');
+
+    return stringValue
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+};
+
+const parseItems = (container) => {
+    const dataElementId = container.dataset.mapDataId || '';
+
+    if (!dataElementId) {
+        return [];
+    }
+
+    const payload = document.getElementById(dataElementId);
+
+    if (!payload) {
+        return [];
+    }
+
+    try {
+        const parsed = JSON.parse(payload.textContent || '[]');
+
+        if (!Array.isArray(parsed)) {
+            return [];
+        }
+
+        const unique = new Map();
+
+        parsed.forEach((item) => {
+            if (!item || !['event', 'location', 'organisation'].includes(item.type)) {
+                return;
+            }
+
+            const id = Number(item.id || 0);
+            const latitude = Number(item.latitude);
+            const longitude = Number(item.longitude);
+
+            if (!Number.isFinite(id) || id <= 0 || !Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+                return;
+            }
+
+            unique.set(`${item.type}:${id}`, {
+                type: item.type,
+                id,
+                title: String(item.title || ''),
+                latitude,
+                longitude,
+                extra: item.extra && typeof item.extra === 'object' ? item.extra : {},
+            });
+        });
+
+        return Array.from(unique.values());
+    } catch (error) {
+        return [];
+    }
+};
+
+const popupHtmlFor = (item) => {
+    if (item.type === 'event') {
+        const locationTitle = escapeHtml(item.extra.locationTitle || '');
+        const startDate = escapeHtml(item.extra.startDate || '');
+
+        return [
+            `<strong>${escapeHtml(item.title)}</strong>`,
+            locationTitle ? `<div>${locationTitle}</div>` : '',
+            startDate ? `<div>${startDate}</div>` : '',
+        ].join('');
+    }
+
+    return `<strong>${escapeHtml(item.title)}</strong>`;
+};
+
+const toFeature = (item) => ({
+    type: 'Feature',
+    geometry: {
+        type: 'Point',
+        coordinates: [item.longitude, item.latitude],
+    },
+    properties: {
+        id: item.id,
+        type: item.type,
+        title: item.title,
+        popupHtml: popupHtmlFor(item),
+    },
+});
+
+const addSimpleMarker = (map, item) => {
+    const popup = new maplibregl.Popup({ offset: 20 }).setHTML(popupHtmlFor(item));
+
+    new maplibregl.Marker()
+        .setLngLat([item.longitude, item.latitude])
+        .setPopup(popup)
+        .addTo(map);
+};
+
+const initEventLayers = (map, eventItems) => {
+    const sourceId = 'eventmanager-events-source';
+    const clusterLayerId = 'eventmanager-events-clusters';
+    const clusterCountLayerId = 'eventmanager-events-cluster-count';
+    const unclusteredLayerId = 'eventmanager-events-unclustered';
+
+    const features = eventItems.map(toFeature);
+
+    map.addSource(sourceId, {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features,
+        },
+        cluster: true,
+        clusterMaxZoom: 22,
+        clusterRadius: 22,
+    });
+
+    map.addLayer({
+        id: clusterLayerId,
+        type: 'circle',
+        source: sourceId,
+        filter: ['has', 'point_count'],
+        paint: {
+            'circle-radius': 18,
+            'circle-opacity': 0.8,
+        },
+    });
+
+    map.addLayer({
+        id: clusterCountLayerId,
+        type: 'symbol',
+        source: sourceId,
+        filter: ['has', 'point_count'],
+        layout: {
+            'text-field': ['get', 'point_count'],
+            'text-size': 12,
+        },
+    });
+
+    map.addLayer({
+        id: unclusteredLayerId,
+        type: 'circle',
+        source: sourceId,
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+            'circle-radius': 9,
+            'circle-stroke-width': 2,
+        },
+    });
+
+    const openEventPopup = (feature, coordinatesOverride = null) => {
+        const popupHtml = feature?.properties?.popupHtml || '';
+        const rawCoords = coordinatesOverride || feature?.geometry?.coordinates || null;
+
+        if (!Array.isArray(rawCoords) || rawCoords.length !== 2) {
+            return;
+        }
+
+        const [lng, lat] = rawCoords.map((coord) => Number(coord));
+
+        if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+            return;
+        }
+
+        new maplibregl.Popup({ offset: 15 })
+            .setLngLat([lng, lat])
+            .setHTML(String(popupHtml))
+            .addTo(map);
+    };
+
+    map.on('click', unclusteredLayerId, (event) => {
+        const feature = event.features && event.features[0] ? event.features[0] : null;
+
+        if (!feature) {
+            return;
+        }
+
+        openEventPopup(feature, event.lngLat ? [event.lngLat.lng, event.lngLat.lat] : null);
+    });
+
+    map.on('mouseenter', unclusteredLayerId, () => {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+
+    map.on('mouseleave', unclusteredLayerId, () => {
+        map.getCanvas().style.cursor = '';
+    });
+
+    if (typeof Spiderfy === 'function') {
+        const spiderfy = new Spiderfy(map, {
+            closeOnLeafClick: true,
+            onLeafClick: (feature, spiderEvent) => {
+                const clickCoordinates = spiderEvent?.lngLat
+                    ? [spiderEvent.lngLat.lng, spiderEvent.lngLat.lat]
+                    : null;
+
+                openEventPopup(feature, clickCoordinates);
+            },
+        });
+
+        spiderfy.applyTo(clusterLayerId);
+    } else {
+        map.on('click', clusterLayerId, (event) => {
+            const feature = event.features && event.features[0] ? event.features[0] : null;
+
+            if (!feature) {
+                return;
+            }
+
+            const clusterId = feature.properties?.cluster_id;
+
+            if (undefined === clusterId || null === clusterId) {
+                return;
+            }
+
+            const source = map.getSource(sourceId);
+
+            if (!source || typeof source.getClusterExpansionZoom !== 'function') {
+                return;
+            }
+
+            source.getClusterExpansionZoom(clusterId, (error, zoom) => {
+                if (error) {
+                    return;
+                }
+
+                map.easeTo({
+                    center: event.lngLat,
+                    zoom,
+                });
+            });
+        });
+    }
+
+    map.on('mouseenter', clusterLayerId, () => {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+
+    map.on('mouseleave', clusterLayerId, () => {
+        map.getCanvas().style.cursor = '';
+    });
+
+};
+
+const initSingleMap = (container) => {
+    if (container.dataset.mapInitialized === '1') {
+        return;
+    }
+
+    const items = parseItems(container);
+
+    if (!items.length || typeof maplibregl === 'undefined') {
+        return;
+    }
+
+    container.dataset.mapInitialized = '1';
+
+    if (typeof pmtiles !== 'undefined' && !window.__eventmanagerPmtilesRegistered) {
+        const protocol = new pmtiles.Protocol();
+        maplibregl.addProtocol('pmtiles', protocol.tile);
+        window.__eventmanagerPmtilesRegistered = true;
+    }
+
+    const style = container.dataset.mapStyle || 'https://maps.mummert.media/metadaten/world-light.json';
+    const map = new maplibregl.Map({
+        container,
+        style,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        center: [items[0].longitude, items[0].latitude],
+    });
+
+    map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));
+
+    const fitBounds = (coordinates) => {
+        const points = coordinates.filter((coord) => Array.isArray(coord) && coord.length === 2);
+
+        if (!points.length) {
+            return;
+        }
+
+        if (1 === points.length) {
+            map.setCenter(points[0]);
+            map.setZoom(14);
+
+            return;
+        }
+
+        const bounds = new maplibregl.LngLatBounds();
+        points.forEach((coord) => bounds.extend(coord));
+
+        map.fitBounds(bounds, {
+            padding: 60,
+            maxZoom: 15,
+        });
+    };
+
+    map.on('load', () => {
+        const nonEventItems = items.filter((item) => item.type !== 'event');
+        const eventItems = items.filter((item) => item.type === 'event');
+        const allCoordinates = items.map((item) => [item.longitude, item.latitude]);
+
+        nonEventItems.forEach((item) => {
+            addSimpleMarker(map, item);
+        });
+
+        if (eventItems.length) {
+            initEventLayers(map, eventItems);
+        }
+
+        fitBounds(allCoordinates);
+    });
+};
+
+const bootstrapMapModules = () => {
+    const modules = document.querySelectorAll(MAP_SELECTOR);
+    modules.forEach((container) => initSingleMap(container));
+};
+
+if ('loading' === document.readyState) {
+    document.addEventListener('DOMContentLoaded', bootstrapMapModules, { once: true });
+} else {
+    bootstrapMapModules();
+}

src/Controller/Frontend/EventFilterController.php

@@ -0,0 +1,192 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\Controller\Frontend;
+
+use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
+use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
+use Contao\CoreBundle\Twig\FragmentTemplate;
+use Contao\ModuleModel;
+use Contao\StringUtil;
+use Doctrine\DBAL\ArrayParameterType;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+#[AsFrontendModule(type: 'event_filter', category: 'eventmanager', template: 'frontend/event_filter')]
+class EventFilterController extends AbstractFrontendModuleController
+{
+    public function __construct(
+        private readonly Connection $connection,
+    ) {
+    }
+
+    protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
+    {
+        $calendarIds = array_map('intval', StringUtil::deserialize($model->cal_calendar, true));
+        $eventIds = $this->findUpcomingEventIds($calendarIds);
+        $targetEventListId = trim((string) ($model->eventListDomId ?? ''));
+
+        $template->set('tagButtons', $this->findTagButtons($eventIds));
+        $template->set('locations', $this->findLocations($eventIds));
+        $template->set('organizations', $this->findOrganizations($eventIds));
+        $template->set('targetEventListId', '' !== $targetEventListId ? $targetEventListId : 'eventlist');
+
+        return $template->getResponse();
+    }
+
+    /**
+     * @param list<int> $calendarIds
+     *
+     * @return list<int>
+     */
+    private function findUpcomingEventIds(array $calendarIds): array
+    {
+        $today = strtotime('today');
+
+        if ([] === $calendarIds) {
+            $rows = $this->connection->executeQuery(
+                <<<'SQL'
+                    SELECT e.id
+                    FROM tl_calendar_events e
+                    WHERE e.published='1'
+                      AND (e.startTime>=? OR e.endTime>=?)
+                    ORDER BY e.startTime ASC
+                SQL,
+                [$today, $today],
+                [ParameterType::INTEGER, ParameterType::INTEGER],
+            )->fetchFirstColumn();
+        } else {
+            $rows = $this->connection->executeQuery(
+                <<<'SQL'
+                    SELECT e.id
+                    FROM tl_calendar_events e
+                    WHERE e.pid IN (?)
+                      AND e.published='1'
+                      AND (e.startTime>=? OR e.endTime>=?)
+                    ORDER BY e.startTime ASC
+                SQL,
+                [$calendarIds, $today, $today],
+                [ArrayParameterType::INTEGER, ParameterType::INTEGER, ParameterType::INTEGER],
+            )->fetchFirstColumn();
+        }
+
+        return array_values(array_unique(array_map('intval', $rows)));
+    }
+
+    /**
+     * @param list<int> $eventIds
+     *
+     * @return list<array{id:int,title:string,count:int}>
+     */
+    private function findTagButtons(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            <<<'SQL'
+                                SELECT t.id, t.tag, COUNT(DISTINCT r.pid) AS total
+                FROM tl_tags_rel r
+                INNER JOIN tl_tags t ON t.id=r.tag_id
+                WHERE r.ptable='tl_calendar_events'
+                  AND r.field='tags'
+                                    AND r.pid IN (?)
+                GROUP BY t.id, t.tag
+                ORDER BY t.tag ASC
+            SQL,
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $items = [];
+
+        foreach ($rows as $row) {
+            $items[] = [
+                'id' => (int) ($row['id'] ?? 0),
+                'title' => (string) ($row['tag'] ?? ''),
+                'count' => (int) ($row['total'] ?? 0),
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * @param list<int> $eventIds
+     *
+     * @return list<array{id:int,title:string,count:int}>
+     */
+    private function findLocations(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            <<<'SQL'
+                SELECT l.id, l.title, COUNT(e.id) AS total
+                FROM tl_calendar_events e
+                                INNER JOIN tl_location l ON l.id=e.location_id
+                WHERE e.id IN (?)
+                                    AND e.location_id>0
+                GROUP BY l.id, l.title
+                ORDER BY l.title ASC
+            SQL,
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $items = [];
+
+        foreach ($rows as $row) {
+            $items[] = [
+                'id' => (int) ($row['id'] ?? 0),
+                'title' => (string) ($row['title'] ?? ''),
+                'count' => (int) ($row['total'] ?? 0),
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * @param list<int> $eventIds
+     *
+     * @return list<array{id:int,title:string,count:int}>
+     */
+    private function findOrganizations(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            <<<'SQL'
+                SELECT o.id, o.title, COUNT(DISTINCT rel.event_id) AS total
+                FROM tl_calendar_events_organization rel
+                INNER JOIN tl_organization o ON o.id=rel.organization_id
+                WHERE rel.event_id IN (?)
+                GROUP BY o.id, o.title
+                ORDER BY o.title ASC
+            SQL,
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $items = [];
+
+        foreach ($rows as $row) {
+            $items[] = [
+                'id' => (int) ($row['id'] ?? 0),
+                'title' => (string) ($row['title'] ?? ''),
+                'count' => (int) ($row['total'] ?? 0),
+            ];
+        }
+
+        return $items;
+    }
+}

src/Controller/Frontend/EventMapController.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\Controller\Frontend;
+
+use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
+use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
+use Contao\CoreBundle\Twig\FragmentTemplate;
+use Contao\ModuleModel;
+use MummertMedia\EventManagerBundle\Service\MapModuleDataProvider;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+#[AsFrontendModule(type: 'eventmanager_map', category: 'eventmanager', template: 'frontend/event_map')]
+class EventMapController extends AbstractFrontendModuleController
+{
+    private const MAP_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
+
+    public function __construct(
+        private readonly MapModuleDataProvider $mapModuleDataProvider,
+    ) {
+    }
+
+    protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
+    {
+        $containerId = sprintf('eventmanager-map-%d', (int) ($model->id ?? 0));
+        $dataElementId = sprintf('%s-data', $containerId);
+
+        $template->set('mapContainerId', $containerId);
+        $template->set('mapDataElementId', $dataElementId);
+        $template->set('mapStyleUrl', self::MAP_STYLE_URL);
+        $template->set('mapItemsJson', json_encode(
+            $this->mapModuleDataProvider->getMapItems(),
+            \JSON_HEX_TAG | \JSON_HEX_AMP | \JSON_HEX_APOS | \JSON_HEX_QUOT | \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR,
+        ));
+
+        return $template->getResponse();
+    }
+}

src/EventListener/EventFullTemplateDataListener.php

@@ -0,0 +1,265 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\EventListener;
+
+use Contao\CoreBundle\DependencyInjection\Attribute\AsHook;
+use Contao\StringUtil;
+use Contao\Template;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;
+
+#[AsHook('parseTemplate', method: 'onParseTemplate')]
+class EventFullTemplateDataListener
+{
+    public function __construct(
+        private readonly Connection $connection,
+    ) {
+    }
+
+    public function onParseTemplate(Template $template): void
+    {
+        $templateName = (string) $template->getName();
+
+        if (!str_starts_with($templateName, 'event_full')) {
+            return;
+        }
+
+        $data = $template->getData();
+        $eventId = (int) ($data['id'] ?? 0);
+
+        if ($eventId <= 0) {
+            return;
+        }
+
+        $locationId = isset($data['location_id']) ? (int) $data['location_id'] : 0;
+
+        $locationRow = $this->fetchLocationRow($locationId);
+        $organizations = $this->fetchOrganizations($eventId);
+        $tags = $this->fetchTags($eventId);
+
+        $template->location_row = $locationRow;
+        $template->organizations = $organizations;
+        $template->tags = $tags;
+        $template->has_tag_21 = \in_array(21, array_map(static fn (array $tag): int => (int) ($tag['id'] ?? 0), $tags), true);
+
+        if ($locationRow && '' !== ($locationRow['lng'] ?? '') && '' !== ($locationRow['lat'] ?? '') && 58 !== (int) ($locationRow['id'] ?? 0)) {
+            $this->registerMapAssets();
+            $template->show_location_map = true;
+        } else {
+            $template->show_location_map = false;
+        }
+
+        $template->location_fields = $this->toFlatLocationFields($locationRow);
+        $template->organization_fields = $this->toFlatOrganizationFields($organizations);
+        $template->tag_fields = $this->toFlatTagFields($tags);
+    }
+
+    /** @return array<string, string> */
+    private function fetchLocationRow(int $locationId): array
+    {
+        if ($locationId <= 0) {
+            return [];
+        }
+
+        $row = $this->connection->createQueryBuilder()
+            ->select('*')
+            ->from('tl_location')
+            ->where('id = :id')
+            ->setParameter('id', $locationId, ParameterType::INTEGER)
+            ->setMaxResults(1)
+            ->executeQuery()
+            ->fetchAssociative();
+
+        if (false === $row || null === $row) {
+            return [];
+        }
+
+        $normalized = [];
+
+        foreach ($row as $column => $value) {
+            $normalized[$column] = $this->toString($value);
+        }
+
+        if ('' !== ($normalized['image'] ?? '')) {
+            $normalized['image_uuid'] = $this->normalizeUuid($normalized['image']);
+        }
+
+        return $normalized;
+    }
+
+    /** @return list<array<string, string>> */
+    private function fetchOrganizations(int $eventId): array
+    {
+        $rows = $this->connection->createQueryBuilder()
+            ->select('o.*')
+            ->from('tl_calendar_events_organization', 'ceo')
+            ->innerJoin('ceo', 'tl_organization', 'o', 'o.id = ceo.organization_id')
+            ->where('ceo.event_id = :eventId')
+            ->setParameter('eventId', $eventId, ParameterType::INTEGER)
+            ->orderBy('ceo.organization_id', 'ASC')
+            ->executeQuery()
+            ->fetchAllAssociative();
+
+        $organizations = [];
+
+        foreach ($rows as $row) {
+            $normalized = [];
+
+            foreach ($row as $column => $value) {
+                $normalized[$column] = $this->toString($value);
+            }
+
+            if ('' !== ($normalized['logo'] ?? '')) {
+                $normalized['logo_uuid'] = $this->normalizeUuid($normalized['logo']);
+            }
+
+            $organizations[] = $normalized;
+        }
+
+        return $organizations;
+    }
+
+    /** @return list<array<string, string>> */
+    private function fetchTags(int $eventId): array
+    {
+        $rows = $this->connection->createQueryBuilder()
+            ->select('t.*')
+            ->from('tl_tags_rel', 'r')
+            ->innerJoin('r', 'tl_tags', 't', 't.id = r.tag_id')
+            ->where('r.ptable = :ptable')
+            ->andWhere('r.field = :field')
+            ->andWhere('r.pid = :pid')
+            ->setParameter('ptable', 'tl_calendar_events')
+            ->setParameter('field', 'tags')
+            ->setParameter('pid', $eventId, ParameterType::INTEGER)
+            ->orderBy('r.tag_id', 'ASC')
+            ->executeQuery()
+            ->fetchAllAssociative();
+
+        $tags = [];
+
+        foreach ($rows as $row) {
+            $title = '';
+
+            if (isset($row['title']) && '' !== (string) $row['title']) {
+                $title = (string) $row['title'];
+            } elseif (isset($row['tag'])) {
+                $title = (string) $row['tag'];
+            }
+
+            $tags[] = [
+                'id' => (string) ((int) ($row['id'] ?? 0)),
+                'title' => $title,
+                'tag' => (string) ($row['tag'] ?? ''),
+            ];
+        }
+
+        return $tags;
+    }
+
+    /** @param array<string, string> $locationRow
+     *  @return array<string, string>
+     */
+    private function toFlatLocationFields(array $locationRow): array
+    {
+        $fields = [];
+
+        foreach ($locationRow as $column => $value) {
+            $fields['location_'.$column] = $value;
+        }
+
+        return $fields;
+    }
+
+    /** @param list<array<string, string>> $organizations
+     *  @return array<string, string>
+     */
+    private function toFlatOrganizationFields(array $organizations): array
+    {
+        $fields = [];
+        $index = 1;
+
+        foreach ($organizations as $organization) {
+            foreach ($organization as $column => $value) {
+                $fields['organization'.$index.'_'.$column] = $value;
+            }
+
+            ++$index;
+        }
+
+        return $fields;
+    }
+
+    /** @param list<array<string, string>> $tags
+     *  @return array<string, string>
+     */
+    private function toFlatTagFields(array $tags): array
+    {
+        $fields = [];
+        $index = 1;
+
+        foreach ($tags as $tag) {
+            $fields['tag'.$index.'_title'] = (string) ($tag['title'] ?? '');
+            ++$index;
+        }
+
+        return $fields;
+    }
+
+    private function normalizeUuid(string $value): string
+    {
+        $trimmed = trim($value);
+
+        if (preg_match('/^[0-9a-fA-F-]{36}$/', $trimmed)) {
+            return strtolower($trimmed);
+        }
+
+        if (16 === strlen($trimmed)) {
+            return StringUtil::binToUuid($trimmed);
+        }
+
+        return $trimmed;
+    }
+
+    private function registerMapAssets(): void
+    {
+        $GLOBALS['TL_JAVASCRIPT'] ??= [];
+        $GLOBALS['TL_CSS'] ??= [];
+
+        $jsAssets = [
+            'https://maps.mummert.media/libraries/maplibre-gl.js',
+            'https://maps.mummert.media/libraries/pmtiles.js',
+        ];
+
+        foreach ($jsAssets as $asset) {
+            if (!\in_array($asset, $GLOBALS['TL_JAVASCRIPT'], true)) {
+                $GLOBALS['TL_JAVASCRIPT'][] = $asset;
+            }
+        }
+
+        $cssAsset = 'https://maps.mummert.media/libraries/maplibre-gl.css';
+
+        if (!\in_array($cssAsset, $GLOBALS['TL_CSS'], true)) {
+            $GLOBALS['TL_CSS'][] = $cssAsset;
+        }
+    }
+
+    private function toString(mixed $value): string
+    {
+        if (null === $value) {
+            return '';
+        }
+
+        if (\is_bool($value)) {
+            return $value ? '1' : '0';
+        }
+
+        if (\is_scalar($value)) {
+            return (string) $value;
+        }
+
+        return json_encode($value, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?: '';
+    }
+}

src/EventListener/EventTeaserDataAttributesListener.php

@@ -25,12 +25,14 @@ class EventTeaserDataAttributesListener
         $tagMap = $this->fetchTagMap($eventIds);
         $organizationMap = $this->fetchOrganizationMap($eventIds);
         $locationMap = $this->fetchLocationMap($eventIds);
+        $locationTitleMap = $this->fetchLocationTitleMap($locationMap);
 
         foreach ($events as $dayKey => $eventsPerDay) {
             foreach ($eventsPerDay as $timeKey => $eventsPerTime) {
                 foreach ($eventsPerTime as $index => $event) {
                     if (!isset($event['id'])) {
                         $events[$dayKey][$timeKey][$index]['location_id'] = null;
+                        $events[$dayKey][$timeKey][$index]['location_title'] = '';
                         $events[$dayKey][$timeKey][$index]['event_tags'] = '';
                         $events[$dayKey][$timeKey][$index]['event_org'] = '';
 
@@ -45,6 +47,11 @@ class EventTeaserDataAttributesListener
                         $events[$dayKey][$timeKey][$index]['location_id'] = $locationMap[$eventId] ?? null;
                     }
 
+                    $locationId = $events[$dayKey][$timeKey][$index]['location_id'];
+                    $events[$dayKey][$timeKey][$index]['location_title'] = null !== $locationId
+                        ? ($locationTitleMap[(int) $locationId] ?? '')
+                        : '';
+
                     $events[$dayKey][$timeKey][$index]['event_tags'] = implode(',', $tagMap[$eventId] ?? []);
                     $events[$dayKey][$timeKey][$index]['event_org'] = implode(',', $organizationMap[$eventId] ?? []);
                 }
@@ -183,4 +190,36 @@ class EventTeaserDataAttributesListener
 
         return $map;
     }
+
+    /** @param array<int, int|null> $locationMap
+     *  @return array<int, string>
+     */
+    private function fetchLocationTitleMap(array $locationMap): array
+    {
+        $locationIds = array_values(array_unique(array_filter(array_map('intval', $locationMap), static fn (int $id): bool => $id > 0)));
+
+        if ([] === $locationIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            'SELECT id, title FROM tl_location WHERE id IN (?)',
+            [$locationIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $map = [];
+
+        foreach ($rows as $row) {
+            $locationId = (int) ($row['id'] ?? 0);
+
+            if ($locationId <= 0) {
+                continue;
+            }
+
+            $map[$locationId] = (string) ($row['title'] ?? '');
+        }
+
+        return $map;
+    }
 }

src/EventListener/OrganizationListingTemplateDataListener.php

@@ -0,0 +1,342 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\EventListener;
+
+use Contao\CoreBundle\DependencyInjection\Attribute\AsHook;
+use Contao\StringUtil;
+use Contao\Template;
+use Doctrine\DBAL\ArrayParameterType;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;
+use Psr\Log\LoggerInterface;
+
+#[AsHook('parseTemplate', method: 'onParseTemplate')]
+class OrganizationListingTemplateDataListener
+{
+    public function __construct(
+        private readonly Connection $connection,
+        private readonly ?LoggerInterface $logger = null,
+    ) {
+    }
+
+    public function onParseTemplate(Template $template): void
+    {
+        if ('list_default_organisationen' !== (string) $template->getName()) {
+            return;
+        }
+
+        $tbody = $template->tbody;
+
+        if (!\is_array($tbody) || [] === $tbody) {
+            return;
+        }
+
+        $rowToOrganizationIdMap = [];
+
+        foreach ($tbody as $rowIndex => $row) {
+            if (!\is_array($row)) {
+                continue;
+            }
+
+            $organizationId = $this->extractOrganizationId($row);
+
+            if ($organizationId > 0) {
+                $rowToOrganizationIdMap[(int) $rowIndex] = $organizationId;
+            }
+        }
+
+        if ([] === $rowToOrganizationIdMap) {
+            return;
+        }
+
+        $organizationIds = array_values(array_unique(array_values($rowToOrganizationIdMap)));
+        $organizationTagMap = $this->fetchOrganizationTagMap($organizationIds);
+        $organizationLogoMap = $this->fetchOrganizationLogoMap($organizationIds);
+
+        $organizationTagLabelMap = [];
+        $rowTagIdsList = [];
+
+        foreach ($organizationTagMap as $tagData) {
+            foreach (($tagData['ids'] ?? []) as $index => $tagId) {
+                $label = trim((string) (($tagData['labels'][$index] ?? '') ?: ''));
+
+                if ('' !== $tagId && '' !== $label && !isset($organizationTagLabelMap[(string) $tagId])) {
+                    $organizationTagLabelMap[(string) $tagId] = $label;
+                }
+            }
+        }
+
+        foreach ($rowToOrganizationIdMap as $rowIndex => $organizationId) {
+            if (!isset($tbody[$rowIndex]) || !\is_array($tbody[$rowIndex])) {
+                continue;
+            }
+
+            $tagData = $organizationTagMap[$organizationId] ?? ['ids' => [], 'labels' => []];
+            $logoData = $organizationLogoMap[$organizationId] ?? ['uuid' => '', 'isSvg' => false];
+            $logoUuid = (string) ($logoData['uuid'] ?? '');
+            $logoIsSvg = (bool) ($logoData['isSvg'] ?? false);
+            $tagIdsCsv = implode(',', $tagData['ids']);
+            $tagLabelsCsv = implode(', ', $tagData['labels']);
+
+            $tbody[$rowIndex]['tag_ids']['content'] = $tagIdsCsv;
+            $tbody[$rowIndex]['tag_labels']['content'] = $tagLabelsCsv;
+            $tbody[$rowIndex]['tags']['content'] = $tagLabelsCsv;
+
+            if ('' !== $logoUuid) {
+                $tbody[$rowIndex]['logo_uuid']['content'] = $logoUuid;
+                $tbody[$rowIndex]['logo_is_svg']['content'] = $logoIsSvg ? '1' : '';
+            }
+        }
+
+        foreach ($tbody as $rowIndex => $row) {
+            if (!\is_array($row)) {
+                $rowTagIdsList[] = '';
+                continue;
+            }
+
+            $organizationId = $rowToOrganizationIdMap[(int) $rowIndex] ?? 0;
+            $rowTagIdsList[] = ($organizationId > 0 && isset($organizationTagMap[$organizationId]))
+                ? implode(',', $organizationTagMap[$organizationId]['ids'] ?? [])
+                : '';
+        }
+
+        if (null !== $this->logger) {
+            $rowsWithoutTagIds = 0;
+
+            foreach ($rowToOrganizationIdMap as $organizationId) {
+                if (!isset($organizationTagMap[$organizationId]) || [] === ($organizationTagMap[$organizationId]['ids'] ?? [])) {
+                    ++$rowsWithoutTagIds;
+                }
+            }
+
+            if ($rowsWithoutTagIds > 0) {
+                $this->logger->warning('Organization listing enrichment found rows without tag IDs.', [
+                    'template' => (string) $template->getName(),
+                    'totalRows' => \count($tbody),
+                    'mappedRows' => \count($rowToOrganizationIdMap),
+                    'rowsWithoutTagIds' => $rowsWithoutTagIds,
+                ]);
+            }
+        }
+
+        $template->organization_tag_label_map = $organizationTagLabelMap;
+        $template->organization_row_tag_ids_list = $rowTagIdsList;
+
+        $template->tbody = $tbody;
+    }
+
+    /** @param array<string, mixed> $row */
+    private function extractOrganizationId(array $row): int
+    {
+        foreach (['id', 'organization_id', 'org_id'] as $fieldName) {
+            if (isset($row[$fieldName]) && \is_scalar($row[$fieldName]) && ctype_digit((string) $row[$fieldName])) {
+                return (int) $row[$fieldName];
+            }
+
+            $value = $this->extractRowFieldContent($row, $fieldName);
+
+            if ('' !== $value && ctype_digit($value)) {
+                return (int) $value;
+            }
+        }
+
+        foreach ($row as $column) {
+            if (!\is_array($column)) {
+                continue;
+            }
+
+            foreach (['url', 'href'] as $urlField) {
+                if (!isset($column[$urlField]) || !\is_scalar($column[$urlField])) {
+                    continue;
+                }
+
+                $organizationId = $this->extractIdFromUrl((string) $column[$urlField]);
+
+                if ($organizationId > 0) {
+                    return $organizationId;
+                }
+            }
+        }
+
+        return 0;
+    }
+
+    /** @param array<string, mixed> $row */
+    private function extractRowFieldContent(array $row, string $fieldName): string
+    {
+        if (!isset($row[$fieldName])) {
+            return '';
+        }
+
+        if (\is_scalar($row[$fieldName])) {
+            return trim((string) $row[$fieldName]);
+        }
+
+        if (!\is_array($row[$fieldName])) {
+            return '';
+        }
+
+        $field = $row[$fieldName];
+
+        if (!isset($field['content']) || !\is_scalar($field['content'])) {
+            return '';
+        }
+
+        return trim((string) $field['content']);
+    }
+
+    private function extractIdFromUrl(string $url): int
+    {
+        $parts = parse_url($url);
+
+        if (!\is_array($parts) || !isset($parts['query'])) {
+            return 0;
+        }
+
+        parse_str((string) $parts['query'], $query);
+
+        foreach (['show', 'id'] as $queryKey) {
+            if (!isset($query[$queryKey])) {
+                continue;
+            }
+
+            $value = $query[$queryKey];
+
+            if (\is_scalar($value) && ctype_digit((string) $value)) {
+                return (int) $value;
+            }
+        }
+
+        return 0;
+    }
+
+    /** @param list<int> $organizationIds
+     *  @return array<int, array{ids: list<string>, labels: list<string>}>
+     */
+    private function fetchOrganizationTagMap(array $organizationIds): array
+    {
+        if ([] === $organizationIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            'SELECT r.pid AS organization_id, r.tag_id, t.tag 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',
+            ['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
+                 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',
+                ['tl_organization', $organizationIds],
+                [ParameterType::STRING, ArrayParameterType::INTEGER],
+            )->fetchAllAssociative();
+        }
+
+        $map = [];
+        $seen = [];
+
+        foreach ($rows as $row) {
+            $organizationId = (int) ($row['organization_id'] ?? 0);
+            $tagId = (int) ($row['tag_id'] ?? 0);
+            $label = trim((string) ($row['label'] ?? ''));
+
+            if ($organizationId <= 0 || $tagId <= 0 || '' === $label || isset($seen[$organizationId][$tagId])) {
+                continue;
+            }
+
+            $seen[$organizationId][$tagId] = true;
+            $map[$organizationId]['ids'][] = (string) $tagId;
+            $map[$organizationId]['labels'][] = $label;
+        }
+
+        foreach ($map as $organizationId => $tagData) {
+            $map[$organizationId]['ids'] = array_values(array_unique($tagData['ids'] ?? []));
+            $map[$organizationId]['labels'] = array_values(array_unique($tagData['labels'] ?? []));
+        }
+
+        return $map;
+    }
+
+    /** @param list<int> $organizationIds
+     *  @return array<int, array{uuid: string, isSvg: bool}>
+     */
+    private function fetchOrganizationLogoMap(array $organizationIds): array
+    {
+        if ([] === $organizationIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            'SELECT o.id AS organization_id, o.logo AS logo_uuid, f.extension AS file_extension, f.path AS file_path
+             FROM tl_organization o
+             LEFT JOIN tl_files f ON f.uuid = o.logo
+             WHERE o.id IN (?)',
+            [$organizationIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $map = [];
+
+        foreach ($rows as $row) {
+            $organizationId = (int) ($row['organization_id'] ?? 0);
+            $logoUuid = $this->normalizeUuid($row['logo_uuid'] ?? null);
+            $extension = strtolower(trim((string) ($row['file_extension'] ?? '')));
+
+            if ('' === $extension && isset($row['file_path']) && \is_scalar($row['file_path'])) {
+                $extension = strtolower((string) pathinfo((string) $row['file_path'], PATHINFO_EXTENSION));
+            }
+
+            $isSvg = 'svg' === $extension;
+
+            if ($organizationId <= 0 || '' === $logoUuid) {
+                continue;
+            }
+
+            $map[$organizationId] = [
+                'uuid' => $logoUuid,
+                'isSvg' => $isSvg,
+            ];
+        }
+
+        return $map;
+    }
+
+    private function normalizeUuid(mixed $value): string
+    {
+        if (null === $value) {
+            return '';
+        }
+
+        if (\is_resource($value)) {
+            $value = stream_get_contents($value) ?: '';
+        }
+
+        $trimmed = trim((string) $value);
+
+        if ('' === $trimmed) {
+            return '';
+        }
+
+        if (preg_match('/^[0-9a-fA-F-]{36}$/', $trimmed)) {
+            return strtolower($trimmed);
+        }
+
+        if (16 === strlen($trimmed)) {
+            return StringUtil::binToUuid($trimmed);
+        }
+
+        return '';
+    }
+
+}

src/Service/MapModuleDataProvider.php

@@ -0,0 +1,286 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\Service;
+
+use Contao\Config;
+use Contao\Date;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\Query\QueryBuilder;
+
+class MapModuleDataProvider
+{
+    /**
+     * @var array<string,array<string,true>>
+     */
+    private array $tableColumns = [];
+
+    public function __construct(
+        private readonly Connection $connection,
+    ) {
+    }
+
+    /**
+     * @return list<array{type:string,id:int,title:string,latitude:float,longitude:float,extra:array<string,mixed>}>
+     */
+    public function getMapItems(): array
+    {
+        $locationTable = $this->resolveExistingTable(['tl_location']);
+        $organizationTable = $this->resolveExistingTable(['tl_organization', 'tl_organisation']);
+
+        if (null === $locationTable) {
+            return [];
+        }
+
+        $items = [];
+        $seen = [];
+
+        foreach ($this->fetchOrganizationRows($organizationTable) as $row) {
+            $id = (int) ($row['id'] ?? 0);
+
+            if ($id <= 0 || isset($seen['organisation'][$id])) {
+                continue;
+            }
+
+            $coords = $this->extractCoordinates($row['latitude'] ?? null, $row['longitude'] ?? null);
+
+            if (null === $coords) {
+                continue;
+            }
+
+            $seen['organisation'][$id] = true;
+            $items[] = [
+                'type' => 'organisation',
+                'id' => $id,
+                'title' => trim((string) ($row['title'] ?? '')),
+                'latitude' => $coords['latitude'],
+                'longitude' => $coords['longitude'],
+                'extra' => [],
+            ];
+        }
+
+        foreach ($this->fetchLocationRows($locationTable) 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',
+                'id' => $id,
+                'title' => trim((string) ($row['title'] ?? '')),
+                'latitude' => $coords['latitude'],
+                'longitude' => $coords['longitude'],
+                'extra' => [],
+            ];
+        }
+
+        foreach ($this->fetchEventRows($locationTable) as $row) {
+            $id = (int) ($row['event_id'] ?? 0);
+
+            if ($id <= 0 || isset($seen['event'][$id])) {
+                continue;
+            }
+
+            $coords = $this->extractCoordinates($row['latitude'] ?? null, $row['longitude'] ?? null);
+
+            if (null === $coords) {
+                continue;
+            }
+
+            $seen['event'][$id] = true;
+            $items[] = [
+                'type' => 'event',
+                'id' => $id,
+                'title' => trim((string) ($row['event_title'] ?? '')),
+                'latitude' => $coords['latitude'],
+                'longitude' => $coords['longitude'],
+                'extra' => [
+                    'locationTitle' => trim((string) ($row['location_title'] ?? '')),
+                    'startDate' => $this->formatStartDate((int) ($row['startDate'] ?? 0)),
+                ],
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * @return list<array<string,mixed>>
+     */
+    private function fetchOrganizationRows(?string $table): array
+    {
+        if (null === $table) {
+            return [];
+        }
+
+        $qb = $this->connection->createQueryBuilder();
+        $qb
+            ->select('o.id', 'o.title', 'o.latitude', 'o.longitude')
+            ->from($table, 'o')
+            ->orderBy('o.id', 'ASC');
+
+        $this->applyPublicationConstraints($qb, 'o', $table);
+
+        return $qb->executeQuery()->fetchAllAssociative();
+    }
+
+    /**
+     * @return list<array<string,mixed>>
+     */
+    private function fetchLocationRows(string $locationTable): array
+    {
+        $qb = $this->connection->createQueryBuilder();
+        $qb
+            ->select('l.id', 'l.title', 'l.latitude', 'l.longitude')
+            ->from($locationTable, 'l')
+            ->orderBy('l.id', 'ASC');
+
+        $this->applyPublicationConstraints($qb, 'l', $locationTable);
+
+        return $qb->executeQuery()->fetchAllAssociative();
+    }
+
+    /**
+     * @return list<array<string,mixed>>
+     */
+    private function fetchEventRows(string $locationTable): array
+    {
+        if (!$this->tableExists('tl_calendar_events')) {
+            return [];
+        }
+
+        $qb = $this->connection->createQueryBuilder();
+        $qb
+            ->select(
+                'e.id AS event_id',
+                'e.title AS event_title',
+                'e.startDate',
+                'l.title AS location_title',
+                'l.latitude',
+                'l.longitude'
+            )
+            ->from('tl_calendar_events', 'e')
+            ->innerJoin('e', $locationTable, 'l', 'l.id = e.location_id')
+            ->andWhere('e.location_id > 0')
+            ->orderBy('e.id', 'ASC');
+
+        $this->applyPublicationConstraints($qb, 'e', 'tl_calendar_events');
+        $this->applyPublicationConstraints($qb, 'l', $locationTable);
+
+        return $qb->executeQuery()->fetchAllAssociative();
+    }
+
+    private function applyPublicationConstraints(QueryBuilder $qb, string $alias, string $table): void
+    {
+        $columns = $this->getColumnMap($table);
+        $now = time();
+
+        if (isset($columns['published'])) {
+            $qb
+                ->andWhere(sprintf('%s.published = :%s_published', $alias, $alias))
+                ->setParameter(sprintf('%s_published', $alias), '1');
+        }
+
+        if (isset($columns['start'])) {
+            $qb
+                ->andWhere(sprintf('(%1$s.start IS NULL OR %1$s.start = 0 OR %1$s.start <= :%1$s_start_now)', $alias))
+                ->setParameter(sprintf('%s_start_now', $alias), $now);
+        }
+
+        if (isset($columns['stop'])) {
+            $qb
+                ->andWhere(sprintf('(%1$s.stop IS NULL OR %1$s.stop = 0 OR %1$s.stop > :%1$s_stop_now)', $alias))
+                ->setParameter(sprintf('%s_stop_now', $alias), $now);
+        }
+    }
+
+    /**
+     * @return array{latitude:float,longitude:float}|null
+     */
+    private function extractCoordinates(mixed $latitude, mixed $longitude): ?array
+    {
+        if (null === $latitude || null === $longitude) {
+            return null;
+        }
+
+        $lat = trim(str_replace(',', '.', (string) $latitude));
+        $lng = trim(str_replace(',', '.', (string) $longitude));
+
+        if ('' === $lat || '' === $lng || !is_numeric($lat) || !is_numeric($lng)) {
+            return null;
+        }
+
+        return [
+            'latitude' => (float) $lat,
+            'longitude' => (float) $lng,
+        ];
+    }
+
+    private function formatStartDate(int $timestamp): string
+    {
+        if ($timestamp <= 0) {
+            return '';
+        }
+
+        $format = (string) Config::get('dateFormat');
+
+        return Date::parse('' !== $format ? $format : 'd.m.Y', $timestamp);
+    }
+
+    /**
+     * @param list<string> $candidates
+     */
+    private function resolveExistingTable(array $candidates): ?string
+    {
+        foreach ($candidates as $candidate) {
+            if ($this->tableExists($candidate)) {
+                return $candidate;
+            }
+        }
+
+        return null;
+    }
+
+    private function tableExists(string $table): bool
+    {
+        try {
+            return $this->connection->createSchemaManager()->tablesExist([$table]);
+        } catch (\Throwable) {
+            return false;
+        }
+    }
+
+    /**
+     * @return array<string,true>
+     */
+    private function getColumnMap(string $table): array
+    {
+        if (isset($this->tableColumns[$table])) {
+            return $this->tableColumns[$table];
+        }
+
+        $columns = [];
+
+        try {
+            foreach ($this->connection->createSchemaManager()->listTableColumns($table) as $name => $column) {
+                $columns[strtolower((string) $name)] = true;
+            }
+        } catch (\Throwable) {
+            $columns = [];
+        }
+
+        $this->tableColumns[$table] = $columns;
+
+        return $columns;
+    }
+}