diff --git a/wheretogo/static/maps/js/map.js b/wheretogo/static/maps/js/map.js index 811db13..339f9a2 100644 --- a/wheretogo/static/maps/js/map.js +++ b/wheretogo/static/maps/js/map.js @@ -7,18 +7,40 @@ map. .on("locationfound", (e) => map.setView(e.latlng, 8)) .on("locationerror", () => map.setView([0, 0], 5)); -async function load_facilities() { +async function loadFacilities() { const facilities_url = `/api/facilities/?in_bbox=${map.getBounds().toBBoxString()}` const response = await fetch(facilities_url) const geojson = await response.json() return geojson } -async function render_facilities() { - const facilities = await load_facilities(); +async function renderFacilities() { + const facilities = await loadFacilities(); L.geoJSON(facilities) .bindPopup((layer) => layer.feature.properties.name) .addTo(map); } -map.on("moveend", render_facilities); +map.on("moveend", renderFacilities); + + +map.on("click", function (e) { + const { lat, lng } = e.latlng; + + const api = `https://nominatim.openstreetmap.org/reverse.php?lat=${lat}&lon=${lng}&zoom=18&format=jsonv2`; + + fetchAddressData(api).then((data) => { + const { country, state, city, house_number, road } = data.address; + console.log(country + ', ' + state + ', ' + city + ', ' + road + ', ' + house_number); + }); +}); + +async function fetchAddressData(url) { + try { + const response = await fetch(url); + const data = await response.json(); + return data; + } catch (err) { + console.error(err); + } +}