feat(front): add datatype in the url

front/cypress/e2e/mapInteractions.cy.ts

@@ -4,7 +4,7 @@ import { DataType, DataTypeToLabel } from "../../src/utils/enum"
 
 describe("Map interactions", () => {
   beforeEach(() => {
-    cy.visit("/13/45.07126/5.5543")
+    cy.visit("/plantability/13/45.07126/5.5543")
     cy.get("@consoleInfo").should("have.been.calledWith", "cypress: map data loaded")
   })
 

front/src/components/map/MapComponent.vue

@@ -5,7 +5,7 @@ import { useRouter, useRoute } from "vue-router"
 import MapLegend from "@/components/map/legend/MapLegend.vue"
 import MapScorePopup from "@/components/map/popup/MapScorePopup.vue"
 import MapLayerSwitcher from "@/components/map/layerSwitcher/MapLayerSwitcher.vue"
-import { Map } from "maplibre-gl"
+import { updateMapRoute } from "@/utils/route"
 
 const router = useRouter()
 const route = useRoute()
@@ -17,18 +17,6 @@ const props = defineProps({
   }
 })
 
-const updateRouteCoords = (map: Map) => {
-  const coords = map.getCenter()
-  router.replace({
-    name: "mapWithCoords",
-    params: {
-      zoom: Math.round(map.getZoom()),
-      lng: Math.round(100000 * coords.lng) / 100000,
-      lat: Math.round(100000 * coords.lat) / 100000
-    }
-  })
-}
-
 const mapStore = useMapStore()
 
 onMounted(() => {
@@ -44,8 +32,10 @@ onMounted(() => {
       })
     }
 
-    mapInstance.on("moveend", () => updateRouteCoords(mapInstance))
-    updateRouteCoords(mapInstance)
+    mapInstance.on("moveend", () => {
+      updateMapRoute(router, { map: mapInstance })
+    })
+    updateMapRoute(router, { map: mapInstance })
   }
 })
 </script>

front/src/components/map/layerSwitcher/LayerSwitcher.vue

@@ -2,14 +2,19 @@
 import { useMapStore } from "@/stores/map"
 import { DataType, DataTypeToLabel } from "@/utils/enum"
 import { computed } from "vue"
+import { updateMapRoute } from "@/utils/route"
+import { useRouter } from "vue-router"
 
 const mapStore = useMapStore()
+const router = useRouter()
 
 const selectedDataType = computed({
   get: () => mapStore.selectedDataType,
   set: (value: DataType) => {
     console.log("changeLayer 0.0")
+    console.log("changeLayer 0.1", value)
     mapStore.changeDataType(value)
+    updateMapRoute(router, {})
   }
 })
 </script>

front/src/router/index.ts

@@ -10,7 +10,7 @@ const router = createRouter({
       component: MapView
     },
     {
-      path: "/:zoom(\\d+)/:lat(\\d+.\\d+)/:lng(\\d+.\\d+)",
+      path: "/:dataType([a-zA-Z]+)/:zoom(\\d+)/:lat(\\d+.\\d+)/:lng(\\d+.\\d+)",
       name: "mapWithCoords",
       component: MapView
     }

front/src/utils/route.ts

@@ -0,0 +1,36 @@
+import { useRouter } from "vue-router"
+import { useMapStore } from "@/stores/map"
+import { Map } from "maplibre-gl"
+
+export function updateMapRoute(
+  router: ReturnType<typeof useRouter>,
+  options: {
+    map?: Map
+  }
+) {
+  const mapStore = useMapStore()
+
+  const route = router.currentRoute.value
+
+  const { zoom, lat, lng } = options.map
+    ? {
+        zoom: Math.round(options.map.getZoom()),
+        lat: Math.round(100000 * options.map.getCenter().lat) / 100000,
+        lng: Math.round(100000 * options.map.getCenter().lng) / 100000
+      }
+    : {
+        zoom: route.params.zoom,
+        lat: route.params.lat,
+        lng: route.params.lng
+      }
+
+  router.replace({
+    name: "mapWithCoords",
+    params: {
+      dataType: mapStore.selectedDataType,
+      zoom,
+      lat,
+      lng
+    }
+  })
+}