feat: route alternativ

front/src/pages/maps.astro

@@ -33,6 +33,7 @@ const metadata = {
   import { OpenStreetMapProvider } from 'leaflet-geosearch'
   import { GeoSearchControl } from 'leaflet-geosearch'
   import 'leaflet-routing-machine/dist/leaflet-routing-machine.js'
+  import 'leaflet-control-geocoder/dist/Control.Geocoder.js'
 
   const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
 
@@ -41,17 +42,24 @@ const metadata = {
 
   let mapsCenter : L.LatLngTuple
 
+  // declare map
   const map = L.map('map', {
     center: [51.5, -0.09],
     zoom: 13,
-    preferCanvas: true
+    preferCanvas: true,
+    zoomControl: false
   })
-
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
   }).addTo(map)
 
+  // move zoom ctl to bottom
+  L.control.zoom({
+    position: 'bottomleft'
+  }).addTo(map);
+
+
   const provider = new OpenStreetMapProvider()
   
   map.addControl(
@@ -64,12 +72,24 @@ const metadata = {
   )
 
   L.Routing.control({
-      waypoints: [
-          L.latLng(57.74, 11.94),
-          L.latLng(57.6792, 11.949)
-      ],
-      routeWhileDragging: true
-  }).addTo(map)
+      routeWhileDragging: true,
+      geocoder: L.Control.Geocoder.nominatim(),
+      position: 'topleft',
+      showAlternatives: true,
+      altLineOptions: {
+        missingRouteTolerance: 50,
+        extendToWaypoints: true,
+        styles: [
+          {color: 'black', opacity: 0.15, weight: 9},
+          {color: 'white', opacity: 0.2, weight: 6},
+          {color: 'blue', opacity: 5, weight: 2}
+        ]
+      }
+  }).addTo(map).on('routeselected', (e) => {
+    console.log(e)
+  })
+
+
 
   let poiMarkers = new Array<L.Marker>