|
|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
---
|
|
|
|
|
import Layout from 'layouts/PageLayout.astro'
|
|
|
|
|
import 'leaflet/dist/leaflet.css'
|
|
|
|
|
import 'leaflet-geosearch/dist/geosearch.css'
|
|
|
|
|
import FormContainer from 'components/ui/Form.astro'
|
|
|
|
|
import Input from 'components/Input.astro'
|
|
|
|
|
import Button from 'components/ui/Button.astro'
|
|
|
|
|
@ -13,23 +14,24 @@ const metadata = {
|
|
|
|
|
|
|
|
|
|
<Layout metadata={metadata}>
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-row justify-between align-center max-w-xl mx-auto rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow p-4 sm:p-6 lg:p-8 w-full">
|
|
|
|
|
<Input type='text' name='search' placeholder='Paris' divClass='grow mr-4'/>
|
|
|
|
|
<Button variant="primary" id='search-btn' class='grow-4'>rechercher</Button>
|
|
|
|
|
<div class="h-[calc(100vh-16rem)] flex flex-col">
|
|
|
|
|
<div class="w-full h-96 grow" id="map" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-full h-96" id="map" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- for remouve footer -->
|
|
|
|
|
<!-- <div slot="footer"></div> -->
|
|
|
|
|
<!-- penser a rm 11 au rem au dessus pour la taille -->
|
|
|
|
|
</Layout>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import L, { geoJSON, Icon, type LatLngTuple } from 'leaflet'
|
|
|
|
|
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';
|
|
|
|
|
|
|
|
|
|
const btn = document.querySelector('#search-btn')
|
|
|
|
|
const input = document.querySelector<HTMLInputElement>('#search')
|
|
|
|
|
const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}
|
|
|
|
|
|
|
|
|
|
// const BACK_URL = "https://drink-tweb.cb85.fr/"
|
|
|
|
|
@ -42,14 +44,79 @@ const metadata = {
|
|
|
|
|
zoom: 13,
|
|
|
|
|
preferCanvas: true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
|
|
|
}).addTo(map)
|
|
|
|
|
|
|
|
|
|
let marker = L.marker([51.5, -0.09],icon).addTo(map)
|
|
|
|
|
marker.bindPopup("test")
|
|
|
|
|
const provider = new OpenStreetMapProvider()
|
|
|
|
|
|
|
|
|
|
map.addControl(
|
|
|
|
|
GeoSearchControl({
|
|
|
|
|
notFoundMessage: 'Adresse introuvable !',
|
|
|
|
|
provider,
|
|
|
|
|
showMarker: false,
|
|
|
|
|
style: 'bar',
|
|
|
|
|
}),
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
});
|
|
|
|
|
console.log(data);
|
|
|
|
|
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)
|
|
|
|
|
poiMarkers.push(poiMarker);
|
|
|
|
|
});
|
|
|
|
|
}).catch(function (err) {
|
|
|
|
|
console.warn('Something went wrong.', err);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
|
const cooldown = 1000;
|
|
|
|
|
sender()
|
|
|
|
|
let timeoutHandle = window.setTimeout(sender, cooldown)
|
|
|
|
|
|
|
|
|
|
window.clearTimeout(timeoutHandle);
|
|
|
|
|
|
|
|
|
|
map.addEventListener("move",() =>{
|
|
|
|
|
console.log("move")
|
|
|
|
|
window.clearTimeout(timeoutHandle);
|
|
|
|
|
timeoutHandle = window.setTimeout(sender, cooldown);
|
|
|
|
|
})//searchBox)
|
|
|
|
|
|
|
|
|
|
function search() {
|
|
|
|
|
const params: URLSearchParams = new URLSearchParams();
|
|
|
|
|
@ -64,8 +131,9 @@ const metadata = {
|
|
|
|
|
marker.setLatLng(mapsCenter)
|
|
|
|
|
map.setView(mapsCenter)
|
|
|
|
|
data.features.forEach(element => {
|
|
|
|
|
console.log(element)
|
|
|
|
|
const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon).bindPopup(element.properties)
|
|
|
|
|
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) {
|
|
|
|
|
@ -73,18 +141,4 @@ const metadata = {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
btn?.addEventListener('click',search)
|
|
|
|
|
input?.addEventListener('keypress',(e) =>{
|
|
|
|
|
if(e.key == 'Enter'){
|
|
|
|
|
search()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// marker.setLatLng(mapsCenter)
|
|
|
|
|
// map.setView(mapsCenter)
|
|
|
|
|
// const mark2 = map.getBounds().getNorthWest()
|
|
|
|
|
// const mark3 = map.getBounds().getSouthEast()
|
|
|
|
|
// let marker2 = L.marker(mark2,icon).addTo(map)
|
|
|
|
|
// let marker3 = L.marker(mark3,icon).addTo(map)
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|