display multiple kml files on same leaflet map component #88
@@ -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='© <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='© <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>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user