From a185abf6d88080ce5ee67ac5797d90531a0848cc Mon Sep 17 00:00:00 2001
From: noahspannbauer <noahspannbauer@icloud.com>
Date: Mon, 12 May 2025 19:18:03 -0500
Subject: [PATCH] display multiple kml files on same leaflet map component
 (#88)

* display multiple kml files on same leaflet map component

* display multiple kml files on same leaflet map component
---
 .../components/logTrackMaps/LogTrackMaps.tsx  | 45 ++++++-------------
 1 file changed, 14 insertions(+), 31 deletions(-)

diff --git a/app/src/components/logTrackMaps/LogTrackMaps.tsx b/app/src/components/logTrackMaps/LogTrackMaps.tsx
index f50be45..4d88efc 100644
--- a/app/src/components/logTrackMaps/LogTrackMaps.tsx
+++ b/app/src/components/logTrackMaps/LogTrackMaps.tsx
@@ -4,8 +4,6 @@ import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useIsAuthenticated } from '@azure/msal-react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination } from 'swiper/modules';
 import { MapContainer, TileLayer } from 'react-leaflet';
 import ReactLeafletKml from 'react-leaflet-kml';
 import 'swiper/css';
@@ -46,35 +44,20 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
   }, [trackUrls])
 
   return (
-    <>
-      <Swiper
-        spaceBetween={30}
-        pagination={{
-          clickable: true,
-        }}
-        modules={[Pagination]}
-        className="mySwiper"
-      >
-        {tracks.length > 0 && tracks.map((track) => {
-          return (
-            <SwiperSlide>
-              <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"
-                />
-                <ReactLeafletKml kml={track} />
-              </MapContainer>
-            </SwiperSlide>
-          )
-        })}
-      </Swiper>
-    </>
+    <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>
   );
 }