208 lines
9.5 KiB
JavaScript
208 lines
9.5 KiB
JavaScript
Vue.component('tt-map', {
|
|
props: {
|
|
markersData: {
|
|
type: Array,
|
|
default: () => [] // Expecting [{ lat: Number, lng: Number, options: { maki?: Object, popup?: String, asyncPopupContent?: Function, icon?: Object, tooltip?: Object } }, ...]
|
|
},
|
|
config: {
|
|
type: Object,
|
|
default: () => ({}) // User overrides for defaults
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
map: null,
|
|
markerLayer: null,
|
|
tileLayers: { streets: null, satellite: null },
|
|
mapType: localStorage.getItem('tt-map-type') || 'streets', // Default to 'streets' or stored preference
|
|
internalLoading: true,
|
|
scriptsLoaded: false,
|
|
};
|
|
},
|
|
computed: {
|
|
isLoading() {
|
|
return this.internalLoading || this.loading;
|
|
},
|
|
mapConfig() {
|
|
const defaults = {
|
|
center: [46.9, 15.4995],
|
|
zoom: 11,
|
|
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}',
|
|
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" }
|
|
};
|
|
return { ...defaults, ...this.config }; // Merge user config over defaults
|
|
}
|
|
},
|
|
async mounted() {
|
|
try {
|
|
await this.loadScripts();
|
|
this.scriptsLoaded = true;
|
|
this.initializeMap();
|
|
this.updateMarkers();
|
|
this.internalLoading = false;
|
|
} catch (error) {
|
|
console.error("Map Initialization Error:", error);
|
|
this.internalLoading = false;
|
|
}
|
|
},
|
|
methods: {
|
|
loadScripts() {
|
|
const scripts = [
|
|
{ type: 'link', url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' },
|
|
{ type: 'script', url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' },
|
|
{ type: 'script', url: 'https://unpkg.com/leaflet-makimarkers@3.1.0/Leaflet.MakiMarkers.js' },
|
|
{ type: 'link', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css' },
|
|
{ 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') {
|
|
el = document.createElement('script');
|
|
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 = reject;
|
|
}
|
|
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.tileLayers.streets = L.tileLayer(this.mapConfig.streetsTileUrl, {
|
|
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: 20, id: this.mapConfig.satelliteTileId,
|
|
tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey
|
|
});
|
|
|
|
this.tileLayers[this.mapType].addTo(this.map);
|
|
|
|
this.markerLayer = L.markerClusterGroup(this.mapConfig.clusterOptions);
|
|
this.map.addLayer(this.markerLayer);
|
|
|
|
this.$nextTick(() => {
|
|
this.map.invalidateSize();
|
|
});
|
|
window.addEventListener('resize', this.handleResize);
|
|
},
|
|
updateMarkers() {
|
|
if (!this.map || !this.markerLayer || !this.scriptsLoaded) return;
|
|
this.markerLayer.clearLayers();
|
|
const markersToAdd = [];
|
|
this.markersData.forEach(data => {
|
|
if (data.lat != null && data.lng != null) {
|
|
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>');
|
|
marker.on('popupopen', async (e) => {
|
|
const popup = e.popup;
|
|
try {
|
|
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();
|
|
});
|
|
}
|
|
|
|
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);
|
|
this.map.fitBounds(this.markerLayer.getBounds());
|
|
}
|
|
},
|
|
toggleMapType() {
|
|
this.map.removeLayer(this.tileLayers[this.mapType]);
|
|
this.mapType = this.mapType === 'streets' ? 'satellite' : 'streets';
|
|
this.tileLayers[this.mapType].addTo(this.map);
|
|
localStorage.setItem('tt-map-type', this.mapType);
|
|
},
|
|
handleResize() {
|
|
if (this.map) {
|
|
this.map.invalidateSize();
|
|
}
|
|
}
|
|
},
|
|
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.remove();
|
|
this.map = null;
|
|
}
|
|
},
|
|
template: `
|
|
<div style="position: relative; width: 100%; height: 100%;">
|
|
<div v-if="isLoading" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; background: rgba(255,255,255,0.7); display: flex; justify-content: center; align-items: center;">
|
|
<tt-loader></tt-loader>
|
|
</div>
|
|
<div ref="mapContainer" style="width: 100%; height: 100%; z-index: 1;" :style="{ visibility: internalLoading ? 'hidden' : 'visible' }"></div>
|
|
<button @click="toggleMapType"
|
|
class="btn btn-light btn-sm"
|
|
style="position: absolute; top: 10px; right: 10px; z-index: 1000;">
|
|
<i :class="mapType === 'streets' ? 'fas fa-globe-americas' : 'fas fa-map'"></i>
|
|
{{ mapType === 'streets' ? 'Satellite' : 'Map' }}
|
|
</button>
|
|
</div>
|
|
`
|
|
}); |