added new adbrimofcp map

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

@@ -2,7 +2,7 @@ Vue.component('tt-map', {
     props: {
         markersData: {
             type: Array,
-            default: () => [] // Expecting [{ lat: Number, lng: Number, options: { maki?: Object, popup?: String, asyncPopupContent?: Function } }, ...]
+            default: () => [] // Expecting [{ lat: Number, lng: Number, options: { maki?: Object, popup?: String, asyncPopupContent?: Function, icon?: Object, tooltip?: Object } }, ...]
         },
         config: {
             type: Object,
@@ -35,7 +35,7 @@ Vue.component('tt-map', {
                 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}',
-                satelliteTileId: 'mapbox/satellite-streets-v12', // Or 'mapbox/satellite-v9'
+                satelliteTileId: 'mapbox/satellite-streets-v12',
                 tileAttribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                 clusterOptions: {},
                 makiMarkerOptions: { icon: "marker", color: "#3b82f6", size: "m" }
@@ -73,37 +73,40 @@ 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; resolve();
+                    el.rel = 'stylesheet'; el.href = s.url; el.onload = resolve; el.onerror = reject;
                 }
-                if (el) document.head.appendChild(el); else reject();
+                document.head.appendChild(el);
             }));
             return Promise.all(promises);
         },
         initializeMap() {
-            if (!this.scriptsLoaded || !L || !L.MarkerClusterGroup || !L.MakiMarkers || !this.mapConfig.mapboxKey) return;
+            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);
-            L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
+            if (typeof L.MakiMarkers !== 'undefined') {
+                L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
+            }
 
             this.tileLayers.streets = L.tileLayer(this.mapConfig.streetsTileUrl, {
-                attribution: this.mapConfig.tileAttribution, maxZoom: 18, id: this.mapConfig.streetsTileId,
+                attribution: this.mapConfig.tileAttribution, maxZoom: 20, id: this.mapConfig.streetsTileId,
                 tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey
             });
             this.tileLayers.satellite = L.tileLayer(this.mapConfig.satelliteTileUrl, {
-                attribution: this.mapConfig.tileAttribution, maxZoom: 18, id: this.mapConfig.satelliteTileId,
+                attribution: this.mapConfig.tileAttribution, maxZoom: 20, id: this.mapConfig.satelliteTileId,
                 tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey
             });
 
-            this.tileLayers[this.mapType].addTo(this.map); // Add initial layer based on preference
+            this.tileLayers[this.mapType].addTo(this.map);
 
             this.markerLayer = L.markerClusterGroup(this.mapConfig.clusterOptions);
             this.map.addLayer(this.markerLayer);
 
-            // Invalidate size after initial load if container might not have been ready
             this.$nextTick(() => {
                 this.map.invalidateSize();
             });
-            // Add resize listener
             window.addEventListener('resize', this.handleResize);
         },
         updateMarkers() {
@@ -112,32 +115,54 @@ Vue.component('tt-map', {
             const markersToAdd = [];
             this.markersData.forEach(data => {
                 if (data.lat != null && data.lng != null) {
-                    const makiOptions = { ...this.mapConfig.makiMarkerOptions, ...(data.options?.maki || {}) };
-                    const icon = L.MakiMarkers.icon(makiOptions);
+                    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);
+                    }
+
                     const marker = L.marker([data.lat, data.lng], { icon: icon });
 
                     if (data.options?.popup) {
                         marker.bindPopup(data.options.popup);
                     } else if (data.options?.asyncPopupContent && typeof data.options.asyncPopupContent === 'function') {
-                        marker.bindPopup(() => '<div class="popup-loader">Loading...</div>'); // Initial content
+                        marker.bindPopup(() => '<div class="popup-loader">Loading...</div>');
                         marker.on('popupopen', async (e) => {
                             const popup = e.popup;
                             try {
-                                const content = await data.options.asyncPopupContent(data); // Pass marker data to function
+                                const content = await data.options.asyncPopupContent(data);
                                 popup.setContent(content);
                             } catch (error) {
                                 console.error("Error loading popup content:", error);
                                 popup.setContent('<div class="text-danger">Failed to load content.</div>');
                             }
-                            popup.update(); // Adjust size
+                            popup.update();
                         });
                     }
 
-                    if (data.options?.tooltip) marker.bindTooltip(data.options.tooltip);
+                    if (data.options?.tooltip) {
+                        // Check if it's an object with content and options, or just a string
+                        if (typeof data.options.tooltip === 'object') {
+                            const tooltipContent = data.options.tooltip.content;
+                            const tooltipOptions = { ...data.options.tooltip };
+                            delete tooltipOptions.content; // Remove content to prevent conflicts
+                            marker.bindTooltip(tooltipContent, tooltipOptions);
+                        } else {
+                            marker.bindTooltip(data.options.tooltip);
+                        }
+                    }
+
                     markersToAdd.push(marker);
                 }
             });
-            if (markersToAdd.length > 0) this.markerLayer.addLayers(markersToAdd);
+            if (markersToAdd.length > 0) {
+                this.markerLayer.addLayers(markersToAdd);
+                this.map.fitBounds(this.markerLayer.getBounds());
+            }
         },
         toggleMapType() {
             this.map.removeLayer(this.tileLayers[this.mapType]);
@@ -147,7 +172,6 @@ Vue.component('tt-map', {
         },
         handleResize() {
             if (this.map) {
-                // Use debounce if resize events fire too rapidly
                 this.map.invalidateSize();
             }
         }
@@ -155,7 +179,6 @@ Vue.component('tt-map', {
     watch: {
         markersData: { handler() { this.updateMarkers(); }, deep: true },
         loading(newVal) {
-            // Optional: Invalidate map size when loading finishes, in case container size changed
             if (!newVal && this.map) {
                 this.$nextTick(() => this.map.invalidateSize());
             }