move maps to folder

front/src/pages/maps/index.astro

@@ -0,0 +1,187 @@
+---
+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'
+
+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" />
+  </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 { 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
+
+  // 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 provider = new OpenStreetMapProvider()
+  
+  map.addControl(
+    GeoSearchControl({
+      notFoundMessage: 'Adresse introuvable !',
+      provider,
+      showMarker: false,
+      style: 'bar',
+    }),
+  )
+
+  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
+  function searchBox(){
+    const nordWest = map.getBounds().getNorthWest()
+    const southEast = map.getBounds().getSouthEast()
+    const params: URLSearchParams = new URLSearchParams();
+
+    params.append("lon1", nordWest.lng.toString())
+    params.append("lat1", nordWest.lat.toString())
+    params.append("lon2", southEast.lng.toString())
+    params.append("lat2", southEast.lat.toString())
+    
+    fetch(`${BACK_URL}otm/box?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
+      return response.json();
+    }).then(function (data) {
+      poiMarkers.forEach(element => {
+        element.remove();
+      });
+      data.features.forEach(element => {
+        const prop = element.properties
+        const popup: Popup = new Popup()
+        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);
+      });
+    }).catch(function (err) {
+      console.warn('Something went wrong.', err);
+    });
+  }
+
+  // fonciton pour lancer la recherche de box sur l'api
+  function sender(){
+    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");
+    }
+  }
+  // envent pour lancer la recherche
+  const cooldown = 1000;
+  sender()
+  let timeoutHandle = window.setTimeout(sender, cooldown)
+  
+  window.clearTimeout(timeoutHandle);
+  
+  map.addEventListener("move",() =>{
+    window.clearTimeout(timeoutHandle);
+    timeoutHandle = window.setTimeout(sender, cooldown);
+  })
+
+  map.addEventListener("zoom", () => {
+    if(map.getZoom() <= 11){
+      poiMarkers.forEach(element => {
+        element.remove()
+      });
+    }
+  })
+
+  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>