fix(map): boundary lifecycle cleanup on place deselection

Clear boundary source data when:
- Clicking outside the marker circle (deselecting)
- Clicking a new place (before setting new boundary)
- Clicking empty map area (generic map click)

This ensures:
1. Re-clicking the same city after dismissing re-renders boundary
   (selectedPlace is properly cleared, triggering fresh useEffect)
2. Clicking away doesn't leave stale boundary outline
   (boundary source explicitly cleared to empty FeatureCollection)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-04-29 23:07:41 +00:00
commit 29f995d885

View file

@ -1252,6 +1252,12 @@ const MapView = forwardRef(function MapView(_, ref) {
// Outside circle deselect, no new selection // Outside circle deselect, no new selection
store.clearClickMarker() store.clearClickMarker()
store.clearSelectedPlace() store.clearSelectedPlace()
// Clear boundary when deselecting
const boundarySource = map.getSource(BOUNDARY_SOURCE)
if (boundarySource) {
boundarySource.setData({ type: 'FeatureCollection', features: [] })
}
setSelectedHighlight(map, null)
} }
} else { } else {
// State A: nothing selected select // State A: nothing selected select
@ -1267,7 +1273,7 @@ const MapView = forwardRef(function MapView(_, ref) {
// Find first feature with a name (respects layer order = priority) // Find first feature with a name (respects layer order = priority)
const labelFeature = features.find(f => f.properties?.name) const labelFeature = features.find(f => f.properties?.name)
// Clear previous feature highlight // Clear previous feature highlight and boundary
if (highlightedFeatureRef.current) { if (highlightedFeatureRef.current) {
const { source, sourceLayer, id } = highlightedFeatureRef.current const { source, sourceLayer, id } = highlightedFeatureRef.current
try { try {
@ -1276,6 +1282,11 @@ const MapView = forwardRef(function MapView(_, ref) {
highlightedFeatureRef.current = null highlightedFeatureRef.current = null
} }
setSelectedHighlight(map, null) setSelectedHighlight(map, null)
// Clear old boundary before setting new place
const boundarySource = map.getSource(BOUNDARY_SOURCE)
if (boundarySource) {
boundarySource.setData({ type: 'FeatureCollection', features: [] })
}
if (labelFeature) { if (labelFeature) {
// Clicked a labeled feature snap to geometry and highlight // Clicked a labeled feature snap to geometry and highlight
@ -1330,6 +1341,11 @@ const MapView = forwardRef(function MapView(_, ref) {
}) })
} else { } else {
// No labeled feature show reticle at click point // No labeled feature show reticle at click point
// Clear any existing boundary when clicking empty map
const boundarySource = map.getSource(BOUNDARY_SOURCE)
if (boundarySource) {
boundarySource.setData({ type: 'FeatureCollection', features: [] })
}
store.setClickMarker({ store.setClickMarker({
lat, lat,
lon: lng, lon: lng,