- improved map performance

- improved look and feel
- minified

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

@@ -1,9 +1,8 @@
-/* tt-map.css */
 .tt-map-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: #f0f0f0; /* Placeholder color while map loads */
+    background-color: #f0f0f0;
 }
 
 .tt-map-container {
@@ -25,95 +24,105 @@
     align-items: center;
 }
 
-/* Slot for top controls like filters */
-.tt-map-top-controls {
+.tt-map-top-container {
     position: absolute;
     top: 10px;
     left: 10px;
-    z-index: 401;
+    right: 10px;
+    z-index: 402;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px;
+    pointer-events: none;
+    flex-wrap: wrap;
 }
 
-/* Slot for bottom controls like legend */
-.tt-map-bottom-controls {
+.tt-map-top-container > * {
+    pointer-events: auto;
+}
+
+.tt-map-top-left-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.tt-map-top-right-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-end;
+    margin-right: 50px;
+}
+
+.tt-map-bottom-right-container {
     position: absolute;
     bottom: 30px;
     right: 10px;
     z-index: 401;
-}
-
-/* Container for built-in map buttons (zoom, layer toggle) */
-.tt-map-builtin-controls {
-    position: absolute;
-    top: 60px; /* Pushed down to make space for the search bar */
-    right: 10px;
-    z-index: 401;
     display: flex;
-    gap: 0.5rem;
     flex-direction: column;
     align-items: flex-end;
+    gap: 10px;
 }
 
-.tt-map-builtin-controls .btn {
-    min-width: 120px;
-    text-align: left;
-    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+.tt-map-bottom-right-container.with-logo {
+    bottom: 90px;
 }
 
-.tt-map-settings-panel {
-    background-color: white;
-    padding: 0.75rem;
-    border-radius: 5px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-    border: 1px solid rgba(0,0,0,0.1);
+.leaflet-control-container .leaflet-top.leaflet-right {
+    z-index: 403;
 }
 
-.tt-map-settings-panel .btn-group .btn {
-    font-size: 0.8rem;
+.leaflet-control-zoom {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 }
 
-.popup-loader {
-    text-align: center;
-    padding: 10px;
-}
-
-/* --- NEW MAP SEARCH STYLES --- */
 .tt-map-search-wrapper {
+    width: 100%;
+    max-width: 350px;
+}
+
+.tt-input-with-icon {
+    position: relative;
+    width: 100%;
+}
+
+.tt-input-with-icon .prefix-icon {
     position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 402;
-    width: 320px;
-    max-width: calc(100% - 20px);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #888;
+    pointer-events: none;
+    z-index: 5;
+}
+
+.tt-input-with-icon input.has-prefix-icon {
+    padding-left: 32px !important;
 }
 
 .tt-map-search-input-container {
     position: relative;
     display: flex;
     align-items: center;
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(0,0,0,0.1);
+    background-color: white;
     border-radius: 6px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
-    padding: 0.25rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
     height: 42px;
+    min-width: 250px;
+    padding: 12px;
 }
 
-.tt-map-search-input {
+.tt-map-search-input-container .tt-input {
     width: 100%;
-    height: 100%;
-    padding: 0 30px 0 32px;
-    border: none;
-    background-color: transparent;
-    font-size: 14px;
-    outline: none;
 }
 
-.tt-map-search-input-container .search-icon {
-    position: absolute;
-    left: 12px;
-    color: #888;
-    pointer-events: none;
+.tt-map-search-input-container .tt-input input {
+    padding-right: 30px !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
 }
 
 .tt-map-search-input-container .clear-icon {
@@ -125,10 +134,7 @@
     color: #aaa;
     font-size: 16px;
     padding: 5px;
-}
-
-.tt-map-search-input-container .clear-icon:hover {
-    color: #333;
+    z-index: 5;
 }
 
 .tt-map-search-results {
@@ -137,14 +143,13 @@
     margin: 8px 0 0 0;
     background-color: #fff;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     max-height: 300px;
     overflow-y: auto;
     border: 1px solid #ddd;
 }
 
-.tt-map-search-results .result-item,
-.tt-map-search-results .result-item-info {
+.tt-map-search-results .result-item, .tt-map-search-results .result-item-info {
     padding: 10px 15px;
     cursor: pointer;
     display: flex;
@@ -171,7 +176,128 @@
     cursor: default;
 }
 
-/* Fade animation for the results list */
+.tt-map-builtin-controls {
+    position: relative;
+}
+
+.tt-map-builtin-controls .btn {
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+}
+
+.tt-map-settings-panel {
+    position: absolute;
+    top: calc(100% + 5px);
+    right: 0;
+    z-index: 10;
+    background-color: white;
+    padding: 0.75rem;
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.map-legend-wrapper {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+}
+
+.map-legend-header {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.map-legend-header h6 {
+    margin: 0;
+    font-weight: bold;
+}
+
+.map-legend-header i.fa-chevron-down {
+    transition: transform 0.2s ease;
+}
+
+.map-legend-wrapper:not(.collapsed) .map-legend-header i.fa-chevron-down {
+    transform: rotate(180deg);
+}
+
+.map-legend-content {
+    padding: 0 0.75rem 0.5rem;
+}
+
+.tt-map-mobile-fab .btn {
+    width: 56px;
+    height: 56px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.tt-map-mobile-fab {
+    position: absolute;
+    bottom: calc(90px + env(safe-area-inset-bottom));
+    right: 10px;
+    z-index: 401;
+}
+
+.tt-map-mobile-controls-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1050;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-end;
+}
+
+.tt-map-mobile-controls-panel {
+    background-color: #fff;
+    width: 100%;
+    max-height: 75vh;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid #e9ecef;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.panel-header h5 {
+    margin-bottom: 0;
+    font-size: 1.1rem;
+}
+
+.panel-content {
+    padding: 1rem;
+    overflow-y: auto;
+}
+
+.panel-section:not(:last-child) {
+    margin-bottom: 1.5rem;
+}
+
+.panel-section h6 {
+    font-weight: bold;
+    margin-bottom: 0.75rem;
+}
+
+.panel-section .map-filter-container {
+    flex-direction: column;
+    align-items: stretch;
+    margin-left: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    box-shadow: none;
+}
+
 .fade-enter-active, .fade-leave-active {
     transition: opacity 0.2s ease;
 }
@@ -180,7 +306,6 @@
     opacity: 0;
 }
 
-/* --- NEW CUSTOM MARKER STYLE --- */
 .custom-map-marker {
     background-color: rgba(0, 123, 255, 0.9);
     width: 24px;
@@ -212,4 +337,15 @@
         transform: scale(0.9);
         box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
     }
+}
+
+.leaflet-control-logo {
+    background-color: rgba(255, 255, 255, 0.7);
+    padding: 2px 5px;
+    border-radius: 5px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+}
+
+.leaflet-control-logo img {
+    display: block;
 }

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

@@ -11,6 +11,7 @@ Vue.component('tt-input', {
         additionalProps: Object,
         sm: {type: Boolean, default: false},
         noFormGroup: {type: Boolean, default: false},
+        prefixIcon: {type: String, default: null}
     },
     data() {
         return {
@@ -23,25 +24,26 @@ Vue.component('tt-input', {
         }
     },
     template: `
-      <div :class="{'row': row, 'form-group' : !noFormGroup}">
+      <div :class="{'row': row, 'form-group' : !noFormGroup, 'tt-input-with-icon': prefixIcon}">
         <slot name="prepend"></slot>
         <label
             :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
             v-if="label"
             :for="label">{{ label }}</label>
+        <i v-if="prefixIcon" :class="['prefix-icon', prefixIcon]"></i>
         <input :type="type"
-                :id="label"
+               :id="label"
                :name="label"
                class="form-control"
-               :class="{'form-control-sm': sm, 'col-sm-8': row}"
+               :class="{'form-control-sm': sm, 'col-sm-8': row, 'has-prefix-icon': prefixIcon}"
                :placeholder="placeholder"
                :required="required"
-                :disabled="disabled"
+               :disabled="disabled"
                v-bind="additionalProps"
                v-model="inputValue"
                @input="$emit('input', $event.target.value)"
-        >
+               @blur="$emit('blur', $event)" />
         <small v-if="hint" class="form-text text-muted">{{ hint }}</small>
       </div>
     `
-});
+});

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

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

@@ -1,6 +1,6 @@
 Vue.component('tt-switch', {
     template: `
-      <label class="tt-switch">
+      <label class="tt-switch" :class="{'m-0': noMargin}">
         <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)" :disabled="loading">
         <span class="slider round">
                 <span v-if="loading" class="spinner-wrapper"><span class="spinner"></span></span>
@@ -9,6 +9,7 @@ Vue.component('tt-switch', {
     `,
     props: {
         value: { type: Boolean, default: false },
-        loading: { type: Boolean, default: false }
+        loading: { type: Boolean, default: false },
+        noMargin: { type: Boolean, default: false }
     }
 });