front/package-lock.json

@@ -20,6 +20,7 @@
         "astro-embed": "^0.7.2",
         "astro-icon": "^1.1.0",
         "leaflet": "^1.9.4",
+        "leaflet-control-geocoder": "^2.4.0",
         "leaflet-geosearch": "^4.0.0",
         "leaflet-routing-machine": "^3.2.12",
         "limax": "4.1.0",
@@ -8153,6 +8154,17 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
     },
+    "node_modules/leaflet-control-geocoder": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/leaflet-control-geocoder/-/leaflet-control-geocoder-2.4.0.tgz",
+      "integrity": "sha512-b2QlxuFd40uIDbnoUI3U9fzfnB4yKUYlmsXjquJ2d2YjoJqnyVYcIJeErAVv3kPvX3nI0gzvBq1XHMgSVFrGkQ==",
+      "optionalDependencies": {
+        "open-location-code": "^1.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.6.0"
+      }
+    },
     "node_modules/leaflet-geosearch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/leaflet-geosearch/-/leaflet-geosearch-4.0.0.tgz",
@@ -10052,6 +10064,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open-location-code": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/open-location-code/-/open-location-code-1.0.3.tgz",
+      "integrity": "sha512-DBm14BSn40Ee241n80zIFXIT6+y8Tb0I+jTdosLJ8Sidvr2qONvymwqymVbHV2nS+1gkDZ5eTNpnOIVV0Kn2fw==",
+      "optional": true
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",

front/package.json

@@ -27,6 +27,7 @@
     "astro-embed": "^0.7.2",
     "astro-icon": "^1.1.0",
     "leaflet": "^1.9.4",
+    "leaflet-control-geocoder": "^2.4.0",
     "leaflet-geosearch": "^4.0.0",
     "leaflet-routing-machine": "^3.2.12",
     "limax": "4.1.0",

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: [
+      routeWhileDragging: true,
-          L.latLng(57.74, 11.94),
+      geocoder: L.Control.Geocoder.nominatim(),
-          L.latLng(57.6792, 11.949)
+      position: 'topleft',
-      ],
+      showAlternatives: true,
-      routeWhileDragging: true
+      altLineOptions: {
-  }).addTo(map)
+        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>