From 74f1629bf4e72478d505e602fa9d71b2b0d8396d Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Sat, 4 Apr 2026 17:57:01 +0200
Subject: [PATCH] Added more options to leaflet map instance

---
 src/components/BikeMap.vue |  6 +++---
 src/stores/map.ts          | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/BikeMap.vue b/src/components/BikeMap.vue
index 982401e..e0db556 100644
--- a/src/components/BikeMap.vue
+++ b/src/components/BikeMap.vue
@@ -62,7 +62,7 @@ const premiumParkingsSpots = computed(() => {
   return premiumParkings.value.reduce((acc, val) => acc + val.nb_total_place, 0)
 })
 
-const { zoom, minZoom, center, maxClusterRadius, disableClusteringAtZoom } = useMap()
+const { zoom, minZoom, center, maxBounds, maxBoundsViscosity, maxClusterRadius, disableClusteringAtZoom, extraOptions } = useMap()
 const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
 </script>
 
@@ -77,8 +77,8 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
     <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">
+      <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" />
diff --git a/src/stores/map.ts b/src/stores/map.ts
index 6ed5445..c3c14a7 100644
--- a/src/stores/map.ts
+++ b/src/stores/map.ts
@@ -7,8 +7,16 @@ 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
@@ -26,8 +34,11 @@ export const useMap = defineStore('map', () => {
     zoom,
     minZoom,
     center,
+    maxBounds,
+    maxBoundsViscosity,
     maxClusterRadius,
     disableClusteringAtZoom,
+    extraOptions,
     filterUncovered,
     filterCovered,
     filterKorrigo,