Added more icons for park types

src/components/BikeMarker.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { BikeParking } from '@/types/Bikes';
+import { PhBicycle, PhLockKey, PhSquareHalf, PhWarehouse } from '@phosphor-icons/vue';
+import { LIcon, LMarker, LPopup } from '@vue-leaflet/vue-leaflet';
+import type { PointTuple } from 'leaflet';
+import { computed, ref } from 'vue';
+
+defineProps<{
+  park: BikeParking
+}>()
+
+const normalIconSize: PointTuple = [30, 30]
+
+const iconSize = ref<PointTuple>(normalIconSize)
+const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
+const popupOffset = [0, iconSize.value[0] * -0.66]
+</script>
+
+<template>
+  <LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]">
+    <LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
+      <div>
+        <h2 class="font-bold">
+          {{ park.nom_voie }}, {{ park.nom_commune }}
+        </h2>
+
+        <div class="text-xs">
+          {{ park.type }}, <strong>{{ park.nb_total_place }} places</strong>
+        </div>
+
+        <hr class="border-muted-foreground opacity-50 my-1">
+
+        <div v-if="park.annee_mes" class="italic text-xs">
+          Mis en service en {{ park.annee_mes }}
+        </div>
+
+        <div v-if="park.commentaire" v-html="park.commentaire"
+          class="before:content-[''] before:inline-block before:w-1 before:h-[1em] before:-my-0.5 before:mr-1 before:rounded-xs before:bg-muted-foreground italic text-xs text-muted-foreground" />
+      </div>
+    </LPopup>
+
+    <LIcon :icon-size :icon-anchor>
+      <PhBicycle v-if="park.type === 'Non abrité'" size="18" />
+      <PhWarehouse v-else-if="park.type === 'Abrité'" size="18" />
+      <PhSquareHalf v-else-if="park.type === 'Box individuel'" size="18" />
+      <PhLockKey v-else-if="park.type === 'Collectif sécurisé'" size="18" weight="fill" />
+    </LIcon>
+  </LMarker>
+</template>