feat: add fcp map
fix: fixed lazy fcp search fix: try to fix preorder filter
This commit is contained in:
Luca Haid
@@ -0,0 +1,185 @@
|
||||
Vue.component('tt-map', {
|
||||
props: {
|
||||
markersData: {
|
||||
type: Array,
|
||||
default: () => [] // Expecting [{ lat: Number, lng: Number, options: { maki?: Object, popup?: String, asyncPopupContent?: Function } }, ...]
|
||||
},
|
||||
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: [47.0707, 15.4395],
|
||||
zoom: 13,
|
||||
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', // Or 'mapbox/satellite-v9'
|
||||
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; resolve();
|
||||
}
|
||||
if (el) document.head.appendChild(el); else reject();
|
||||
}));
|
||||
return Promise.all(promises);
|
||||
},
|
||||
initializeMap() {
|
||||
if (!this.scriptsLoaded || !L || !L.MarkerClusterGroup || !L.MakiMarkers || !this.mapConfig.mapboxKey) return;
|
||||
|
||||
this.map = L.map(this.$refs.mapContainer, { preferCanvas: true }).setView(this.mapConfig.center, this.mapConfig.zoom);
|
||||
L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
|
||||
|
||||
this.tileLayers.streets = L.tileLayer(this.mapConfig.streetsTileUrl, {
|
||||
attribution: this.mapConfig.tileAttribution, maxZoom: 18, 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,
|
||||
tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey
|
||||
});
|
||||
|
||||
this.tileLayers[this.mapType].addTo(this.map); // Add initial layer based on preference
|
||||
|
||||
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() {
|
||||
if (!this.map || !this.markerLayer || !this.scriptsLoaded) return;
|
||||
this.markerLayer.clearLayers();
|
||||
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);
|
||||
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.on('popupopen', async (e) => {
|
||||
const popup = e.popup;
|
||||
try {
|
||||
const content = await data.options.asyncPopupContent(data); // Pass marker data to function
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
if (data.options?.tooltip) marker.bindTooltip(data.options.tooltip);
|
||||
markersToAdd.push(marker);
|
||||
}
|
||||
});
|
||||
if (markersToAdd.length > 0) this.markerLayer.addLayers(markersToAdd);
|
||||
},
|
||||
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) {
|
||||
// Use debounce if resize events fire too rapidly
|
||||
this.map.invalidateSize();
|
||||
}
|
||||
}
|
||||
},
|
||||
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());
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
`
|
||||
});
|
||||
Reference in New Issue
Block a user