Changed tilelayer

index.html

@@ -6,7 +6,58 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="/src/assets/css/main.css" rel="stylesheet">
-    <title>Vite App</title>
+
+    <title>Vélo Park — AlexisNP</title>
+    <meta property="og:title" content="Vélo Park — AlexisNP" />
+
+    <meta name="description" content="Cartes des emplacements de parcs à vélos de l'agglomération rennaise." />
+    <meta property="og:description" content="Cartes des emplacements de parcs à vélos de l'agglomération rennaise." />
+    <meta name="twitter:description" content="Cartes des emplacements de parcs à vélos de l'agglomération rennaise." />
+
+    <meta property="author" content="Alexis Pelé" />
+    <meta property="og:author" content="Alexis Pelé" />
+    <meta property="og:author:username" content="AlexisNP" />
+
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/light/apple-icon-57x57.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/light/apple-icon-60x60.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/light/apple-icon-72x72.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/light/apple-icon-76x76.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/light/apple-icon-114x114.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/light/apple-icon-120x120.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/light/apple-icon-144x144.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/light/apple-icon-152x152.png" media="(prefers-color-scheme: light)">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/light/apple-icon-180x180.png" media="(prefers-color-scheme: light)">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/light/android-icon-192x192.png" media="(prefers-color-scheme: light)">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/light/favicon-32x32.png" media="(prefers-color-scheme: light)">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/light/favicon-96x96.png" media="(prefers-color-scheme: light)">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/light/favicon-16x16.png" media="(prefers-color-scheme: light)">
+    <link rel="manifest" href="/favicon/light/manifest.json" media="(prefers-color-scheme: light)">
+    <meta name="msapplication-TileImage" content="/favicon/light/ms-icon-144x144.png" media="(prefers-color-scheme: light)">
+
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/dark/apple-icon-57x57.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/dark/apple-icon-60x60.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/dark/apple-icon-72x72.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/dark/apple-icon-76x76.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/dark/apple-icon-114x114.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/dark/apple-icon-120x120.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/dark/apple-icon-144x144.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/dark/apple-icon-152x152.png" media="(prefers-color-scheme: dark)">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/dark/apple-icon-180x180.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/dark/android-icon-192x192.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/dark/favicon-96x96.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)">
+    <link rel="manifest" href="/favicon/dark/manifest.json" media="(prefers-color-scheme: dark)">
+    <meta name="msapplication-TileImage" content="/favicon/dark/ms-icon-144x144.png" media="(prefers-color-scheme: dark)">
+
+    <meta name="msapplication-TileColor" content="#06df72">
+    <meta name="theme-color" content="#06df72">
+    <meta name="color-scheme" content="light" />
+
+    <meta property="og:site_name" content="bikes.alexcreates.fr" />
+    <meta name="twitter:domain" content="bikes.alexcreates.fr" />
+
+    <meta property="og:type" content="website" />
 </head>
 
 <body>

package.json

