Color theme for different types

package.json

@@ -34,6 +34,7 @@
     "@vitejs/plugin-vue": "^6.0.4",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/tsconfig": "^0.9.0",
+    "clsx": "^2.1.1",
     "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-oxlint": "~1.51.0",
@@ -43,6 +44,7 @@
     "oxfmt": "^0.37.0",
     "oxlint": "~1.51.0",
     "sass-embedded": "^1.98.0",
+    "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-vue-devtools": "^8.0.7",

pnpm-lock.yaml

@@ -60,6 +60,9 @@ importers:
       '@vue/tsconfig':
         specifier: ^0.9.0
         version: 0.9.0(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       eslint:
         specifier: ^10.0.3
         version: 10.1.0(jiti@2.6.1)
@@ -87,6 +90,9 @@ importers:
       sass-embedded:
         specifier: ^1.98.0
         version: 1.98.0
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.5.0
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -1355,6 +1361,10 @@ packages:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   colorjs.io@0.5.2:
     resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
 
@@ -2143,6 +2153,9 @@ packages:
     resolution: {integrity: sha512-gAQ9qrUN/UCypHtGFbbe7Rc/f9bzO88IwrG8TDo/aMKAApKyD6E3W4Cm0EfhfBb6Z6SKt59tTCTfD+n1xmAvMg==}
     engines: {node: '>=16.0.0'}
 
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+
   tailwindcss@4.2.2:
     resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
 
@@ -3424,6 +3437,8 @@ snapshots:
     dependencies:
       readdirp: 5.0.0
 
+  clsx@2.1.1: {}
+
   colorjs.io@0.5.2: {}
 
   confbox@0.1.8: {}
@@ -4166,6 +4181,8 @@ snapshots:
 
   sync-message-port@1.2.0: {}
 
+  tailwind-merge@3.5.0: {}
+
   tailwindcss@4.2.2: {}
 
   tapable@2.3.1: {}

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))