noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

display multiple kml files on same leaflet map component

Browse Source
This commit is contained in:
Noah Spannbauer
2025-05-12 19:17:02 -05:00
parent 9b633672ae
commit 6f2ca6ccfb
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/src/components/logTrackMaps/LogTrackMaps.tsx
View File

@@ -44,22 +44,20 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
}, [trackUrls])
return (
<>
<MapContainer
center={[45.14489, -93.21019]}
scrollWheelZoom={false}
style={{ height: '500px', width: '100%' }}
zoom={8}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{tracks.length > 0 && tracks.map((track) => (
<ReactLeafletKml kml={track} />
))}
</MapContainer>
</>
<MapContainer
center={[45.14489, -93.21019]}
scrollWheelZoom={false}
style={{ height: '500px', width: '100%' }}
zoom={8}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{tracks.length > 0 && tracks.map((track) => (
<ReactLeafletKml kml={track} />
))}
</MapContainer>
);
}