Client - add controls on map to hide markers

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue

@@ -12,6 +12,7 @@
           ref="workoutMap"
           @ready="fitBounds(bounds)"
         >
+          <LControlLayers />
           <LTileLayer
             :url="`${getApiUrl()}workouts/map_tile/{s}/{z}/{x}/{y}.png`"
             :attribution="appConfig.map_attribution"
@@ -22,16 +23,21 @@
             v-if="markerCoordinates.latitude"
             :lat-lng="[markerCoordinates.latitude, markerCoordinates.longitude]"
           />
-          <CustomMarker
-            v-if="startMarkerCoordinates.latitude"
-            :markerCoordinates="startMarkerCoordinates"
-            :isStart="true"
-          />
-          <CustomMarker
-            v-if="endMarkerCoordinates.latitude"
-            :markerCoordinates="endMarkerCoordinates"
-            :isStart="false"
-          />
+          <LLayerGroup
+            :name="$t('workouts.START_AND_FINISH')"
+            layer-type="overlay"
+          >
+            <CustomMarker
+              v-if="startMarkerCoordinates.latitude"
+              :markerCoordinates="startMarkerCoordinates"
+              :isStart="true"
+            />
+            <CustomMarker
+              v-if="endMarkerCoordinates.latitude"
+              :markerCoordinates="endMarkerCoordinates"
+              :isStart="false"
+            />
+          </LLayerGroup>
         </LMap>
       </div>
       <div v-else class="no-map">{{ $t('workouts.NO_MAP') }}</div>
@@ -41,8 +47,16 @@
 
 <script setup lang="ts">
   import { gpx } from '@tmcw/togeojson'
-  import { LGeoJson, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
+  import {
+    LGeoJson,
+    LMap,
+    LMarker,
+    LTileLayer,
+    LControlLayers,
+    LLayerGroup,
+  } from '@vue-leaflet/vue-leaflet'
   import { ComputedRef, computed, ref, toRefs, withDefaults } from 'vue'
+  import 'leaflet/dist/leaflet.css'
 
   import CustomMarker from '@/components/Workout/WorkoutDetail/WorkoutMap/CustomMarker.vue'
   import { ROOT_STORE } from '@/store/constants'

fittrackee_client/src/locales/en/workouts.json

@@ -50,6 +50,7 @@
   "SPEED": "speed",
   "SPORT": "sport | sports",
   "START": "start",
+  "START_AND_FINISH": "Start and finish",
   "START_ELEVATION_AT_ZERO": "start elevation axis at zero",
   "TITLE": "title",
   "TO": "to",

fittrackee_client/src/locales/fr/workouts.json

@@ -50,6 +50,7 @@
   "SPEED": "vitesse",
   "SPORT": "sport | sports",
   "START": "début",
+  "START_AND_FINISH": "Départ et arrivée",
   "START_ELEVATION_AT_ZERO": "démarrer l'axe de l'altitude à 0",
   "TITLE": "titre",
   "TO": "jusqu'au",

fittrackee_client/src/vue-leaflet.d.ts

@@ -5,7 +5,6 @@ declare module '@vue-leaflet/vue-leaflet' {
   export const LTileLayer: DefineComponent
   export const LMarker: DefineComponent
   export const LGeoJson: DefineComponent
-  export const LPolyline: DefineComponent
-  export const LPolygon: DefineComponent
-  export const LRectangle: DefineComponent
+  export const LControlLayers: DefineComponent
+  export const LLayerGroup: DefineComponent
 }