@@ -16,40 +16,40 @@
   },
   "dependencies": {
     "@phosphor-icons/vue": "^2.2.1",
-    "@pinia/colada": "^1.0.0",
+    "@pinia/colada": "^1.3.1",
-    "@tailwindcss/vite": "^4.2.2",
+    "@tailwindcss/vite": "^4.3.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "@vueuse/core": "^14.2.1",
+    "@vueuse/core": "^14.3.0",
     "leaflet": "^1.9.4",
     "pinia": "^3.0.4",
-    "reka-ui": "^2.9.2",
+    "reka-ui": "^2.9.9",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.3.0",
-    "vue": "^3.5.30",
+    "vue": "^3.5.35",
     "vue-leaflet-markercluster": "^0.6.1",
-    "vue-router": "^5.0.3"
+    "vue-router": "^5.1.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/leaflet": "^1.9.21",
-    "@types/node": "^24.12.0",
+    "@types/node": "^25.9.1",
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/eslint-config-typescript": "^14.8.0",
-    "@vue/tsconfig": "^0.9.0",
+    "@vue/tsconfig": "^0.9.1",
     "clsx": "^2.1.1",
-    "eslint": "^10.0.3",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-oxlint": "~1.51.0",
+    "eslint-plugin-oxlint": "~1.68.0",
-    "eslint-plugin-vue": "~10.8.0",
+    "eslint-plugin-vue": "~10.9.2",
-    "jiti": "^2.6.1",
+    "jiti": "^2.7.0",
-    "npm-run-all2": "^8.0.4",
+    "npm-run-all2": "^9.0.1",
-    "oxfmt": "^0.37.0",
+    "oxfmt": "^0.53.0",
-    "oxlint": "~1.51.0",
+    "oxlint": "~1.68.0",
-    "sass-embedded": "^1.98.0",
+    "sass-embedded": "^1.100.0",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.16",
-    "vite-plugin-vue-devtools": "^8.0.7",
+    "vite-plugin-vue-devtools": "^8.1.2",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.3.3"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 onlyBuiltDependencies:
+  - '@parcel/watcher'
   - esbuild
   - vue-demi

public/favicon/dark/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#065f46</TileColor></tile></msapplication></browserconfig>

public/favicon/dark/manifest.json

@@ -0,0 +1,46 @@
+{
+  "name": "alexcreates.fr",
+  "theme_color": "#065f46",
+  "background_color": "#065f46",
+  "display": "browser",
+  "scope": "/",
+  "start_url": "https://alexcreates.fr",
+  "icons": [
+    {
+      "src": "\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    }
+  ]
+}

public/favicon/light/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#065f46</TileColor></tile></msapplication></browserconfig>

public/favicon/light/manifest.json

@@ -0,0 +1,46 @@
+{
+  "name": "alexcreates.fr",
+  "theme_color": "#065f46",
+  "background_color": "#065f46",
+  "display": "browser",
+  "scope": "/",
+  "start_url": "https://alexcreates.fr",
+  "icons": [
+    {
+      "src": "\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    }
+  ]
+}

public/robots.txt

@@ -0,0 +1,49 @@
+User-agent: GPTBot
+Disallow: /
+User-agent: ChatGPT-User
+Disallow: /
+User-agent: Google-Extended
+Disallow: /
+User-agent: PerplexityBot
+Disallow: /
+User-agent: Amazonbot
+Disallow: /
+User-agent: ClaudeBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-Agent: FacebookBot
+Disallow: /
+User-Agent: Applebot
+Disallow: /
+User-agent: anthropic-ai
+Disallow: /
+User-agent: Bytespider
+Disallow: /
+User-agent: Claude-Web
+Disallow: /
+User-agent: Diffbot
+Disallow: /
+User-agent: ImagesiftBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-agent: Omgili
+Disallow: /
+User-agent: YouBot
+Disallow: /
+
+User-agent: AhrefsBot
+Disallow: /
+User-agent: AhrefsSiteAudit
+Disallow: /
+User-agent: SemrushBot
+Disallow: /
+User-agent: YandexMarket
+Disallow: /
+User-agent: YandexBot
+Disallow: /
+User-agent: DataForSeoBot
+Disallow: /
+
+Sitemap: https://alexcreates.fr/sitemap-index.xml

src/components/BikeClusterLayer.vue

@@ -10,33 +10,30 @@ defineProps<{
   maxClusterRadius: number
   disableClusteringAtZoom: number
 }>()
-
-const emit = defineEmits<{ nudgeGeolocation: [] }>()
 </script>
 
 <template>
   <LMarkerClusterGroup v-if="parkings.length > 0" :visible :max-cluster-radius :disable-clustering-at-zoom>
-    <BikeMarker @nudge-geolocation="emit('nudgeGeolocation')" v-once v-for="park in parkings" :key="park.id_parc_velo"
+    <BikeMarker v-once v-for="park in parkings" :key="park.id_parc_velo" :park :group />
-      :park :group />
   </LMarkerClusterGroup>
 </template>
 
 <style lang="scss">
 .marker-cluster div {
   font-family: var(--default-font-family);
-  font-size: .9em;
+  font-size: .95em;
 }
 
 .marker-cluster span {
   font-weight: var(--font-weight-bold);
-  opacity: .85;
+  opacity: .5;
 }
 
 .marker-cluster-small {
-  background-color: color-mix(in srgb, var(--color-green-400) 10%, transparent);
+  background-color: color-mix(in srgb, var(--color-green-400) 7.5%, transparent);
 
   div {
-    background-color: color-mix(in srgb, var(--color-green-400) 15%, transparent);
+    background-color: color-mix(in srgb, var(--color-green-400) 10%, transparent);
   }
 }
 
@@ -44,7 +41,7 @@ const emit = defineEmits<{ nudgeGeolocation: [] }>()
   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);
+    background-color: color-mix(in srgb, var(--color-amber-500) 15%, transparent);
   }
 }
 
@@ -52,7 +49,7 @@ const emit = defineEmits<{ nudgeGeolocation: [] }>()
   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);
+    background-color: color-mix(in srgb, var(--color-rose-500) 20%, transparent);
   }
 }
 </style>

src/components/BikeMap.vue

@@ -8,18 +8,24 @@ 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 { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL_DARK, MAP_TILELAYER_URL_LIGHT, SpotAccess, SpotType } from '@/utils/const'
 import { useQuery } from '@pinia/colada'
