cleanup maps discover
This commit is contained in:
parent
3c671d68e4
commit
9fb35ddf38
@ -2,7 +2,6 @@
|
|||||||
import Layout from 'layouts/PageLayout.astro'
|
import Layout from 'layouts/PageLayout.astro'
|
||||||
import 'leaflet/dist/leaflet.css'
|
import 'leaflet/dist/leaflet.css'
|
||||||
import 'leaflet-geosearch/dist/geosearch.css'
|
import 'leaflet-geosearch/dist/geosearch.css'
|
||||||
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'
|
|
||||||
import FormContainer from 'components/ui/Form.astro'
|
import FormContainer from 'components/ui/Form.astro'
|
||||||
import Input from 'components/Input.astro'
|
import Input from 'components/Input.astro'
|
||||||
import Button from 'components/ui/Button.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="h-[calc(100vh-16rem)] flex flex-col">
|
||||||
<div class="w-full h-96 grow" id="map" />
|
<div class="w-full h-96 grow" id="map" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- TODO: faire en sort que le style soit propre -->
|
||||||
<script src='leaflet-routing-machine/dist/leaflet-routing-machine.js'></script>
|
|
||||||
|
|
||||||
<!-- for remouve footer -->
|
<!-- for remouve footer -->
|
||||||
<!-- <div slot="footer"></div> -->
|
<!-- <div slot="footer"></div> -->
|
||||||
@ -32,12 +30,9 @@ const metadata = {
|
|||||||
import markerIcon from "leaflet/dist/images/marker-icon.png"
|
import markerIcon from "leaflet/dist/images/marker-icon.png"
|
||||||
import { OpenStreetMapProvider } from 'leaflet-geosearch'
|
import { OpenStreetMapProvider } from 'leaflet-geosearch'
|
||||||
import { GeoSearchControl } 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 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/"
|
const BACK_URL = "http://localhost:3001/"
|
||||||
|
|
||||||
let mapsCenter : L.LatLngTuple
|
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>
|
let poiMarkers = new Array<L.Marker>
|
||||||
|
|
||||||
// run api search
|
// 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>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user