Added base types filters

src/components/BikeFilters.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { useMap } from '@/stores/map';
+import { PhCheck } from '@phosphor-icons/vue';
+import { storeToRefs } from 'pinia';
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
+
+const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
+</script>
+
+<template>
+  <aside class="absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 text-xs rounded-xs">
+    <form>
+      <div class="grid gap-1.5">
+        <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
+          <CheckboxRoot v-model="filterCovered"
+            class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
+            <CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
+              <PhCheck :size="10" />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+
+          <span class="select-none">Abrités</span>
+        </label>
+
+        <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
+          <CheckboxRoot v-model="filterUncovered"
+            class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
+            <CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
+              <PhCheck :size="10" />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+
+          <span class="select-none">Non-abrités</span>
+        </label>
+
+        <label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
+          <CheckboxRoot v-model="filterKorrigo"
+            class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
+            <CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
+              <PhCheck :size="10" />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+
+          <span class="select-none">Abonnement Korrigo</span>
+        </label>
+      </div>
+    </form>
+  </aside>
+</template>

src/components/BikeMarker.vue

@@ -5,9 +5,11 @@ 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';
 
 defineProps<{
   park: BikeParking
+  group: 'covered' | 'non-covered' | 'premium'
 }>()
 
 const normalIconSize: PointTuple = [30, 30]
@@ -45,13 +47,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" />
+      <PhSquareHalf v-else-if="park.type === BOXED_KEY" size="18" />
+      <PhLockKey v-else-if="park.condition_acces === KORRIGO_KEY" size="18" weight="fill" />
     </LIcon>
   </LMarker>
 </template>

src/components/Map.vue

@@ -8,11 +8,14 @@ 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 { 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 { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
 import BikeMarker from './BikeMarker.vue'
+import BikeFilters from './BikeFilters.vue'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 
 async function fetchAllBikeParkings(): Promise<BikeParking[]> {
   const firstPage = await fetch(`${API_BASE_URL}?limit=${API_LIMIT}`).then(r => r.json()) as ApiResponse
@@ -36,17 +39,29 @@ const { state } = useQuery({
   query: fetchAllBikeParkings,
 })
 
-const { zoom, minZoom, center } = useMap()
+// Groups different parking spot by types
+const coveredTypes = new Set([SpotType.Covered, SpotType.Boxed])
+
+const coveredParkings = computed(() =>
+  state.value.data?.filter(p => coveredTypes.has(p.type as SpotType)) ?? []
+)
+
+const nonCoveredParkings = computed(() =>
+  state.value.data?.filter(p => p.type === SpotType.Uncovered) ?? []
+)
+
+const premiumParkings = computed(() =>
+  state.value.data?.filter(p => p.condition_acces === SpotAccess.Korrigo) ?? []
+)
+
+const { zoom, minZoom, center, maxClusterRadius, disableClusteringAtZoom } = useMap()
+const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
 </script>
 
 <template>
-  <header class="sr-only">
-    <h1>
-      Carte interactive des parkings vélo de Rennes Métropole
-    </h1>
-  </header>
+  <BikeFilters />
 
-  <main class="h-screen w-screen grid place-items-center">
+  <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>
@@ -54,11 +69,24 @@ const { zoom, minZoom, center } = useMap()
         :useGlobalLeaflet="true">
         <LControlZoom position="bottomright" />
 
-        <LTileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" layer-type="base" />
+        <LTileLayer v-once :url="MAP_TILELAYER_URL" 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 />
+        <!-- Covered parkings: Abrité, Box individuel -->
+        <LMarkerClusterGroup :visible="filterUncovered" v-if="coveredParkings.length > 0" :max-cluster-radius
+          :disable-clustering-at-zoom>
+          <BikeMarker v-once v-for="park in coveredParkings" :key="park.id_parc_velo" :park group="covered" />
+        </LMarkerClusterGroup>
+
+        <!-- Non-covered parkings: Non abrité -->
+        <LMarkerClusterGroup :visible="filterCovered" v-if="nonCoveredParkings.length > 0" :max-cluster-radius
+          :disable-clustering-at-zoom>
+          <BikeMarker v-once v-for="park in nonCoveredParkings" :key="park.id_parc_velo" :park group="non-covered" />
+        </LMarkerClusterGroup>
+
+        <!-- Premium parkings: Abonnement Korrigo -->
+        <LMarkerClusterGroup :visible="filterKorrigo" v-if="premiumParkings.length > 0" :max-cluster-radius
+          :disable-clustering-at-zoom>
+          <BikeMarker v-once v-for="park in premiumParkings" :key="park.id_parc_velo" :park group="premium" />
         </LMarkerClusterGroup>
       </LMap>
     </template>

src/stores/map.ts

@@ -7,9 +7,21 @@ export const useMap = defineStore('map', () => {
   const minZoom = 6
   const center = ref<PointTuple>([48.11180645878813, -1.6637869497745246])
 
+  const maxClusterRadius = 30
+  const disableClusteringAtZoom = 17
+
+  const filterUncovered = ref(true)
+  const filterCovered = ref(true)
+  const filterKorrigo = ref(true)
+
   return {
     zoom,
     minZoom,
     center,
+    maxClusterRadius,
+    disableClusteringAtZoom,
+    filterUncovered,
+    filterCovered,
+    filterKorrigo,
   }
 })

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,
+}