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 #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
Conversation 0 Commits 2 Files Changed 1 +13 -28
1 changed files with 13 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9b633672ae - Show all commits

19
app/src/components/logTrackMaps/LogTrackMaps.tsx
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';
@@ -47,17 +45,6 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
return ( return (
<> <>
<Swiper
spaceBetween={30}
pagination={{
clickable: true,
}}
modules={[Pagination]}
className="mySwiper"
>
{tracks.length > 0 && tracks.map((track) => {
return (
<SwiperSlide>
<MapContainer <MapContainer
center={[45.14489, -93.21019]} center={[45.14489, -93.21019]}
scrollWheelZoom={false} scrollWheelZoom={false}
@@ -68,12 +55,10 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/> />
{tracks.length > 0 && tracks.map((track) => (
<ReactLeafletKml kml={track} /> <ReactLeafletKml kml={track} />
))}
</MapContainer> </MapContainer>
</SwiperSlide>
)
})}
</Swiper>
</> </>
); );
} }