Jürgen Mummert
93 lines
3.1 KiB
Twig
93 lines
3.1 KiB
Twig
{% 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;
|
|
}
|
|
</style>
|
|
|
|
<script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
|
|
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js"></script>
|