Skip to content

Commit

Permalink
Finally fix cluster open/spiderify bug. Added some delay to moveend a…
Browse files Browse the repository at this point in the history 
…ction. Added some things for a potential layer routing (tbc)
  • Loading branch information
@ut
ut committed Dec 9, 2024
1 parent 31628de commit 9d6b6df
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 52 deletions.
67 changes: 36 additions & 31 deletions src/components/LayerInfoView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@
import IconMarker from './icons/IconMarker.vue';
import { Icon } from 'leaflet';
import L from 'leaflet'
import 'leaflet.markercluster' // Import MarkerCluster script
import 'leaflet.markercluster.placementstrategies/dist/leaflet-markercluster.placementstrategies'
export default {
props: {
Expand Down Expand Up @@ -93,41 +92,48 @@
if (!props.map) return;
// Alle Layer durchsuchen
props.map.eachLayer((layer) => {
if (layer instanceof L.MarkerClusterGroup) {
if (layer instanceof L.MarkerClusterGroup && layer.options.id === place.id) {
// layer.refreshClusters();
console.log('XCheck Cluster gefunden:', layer);
// props.map.flyTo(layer.getLatLng(), 16);
/*
const cluster = findParentCluster(layer);
console.log('Check Cluster gefunden:', cluster);
*/
const childs = layer.getAllChildMarkers().length;
console.log('Check Cluster Kinder:', childs);
// cluster.spiderfy();
}
// Prüfen ob es ein Marker ist und die richtige ID hat
if (layer instanceof L.Marker && layer.options.id === place.id) {
console.log('Check layer:', layer);
const isVisible = layer?.visible ?? false;
// Zur Position fliegen
props.map.flyTo(layer.getLatLng(), 16);
// Vorhandenes Popup öffnen
const parentCluster = layer.__parent;
if (parentCluster) {
console.log('Check Parent Cluster gefunden:', parentCluster);
// Zoom to cluster bounds
// props.map.fitBounds(parentCluster.getBounds())
setTimeout(() => {
parentCluster.spiderfy();
layer.openPopup();
}, 1000);
}
// Vorhandenes Popup öffnen
if (layer.getPopup()) {
if ( isVisible ) {
console.log('Layer ist sichtbar:', place.id);
layer.openPopup();
} else {
console.log('Layer nicht sichtbar:', place.id);
const cluster = findParentCluster(layer);
console.log('Check Cluster gefunden:', cluster);
if (cluster && cluster !== layer) {
console.log('Cluster gefunden:', cluster);
setTimeout(() => {
cluster.spiderfy();
}, 1000);
} else {
console.log('Kein Cluster gefunden:', cluster);
}
layer.openPopup();
}
} else {
Expand All @@ -138,32 +144,31 @@
};
const findParentCluster = (layer) => {
console.log('Suche Parent Cluster für:', layer);
console.log('Suche Parent Cluster in:', props.map);
if (!props.map) return null;
try {
return;
// Alle Layer der Karte durchgehen
let parentCluster = null;
props.map.eachLayer((mapLayer) => {
// Prüfen ob es sich um eine MarkerClusterGroup handelt
if (mapLayer instanceof L.MarkerClusterGroup) {
console.log('mapLayer:', mapLayer);
console.log('Check ClusterGroup gefunden:', mapLayer);
// Alle Cluster dieser Gruppe durchgehen
parentCluster = mapLayer.getVisibleParent(layer);
/*
mapLayer.eachLayer((cluster) => {
console.log('Check for Cluster:', cluster);
if (cluster instanceof L.MarkerCluster) {
console.log('mapLayer cluster:', cluster);
console.log('Check MarkerCluster gefunden:', cluster);
// Prüfen ob unser Layer in diesem Cluster ist
console.log('Check Cluster Kinder:', cluster.getAllChildMarkers());
const childMarkers = cluster.getAllChildMarkers();
if (childMarkers.includes(layer)) {
parentCluster = cluster;
}
}
});
*/
}
});
Expand All @@ -181,17 +186,17 @@
};
const openPlaceInfo2 = (place) => {
console.log('openPlaceInfo2', place);
if( PopupIsVisible(props.map,place) ) {
// if( PopupIsVisible(props.map,place) ) {
props.layerData.value = null;
sidebarStore.closeSidebar();
placeData.value = place.value;
// placeData.value = place.value;
if (!props.map) {
console.warn('props.map not available!!');
}
// closeAllPopups();
closeAllPopups();
openExistingPopup(place);
router.push({ path: `/place/${place.id}` })
}
// router.push({ path: `/place/${place.id}` })
// }
};
return { layerStore, closeOverlay, openPlaceInfo2, PopupIsVisible, placeData, sidebarStore, iconData };
}
Expand Down
63 changes: 45 additions & 18 deletions src/components/LeafletMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export default {
const placeData = ref(null);
const places = ref([]);
const relations = ref([]);
const layers = ref([]);
const layerData = ref(null);
const layerStore = useLayerStore();
const sidebarStore = useSidebarStore();
Expand Down Expand Up @@ -225,9 +226,15 @@ export default {
loadJSONData(mapElement)
}
})
let lastCallTime = Date.now();
const saveMapState = () => {
console.log('saveMapState called')
const now = Date.now();
if ( ( now - lastCallTime ) < 1000) { // 1 Sekunde
console.log('saveMapState skipped after delay',( now - lastCallTime ))
return;
}
console.log('saveMapState passed after delay',( now - lastCallTime ))
lastCallTime = now;
const newCenter = mapInstance.value.getCenter()
const newZoom = mapInstance.value.getZoom()
const visibleOverlayLayers = {}
Expand All @@ -241,7 +248,7 @@ export default {
mapInstance.value.eachLayer((layer) => {
Object.keys(overlayLayers.value).forEach((layerName) => {
if (layer === overlayLayers.value[layerName]) {
console.log('overlayLayers', layerName, true);
// console.log('overlayLayers', layerName, true);
visibleOverlayLayers[layerName] = true
}
})
Expand All @@ -258,7 +265,7 @@ export default {
localStorage.setItem('mapCenter', JSON.stringify([newCenter.lat, newCenter.lng]))
localStorage.setItem('mapZoom', newZoom.toString())
localStorage.setItem('mapLayers', JSON.stringify(visibleOverlayLayers))
console.log('saveMapState visibleOverlayLayers', visibleOverlayLayers)
// console.log('saveMapState visibleOverlayLayers', visibleOverlayLayers)
localStorage.setItem('basemap', visibleBasemap)
console.log('saveMapState mapZoom', newZoom);
}
Expand Down Expand Up @@ -319,6 +326,10 @@ export default {
const markerclusterSettings = {
chunkedLoading: true,
maxClusterRadius: 0,
/*
disableClusteringAtZoom: 20,
spiderfyOnMaxZoom: true,
*/
showCoverageOnHover: false,
animate: true,
Expand Down Expand Up @@ -562,6 +573,21 @@ export default {
places: layer.places.length,
checked: visibleLayers[layer.id]
};
let darkcolor = layer.color;
if ( layer.color == '#b1f075') {
darkcolor = '#92c460';
} else if ( layer.color == '#f0d875' ) {
darkcolor = '#d1b132';
} else if ( layer.color == '#75b8f0' ) {
darkcolor = '#5a8fc0';
} else if ( layer.color == '#f07575' ) {
darkcolor = '#c46060';
} else {
darkcolor = layer.color;
}
layer.color = darkcolor;
layers.value.push(layer)
layer.places.forEach((place) => {
let mtype = 'place'
Expand All @@ -572,17 +598,7 @@ export default {
} else if (layer.title === 'Hintergrund Informationen') {
mtype = 'information';
}
let darkcolor = layer.color;
if ( layer.color == '#b1f075') {
darkcolor = '#92c460';
} else if ( layer.color == '#f0d875' ) {
darkcolor = '#d1b132';
} else if ( layer.color == '#75b8f0' ) {
darkcolor = '#5a8fc0';
} else if ( layer.color == '#f07575' ) {
darkcolor = '#c46060';
}
place.layer_title = layer.title;
place.layer_color = darkcolor;
places.value.push(place)
Expand Down Expand Up @@ -884,12 +900,23 @@ export default {
console.log('placeData', placeData.value.lat)
console.log('placeData', placeData.value.lon)
sidebarStore.openSidebar();
mapInstance.value.flyTo([placeData.value.lat,placeData.value.lon], 16, { paddingTopLeft: [200, 0], paddingBottomRight: [0, 0] });
mapInstance.value.flyTo([placeData.value.lat,placeData.value.lon], 16, { paddingTopLeft: [800, 800], paddingBottomRight: [0, 0] });
}
}, { immediate: true }
)
watch(
() => route.params.layerId, (newId) => {
console.log('route.params.layerId', newId)
console.log('layers', layers.value)
let layer = layers.value.find(l => l.id === newId)
if (layer) {
console.log('layer', layer)
openLayerInfo(layer,layer.color);
} else {
console.log('layer not found', newId)
}
}, { immediate: true }
)
return {
mapElement,
mapInstance,
Expand Down
8 changes: 6 additions & 2 deletions src/components/PlaceView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export default {
// const placeData = ref(null);
const { focusMarkerById } = useMap()
const placeData = props.placeData;
const layerData = ref(null);
onMounted(() => {
console.log('place.id', props.placeData.id);
Expand Down Expand Up @@ -156,9 +157,12 @@ export default {
});
};
const openLayerInfo = (layer,layerDarkcolor) => {
sidebarStore.closeSidebar();
console.log('openLayerInfo', layer.id )
placeData.value = null;
console.log('openLayerInfo',layer.color)
placeData.value = null;
layerData.value = layer;
sidebarStore.openSidebar();
// router.push({ name: 'layerInfo', params: { layerId: layerId.toString() } });
};
const closeOverlay = (placeId) => {
Expand All @@ -175,7 +179,7 @@ export default {
router.push({ path: '/' })
};
return { layerStore, closeOverlay, sidebarStore, openLayerInfo, PopupIsVisible, iconData, goToPlace, openExistingPopup, closeAllPopups};
return { layerStore, closeOverlay, sidebarStore, openLayerInfo, PopupIsVisible, iconData, layerData, goToPlace, openExistingPopup, closeAllPopups};
}
}
</script>
Expand Down
2 changes: 1 addition & 1 deletion src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const router = createRouter({
},
{
path: '/layer/:layerId',
name: 'layerInfo',
name: 'LayerInfo',
component: HomeView,
props: true
}
Expand Down

0 comments on commit 9d6b6df

Please sign in to comment.