- improved map performance

- improved look and feel
- minified

public/plugins/vue/tt-components/tt-map.js

@@ -1,49 +1,35 @@
 Vue.component('tt-map', {
     props: {
-        markersData: {
-            type: Array,
-            default: () => [] // Expecting [{ lat: Number, lng: Number, options: { ..., noCluster?: Boolean, tooltip: { content: '...', minZoom: 18, ... } } }, ...]
-        },
-        config: {
-            type: Object,
-            default: () => ({}) // User overrides for defaults
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-            map: null,
-            markerLayer: null, // For clustered markers
-            nonClusteredLayer: null, // For important, always-visible markers
-            tileLayers: {
-                mapbox: { streets: null, satellite: null },
-                basemap: { streets: null, satellite: null }
-            },
-            mapProvider: localStorage.getItem('tt-map-provider') || 'basemap',
-            mapType: localStorage.getItem('tt-map-type') || 'streets',
-            internalLoading: true,
-            scriptsLoaded: false,
-            showSettings: false,
-            searchQuery: '',
-            searchResults: [],
-            isSearchLoading: false,
-            showSearchResults: false,
-            searchDebounce: null,
-            selectedMarker: null, // To hold the temporary marker
-        };
+        markersData: { type: Array, default: () => [] },
+        config: { type: Object, default: () => ({}) },
+        loading: { type: Boolean, default: false },
+        showLogo: { type: Boolean, default: false }
     },
+    data: () => ({
+        map: null,
+        markerLayer: null,
+        nonClusteredLayer: null,
+        tileLayers: { mapbox: { streets: null, satellite: null }, basemap: { streets: null, satellite: null } },
+        mapProvider: localStorage.getItem('tt-map-provider') || 'basemap',
+        mapType: localStorage.getItem('tt-map-type') || 'streets',
+        internalLoading: true,
+        scriptsLoaded: false,
+        showSettings: false,
+        searchQuery: '',
+        searchResults: [],
+        isSearchLoading: false,
+        showSearchResults: false,
+        searchDebounce: null,
+        selectedMarker: null,
+        isLegendOpen: false,
+        isMobile: window.innerWidth < 992,
+        showMobileControls: false
+    }),
     computed: {
-        isLoading() {
-            return this.internalLoading || this.loading;
-        },
+        isLoading() { return this.internalLoading || this.loading; },
         mapConfig() {
             const defaults = {
-                center: [47.07, 15.44], // Centered on Graz, Styria
-                zoom: 9,
-                mapboxKey: window.TT_CONFIG?.MAPBOX_KEY,
+                center: [47.07, 15.44], zoom: 9, mapboxKey: window.TT_CONFIG?.MAPBOX_KEY,
                 streetsTileUrl: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
                 streetsTileId: 'mapbox/streets-v11',
                 satelliteTileUrl: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
@@ -51,11 +37,11 @@ Vue.component('tt-map', {
                 tileAttribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                 basemapStreetsTileUrl: 'https://maps.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png',
                 basemapSatelliteTileUrl: 'https://maps.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg',
-                basemapAttribution: 'Datenquelle: basemap.at, Stadt Wien - data.wien.gv.at',
+                basemapAttribution: 'Datenquelle: basemap.at',
                 clusterOptions: {},
                 makiMarkerOptions: { icon: "marker", color: "#3b82f6", size: "m" }
             };
-            return { ...defaults, ...this.config }; // Merge user config over defaults
+            return { ...defaults, ...this.config };
         }
     },
     async mounted() {
@@ -69,6 +55,15 @@ Vue.component('tt-map', {
             console.error("Map Initialization Error:", error);
             this.internalLoading = false;
         }
+        window.addEventListener('resize', this.handleResize);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.map) {
+            this.map.off('zoomend moveend', this.updateTooltipVisibility);
+            this.map.remove();
+            this.map = null;
+        }
     },
     methods: {
         loadScripts() {
@@ -80,7 +75,6 @@ Vue.component('tt-map', {
                 { type: 'link', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css' },
                 { type: 'script', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js' }
             ];
-
             const promises = scripts.map(s => new Promise((resolve, reject) => {
                 let el;
                 if (s.type === 'script') {
@@ -88,156 +82,107 @@ Vue.component('tt-map', {
                     el.src = s.url; el.async = false; el.onload = resolve; el.onerror = reject;
                 } else {
                     el = document.createElement('link');
-                    el.rel = 'stylesheet'; el.href = s.url;
-                    el.onload = resolve;
-                    el.onerror = () => {
-                        console.warn(`Could not load stylesheet: ${s.url}`);
-                        resolve();
-                    };
+                    el.rel = 'stylesheet'; el.href = s.url; el.onload = resolve;
+                    el.onerror = () => { console.warn(`Could not load stylesheet: ${s.url}`); resolve(); };
                 }
                 document.head.appendChild(el);
             }));
             return Promise.all(promises);
         },
         initializeMap() {
-            if (!this.scriptsLoaded || typeof L === 'undefined' || typeof L.MarkerClusterGroup === 'undefined' || !this.mapConfig.mapboxKey) {
-                console.error("Leaflet or MarkerCluster is not loaded. Cannot initialize map.");
-                return;
-            }
-
-            this.map = L.map(this.$refs.mapContainer, { preferCanvas: true }).setView(this.mapConfig.center, this.mapConfig.zoom);
-            if (typeof L.MakiMarkers !== 'undefined') {
-                L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
-            }
-
-            this.map.createPane('fcpPane');
-            this.map.getPane('fcpPane').style.zIndex = 599; // Default markerPane is 600
-
+            if (!this.scriptsLoaded || typeof L === 'undefined' || !this.mapConfig.mapboxKey) return;
+            this.map = L.map(this.$refs.mapContainer, { preferCanvas: true, zoomControl: false }).setView(this.mapConfig.center, this.mapConfig.zoom);
+            L.control.zoom({ position: 'topright' }).addTo(this.map);
+            if (typeof L.MakiMarkers !== 'undefined') L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
+            this.map.createPane('fcpPane'); this.map.getPane('fcpPane').style.zIndex = 599;
             this.tileLayers.mapbox.streets = L.tileLayer(this.mapConfig.streetsTileUrl, { attribution: this.mapConfig.tileAttribution, maxZoom: 22, id: this.mapConfig.streetsTileId, tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey });
             this.tileLayers.mapbox.satellite = L.tileLayer(this.mapConfig.satelliteTileUrl, { attribution: this.mapConfig.tileAttribution, maxZoom: 22, id: this.mapConfig.satelliteTileId, tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey });
             this.tileLayers.basemap.streets = L.tileLayer(this.mapConfig.basemapStreetsTileUrl, { attribution: this.mapConfig.basemapAttribution, maxZoom: 19 });
             this.tileLayers.basemap.satellite = L.tileLayer(this.mapConfig.basemapSatelliteTileUrl, { attribution: this.mapConfig.basemapAttribution, maxZoom: 19 });
             this.setActiveTileLayer();
 
-            this.markerLayer = L.markerClusterGroup(this.mapConfig.clusterOptions);
+            // --- PERFORMANCE OPTIMIZATION ---
+            const clusterOptions = {
+                ...this.mapConfig.clusterOptions, // Keep existing user-defined options
+                chunkedLoading: true,             // Add markers in chunks to avoid freezing
+                maxClusterRadius: 100,            // Increase clustering radius for better performance when zoomed out
+                disableClusteringAtZoom: 18       // Disable clustering at high zoom levels
+            };
+            this.markerLayer = L.markerClusterGroup(clusterOptions);
+            // --- END PERFORMANCE OPTIMIZATION ---
+
             this.nonClusteredLayer = L.layerGroup();
             this.map.addLayer(this.markerLayer);
             this.map.addLayer(this.nonClusteredLayer);
-
             this.map.on('zoomend moveend', this.updateTooltipVisibility);
-
+            if (this.showLogo) {
+                const LogoControl = L.Control.extend({ onAdd: map => {
+                        const container = L.DomUtil.create('div', 'leaflet-control-logo');
+                        container.innerHTML = `<img src="/assets/images/xinon-full.png" style="width: 150px; opacity: 0.8; margin-right: 5px;">`;
+                        L.DomEvent.disableClickPropagation(container);
+                        return container;
+                    }});
+                new LogoControl({ position: 'bottomright' }).addTo(this.map);
+            }
             this.$nextTick(() => { this.map.invalidateSize(); });
-            window.addEventListener('resize', this.handleResize);
         },
         setActiveTileLayer() {
             if (!this.map) return;
-            Object.values(this.tileLayers).forEach(provider => {
-                Object.values(provider).forEach(layer => {
-                    if (layer && this.map.hasLayer(layer)) {
-                        this.map.removeLayer(layer);
-                    }
-                });
-            });
-
+            Object.values(this.tileLayers).forEach(p => Object.values(p).forEach(l => { if (l && this.map.hasLayer(l)) this.map.removeLayer(l); }));
             const activeLayer = this.tileLayers[this.mapProvider]?.[this.mapType];
-            if (activeLayer) {
-                activeLayer.addTo(this.map);
-            } else {
-                this.tileLayers.mapbox.streets.addTo(this.map);
-            }
+            if (activeLayer) activeLayer.addTo(this.map); else this.tileLayers.mapbox.streets.addTo(this.map);
         },
         updateMarkers() {
             if (!this.map || !this.markerLayer || !this.scriptsLoaded) return;
-            this.markerLayer.clearLayers();
-            this.nonClusteredLayer.clearLayers();
+            this.markerLayer.clearLayers(); this.nonClusteredLayer.clearLayers();
             const markersToCluster = [];
-
             this.markersData.forEach(data => {
                 if (data.lat == null || data.lng == null) return;
-
                 let icon;
                 if (data.options?.icon instanceof L.Icon) icon = data.options.icon;
                 else if (data.options?.icon) icon = L.divIcon(data.options.icon);
-                else if (typeof L.MakiMarkers !== 'undefined') {
-                    const makiOptions = { ...this.mapConfig.makiMarkerOptions, ...(data.options?.maki || {}) };
-                    icon = L.MakiMarkers.icon(makiOptions);
-                }
-
+                else if (typeof L.MakiMarkers !== 'undefined') icon = L.MakiMarkers.icon({ ...this.mapConfig.makiMarkerOptions, ...(data.options?.maki || {}) });
                 const markerOptions = { icon };
                 if (data.options?.zIndexOffset) markerOptions.zIndexOffset = data.options.zIndexOffset;
-
-                if (data.options?.noCluster) {
-                    markerOptions.pane = 'fcpPane';
-                }
-
+                if (data.options?.noCluster) markerOptions.pane = 'fcpPane';
                 const marker = L.marker([data.lat, data.lng], markerOptions);
-
-                // Attach a unique identifier if provided
-                if (data.hausnummerId) {
-                    marker.tt_hausnummerId = data.hausnummerId;
-                }
-
-                if (data.options?.tooltip) {
-                    marker.tt_tooltip_options = data.options.tooltip;
-                }
-
+                if (data.hausnummerId) marker.tt_hausnummerId = data.hausnummerId;
+                if (data.options?.tooltip) marker.tt_tooltip_options = data.options.tooltip;
                 if (data.options?.popup) marker.bindPopup(data.options.popup);
                 else if (data.options?.asyncPopupContent) {
                     marker.bindPopup(() => '<div class="popup-loader">Loading...</div>');
-                    marker.on('popupopen', async (e) => {
-                        const content = await data.options.asyncPopupContent(data);
-                        e.popup.setContent(content).update();
-                    });
-                }
-
-                if (data.options?.noCluster) {
-                    this.nonClusteredLayer.addLayer(marker);
-                } else {
-                    markersToCluster.push(marker);
+                    marker.on('popupopen', async e => e.popup.setContent(await data.options.asyncPopupContent(data)).update());
                 }
+                if (data.options?.noCluster) this.nonClusteredLayer.addLayer(marker);
+                else markersToCluster.push(marker);
             });
 
-            if (markersToCluster.length > 0) {
-                this.markerLayer.addLayers(markersToCluster);
-            }
+            // The chunkedLoading option will automatically handle adding these without freezing
+            if (markersToCluster.length > 0) this.markerLayer.addLayers(markersToCluster);
 
             this.updateTooltipVisibility();
-
-            const allMarkers = this.markerLayer.getLayers().concat(this.nonClusteredLayer.getLayers());
+            const allMarkers = [...this.markerLayer.getLayers(), ...this.nonClusteredLayer.getLayers()];
             if (allMarkers.length > 0) {
-                const bounds = L.latLngBounds(allMarkers.map(marker => marker.getLatLng()));
-                if (bounds.isValid()) {
-                    this.map.fitBounds(bounds, { padding: [50, 50], maxZoom: 17 });
-                }
+                const bounds = L.latLngBounds(allMarkers.map(m => m.getLatLng()));
+                if (bounds.isValid()) this.map.fitBounds(bounds, { padding: [50, 50], maxZoom: 17 });
             }
         },
         updateTooltipVisibility() {
             if (!this.map) return;
             const currentZoom = this.map.getZoom();
-
-            const processMarker = (marker) => {
+            const processMarker = marker => {
                 const tooltipOptions = marker.tt_tooltip_options;
                 if (!tooltipOptions || !tooltipOptions.minZoom) return;
-
                 const isBound = marker.getTooltip();
-
                 if (currentZoom >= tooltipOptions.minZoom) {
                     if (!isBound) {
                         const { content, minZoom, ...options } = tooltipOptions;
                         marker.bindTooltip(content, options);
-                        if (options.permanent) {
-                            marker.openTooltip();
-                        }
+                        if (options.permanent) marker.openTooltip();
                     }
-                } else {
-                    if (isBound) {
-                        marker.unbindTooltip();
-                    }
-                }
+                } else if (isBound) marker.unbindTooltip();
             };
-
-            this.markerLayer.eachLayer(processMarker);
-            this.nonClusteredLayer.eachLayer(processMarker);
+            this.markerLayer.eachLayer(processMarker); this.nonClusteredLayer.eachLayer(processMarker);
         },
         toggleMapType() {
             this.mapType = this.mapType === 'streets' ? 'satellite' : 'streets';
@@ -250,178 +195,120 @@ Vue.component('tt-map', {
             this.setActiveTileLayer();
             this.showSettings = false;
         },
-        handleResize() {
-            if (this.map) {
-                this.map.invalidateSize();
-            }
-        },
+        handleResize() { this.isMobile = window.innerWidth < 992; if (this.map) this.map.invalidateSize(); },
         searchLocations() {
             if (this.searchDebounce) clearTimeout(this.searchDebounce);
-            if (this.searchQuery.length < 3) {
-                this.searchResults = [];
-                this.showSearchResults = true;
-                return;
-            }
+            if (this.searchQuery.length < 3) { this.searchResults = []; this.showSearchResults = true; return; }
             this.isSearchLoading = true;
             this.searchDebounce = setTimeout(async () => {
                 try {
-                    const response = await axios.get('/Geocoding/autocomplete', {
-                        params: { q: this.searchQuery }
-                    });
-                    this.searchResults = response.data;
-                } catch (error) {
-                    console.error("Geocoding search failed:", error);
-                    this.searchResults = [];
-                } finally {
-                    this.isSearchLoading = false;
-                }
+                    const res = await axios.get('/Geocoding/autocomplete', { params: { q: this.searchQuery } });
+                    this.searchResults = res.data;
+                } catch (e) { this.searchResults = []; } finally { this.isSearchLoading = false; }
             }, 350);
         },
         selectLocation(location) {
-            this.searchQuery = location.text;
-            this.showSearchResults = false;
+            this.searchQuery = location.text; this.showSearchResults = false;
             const [lat, lng] = location.value.split(',').map(Number);
-
             if (this.map && !isNaN(lat) && !isNaN(lng)) {
                 this.map.flyTo([lat, lng], 17, { duration: 0.5 });
-
-                if (this.selectedMarker) {
-                    this.selectedMarker.remove();
-                }
-
-                const customIcon = L.divIcon({
-                    html: `<div class="custom-map-marker"><i class="fas fa-map-marker-alt"></i></div>`,
-                    className: '', // Important to keep it empty
-                    iconSize: [24, 24],
-                    iconAnchor: [12, 12],
-                    popupAnchor: [0, -14]
-                });
-
-                this.selectedMarker = L.marker([lat, lng], { icon: customIcon }).addTo(this.map)
-                    .bindPopup(`<b>${location.text}</b>`)
-                    .openPopup();
-
-                this.searchQuery = '';
-                this.searchResults = [];
-
-                setTimeout(() => {
-                    if (this.selectedMarker) {
-                        this.selectedMarker.remove();
-                        this.selectedMarker = null;
-                    }
-                }, 10000);
+                if (this.selectedMarker) this.selectedMarker.remove();
+                const icon = L.divIcon({ html: `<div class="custom-map-marker"><i class="fas fa-map-marker-alt"></i></div>`, className: '', iconSize: [24, 24], iconAnchor: [12, 12], popupAnchor: [0, -14] });
+                this.selectedMarker = L.marker([lat, lng], { icon }).addTo(this.map).bindPopup(`<b>${location.text}</b>`).openPopup();
+                this.searchQuery = ''; this.searchResults = [];
+                setTimeout(() => { if (this.selectedMarker) { this.selectedMarker.remove(); this.selectedMarker = null; } }, 10000);
             }
         },
         clearSearch() {
-            this.searchQuery = '';
-            this.searchResults = [];
-            this.showSearchResults = false;
-            if (this.selectedMarker) {
-                this.selectedMarker.remove();
-                this.selectedMarker = null;
-            }
+            this.searchQuery = ''; this.searchResults = []; this.showSearchResults = false;
+            if (this.selectedMarker) { this.selectedMarker.remove(); this.selectedMarker = null; }
         },
-        handleSearchFocus() {
-            this.showSearchResults = true;
-        },
-        handleSearchBlur() {
-            setTimeout(() => {
-                this.showSearchResults = false;
-            }, 200);
-        }
+        handleSearchFocus() { this.showSearchResults = true; },
+        handleSearchBlur() { setTimeout(() => { this.showSearchResults = false; }, 200); },
     },
     watch: {
         markersData: { handler() { this.updateMarkers(); }, deep: true },
-        loading(newVal) {
-            if (!newVal && this.map) {
-                this.$nextTick(() => this.map.invalidateSize());
-            }
-        }
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.handleResize);
-        if (this.map) {
-            this.map.off('zoomend moveend', this.updateTooltipVisibility);
-            this.map.remove();
-            this.map = null;
-        }
+        loading(newVal) { if (!newVal && this.map) this.$nextTick(() => this.map.invalidateSize()); }
     },
     template: `
       <div class="tt-map-wrapper">
-        <div v-if="isLoading" class="tt-map-loader">
-          <tt-loader></tt-loader>
-        </div>
+        <div v-if="isLoading" class="tt-map-loader"><tt-loader></tt-loader></div>
         <div ref="mapContainer" class="tt-map-container" :style="{ visibility: internalLoading ? 'hidden' : 'visible' }"></div>
 
-        <div class="tt-map-search-wrapper">
-          <div class="tt-map-search-input-container">
-            <i class="fas fa-search search-icon"></i>
-            <input
-                type="text"
-                class="tt-map-search-input"
-                placeholder="Adresse suchen..."
-                v-model="searchQuery"
-                @input="searchLocations"
-                @focus="handleSearchFocus"
-                @blur="handleSearchBlur"
-                autocomplete="off"
-            />
-            <button v-if="searchQuery" @click="clearSearch" class="clear-icon">
-              <i class="fas fa-times"></i>
-            </button>
+        <div v-if="!isMobile" class="tt-map-top-container">
+          <div class="tt-map-top-left-controls">
+            <slot name="tools"></slot>
+          </div>
+          <div class="tt-map-top-right-controls">
+            <div class="tt-map-search-wrapper">
+              <div class="tt-map-search-input-container">
+                <tt-input type="text" placeholder="Adresse suchen..." v-model="searchQuery"
+                          @input="searchLocations" @focus="handleSearchFocus" @blur="handleSearchBlur"
+                          autocomplete="off" :sm="true" :no-form-group="true"
+                          prefix-icon="fas fa-search"/>
+                <button v-if="searchQuery" @click="clearSearch" class="clear-icon"><i class="fas fa-times"></i></button>
+              </div>
+              <transition name="fade">
+                <ul v-if="showSearchResults" class="tt-map-search-results">
+                  <li v-if="isSearchLoading" class="result-item-info">
+                    <div class="spinner-border spinner-border-sm text-primary" role="status">
+                      <span class="sr-only">Loading...</span>
+                    </div>
+                    <span>Suche läuft...</span>
+                  </li>
+                  <li v-else-if="searchQuery.length < 3" class="result-item-info">Bitte mind. 3 Zeichen eingeben</li>
+                  <li v-else-if="searchResults.length === 0" class="result-item-info">Keine Ergebnisse gefunden</li>
+                  <li v-for="result in searchResults" :key="result.value" class="result-item" @mousedown="selectLocation(result)"><i class="fas fa-map-marker-alt"></i><span>{{ result.text }}</span></li>
+                </ul>
+              </transition>
+            </div>
+            <div class="tt-map-builtin-controls">
+              <div class="btn-group">
+                <tt-button @click="toggleMapType" :icon="mapType === 'streets' ? 'fas fa-globe-americas' : 'fas fa-map'" :text="mapType === 'streets' ? 'Satellit' : 'Karte'" sm additional-class="btn-light"/>
+                <tt-button @click="showSettings = !showSettings" icon="fas fa-cog" text="Anbieter" sm additional-class="btn-light"/>
+              </div>
+              <transition name="fade">
+                <div v-if="showSettings" class="tt-map-settings-panel">
+                  <div class="btn-group btn-group-sm">
+                    <tt-button @click="setMapProvider('mapbox')" text="Mapbox" :additional-class="mapProvider === 'mapbox' ? 'btn-primary' : 'btn-light'"/>
+                    <tt-button @click="setMapProvider('basemap')" text="basemap.at" :additional-class="mapProvider === 'basemap' ? 'btn-primary' : 'btn-light'"/>
+                  </div>
+                </div>
+              </transition>
+            </div>
           </div>
-          <transition name="fade">
-            <ul v-if="showSearchResults" class="tt-map-search-results">
-              <li v-if="isSearchLoading" class="result-item-info">
-                <i class="fas fa-spinner fa-spin"></i> Suche läuft...
-              </li>
-              <li v-else-if="searchQuery.length < 3" class="result-item-info">
-                Bitte mind. 3 Zeichen eingeben
-              </li>
-              <li v-else-if="searchResults.length === 0" class="result-item-info">
-                Keine Ergebnisse gefunden
-              </li>
-              <li
-                  v-for="result in searchResults"
-                  :key="result.value"
-                  class="result-item"
-                  @mousedown="selectLocation(result)"
-              >
-                <i class="fas fa-map-marker-alt"></i>
-                <span>{{ result.text }}</span>
-              </li>
-            </ul>
-          </transition>
         </div>
 
-        <div class="tt-map-top-controls">
-          <slot name="tools"></slot>
-        </div>
-
-        <div class="tt-map-builtin-controls">
-          <div class="btn-group-vertical">
-            <button @click="toggleMapType" class="btn btn-light btn-sm d-flex align-items-center">
-              <i :class="mapType === 'streets' ? 'fas fa-globe-americas' : 'fas fa-map'" style="width: 1.2em;"></i>
-              <span class="ml-1">{{ mapType === 'streets' ? 'Satellit' : 'Karte' }}</span>
-            </button>
-            <button @click="showSettings = !showSettings" class="btn btn-light btn-sm d-flex align-items-center">
-              <i class="fas fa-cog" style="width: 1.2em;"></i>
-              <span class="ml-1">Einstellungen</span>
-            </button>
-          </div>
-          <div v-if="showSettings" class="tt-map-settings-panel">
-            <div class="form-group mb-1">
-              <label class="d-block font-weight-bold small">Kartenanbieter</label>
-              <div class="btn-group btn-group-sm">
-                <button class="btn" :class="mapProvider === 'mapbox' ? 'btn-primary' : 'btn-light'" @click="setMapProvider('mapbox')">Mapbox</button>
-                <button class="btn" :class="mapProvider === 'basemap' ? 'btn-primary' : 'btn-light'" @click="setMapProvider('basemap')">basemap.at</button>
+        <div v-if="!isMobile" class="tt-map-bottom-right-container" :class="{'with-logo': showLogo}">
+          <slot name="bottom-tools"></slot>
+          <div v-if="$scopedSlots.legend" class="tt-map-bottom-controls">
+            <div class="map-legend-wrapper" :class="{'collapsed': !isLegendOpen}">
+              <div class="map-legend-header" @click="isLegendOpen = !isLegendOpen">
+                <h6><i class="fas fa-list-ul mr-1"></i> Legende</h6>
+                <i class="fas fa-chevron-down"></i>
+              </div>
+              <div v-show="isLegendOpen" class="map-legend-content">
+                <slot name="legend"></slot>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="tt-map-bottom-controls">
-          <slot name="legend"></slot>
+        <div v-if="isMobile" class="tt-map-mobile-fab">
+          <tt-button @click="showMobileControls = true" icon="fas fa-layer-group" additional-class="btn-primary btn-lg rounded-circle" title="Filter & Legende"/>
+        </div>
+
+        <div v-if="isMobile && showMobileControls" class="tt-map-mobile-controls-overlay" @click.self="showMobileControls = false">
+          <div class="tt-map-mobile-controls-panel">
+            <div class="panel-header">
+              <h5>Filter & Legende</h5>
+              <tt-button @click="showMobileControls = false" icon="fas fa-times" additional-class="btn-link text-secondary"/>
+            </div>
+            <div class="panel-content">
+              <div class="panel-section"><h6 class="font-weight-bold">Filter</h6><slot name="tools"></slot></div>
+              <div class="panel-section" v-if="$scopedSlots.legend"><h6 class="font-weight-bold">Legende</h6><slot name="legend"></slot></div>
+            </div>
+          </div>
         </div>
       </div>
     `