Merge branch 'feature/map-filters' into dev

2026-04-04 17:57:15 +02:00
parent 07feed0355 74f1629bf4
commit 49c48c1347
14 changed files with 511 additions and 109 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "@vueuse/core": "^14.2.1",
    "leaflet": "^1.9.4",
    "pinia": "^3.0.4",
+    "reka-ui": "^2.9.2",
    "tailwindcss": "^4.2.2",
    "vue": "^3.5.30",
    "vue-leaflet-markercluster": "^0.6.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
      pinia:
        specifier: ^3.0.4
        version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+      reka-ui:
+        specifier: ^2.9.2
+        version: 2.9.2(vue@3.5.30(typescript@5.9.3))
      tailwindcss:
        specifier: ^4.2.2
        version: 4.2.2
@@ -437,6 +440,18 @@ packages:
    resolution: {integrity: sha512-iH1B076HoAshH1mLpHMgwdGeTs0CYwL0SPMkGuSebZrwBp16v415e9NZXg2jtrqPVQjf6IANe2Vtlr5KswtcZQ==}
    engines: {node: ^20.19.0 || ^22.13.0 || >=24}

+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@floating-ui/vue@1.1.11':
+    resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==}
+
  '@humanfs/core@0.19.1':
    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
    engines: {node: '>=18.18.0'}
@@ -453,6 +468,12 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@internationalized/date@3.12.0':
+    resolution: {integrity: sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==}
+
+  '@internationalized/number@3.6.5':
+    resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
+
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

@@ -969,6 +990,9 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@swc/helpers@0.5.20':
+    resolution: {integrity: sha512-2egEBHUMasdypIzrprsu8g+OEVd7Vp2MM3a2eVlM/cyFYto0nGz5BX5BTgh/ShZZI9ed+ozEq+Ngt+rgmUs8tw==}
+
  '@tailwindcss/node@4.2.2':
    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}

@@ -1063,6 +1087,14 @@ packages:
    peerDependencies:
      vite: ^5.2.0 || ^6 || ^7 || ^8

+  '@tanstack/virtual-core@3.13.23':
+    resolution: {integrity: sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==}
+
+  '@tanstack/vue-virtual@3.13.23':
+    resolution: {integrity: sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
  '@tsconfig/node24@24.0.4':
    resolution: {integrity: sha512-2A933l5P5oCbv6qSxHs7ckKwobs8BDAe9SJ/Xr2Hy+nDlwmLE1GhFh/g/vXGRZWgxBg9nX/5piDtHR9Dkw/XuA==}

@@ -1310,6 +1342,10 @@ packages:
    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
    engines: {node: '>=14'}

+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
  ast-kit@2.2.0:
    resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
    engines: {node: '>=20.19.0'}
@@ -1417,6 +1453,9 @@ packages:
    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
    engines: {node: '>=12'}

+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
  detect-libc@2.1.2:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}
@@ -1957,6 +1996,11 @@ packages:
    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
    engines: {node: '>= 20.19.0'}

+  reka-ui@2.9.2:
+    resolution: {integrity: sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw==}
+    peerDependencies:
+      vue: '>= 3.4.0'
+
  reusify@1.1.0:
    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -2307,6 +2351,17 @@ packages:
  vscode-uri@3.1.0:
    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}

+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  vue-eslint-parser@10.4.0:
    resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2687,6 +2742,26 @@ snapshots:
      '@eslint/core': 1.1.1
      levn: 0.4.1

