feat: use drink api in front and more #16

Merged
Clement merged 47 commits from feat/use-drink-api-in-front into master 2024-06-07 17:09:58 +00:00
Showing only changes of commit a7dea54dc7 - Show all commits

View File

@ -1,31 +1,90 @@
--- ---
import Layout from 'layouts/PageLayout.astro'; import Layout from 'layouts/PageLayout.astro'
import 'leaflet/dist/leaflet.css' import 'leaflet/dist/leaflet.css'
import FormContainer from 'components/ui/Form.astro'
import Input from 'components/Input.astro'
import Button from 'components/ui/Button.astro'
const metadata = { const metadata = {
title: 'Maps', title: 'Maps',
ignoreTitleTemplate: true, ignoreTitleTemplate: true,
}; }
--- ---
<Layout metadata={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>
<div class="w-full h-96" id="map" /> <div class="w-full h-96" id="map" />
</Layout> </Layout>
<script> <script>
import L from 'leaflet' import L, { geoJSON, Icon, type LatLngTuple } from 'leaflet'
import markerShadow from "leaflet/dist/images/marker-shadow.png"
import markerIcon from "leaflet/dist/images/marker-icon.png"
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/"
const BACK_URL = "http://localhost:3001/"
let mapsCenter : L.LatLngTuple
const map = L.map('map', { const map = L.map('map', {
center: [50,0], center: [51.5, -0.09],
zoom: 13, zoom: 13,
preferCanvas: true preferCanvas: true
}) })
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); }).addTo(map)
var marker = L.marker([51.5, -0.09]).addTo(map);
let marker = L.marker([51.5, -0.09],icon).addTo(map)
marker.bindPopup("test")
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 => {
console.log(element)
const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon).bindPopup(element.properties)
poiMarker.addTo(map)
});
}).catch(function (err) {
console.warn('Something went wrong.', err);
});
}
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> </script>