Refactored bike user marker

src/components/BikeMap.vue

@@ -10,13 +10,14 @@ import type { ApiResponse } from '@/types/Api'
 import type { BikeParking } from '@/types/Bikes'
 import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL_DARK, MAP_TILELAYER_URL_LIGHT, SpotAccess, SpotType } from '@/utils/const'
 import { useQuery } from '@pinia/colada'
-import { LControlZoom, LIcon, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
 import BikeFilters from './BikeFilters.vue'
 import { computed, ref, useTemplateRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import BikeClusterLayer from './BikeClusterLayer.vue'
-import { PhCircleNotch, PhMapPin } from '@phosphor-icons/vue'
+import { PhCircleNotch } from '@phosphor-icons/vue'
 import { useDark } from '@vueuse/core'
+import BikeUserMarker from './BikeUserMarker.vue'
 
 // Map setup
 const mapRef = useTemplateRef<{ leafletObject: Map }>('map')
@@ -122,11 +123,7 @@ function handleClickGeoloc() {
         <LControlZoom position="bottomright" />
         <LTileLayer v-once :url="mapTilelayer" layer-type="base" />
 
-        <LMarker v-if="userCoords" :lat-lng="[userCoords.latitude, userCoords.longitude]">
+        <BikeUserMarker v-if="userCoords" />
-          <LIcon>
-            <PhMapPin size="24" weight="fill" class="text-amber-400" />
-          </LIcon>
-        </LMarker>
 
         <BikeClusterLayer :parkings="coveredParkings" group="covered" :visible="filterCovered" :max-cluster-radius
           :disable-clustering-at-zoom />

src/components/BikeUserMarker.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useMap } from '@/stores/map';
+import { PhMapPin } from '@phosphor-icons/vue';
+import { LIcon, LMarker } from '@vue-leaflet/vue-leaflet';
+import type { PointTuple } from 'leaflet';
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+const normalIconSize: PointTuple = [30, 30]
+
+const iconSize = ref<PointTuple>(normalIconSize)
+const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
+
+// Geolocation
+const { userCoords } = storeToRefs(useMap())
+</script>
+
+<template>
+  <LMarker v-if="userCoords" :lat-lng="[userCoords.latitude, userCoords.longitude]" :icon-size :icon-anchor>
+    <LIcon>
+      <PhMapPin size="20" weight="fill" class="text-amber-400" />
+    </LIcon>
+  </LMarker>
+</template>

src/stores/map.ts

@@ -20,7 +20,7 @@ export const useMap = defineStore('map', () => {
   }
 
   // Cluster layers options
-  const maxClusterRadius = 40
+  const maxClusterRadius = 60
   const disableClusteringAtZoom = 17
 
   // Geolocation