Clicking the map resolves an address
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Baato - Reverse Search API</title>
<script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
<div
style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
© <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
target="_blank">OpenStreetMap contributors</a></div>
<div
style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
<a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
width="80px"></img></a>
</div>
</div>
</div>
<div id="response"
style="position: absolute; top: 10px; right: 10px; z-index: 1; width: 300px; border: 2px solid green; padding: 50px; margin: 10px; background: rgba(255, 255, 255, 0.75);">
Click anywhere on the map.
</div>
<script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
<script>
var markers = [];
var map = new maplibregl.Map({
container: "map",
style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
center: [85.324, 27.7172], // starting position [lng, lat]
zoom: 13, // starting zoom
});
map.on("click", (e) => {
new Baato.Reverse()
.setBaseUrl(`https://api.baato.io/api`) // Baato base URL
.setKey("YOUR_BAATO_ACCESS_TOKEN") // Baato access token
.setCoordinates([e.lngLat.lat, e.lngLat.lng]) // [lng, lat] for reverse geocoding
.setRadius(0.05) // radius in Km (looks for nearest 50m, or else points to enarest neighbourhood)
.doRequest()
.then((res) => {
clearMarkers();
var marker = new maplibregl.Marker()
.setLngLat([res.data[0].centroid.lon, res.data[0].centroid.lat]) // adding marker for the response [lon, lat]
.addTo(map);
markers.push(marker);
function clearMarkers() {
markers.forEach((marker) => marker.remove());
markers = [];
}
document.getElementById("response").innerHTML = "<b>" + res.data[0].name + "</b>" + "<br/><br/>" + "<b>" + "Address: " + "</b>" + res.data[0].address;
// zoom map to the point where clicked
map.flyTo({
center: [res.data[0].centroid.lon, res.data[0].centroid.lat],
zoom: 14,
essential: true,
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Baato - Reverse Search API</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
<div
style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
© <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
target="_blank">OpenStreetMap contributors</a></div>
<div
style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
<a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
width="80px"></img></a>
</div>
</div>
</div>
<div id="response"
style="position: absolute; top: 10px; right: 10px; z-index: 1; width: 300px; border: 2px solid green; padding: 50px; margin: 10px; background: rgba(255, 255, 255, 0.75);">
Click anywhere on the map.
</div>
<script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
<script>
var markers = [];
var map = new mapboxgl.Map({
container: "map",
style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
center: [85.324, 27.7172], // starting position [lng, lat]
zoom: 13, // starting zoom
});
map.on("click", (e) => {
new Baato.Reverse()
.setBaseUrl(`https://api.baato.io/api`) // Baato base URL
.setKey("YOUR_BAATO_ACCESS_TOKEN") // Baato access token
.setCoordinates([e.lngLat.lat, e.lngLat.lng]) // [lng, lat] for reverse geocoding
.setRadius(0.05) // radius in Km (looks for nearest 50m, or else points to enarest neighbourhood)
.doRequest()
.then((res) => {
clearMarkers();
var marker = new mapboxgl.Marker()
.setLngLat([res.data[0].centroid.lon, res.data[0].centroid.lat]) // adding marker for the response [lon, lat]
.addTo(map);
markers.push(marker);
function clearMarkers() {
markers.forEach((marker) => marker.remove());
markers = [];
}
document.getElementById("response").innerHTML = "<b>" + res.data[0].name + "</b>" + "<br/><br/>" + "<b>" + "Address: " + "</b>" + res.data[0].address;
// zoom map to the point where clicked
map.flyTo({
center: [res.data[0].centroid.lon, res.data[0].centroid.lat],
zoom: 14,
essential: true,
});
});
});
</script>
</body>
</html>