front/package-lock.json

@@ -45,6 +45,7 @@
         "@types/eslint__js": "^8.42.3",
         "@types/js-yaml": "^4.0.9",
         "@types/leaflet": "^1.9.12",
+        "@types/leaflet-routing-machine": "^3.2.8",
         "@types/lodash.merge": "^4.6.9",
         "@types/node": "^20",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -3087,6 +3088,15 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/leaflet-routing-machine": {
+      "version": "3.2.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet-routing-machine/-/leaflet-routing-machine-3.2.8.tgz",
+      "integrity": "sha512-v2pJDv/nqbB769SsytHemhLkqwjVor9UdWvZ1l6Y2SEaXNt1yDwVrktc4sCT8/4n7npuEb8VP+UAk8xrPePqSQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/leaflet": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.4",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",

front/package.json

@@ -52,6 +52,7 @@
     "@types/eslint__js": "^8.42.3",
     "@types/js-yaml": "^4.0.9",
     "@types/leaflet": "^1.9.12",
+    "@types/leaflet-routing-machine": "^3.2.8",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20",
     "@typescript-eslint/eslint-plugin": "^6.21.0",

front/src/pages/maps.astro

@@ -2,6 +2,7 @@
 import Layout from 'layouts/PageLayout.astro'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-geosearch/dist/geosearch.css'
+import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'
 import FormContainer from 'components/ui/Form.astro'
 import Input from 'components/Input.astro'
 import Button from 'components/ui/Button.astro'
@@ -18,7 +19,7 @@ const metadata = {
     <div class="w-full h-96 grow" id="map" />
   </div>
   
-
+  <script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
 
   <!-- for remouve footer -->
   <!-- <div slot="footer"></div> -->
@@ -30,7 +31,8 @@ const metadata = {
   import markerShadow from "leaflet/dist/images/marker-shadow.png"
   import markerIcon from "leaflet/dist/images/marker-icon.png"
   import { OpenStreetMapProvider } from 'leaflet-geosearch'
-  import { GeoSearchControl } from 'leaflet-geosearch';
+  import { GeoSearchControl } from 'leaflet-geosearch'
+  
 
   const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
 
@@ -60,6 +62,13 @@ const metadata = {
       style: 'bar',
     }),
   )
+  // L.Routing.control({
+  //     waypoints: [
+  //         L.latLng(57.74, 11.94),
+  //         L.latLng(57.6792, 11.949)
+  //     ],
+  //     routeWhileDragging: true
+  // }).addTo(map)
 
   let poiMarkers = new Array<L.Marker>
 
@@ -84,7 +93,12 @@ const metadata = {
       data.features.forEach(element => {
         const prop = element.properties
         const popup: Popup = new Popup()
-        const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon).bindPopup(prop.name + "\n" + prop.rate + "\n" + prop.kinds)
+        let tags = new String()
+        prop.kinds.split(",").forEach(element => {
+          tags += "- " + element + "<br/>"
+        });
+        const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon)
+          .bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags}`)
         poiMarker.addTo(map)
         poiMarkers.push(poiMarker);
       });