diff --git a/meshmap_frontend/src/components/MeshMap.vue b/meshmap_frontend/src/components/MeshMap.vue index 54e1bb1..7d72181 100644 --- a/meshmap_frontend/src/components/MeshMap.vue +++ b/meshmap_frontend/src/components/MeshMap.vue @@ -27,6 +27,7 @@ const mapEl = ref(null) const menuNode = ref(null) const menuX = ref(0) const menuY = ref(0) +const lastRaisedNodeId = ref(null) let map: L.Map | null = null let markerLayer: L.LayerGroup | null = null let hasFitBounds = false @@ -94,6 +95,7 @@ function nodeDetailHref(nodeId: string): string { function openNodeMenu(node: MapNode, event: L.LeafletMouseEvent) { L.DomEvent.stopPropagation(event) + lastRaisedNodeId.value = node.node_id emit('select-node', node.node_id) menuNode.value = node menuX.value = event.originalEvent.clientX @@ -155,6 +157,7 @@ function renderMarkers(forceFit: boolean) { } const node = item const selected = node.node_id === props.selectedNodeId + const raised = selected || node.node_id === lastRaisedNodeId.value const marker = L.marker([node.latitude, node.longitude], { icon: L.divIcon({ className: `node-marker${selected ? ' selected' : ''}`, @@ -163,10 +166,12 @@ function renderMarkers(forceFit: boolean) { iconAnchor: [17, 11], }), title: node.label, + zIndexOffset: raised ? 1000 : 0, }) marker.bindPopup(buildNodePopupHTML(node), { maxWidth: 320, className: 'node-detail-popup' }) marker.on('click', (event) => { L.DomEvent.stopPropagation(event) + lastRaisedNodeId.value = node.node_id closeNodeMenu() emit('select-node', node.node_id) })