-import { LControlZoom, LGeoJson, LIcon, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
 import BikeFilters from './BikeFilters.vue'
 import { computed, ref, useTemplateRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import BikeClusterLayer from './BikeClusterLayer.vue'
-import { PhCircleNotch, PhMapPin } from '@phosphor-icons/vue'
+import { PhCircleNotch } from '@phosphor-icons/vue'
-import { useRouting } from '@/composables/useRouting'
+import { useDark } from '@vueuse/core'
+import BikeUserMarker from './BikeUserMarker.vue'
 
 // Map setup
 const mapRef = useTemplateRef<{ leafletObject: Map }>('map')
+const isDark = useDark({ storageKey: "theme" })
+
+const mapTilelayer = computed(() => {
+  return isDark.value ? MAP_TILELAYER_URL_DARK : MAP_TILELAYER_URL_LIGHT
+})
 
 // Data fetching
 const fetchedPages = ref(0)
@@ -92,11 +98,6 @@ function handleClickGeoloc() {
     mapRef.value?.leafletObject.flyTo([userCoords.value.latitude, userCoords.value.longitude], 12)
   }
 }
-
-// Routing
-const { activeRoute } = useRouting()
-const showGeolocationNudge = ref(false)
-
 </script>
 
 <template>
@@ -106,12 +107,6 @@ const showGeolocationNudge = ref(false)
       :nb-covered="coveredParkingsSpots" :nb-korrigo="premiumParkingsSpots" @click-geoloc="handleClickGeoloc" />
   </Transition>
 
-  <Transition>
-    <div v-if="showGeolocationNudge" class="...">
-      Activez la géolocalisation pour obtenir un itinéraire
-    </div>
-  </Transition>
-
   <main class="relative z-0 h-screen w-screen grid place-items-center">
     <div v-if="state.status === 'pending'" class="flex flex-col items-center gap-3 text-sm">
       <span>Chargement des parkings… {{ progress }}%</span>
@@ -126,22 +121,16 @@ const showGeolocationNudge = ref(false)
       <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" />
+        <LTileLayer v-once :url="mapTilelayer" layer-type="base" />
 
-        <LGeoJson v-if="activeRoute" :geojson="activeRoute" />
+        <BikeUserMarker v-if="userCoords" />
 
-        <LMarker v-if="userCoords" :lat-lng="[userCoords.latitude, userCoords.longitude]">
+        <BikeClusterLayer :parkings="coveredParkings" group="covered" :visible="filterCovered" :max-cluster-radius
-          <LIcon>
+          :disable-clustering-at-zoom />
-            <PhMapPin size="24" weight="fill" class="text-amber-400" />
+        <BikeClusterLayer :parkings="nonCoveredParkings" group="non-covered" :visible="filterUncovered"
-          </LIcon>
+          :max-cluster-radius :disable-clustering-at-zoom />
-        </LMarker>
+        <BikeClusterLayer :parkings="premiumParkings" group="premium" :visible="filterKorrigo" :max-cluster-radius
-
+          :disable-clustering-at-zoom />
-        <BikeClusterLayer @nudge-geolocation="showGeolocationNudge = true" :parkings="coveredParkings" group="covered"
-          :visible="filterCovered" :max-cluster-radius :disable-clustering-at-zoom />
-        <BikeClusterLayer @nudge-geolocation="showGeolocationNudge = true" :parkings="nonCoveredParkings"
-          group="non-covered" :visible="filterUncovered" :max-cluster-radius :disable-clustering-at-zoom />
-        <BikeClusterLayer @nudge-geolocation="showGeolocationNudge = true" :parkings="premiumParkings" group="premium"
-          :visible="filterKorrigo" :max-cluster-radius :disable-clustering-at-zoom />
       </LMap>
     </template>
   </main>

src/components/BikeMarker.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import { useRouting } from '@/composables/useRouting';
-import { SPOTS_MAX, useMap } from '@/stores/map';
-import type { BikeParking } from '@/types/Bikes';
 import { cn } from '@/utils/cn';
-import { BOXED_KEY, COVERED_KEY, KORRIGO_KEY, UNCOVERED_KEY } from '@/utils/const';
+import type { BikeParking } from '@/types/Bikes';
 import { PhBicycle, PhLockKey, PhSquareHalf, PhWarehouse } from '@phosphor-icons/vue';
 import { LIcon, LMarker, LPopup } from '@vue-leaflet/vue-leaflet';
 import type { PointTuple } from 'leaflet';
-import { storeToRefs } from 'pinia';
 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';
 
 const props = defineProps<{
   park: BikeParking
@@ -41,28 +40,10 @@ const isMarkerVisibleEquipments = computed(() => {
 })
 
 const isMarkerVisible = computed(() => isMarkerVisibleLayers.value && isMarkerVisibleEquipments.value)
-
-// Routing
-const { routeTo } = useRouting()
-const { userCoords } = storeToRefs(useMap())
-
-const emit = defineEmits<{
-  nudgeGeolocation: []
-}>()
-
-async function handleMarkerClick() {
-  if (!userCoords.value) {
-    emit('nudgeGeolocation')
-    return
-  }
-
-  await routeTo(props.park)
-}
 </script>
 
 <template>
-  <LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]" :visible="isMarkerVisible"
+  <LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]" :visible="isMarkerVisible">
-    @click="handleMarkerClick">
     <LPopup :options="{ offset: popupOffset, maxWidth: 520, minWidth: 240 }">
       <div>
         <h2 class="font-bold">
