front/src/pages/maps/index.astro

@@ -2,7 +2,6 @@
 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,8 +17,7 @@ const metadata = {
   <div class="h-[calc(100vh-16rem)] flex flex-col">
     <div class="w-full h-96 grow" id="map" />
   </div>
-  
+  <!-- TODO: faire en sort que le style soit propre -->
-  <script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
 
   <!-- for remouve footer -->
   <!-- <div slot="footer"></div> -->
@@ -32,12 +30,9 @@ const metadata = {
   import markerIcon from "leaflet/dist/images/marker-icon.png"
   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]})}
 
-  // const BACK_URL = "https://drink-tweb.cb85.fr/"
   const BACK_URL = "http://localhost:3001/"
 
   let mapsCenter : L.LatLngTuple
@@ -71,30 +66,6 @@ const metadata = {
     }),
   )
 
-  L.Routing.control({
-      routeWhileDragging: true,
-      geocoder: L.Control.Geocoder.nominatim(),
-      position: 'topleft',
-      showAlternatives: true,
-      reverseWaypoints: true,
-      routeWhileDragging: 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)
-  }).on('routesfound', () =>{
-    console.log("test")
-  })
-
-
-
   let poiMarkers = new Array<L.Marker>
 
   // run api search
@@ -160,28 +131,4 @@ const metadata = {
       });
     }
   })
-
-  function search() {
-    const params: URLSearchParams = new URLSearchParams();
-    params.append("name", input!.value)
-
-    fetch(`${BACK_URL}otm/city?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
-      // The API call was successful!
-      return response.json();
-    }).then(function (data) {
-      console.log(data);
-      mapsCenter = [data.lat, data.lon]
-      marker.setLatLng(mapsCenter)
-      map.setView(mapsCenter)
-      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)
-        poiMarker.addTo(map)
-      });
-    }).catch(function (err) {
-      console.warn('Something went wrong.', err);
-    });
-  }
-
 </script>