Color theme for different types

src/components/BikeMarker.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { cn } from '@/utils/cn';
 import type { BikeParking } from '@/types/Bikes';
 import { PhBicycle, PhLockKey, PhSquareHalf, PhWarehouse } from '@phosphor-icons/vue';
 import { LIcon, LMarker, LPopup } from '@vue-leaflet/vue-leaflet';
@@ -18,7 +19,7 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
 
 <template>
   <LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]">
-    <LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
+    <LPopup :options="{ offset: popupOffset, maxWidth: 520, minWidth: 240 }">
       <div>
         <h2 class="font-bold">
           {{ park.nom_voie }}, {{ park.nom_commune }}
@@ -28,6 +29,10 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
           {{ park.type }}, <strong>{{ park.nb_total_place }} places</strong>
         </div>
 
+        <div v-if="park.condition_acces === 'Abonnement Korrigo'">
+          <img src="/korrigo-logo.webp" alt="" width="50" class="max-w-12" title="Requiert un abonnement Korrigo">
+        </div>
+
         <hr class="border-muted-foreground opacity-50 my-1">
 
         <div v-if="park.annee_mes" class="italic text-xs">
@@ -39,7 +44,10 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
       </div>
     </LPopup>
 
-    <LIcon :icon-size :icon-anchor>
+    <LIcon :icon-size :icon-anchor :class-name="cn(
+      { 'korrigo': park.condition_acces === 'Abonnement Korrigo' },
+      { 'highlight': park.type === 'Box individuel' || park.type === 'Abrité' },
+    )">
       <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" />
@@ -47,3 +55,40 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
     </LIcon>
   </LMarker>
 </template>
+
+<style lang="scss">
+.leaflet-marker-icon:not(.marker-cluster) {
+  border-radius: 50%;
+  color: var(--color-muted-foreground);
+  background-color: var(--color-background);
+  display: grid;
+  place-items: center;
+
+  &.korrigo {
+    color: var(--color-background);
+    background-color: var(--color-amber-400);
+  }
+
+  &.highlight {
+    color: var(--color-background);
+    border: 2px solid var(--color-muted-foreground);
+    background-color: var(--color-foreground);
+  }
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 5px;
+
+  .leaflet-popup-content {
+    margin: 10px 20px 10px 15px;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.marker-cluster span {
+  font-weight: var(--font-weight-medium);
+}
+</style>

src/components/Map.vue

@@ -57,7 +57,7 @@ const { zoom, minZoom, center } = useMap()
         <LTileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" layer-type="base" />
 
         <!-- Review CSGroup -->
-        <LMarkerClusterGroup v-if="state.data.length > 0" :max-cluster-radius="30" :disable-clustering-at-zoom="20">
+        <LMarkerClusterGroup v-if="state.data.length > 0" :max-cluster-radius="30" :disable-clustering-at-zoom="17">
           <BikeMarker v-once v-for="park in state.data" :key="park.code_insee" :park />
         </LMarkerClusterGroup>
       </LMap>
@@ -66,30 +66,6 @@ const { zoom, minZoom, center } = useMap()
 </template>
 
 <style lang="scss">
-.leaflet-marker-icon:not(.marker-cluster) {
-  border-radius: 50%;
-  color: var(--color-muted-foreground);
-  background-color: var(--color-background);
-  display: grid;
-  place-items: center;
-}
-
-.leaflet-popup-content-wrapper {
-  border-radius: 5px;
-
-  .leaflet-popup-content {
-    margin: 10px 20px 10px 15px;
-
-    p {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.marker-cluster span {
-  font-weight: var(--font-weight-medium);
-}
-
 .marker-cluster-small {
   background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent);
 

src/utils/cn.ts

@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))