front/src/pages/maps.astro

@@ -76,8 +76,6 @@ const metadata = {
       geocoder: L.Control.Geocoder.nominatim(),
       position: 'topleft',
       showAlternatives: true,
-      reverseWaypoints: true,
-      routeWhileDragging: true,
       altLineOptions: {
         missingRouteTolerance: 50,
         extendToWaypoints: true,
@@ -89,8 +87,6 @@ const metadata = {
       }
   }).addTo(map).on('routeselected', (e) => {
     console.log(e)
-  }).on('routesfound', () =>{
-    console.log("test")
   })
 
 
@@ -114,6 +110,7 @@ const metadata = {
       poiMarkers.forEach(element => {
         element.remove();
       });
+      console.log(data);
       data.features.forEach(element => {
         const prop = element.properties
         const popup: Popup = new Popup()
@@ -133,12 +130,14 @@ const metadata = {
 
   // fonciton pour lancer la recherche de box sur l'api
   function sender(){
+    console.log("SEND")
     if(map.getZoom() >= 13){
       console.log("zoom OKAY")
       //TODO: mettre un message de recherche en cour
       searchBox();
     }else{
       console.log("zoom more to see result");
+      //TODO: faire en sorte d'avoir un message
     }
   }
   // envent pour lancer la recherche
@@ -149,17 +148,10 @@ const metadata = {
   window.clearTimeout(timeoutHandle);
   
   map.addEventListener("move",() =>{
+    console.log("move")
     window.clearTimeout(timeoutHandle);
     timeoutHandle = window.setTimeout(sender, cooldown);
-  })
+  })//searchBox)
-
-  map.addEventListener("zoom", () => {
-    if(map.getZoom() <= 11){
-      poiMarkers.forEach(element => {
-        element.remove()
-      });
-    }
-  })
 
   function search() {
     const params: URLSearchParams = new URLSearchParams();

front/src/pages/maps/find_route.astro

@@ -1,95 +0,0 @@
----
-import Layout from 'layouts/PageLayout.astro'
-import 'leaflet/dist/leaflet.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'
-
-const metadata = {
-  title: 'Maps',
-  ignoreTitleTemplate: true,
-}
----
-
-<Layout metadata={metadata}>
-
-  <div class="h-[calc(100vh-16rem)] flex flex-col">
-    <div class="w-full h-96 grow" id="map" />
-    <Button id="test-btn">test</Button>
-  </div>
-  
-  <script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
-
-  <!-- for remouve footer -->
-  <!-- <div slot="footer"></div> -->
-  <!-- penser a rm  11 au rem au dessus pour la taille -->
-</Layout>
-
-<script>
-  import L, { geoJSON, Icon, Popup, type LatLngTuple } from 'leaflet'
-  import markerShadow from "leaflet/dist/images/marker-shadow.png"
-  import markerIcon from "leaflet/dist/images/marker-icon.png"
-  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
-
-  // declare map
-  const map = L.map('map', {
-    center: [51.5, -0.09],
-    zoom: 13,
-    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 routing = L.Routing.control({
-    // utile pour afficher des route stocké
-    // waypoints: [
-    //   L.latLng(46.6705431, -1.4269698),
-    //   L.latLng(47.218536, -1.554075)
-    // ],
-    routeWhileDragging: true,
-    geocoder: L.Control.Geocoder.nominatim(),
-    position: 'topleft',
-    showAlternatives: true,
-    reverseWaypoints: 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("iténeraire choisie")
-    console.log(e)
-  }).on('routesfound', (e) =>{
-    console.log("route trouvé")
-    console.log(e)
-  })
-  const pouet = "pouet"
-  document.querySelector<HTMLButtonElement>('#test-btn')?.addEventListener('click', () => {
-    routing.setWaypoints(
-      [L.latLng(46.6705431, -1.4269698),L.latLng(47.218536, -1.554075)]
-    )
-    routing.route();
-  })
-
-</script>