Leaflet.js is a powerful web tool based on GIS (Geographic Information Systems). The following shows how a user, after clicking on a certain location, will obtain the elevation of the terrain, all thanks to the api free of https://open-elevation.com/
Click on any point on the map to get the elevation
Example code (Javascript)
// Initialize the map
var map = L.map('map').setView([0, 0], 2);
// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Función para manejar clics en el mapa
function onMapClick(e) {
const form_data = new FormData();
form_data.append('lat', e.latlng.lat);
form_data.append('lng', e.latlng.lng);
fetch("ajax.php", {
method: "POST",
body: form_data
}).then(function(response) {
return response.json();
}).then(function(data) {
if (!data.success) return;
const json = JSON.parse(data.json);
const elevation = json.results[0].elevation;
L.popup()
.setLatLng([lat, lng])
.setContent('Elevation: ' + elevation + ' meters')
.openOn(map);
});
// Obtener las coordenadas clickeadas
var lat = e.latlng.lat;
var lng = e.latlng.lng;
};
// Añadir el listener de clics en el mapa
map.on('click', onMapClick);
Handling the request with PHP (ajax.php)
$response = new stdClass();
$response->success = false;
$response->json = null;
$response->lat = filter_input(INPUT_POST, 'lat');
$response->lng = filter_input(INPUT_POST, 'lng');
$response->url = "https://api.open-elevation.com/api/v1/lookup?locations=". $response->lat . "," . $response->lng;
$json = file_get_contents($response->url);
if ($json) {
$response->json = $json;
$response->success = true;
}
echo json_encode($response);
Comentar: