diff --git a/frontend/src/components/Map/MapLibreMap.tsx b/frontend/src/components/Map/MapLibreMap.tsx index 40eebe0..fa8be9a 100644 --- a/frontend/src/components/Map/MapLibreMap.tsx +++ b/frontend/src/components/Map/MapLibreMap.tsx @@ -774,7 +774,7 @@ export function MapLibreMap({ openPlannedPopupRef.current(planId, { lng: coords[0], lat: coords[1] }); }); - map.on('click', 'node-dots', (e) => { + map.on('click', 'node-dots-hit', (e) => { const feature = e.features?.[0]; if (!feature) return; const props = feature.properties as NodeFeatureProps; @@ -807,12 +807,6 @@ export function MapLibreMap({ // but all our props are primitives so this is safe. setPopupLinks(null); onNodeSelectRef.current?.(props.node_id); - // Nudge the map so the tapped node clears the right-docked detail panel. - const coords = (feature.geometry as GeoJSON.Point).coordinates as [number, number]; - if (window.matchMedia('(min-width: 641px)').matches) { - const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; - map.easeTo({ center: coords, offset: [-170, 0], duration: reduceMotion ? 0 : 420 }); - } }); // General map click — used for custom LOS mode and plan repeater placement on empty areas @@ -845,10 +839,10 @@ export function MapLibreMap({ }); // Make cursor a pointer over node dots and planned pins - map.on('mouseenter', 'node-dots', () => { + map.on('mouseenter', 'node-dots-hit', () => { map.getCanvas().style.cursor = 'pointer'; }); - map.on('mouseleave', 'node-dots', () => { + map.on('mouseleave', 'node-dots-hit', () => { map.getCanvas().style.cursor = (viewshedEnabledRef.current && useOverlayStore.getState().planRepeaterMode) || useOverlayStore.getState().customLosMode ? 'crosshair' : ''; }); map.on('mouseenter', 'planned-pins-dot', () => { diff --git a/frontend/src/components/Map/mapSourceLayers.ts b/frontend/src/components/Map/mapSourceLayers.ts index e863fe2..ad51d1b 100644 --- a/frontend/src/components/Map/mapSourceLayers.ts +++ b/frontend/src/components/Map/mapSourceLayers.ts @@ -78,6 +78,21 @@ export function installMapSourcesAndLayers( // ── Node dots source + layer ─────────────────────────────────────────── map.addSource('nodes', { type: 'geojson', data: EMPTY_FC }); + map.addLayer({ + id: 'node-dots-hit', + type: 'circle', + source: 'nodes', + filter: ['==', ['get', 'visible'], true], + paint: { + 'circle-radius': [ + 'interpolate', ['linear'], ['zoom'], + 6, 8, 9, 10, 11, 12, 13, 14, 16, 16, + ], + 'circle-opacity': 0, + 'circle-stroke-opacity': 0, + }, + }); + map.addLayer({ id: 'node-dots', type: 'circle',