feat rooting WIP

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);
       });