tanner/sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: prevent drawn items from disappearing during data load

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-15 20:13:54 +00:00
parent 9683110604
commit e53287be96
2 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
mapper/src/App.js
View File

@@ -266,39 +266,14 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
setDrawnItems(items => items.filter(item => !deletedIds.includes(item.id)));
};
const showMap = Array.isArray(data);
return (
<div className='container'>
{loading ?
<p>Loading...</p>
:
coords.length ?
(
<MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} setSubmenu={setSubmenu} />
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
/>
<PolylineWithArrows coords={coords} showDirection={showDirection} />
<FeatureGroup>
<EditControl
position="topright"
onCreated={onCreated}
onEdited={onEdited}
onDeleted={onDeleted}
draw={{
rectangle: true,
polyline: false,
polygon: false,
circle: false,
marker: false,
circlemarker: false,
}}
/>
</FeatureGroup>
</MapContainer>
)
:
{!showMap ? (
loading ? (
<p>Loading...</p>
) : (
<>
<p>No data</p>
<form onSubmit={handleSubmit}>
@@ -307,7 +282,40 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
</p>
</form>
</>
}
)
) : (
<div style={{ position: 'relative', width: '100%', height: 'calc(100vh - 2.5rem)' }}>
{loading && (
<div className="loading-overlay">
<p>Loading...</p>
</div>
)}
<MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: '100%' }}>
<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} setSubmenu={setSubmenu} />
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
/>
<PolylineWithArrows coords={coords} showDirection={showDirection} />
<FeatureGroup>
<EditControl
position="topright"
onCreated={onCreated}
onEdited={onEdited}
onDeleted={onDeleted}
draw={{
rectangle: true,
polyline: false,
polygon: false,
circle: false,
marker: false,
circlemarker: false,
}}
/>
</FeatureGroup>
</MapContainer>
</div>
)}
</div>
);
}