cleanup maps discover
This commit is contained in:
parent
3c671d68e4
commit
9fb35ddf38
@ -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>
|
||||
|
||||
<script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
|
||||
<!-- TODO: faire en sort que le style soit propre -->
|
||||
|
||||
<!-- 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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user