Client - add start and finish markers on workout map - fix #135

+ add max zoom

fittrackee_client/public/img/workouts/finish.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="70.24498mm"
+   height="70.24498mm"
+   viewBox="0 0 70.24498 70.24498"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     id="layer1"
+     transform="translate(-63.580643,-108.89152)">
+    <circle
+       style="fill:#000000;stroke-width:0.264583"
+       id="path135"
+       cx="98.703133"
+       cy="144.01401"
+       r="35.12249" />
+    <circle
+       style="fill:#f44336;stroke-width:0.264583"
+       id="path203"
+       cx="98.907257"
+       cy="144.02548"
+       r="32.558632" />
+    <rect
+       style="fill:#000000;stroke-width:0.264583"
+       id="rect602"
+       width="28.563854"
+       height="28.563854"
+       x="84.548706"
+       y="130.45284" />
+  </g>
+</svg>

fittrackee_client/public/img/workouts/start.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="70.24498mm"
+   height="70.24498mm"
+   viewBox="0 0 70.24498 70.24498"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+>
+  <defs
+     id="defs2" />
+  <g
+     id="layer1"
+     transform="translate(-63.580643,-108.89152)">
+    <circle
+       style="fill:#000000;stroke-width:0.264583"
+       id="path135"
+       cx="98.703133"
+       cy="144.01401"
+       r="35.12249" />
+    <circle
+       style="fill:#5f9747;stroke-width:0.264583"
+       id="path203"
+       cx="98.907257"
+       cy="144.02548"
+       r="32.558632" />
+    <path
+       style="fill:#000000"
+       id="path249"
+       d="m 445.04215,547.94558 -120.18382,69.22003 0.14561,-138.69226 z"
+       transform="scale(0.26458333)" />
+  </g>
+</svg>

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

@@ -0,0 +1,26 @@
+<template>
+  <LMarker
+    v-if="markerCoordinates.latitude"
+    :lat-lng="[markerCoordinates.latitude, markerCoordinates.longitude]"
+  >
+    <LIcon
+      :icon-url="`/img/workouts/${isStart ? 'start' : 'finish'}.svg`"
+      :iconSize="[15, 15]"
+    />
+  </LMarker>
+</template>
+
+<script lang="ts" setup>
+  import { LIcon, LMarker } from '@vue-leaflet/vue-leaflet'
+  import { toRefs } from 'vue'
+
+  import { TCoordinates } from '@/types/workouts'
+
+  interface Props {
+    markerCoordinates: TCoordinates
+    isStart: boolean
+  }
+  const props = defineProps<Props>()
+
+  const { isStart, markerCoordinates } = toRefs(props)
+</script>

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

@@ -6,6 +6,7 @@
         <LMap
           v-if="geoJson.jsonData && center && bounds.length === 2"
           :zoom="13"
+          :maxZoom="19"
           :center="center"
           :bounds="bounds"
           ref="workoutMap"
@@ -21,6 +22,16 @@
             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"
+          />
         </LMap>
       </div>
       <div v-else class="no-map">{{ $t('workouts.NO_MAP') }}</div>
@@ -33,6 +44,7 @@
   import { LGeoJson, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
   import { ComputedRef, computed, ref, toRefs, withDefaults } from 'vue'
 
+  import CustomMarker from '@/components/Workout/WorkoutDetail/WorkoutMap/CustomMarker.vue'
   import { ROOT_STORE } from '@/store/constants'
   import { TAppConfig } from '@/types/application'
   import { GeoJSONData } from '@/types/geojson'
@@ -77,6 +89,26 @@
       ? getGeoJson(props.workoutData.gpx)
       : {}
   )
+  const startMarkerCoordinates = computed(() =>
+    props.workoutData && props.workoutData.chartData.length > 0
+      ? {
+          latitude: props.workoutData.chartData[0].latitude,
+          longitude: props.workoutData.chartData[0].longitude,
+        }
+      : {}
+  )
+  const endMarkerCoordinates = computed(() =>
+    props.workoutData && props.workoutData.chartData.length > 0
+      ? {
+          latitude:
+            props.workoutData.chartData[props.workoutData.chartData.length - 1]
+              .latitude,
+          longitude:
+            props.workoutData.chartData[props.workoutData.chartData.length - 1]
+              .longitude,
+        }
+      : {}
+  )
 
   function getGeoJson(gpxContent: string): GeoJSONData {
     if (!gpxContent || gpxContent !== '') {

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

@@ -43,7 +43,7 @@
 
   import WorkoutCardTitle from '@/components/Workout/WorkoutDetail/WorkoutCardTitle.vue'
   import WorkoutData from '@/components/Workout/WorkoutDetail/WorkoutData.vue'
-  import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
+  import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap/index.vue'
   import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IUserProfile } from '@/types/user'