@@ -103,7 +84,7 @@ async function handleMarkerClick() {
       { 'korrigo': park.condition_acces === KORRIGO_KEY },
       { 'highlight': park.type === BOXED_KEY || park.type === COVERED_KEY },
     )">
-      <PhBicycle v-if="park.type === UNCOVERED_KEY" size="18" />
+      <PhBicycle v-if="park.type === UNCOVERED_KEY" size="18" weight="fill" />
       <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" />
@@ -114,8 +95,10 @@ async function handleMarkerClick() {
 <style lang="scss">
 .leaflet-marker-icon:not(.marker-cluster) {
   border-radius: 50%;
-  color: var(--color-muted-foreground);
+  color: color-mix(in srgb, var(--color-foreground) 80%, var(--color-background));
-  background-color: var(--color-background);
+  background-color: color-mix(in srgb, var(--color-background) 85%, var(--color-foreground));
+  border: 1px solid color-mix(in srgb, var(--color-muted-foreground) 50%, var(--color-background));
+  box-shadow: var(--shadow);
   display: grid;
   place-items: center;
 

src/components/BikeUserMarker.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useMap } from '@/stores/map';
+import { PhMapPin } from '@phosphor-icons/vue';
+import { LIcon, LMarker } from '@vue-leaflet/vue-leaflet';
+import type { PointTuple } from 'leaflet';
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+const normalIconSize: PointTuple = [30, 30]
+
+const iconSize = ref<PointTuple>(normalIconSize)
+const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
+
+// Geolocation
+const { userCoords } = storeToRefs(useMap())
+</script>
+
+<template>
+  <LMarker v-if="userCoords" :lat-lng="[userCoords.latitude, userCoords.longitude]" :icon-size :icon-anchor>
+    <LIcon>
+      <PhMapPin size="20" weight="fill" class="text-amber-400" />
+    </LIcon>
+  </LMarker>
+</template>

src/composables/useRouting.ts

@@ -1,27 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { useMap } from '@/stores/map'
-import type { BikeParking } from '@/types/Bikes'
-
-export function useRouting() {
-  const { userCoords, activeRoute, isRoutingLoading } = storeToRefs(useMap())
-
-  async function routeTo(park: BikeParking) {
-    if (!userCoords.value) return false // caller handles the nudge
-
-    isRoutingLoading.value = true
-    activeRoute.value = null
-
-    const { latitude: uLat, longitude: uLon } = userCoords.value
-    const { lat: pLat, lon: pLon } = park.geo_point_2d
-
-    const url = `https://router.project-osrm.org/route/v1/bike/${uLon},${uLat};${pLon},${pLat}?geometries=geojson&overview=full`
-    const data = await fetch(url).then((r) => r.json())
-
-    activeRoute.value = data.routes[0].geometry
-    isRoutingLoading.value = false
-
-    return true
-  }
-
-  return { routeTo, activeRoute, isRoutingLoading }
-}

src/stores/map.ts

@@ -20,7 +20,7 @@ export const useMap = defineStore('map', () => {
   }
 
   // Cluster layers options
-  const maxClusterRadius = 40
+  const maxClusterRadius = 60
   const disableClusteringAtZoom = 17
 
   // Geolocation
@@ -36,10 +36,6 @@ export const useMap = defineStore('map', () => {
 
   const spotsRange = ref<[number, number]>([SPOTS_MIN, SPOTS_MAX])
 
-  // Routing
-  const activeRoute = ref<GeoJSON.LineString | null>(null)
-  const isRoutingLoading = ref(false)
-
   return {
     zoom,
     minZoom,
@@ -56,7 +52,5 @@ export const useMap = defineStore('map', () => {
     filterCargoOnly,
     filterStdOnly,
     spotsRange,
-    activeRoute,
-    isRoutingLoading,
   }
 })

src/utils/const.ts

@@ -1,5 +1,5 @@
-export const MAP_TILELAYER_URL =
+export const MAP_TILELAYER_URL_LIGHT = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
-  'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
+export const MAP_TILELAYER_URL_DARK = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
 
 export const API_BASE_URL =
   'https://data.rennesmetropole.fr/api/explore/v2.1/catalog/datasets/parkings_velos_sur_rennes_metropole/records'