feat(map): add organization color scheme and improve map controls

2026-02-25 21:02:33 +01:00
parent 68e991c053
commit 40aaa747d9
8 changed files with 1475 additions and 159 deletions
@@ -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;{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']['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';

@@ -160,6 +160,83 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
    'sql' => ['type' => 'string', 'length' => 128, 'default' => ''],
 ];

+$GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'][] = 'mapCenterMode';
+$GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapCenterMode_custom'] = 'mapCenterLat,mapCenterLng,mapCenterZoom';
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'],
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'eval' => ['tl_class' => 'w50 m12'],
+    'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapShowExternalOrganizations'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'],
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'eval' => ['tl_class' => 'w50 m12'],
+    'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapShowEvents'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowEvents'],
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'eval' => ['tl_class' => 'w50 m12'],
+    'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapEventColor'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapEventColor'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['maxlength' => 7, 'rgxp' => 'hexcolor', 'colorpicker' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 7, 'default' => '#BC5067'],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationColorScheme'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['maxlength' => 1024, 'tl_class' => 'clr long'],
+    'sql' => ['type' => 'string', 'length' => 1024, 'default' => ''],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterMode'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterMode'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options' => ['markers', 'custom'],
+    'reference' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'],
+    'eval' => ['submitOnChange' => true, 'mandatory' => true, 'tl_class' => 'clr w50', 'includeBlankOption' => false],
+    'sql' => ['type' => 'string', 'length' => 16, 'default' => 'markers'],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterLat'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterLat'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['maxlength' => 32, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 32, 'default' => ''],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterLng'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterLng'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['maxlength' => 32, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 32, 'default' => ''],
+];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterZoom'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'],
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['rgxp' => 'digit', 'maxlength' => 2, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'smallint', 'unsigned' => true, 'default' => 12],
+];
+
 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_');
@@ -13,3 +13,16 @@ $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['ID des Newsarchivs', '
 $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.'];
+$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']['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']['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)',
+	'custom' => 'Feste Geodaten + Zoom-Level',
+];
+$GLOBALS['TL_LANG']['tl_module']['mapCenterLat'] = ['Breitengrad (Center)', 'Breitengrad für die feste Kartenzentrierung, z. B. 51.0538'];
+$GLOBALS['TL_LANG']['tl_module']['mapCenterLng'] = ['Längengrad (Center)', 'Längengrad für die feste Kartenzentrierung, z. B. 13.3080'];
+$GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'] = ['Zoom-Level (Center)', 'Zoom-Level für die feste Kartenzentrierung (z. B. 12).'];
@@ -13,3 +13,16 @@ $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['News archive ID', 'Arc
 $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.'];
+$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']['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']['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)',
+	'custom' => 'Fixed coordinates + zoom level',
+];
+$GLOBALS['TL_LANG']['tl_module']['mapCenterLat'] = ['Center latitude', 'Latitude for fixed map centering, e.g. 51.0538'];
+$GLOBALS['TL_LANG']['tl_module']['mapCenterLng'] = ['Center longitude', 'Longitude for fixed map centering, e.g. 13.3080'];
+$GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'] = ['Center zoom level', 'Zoom level for fixed map centering (e.g. 12).'];
@@ -1,12 +1,87 @@
+{% set tags = mapOrganizationTags|default([]) %}
+
+<section
+    id="{{ mapFilterWrapperId|e('html_attr') }}"
+    class="eventmanager-map-filter"
+    data-map-filter-wrapper="1"
+    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>
+
+    <div
+        id="{{ mapFilterGroupId|e('html_attr') }}"
+        class="eventmanager-map-filter__group"
+        role="group"
+        aria-label="Organisationstypen"
+    >
+        {% if tags is iterable and tags|length > 0 %}
+            {% for tag in tags %}
+                <button
+                    type="button"
+                    class="eventmanager-map-filter__tag is-active"
+                    data-map-tag-filter="{{ tag.id|e('html_attr') }}"
+                    aria-pressed="true"
+                >{{ tag.label|e }}</button>
+            {% endfor %}
+        {% endif %}
+        <button
+            type="button"
+            class="eventmanager-map-filter__tag is-active"
+            data-map-event-toggle="1"
+            aria-pressed="true"
+        >Veranstaltungen</button>
+    </div>
+
+    <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>
+    </div>
+</section>
+
 <div
    id="{{ mapContainerId|e('html_attr') }}"
    class="eventmanager-map"
    data-eventmanager-map="1"
+    data-map-filter-wrapper-id="{{ mapFilterWrapperId|default('')|e('html_attr') }}"
    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-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') }}"
+    data-map-center-zoom="{{ mapCenterZoom|default(12)|e('html_attr') }}"
 ></div>

 <style>
+    .eventmanager-map-filter {
+        display: grid;
+        gap: .5rem;
+        margin-bottom: .75rem;
+    }
+
+    .eventmanager-map-filter__group,
+    .eventmanager-map-filter__actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+    }
+
+    .eventmanager-map-filter__tag[aria-pressed="true"] {
+        font-weight: 600;
+    }
+
    .eventmanager-map {
        width: 100%;
        min-height: 420px;
@@ -14,4 +89,4 @@
 </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>
+<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js"></script>