display multiple kml files on same leaflet map component #88

Merged
noahspannbauer merged 2 commits from feature/86-display-multiple-kml-files-on-same-map into main 2025-05-12 20:18:03 -04:00

View File

@@ -4,8 +4,6 @@ import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosInstance, AxiosResponse } from 'axios'; import { AxiosInstance, AxiosResponse } from 'axios';
import { useAccessToken } from '../../hooks/accessToken/UseAcessToken'; import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
import { useIsAuthenticated } from '@azure/msal-react'; import { useIsAuthenticated } from '@azure/msal-react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import { MapContainer, TileLayer } from 'react-leaflet'; import { MapContainer, TileLayer } from 'react-leaflet';
import ReactLeafletKml from 'react-leaflet-kml'; import ReactLeafletKml from 'react-leaflet-kml';
import 'swiper/css'; import 'swiper/css';
@@ -46,35 +44,20 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
}, [trackUrls]) }, [trackUrls])
return ( return (
<> <MapContainer
<Swiper center={[45.14489, -93.21019]}
spaceBetween={30} scrollWheelZoom={false}
pagination={{ style={{ height: '500px', width: '100%' }}
clickable: true, zoom={8}
}} >
modules={[Pagination]} <TileLayer
className="mySwiper" 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) => { />
return ( {tracks.length > 0 && tracks.map((track) => (
<SwiperSlide> <ReactLeafletKml kml={track} />
<MapContainer ))}
center={[45.14489, -93.21019]} </MapContainer>
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"
/>
<ReactLeafletKml kml={track} />
</MapContainer>
</SwiperSlide>
)
})}
</Swiper>
</>
); );
} }