+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@floating-ui/vue@1.1.11(vue@3.5.30(typescript@5.9.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/utils': 0.2.11
+      vue-demi: 0.14.10(vue@3.5.30(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@humanfs/core@0.19.1': {}

  '@humanfs/node@0.16.7':
@@ -2698,6 +2773,14 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@internationalized/date@3.12.0':
+    dependencies:
+      '@swc/helpers': 0.5.20
+
+  '@internationalized/number@3.6.5':
+    dependencies:
+      '@swc/helpers': 0.5.20
+
  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -2992,6 +3075,10 @@ snapshots:
  '@rollup/rollup-win32-x64-msvc@4.60.0':
    optional: true

+  '@swc/helpers@0.5.20':
+    dependencies:
+      tslib: 2.8.1
+
  '@tailwindcss/node@4.2.2':
    dependencies:
      '@jridgewell/remapping': 2.3.5
@@ -3060,6 +3147,13 @@ snapshots:
      tailwindcss: 4.2.2
      vite: 7.3.1(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.32.0)(sass-embedded@1.98.0)(sass@1.98.0)(yaml@2.8.3)

+  '@tanstack/virtual-core@3.13.23': {}
+
+  '@tanstack/vue-virtual@3.13.23(vue@3.5.30(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.23
+      vue: 3.5.30(typescript@5.9.3)
+
  '@tsconfig/node24@24.0.4': {}

  '@types/esrecurse@4.3.1': {}
@@ -3388,6 +3482,10 @@ snapshots:

  ansis@4.2.0: {}

+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
  ast-kit@2.2.0:
    dependencies:
      '@babel/parser': 7.29.2
@@ -3476,6 +3574,8 @@ snapshots:

  define-lazy-prop@3.0.0: {}

+  defu@6.1.4: {}
+
  detect-libc@2.1.2: {}

  electron-to-chromium@1.5.321: {}
@@ -4002,6 +4102,22 @@ snapshots:

  readdirp@5.0.0: {}

+  reka-ui@2.9.2(vue@3.5.30(typescript@5.9.3)):
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/vue': 1.1.11(vue@3.5.30(typescript@5.9.3))
+      '@internationalized/date': 3.12.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.23(vue@3.5.30(typescript@5.9.3))
+      '@vueuse/core': 14.2.1(vue@3.5.30(typescript@5.9.3))
+      '@vueuse/shared': 14.2.1(vue@3.5.30(typescript@5.9.3))
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.30(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
  reusify@1.1.0: {}

  rfdc@1.4.1: {}
@@ -4325,6 +4441,10 @@ snapshots:

  vscode-uri@3.1.0: {}

+  vue-demi@0.14.10(vue@3.5.30(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.30(typescript@5.9.3)
+
  vue-eslint-parser@10.4.0(eslint@10.1.0(jiti@2.6.1)):
    dependencies:
      debug: 4.4.3
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 onlyBuiltDependencies:
  - esbuild
+  - vue-demi
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -9,8 +9,8 @@
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --primary: oklch(87.173% 0.17182 90.995);
+  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
@@ -45,7 +45,7 @@
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
+  --primary: oklch(87.173% 0.17182 90.995);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
--- a/src/components/BikeClusterLayer.vue
+++ b/src/components/BikeClusterLayer.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { BikeParking } from '@/types/Bikes'
+import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
+import BikeMarker from './BikeMarker.vue'
+
+defineProps<{
+  parkings: BikeParking[]
+  group: 'covered' | 'non-covered' | 'premium'
+  visible: boolean
+  maxClusterRadius: number
+  disableClusteringAtZoom: number
+}>()
+</script>
+
+<template>
+  <LMarkerClusterGroup v-if="parkings.length > 0" :visible :max-cluster-radius :disable-clustering-at-zoom>
+    <BikeMarker v-once v-for="park in parkings" :key="park.id_parc_velo" :park :group />
+  </LMarkerClusterGroup>
+</template>
+
+<style lang="scss">
+.marker-cluster div {
+  font-family: var(--default-font-family);
+  font-size: .9em;
+}
+
+.marker-cluster span {
+  font-weight: var(--font-weight-bold);
+  opacity: .85;
+}
+
+.marker-cluster-small {
+  background-color: color-mix(in srgb, var(--color-green-400) 10%, transparent);
+
+  div {
+    background-color: color-mix(in srgb, var(--color-green-400) 15%, transparent);
+  }
+}
+
+.marker-cluster-medium {
+  background-color: color-mix(in srgb, var(--color-amber-500) 12.5%, transparent);
+
+  div {
+    background-color: color-mix(in srgb, var(--color-amber-500) 20%, transparent);
+  }
+}
+
+.marker-cluster-large {
+  background-color: color-mix(in srgb, var(--color-rose-500) 15%, transparent);
+
+  div {
+    background-color: color-mix(in srgb, var(--color-rose-500) 25%, transparent);
+  }
+}
+</style>
--- a/src/components/BikeFilters.vue
+++ b/src/components/BikeFilters.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { useMap } from '@/stores/map'
+import { storeToRefs } from 'pinia'
+import Checkbox from './forms/Checkbox.vue'
+import ParkingSpaceRange from './filters/ParkingSpaceRange.vue';
+
+const { filterCovered, filterUncovered, filterKorrigo, filterCargoOnly, filterStdOnly } = storeToRefs(useMap())
+
+defineProps<{
+  nbUncovered?: number
+  nbCovered?: number
+  nbKorrigo?: number
+}>()
+</script>
+
+<template>
+  <aside class="max-w-xs absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 rounded-xs">
+    <form class="grid grid-cols-1 gap-3">
+      <fieldset>
+        <legend
+          class="mb-1.5 text-sm font-medium relative isolate before:contents-[''] before:block before:w-full before:bg-amber-500/15 before:h-2 before:absolute before:bottom-0.5 before:-z-10">
+          Types d'emplacements
+        </legend>
+
+        <div class="grid grid-cols-1 gap-1.5">
+          <Checkbox v-model="filterUncovered" :count="nbUncovered">Non-abrités</Checkbox>
+          <Checkbox v-model="filterCovered" :count="nbCovered">Abrités</Checkbox>
+          <Checkbox v-model="filterKorrigo" :count="nbKorrigo">Abonnement Korrigo</Checkbox>
+        </div>
+      </fieldset>
+
+      <ParkingSpaceRange />
+
+      <fieldset>
+        <legend
+          class="mb-1.5 text-sm font-medium relative isolate before:contents-[''] before:block before:w-full before:bg-amber-500/15 before:h-2 before:absolute before:bottom-0.5 before:-z-10">
+          Équipements
+        </legend>
+
+        <div class="grid grid-cols-1 gap-1.5">
+          <Checkbox v-model="filterCargoOnly">Cargos</Checkbox>
+          <Checkbox v-model="filterStdOnly">STD</Checkbox>
+        </div>
+      </fieldset>
+    </form>
+  </aside>
+</template>
--- a/src/components/BikeMap.vue
+++ b/src/components/BikeMap.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import 'leaflet/dist/leaflet.css'
+import 'vue-leaflet-markercluster/dist/style.css'
+
+import L from 'leaflet'
+globalThis.L = L
+
+import { useMap } from '@/stores/map'
+import type { ApiResponse } from '@/types/Api'
+import type { BikeParking } from '@/types/Bikes'
+import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const'
+import { useQuery } from '@pinia/colada'
+import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import BikeFilters from './BikeFilters.vue'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import BikeClusterLayer from './BikeClusterLayer.vue'
+
+async function fetchAllBikeParkings(): Promise<BikeParking[]> {
+  const firstPage = await fetch(`${API_BASE_URL}?limit=${API_LIMIT}`).then(r => r.json()) as ApiResponse
+  const { total_count } = firstPage
+
+  const remainingPages = await Promise.all(
+    Array.from(
+      { length: Math.ceil((total_count - API_LIMIT) / API_LIMIT) },
+      (_, i) => fetch(`${API_BASE_URL}?limit=${API_LIMIT}&offset=${(i + 1) * API_LIMIT}`).then(r => r.json()) as Promise<ApiResponse>
+    )
+  )
+
+  return [
+    ...(firstPage.results ?? []),
+    ...remainingPages.flatMap(page => page.results ?? [])
+  ]
+}
+
+const { state } = useQuery({
+  key: ['bike-parkings'],
+  query: fetchAllBikeParkings,
+})
+
+// Groups different parking spot by types
+const nonCoveredParkings = computed(() =>
+  state.value.data?.filter(p => p.type === SpotType.Uncovered) ?? []
+)
+const nonCoveredParkingsSpots = computed(() => {
+  return nonCoveredParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
+})
+
+const coveredTypes = new Set([SpotType.Covered, SpotType.Boxed])
+
+const coveredParkings = computed(() =>
+  state.value.data?.filter(p => coveredTypes.has(p.type as SpotType)) ?? []
+)
+const coveredParkingsSpots = computed(() => {
+  return coveredParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
+})
+
+const premiumParkings = computed(() =>
+  state.value.data?.filter(p => p.condition_acces === SpotAccess.Korrigo) ?? []
+)
+const premiumParkingsSpots = computed(() => {
+  return premiumParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
+})
+
+const { zoom, minZoom, center, maxBounds, maxBoundsViscosity, maxClusterRadius, disableClusteringAtZoom, extraOptions } = useMap()
+const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
+</script>
+
+<template>
+  <Transition enter-from-class="opacity-0 translate-y-2"
+    enter-active-class="transition-all duration-300 ease-out delay-500" enter-to-class="opacity-100 translate-y-0">
+    <BikeFilters v-if="state.status === 'success'" :nb-uncovered="nonCoveredParkingsSpots"
+      :nb-covered="coveredParkingsSpots" :nb-korrigo="premiumParkingsSpots" />
+  </Transition>
+
+  <main class="relative z-0 h-screen w-screen grid place-items-center">
+    <div v-if="state.status === 'pending'">Loading...</div>
+    <div v-else-if="state.status === 'error'">Error: {{ state.error.message }}</div>
+    <template v-else>
+      <LMap ref="map" :min-zoom v-model:zoom="zoom" :center="center" :max-bounds :max-bounds-viscosity
+        :options="extraOptions" :useGlobalLeaflet="true">
+        <LControlZoom position="bottomright" />
+
+        <LTileLayer v-once :url="MAP_TILELAYER_URL" layer-type="base" />
+
+        <BikeClusterLayer :parkings="coveredParkings" group="covered" :visible="filterCovered" :max-cluster-radius
+          :disable-clustering-at-zoom />
+
+        <BikeClusterLayer :parkings="nonCoveredParkings" group="non-covered" :visible="filterUncovered"
+          :max-cluster-radius :disable-clustering-at-zoom />
+
+        <BikeClusterLayer :parkings="premiumParkings" group="premium" :visible="filterKorrigo" :max-cluster-radius
+          :disable-clustering-at-zoom />
+      </LMap>
+    </template>
+  </main>
+</template>
+
+<style lang="scss">
+.leaflet-container {
+  background-color: var(--background);
+}
+</style>
--- a/src/components/BikeMarker.vue
+++ b/src/components/BikeMarker.vue
@@ -5,9 +5,13 @@ import { PhBicycle, PhLockKey, PhSquareHalf, PhWarehouse } from '@phosphor-icons
 import { LIcon, LMarker, LPopup } from '@vue-leaflet/vue-leaflet';
 import type { PointTuple } from 'leaflet';
 import { computed, ref } from 'vue';
+import { UNCOVERED_KEY, COVERED_KEY, BOXED_KEY, KORRIGO_KEY } from '@/utils/const';
+import { storeToRefs } from 'pinia';
+import { SPOTS_MAX, useMap } from '@/stores/map';

-defineProps<{
+const props = defineProps<{
  park: BikeParking
+  group: 'covered' | 'non-covered' | 'premium'
 }>()

 const normalIconSize: PointTuple = [30, 30]
@@ -15,10 +19,31 @@ 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]
+
+const { spotsRange, filterCargoOnly, filterStdOnly } = storeToRefs(useMap())
+
+const isMarkerVisibleLayers = computed(() => {
+  const [min, max] = spotsRange.value
+  const spots = props.park.nb_total_place
+
+  if (max >= SPOTS_MAX) return spots >= min
+  return spots >= min && spots <= max
+})
+
+const isMarkerVisibleEquipments = computed(() => {
+  const checks = [
+    [filterCargoOnly.value, (props.park.nb_support_cargo ?? 0) > 0],
+    [filterStdOnly.value, (props.park.nb_support_std ?? 0) > 0],
+  ] as const
+
+  return checks.every(([active, passes]) => !active || passes)
+})
+
+const isMarkerVisible = computed(() => isMarkerVisibleLayers.value && isMarkerVisibleEquipments.value)
 </script>

 <template>
-  <LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]">
+  <LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]" :visible="isMarkerVisible">
    <LPopup :options="{ offset: popupOffset, maxWidth: 520, minWidth: 240 }">
      <div>
        <h2 class="font-bold">
@@ -27,6 +52,16 @@ const popupOffset = [0, iconSize.value[0] * -0.66]

        <div class="text-xs">
          {{ park.type }}, <strong>{{ park.nb_total_place }} places</strong>
+
+          <template v-if="park.nb_support_cargo">
+            <br>
+            …dont <strong>{{ park.nb_support_cargo }} cargo</strong>
+          </template>
+
+          <template v-if="park.nb_support_std">
+            <br>
+            …dont <strong>{{ park.nb_support_std }} STD</strong>
+          </template>
        </div>

        <div v-if="park.condition_acces === 'Abonnement Korrigo'">
@@ -45,13 +80,14 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
    </LPopup>

    <LIcon :icon-size :icon-anchor :class-name="cn(
-      { 'korrigo': park.condition_acces === 'Abonnement Korrigo' },
-      { 'highlight': park.type === 'Box individuel' || park.type === 'Abrité' },
+      `group-${group}`,
+      { 'korrigo': park.condition_acces === KORRIGO_KEY },
+      { 'highlight': park.type === BOXED_KEY || park.type === COVERED_KEY },
    )">
-      <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" />
+      <PhBicycle v-if="park.type === UNCOVERED_KEY" size="18" />
+      <PhWarehouse v-else-if="park.type === COVERED_KEY" size="18" weight="light" />
+      <PhSquareHalf v-else-if="park.type === BOXED_KEY" size="18" weight="light" />
+      <PhLockKey v-else-if="park.condition_acces === KORRIGO_KEY" size="18" weight="fill" />
    </LIcon>
  </LMarker>
 </template>
@@ -70,9 +106,8 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
  }

  &.highlight {
-    color: var(--color-background);
-    border: 2px solid var(--color-muted-foreground);
-    background-color: var(--color-foreground);
+    color: var(--color-amber-400);
+    border: 2px solid color-mix(in srgb, var(--color-amber-400) 50%, var(--color-background));
  }
 }

--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1,92 +0,0 @@
-<script lang="ts" setup>
-import 'leaflet/dist/leaflet.css'
-import 'vue-leaflet-markercluster/dist/style.css'
-
-import L from 'leaflet'
-globalThis.L = L
-
-import { useMap } from '@/stores/map'
-import type { ApiResponse } from '@/types/Api'
-import type { BikeParking } from '@/types/Bikes'
-import { API_BASE_URL, API_LIMIT } from '@/utils/const'
-import { useQuery } from '@pinia/colada'
-import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
-import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
-import BikeMarker from './BikeMarker.vue'
-
-async function fetchAllBikeParkings(): Promise<BikeParking[]> {
-  const firstPage = await fetch(`${API_BASE_URL}?limit=${API_LIMIT}`).then(r => r.json()) as ApiResponse
-  const { total_count } = firstPage
-
-  const remainingPages = await Promise.all(
-    Array.from(
-      { length: Math.ceil((total_count - API_LIMIT) / API_LIMIT) },
-      (_, i) => fetch(`${API_BASE_URL}?limit=${API_LIMIT}&offset=${(i + 1) * API_LIMIT}`).then(r => r.json()) as Promise<ApiResponse>
-    )
-  )
-
-  return [
-    ...(firstPage.results ?? []),
-    ...remainingPages.flatMap(page => page.results ?? [])
-  ]
-}
-
-const { state } = useQuery({
-  key: ['bike-parkings'],
-  query: fetchAllBikeParkings,
-})
-
-const { zoom, minZoom, center } = useMap()
-</script>
-
-<template>
-  <header class="sr-only">
-    <h1>
-      Carte interactive des parkings vélo de Rennes Métropole
-    </h1>
-  </header>
-
-  <main class="h-screen w-screen grid place-items-center">
-    <div v-if="state.status === 'pending'">Loading...</div>
-    <div v-else-if="state.status === 'error'">Error: {{ state.error.message }}</div>
-    <template v-else>
-      <LMap ref="map" :min-zoom v-model:zoom="zoom" v-model:center="center" :options="{ zoomControl: false }"
-        :useGlobalLeaflet="true">
-        <LControlZoom position="bottomright" />
-
-        <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="17">
-          <BikeMarker v-once v-for="park in state.data" :key="park.code_insee" :park />
-        </LMarkerClusterGroup>
-      </LMap>
-    </template>
-  </main>
-</template>
-
-<style lang="scss">
-.marker-cluster-small {
-  background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent);
-
-  div {
-    background-color: color-mix(in srgb, var(--color-green-500) 33%, transparent);
-  }
-}
-
-.marker-cluster-medium {
-  background-color: color-mix(in srgb, var(--color-yellow-400) 25%, transparent);
-
-  div {
-    background-color: color-mix(in srgb, var(--color-yellow-400) 33%, transparent);
-  }
-}
-
-.marker-cluster-large {
-  background-color: color-mix(in srgb, var(--color-rose-400) 25%, transparent);
-
-  div {
-    background-color: color-mix(in srgb, var(--color-rose-400) 33%, transparent);
-  }
-}
-</style>
--- a/src/components/filters/ParkingSpaceRange.vue
+++ b/src/components/filters/ParkingSpaceRange.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
+import { storeToRefs } from 'pinia'
+import { useMap, SPOTS_MIN, SPOTS_MAX } from '@/stores/map'
+import { ref } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+
+const { spotsRange } = storeToRefs(useMap())
+
+const MIN = SPOTS_MIN
+const MAX = SPOTS_MAX
+
+const localRange = ref<[number, number]>([...spotsRange.value] as [number, number])
+
+const commitToStore = useDebounceFn((val: [number, number]) => {
+  spotsRange.value = val
+}, 500)
+
+function onRangeUpdate(val: number[] | undefined) {
+  if (!val) return
+
+  localRange.value = val as [number, number]
+  commitToStore(val as [number, number])
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <span
+        class="text-sm font-medium relative isolate before:contents-[''] before:block before:w-full before:bg-amber-500/15 before:h-2 before:absolute before:bottom-0.5 before:-z-10">Places
+        totales</span>
+      <span class="text-xs text-muted-foreground">
+        {{ localRange[0] }} – {{ localRange[1] }}<template v-if="localRange[1] === MAX">+</template>
+      </span>
+    </div>
+
+    <div class="mt-1">
+      <SliderRoot :model-value="localRange" @update:model-value="onRangeUpdate"
+        class="relative flex items-center select-none touch-none w-full pt-2 pb-1" :min="MIN" :max="MAX" :step="5">
+        <SliderTrack class="bg-muted/10 relative grow rounded-full h-1.5">
+          <SliderRange class="absolute bg-primary rounded-full h-full" />
+        </SliderTrack>
+        <SliderThumb
+          class="cursor-pointer size-4 bg-white rounded-full hover:bg-primary shadow-sm focus:outline-none focus:ring-2" />
+        <SliderThumb
+          class="cursor-pointer size-4 bg-white rounded-full hover:bg-primary shadow-sm focus:outline-none focus:ring-2" />
+      </SliderRoot>
+    </div>
+  </div>
+</template>
--- a/src/components/forms/Checkbox.vue
+++ b/src/components/forms/Checkbox.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { PhCheck } from '@phosphor-icons/vue'
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
+
+defineProps<{
+  count?: number
+}>()
+
+const checked = defineModel<boolean>()
+</script>
+
+<template>
+  <label class="flex flex-row gap-1.5 items-center text-sm cursor-pointer group">
+    <CheckboxRoot v-model="checked"
+      class="hover:bg-stone-100 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
+      <CheckboxIndicator class="size-full flex items-center justify-center bg-primary text-primary-foreground">
+        <PhCheck :size="10" weight="bold" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+
+    <span class="select-none">
+      <span class="group-hover:underline underline-offset-2">
+        <slot />
+      </span>
+
+      <small v-if="count" class="ml-1 opacity-50">({{ count }})</small>
+    </span>
+  </label>
+</template>
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Map from '@/components/Map.vue';
+import BikeMap from '@/components/BikeMap.vue';
 </script>

 <template>
@@ -10,6 +10,6 @@ import Map from '@/components/Map.vue';
  </header>

  <Suspense>
-    <Map />
+    <BikeMap />
  </Suspense>
 </template>
--- a/src/stores/map.ts
+++ b/src/stores/map.ts
@@ -2,14 +2,48 @@ import type { PointTuple } from 'leaflet'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'

+export const SPOTS_MIN = 1
+export const SPOTS_MAX = 99
+
 export const useMap = defineStore('map', () => {
  const zoom = ref(10)
-  const minZoom = 6
+  const minZoom = 8
  const center = ref<PointTuple>([48.11180645878813, -1.6637869497745246])
+  const topLeftCorner: PointTuple = [48.88261491330733, -3.437430524894775]
+  const bottomRightCorner: PointTuple = [47.31027605502938, 0.6437600778583776]
+  const maxBounds: PointTuple[] = [topLeftCorner, bottomRightCorner]
+  const maxBoundsViscosity = 0.9
+
+  const extraOptions: Record<string, any> = {
+    zoomControl: false,
+  }
+
+  const maxClusterRadius = 28
+  const disableClusteringAtZoom = 17
+
+  const filterUncovered = ref(true)
+  const filterCovered = ref(true)
+  const filterKorrigo = ref(true)
+
+  const filterCargoOnly = ref(false)
+  const filterStdOnly = ref(false)
+
+  const spotsRange = ref<[number, number]>([SPOTS_MIN, SPOTS_MAX])

  return {
    zoom,
    minZoom,
    center,
+    maxBounds,
+    maxBoundsViscosity,
+    maxClusterRadius,
+    disableClusteringAtZoom,
+    extraOptions,
+    filterUncovered,
+    filterCovered,
+    filterKorrigo,
+    filterCargoOnly,
+    filterStdOnly,
+    spotsRange,
  }
 })
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -1,3 +1,21 @@
+export const MAP_TILELAYER_URL =
+  'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
+
 export const API_BASE_URL =
  'https://data.rennesmetropole.fr/api/explore/v2.1/catalog/datasets/parkings_velos_sur_rennes_metropole/records'
 export const API_LIMIT = 100
+
+export const UNCOVERED_KEY = 'Non abrité'
+export const COVERED_KEY = 'Abrité'
+export const BOXED_KEY = 'Box individuel'
+export const KORRIGO_KEY = 'Abonnement Korrigo'
+
+export enum SpotType {
+  Uncovered = UNCOVERED_KEY,
+  Covered = COVERED_KEY,
+  Boxed = BOXED_KEY,
+}
+
+export enum SpotAccess {
+  Korrigo = KORRIGO_KEY,
+}