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

contao/templates/frontend/event_map.html.twig

@@ -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>