307 lines
13 KiB
JavaScript
307 lines
13 KiB
JavaScript
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,
|
|
};
|
|
},
|
|
computed: {
|
|
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,
|
|
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>',
|
|
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',
|
|
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 = () => {
|
|
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
|
|
|
|
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: 20 });
|
|
this.tileLayers.basemap.satellite = L.tileLayer(this.mapConfig.basemapSatelliteTileUrl, { attribution: this.mapConfig.basemapAttribution, maxZoom: 20 });
|
|
this.setActiveTileLayer();
|
|
|
|
this.markerLayer = L.markerClusterGroup(this.mapConfig.clusterOptions);
|
|
this.nonClusteredLayer = L.layerGroup();
|
|
this.map.addLayer(this.markerLayer);
|
|
this.map.addLayer(this.nonClusteredLayer);
|
|
|
|
this.map.on('zoomend moveend', this.updateTooltipVisibility);
|
|
|
|
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);
|
|
}
|
|
});
|
|
});
|
|
|
|
const activeLayer = this.tileLayers[this.mapProvider]?.[this.mapType];
|
|
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();
|
|
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);
|
|
}
|
|
|
|
const markerOptions = { icon };
|
|
if (data.options?.zIndexOffset) markerOptions.zIndexOffset = data.options.zIndexOffset;
|
|
|
|
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.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);
|
|
}
|
|
});
|
|
|
|
if (markersToCluster.length > 0) {
|
|
this.markerLayer.addLayers(markersToCluster);
|
|
}
|
|
|
|
this.updateTooltipVisibility();
|
|
|
|
const allMarkers = this.markerLayer.getLayers().concat(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 });
|
|
}
|
|
}
|
|
},
|
|
updateTooltipVisibility() {
|
|
if (!this.map) return;
|
|
const currentZoom = this.map.getZoom();
|
|
|
|
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();
|
|
}
|
|
}
|
|
} else {
|
|
if (isBound) {
|
|
marker.unbindTooltip();
|
|
}
|
|
}
|
|
};
|
|
|
|
this.markerLayer.eachLayer(processMarker);
|
|
this.nonClusteredLayer.eachLayer(processMarker);
|
|
},
|
|
toggleMapType() {
|
|
this.mapType = this.mapType === 'streets' ? 'satellite' : 'streets';
|
|
localStorage.setItem('tt-map-type', this.mapType);
|
|
this.setActiveTileLayer();
|
|
},
|
|
setMapProvider(provider) {
|
|
this.mapProvider = provider;
|
|
localStorage.setItem('tt-map-provider', provider);
|
|
this.setActiveTileLayer();
|
|
this.showSettings = false;
|
|
},
|
|
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.off('zoomend moveend', this.updateTooltipVisibility);
|
|
this.map.remove();
|
|
this.map = null;
|
|
}
|
|
},
|
|
template: `
|
|
<div class="tt-map-wrapper">
|
|
<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-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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tt-map-bottom-controls">
|
|
<slot name="legend"></slot>
|
|
</div>
|
|
</div>
|
|
`
|
|
}); |