display multiple kml files on same leaflet map component

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "",
   "author": "",
   "private": true,

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

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 (
-    <>
+    <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>
-    </>
   );
 }
 

app/src/components/logTracks/LogTracks.tsx

@@ -56,7 +56,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
       const uploadResponse: AxiosResponse = await httpClient.post(`api/logs/log/${selectedRowKey}/track`, formData, formDataConfig);
       const uploadUrl = uploadResponse.data.url;
       const log = await getLog();
-      const tracks: string[] = JSON.parse(log.tracks!);
+      const tracks: string[] = log.tracks ? JSON.parse(log.tracks!) : [];
 
       tracks.push(uploadUrl)
       log.tracks = JSON.stringify(tracks);
@@ -171,7 +171,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
                 onClick={onCancel}
                 size="small"
               >
-                {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+                Close
               </Button>
               {mode.toString() !== FormMode.VIEW && (
                 <Button