Add reverse geocoding lookup and display
This commit is contained in:
parent
b4e91609d3
commit
9680fb6a68
1 changed files with 14 additions and 0 deletions
|
|
@ -25,6 +25,7 @@ function onMapMarkerDragEnd(marker) {
|
|||
return function() {
|
||||
const lngLat = marker.getLngLat();
|
||||
displaySelectedCoordinates(lngLat);
|
||||
reverseGeocode(lngLat);
|
||||
}
|
||||
}
|
||||
function displaySelectedCoordinates(lngLat) {
|
||||
|
|
@ -33,6 +34,19 @@ function displaySelectedCoordinates(lngLat) {
|
|||
longitude.textContent = lngLat.lng;
|
||||
latitude.textContent = lngLat.lat;
|
||||
}
|
||||
async function reverseGeocode(lngLat) {
|
||||
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
|
||||
const url = `https://api.mapbox.com/search/geocode/v6/reverse?longitude=${lngLat.lng}&latitude=${lngLat.lat}&access_token=${MAPBOX_ACCESS_TOKEN}`
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
console.log("reverse geocoded to", data);
|
||||
if (data.features.length == 0) {
|
||||
console.warn("No results for reverse geocode");
|
||||
return;
|
||||
}
|
||||
const match = data.features[0];
|
||||
displaySelectedLocation(match);
|
||||
}
|
||||
function onLoadMap() {
|
||||
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
|
||||
console.log("Setting up the map...");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue