Client - display a marker on map when mouse is over the chart

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

@@ -17,6 +17,10 @@
           :bounds="bounds"
         />
         <LGeoJson :geojson="geoJson.jsonData" />
+        <LMarker
+          v-if="markerCoordinates.latitude"
+          :lat-lng="[markerCoordinates.latitude, markerCoordinates.longitude]"
+        />
       </LMap>
     </div>
     <div v-else class="no-map">{{ t('workouts.NO_MAP') }}</div>
@@ -25,13 +29,13 @@
 
 <script lang="ts">
   import { gpx } from '@tmcw/togeojson'
-  import { LGeoJson, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+  import { LGeoJson, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
   import { ComputedRef, PropType, computed, defineComponent, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import { ROOT_STORE } from '@/store/constants'
   import { GeoJSONData } from '@/types/geojson'
-  import { IWorkoutState } from '@/types/workouts'
+  import { IWorkoutState, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { getApiUrl } from '@/utils'
 
@@ -40,12 +44,17 @@
     components: {
       LGeoJson,
       LMap,
+      LMarker,
       LTileLayer,
     },
     props: {
       workout: {
         type: Object as PropType<IWorkoutState>,
       },
+      markerCoordinates: {
+        type: Object as PropType<TCoordinates>,
+        required: false,
+      },
     },
     setup(props) {
       const { t } = useI18n()

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

@@ -53,7 +53,7 @@
         </div>
       </template>
       <template #content>
-        <WorkoutMap :workout="workout" />
+        <WorkoutMap :workout="workout" :markerCoordinates="markerCoordinates" />
         <WorkoutData :workout="workout.workout" />
       </template>
     </Card>
@@ -71,7 +71,7 @@
   import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
-  import { IWorkoutState } from '@/types/workouts'
+  import { IWorkoutState, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
 
@@ -87,6 +87,10 @@
         type: Object as PropType<IAuthUserProfile>,
         required: true,
       },
+      markerCoordinates: {
+        type: Object as PropType<TCoordinates>,
+        required: false,
+      },
       sports: {
         type: Object as PropType<ISport[]>,
       },