Leaflet.js è un potente strumento web basato su GIS (Sistemi Informativi Geografici). Di seguito viene mostrato come un utente, dopo aver cliccato su una determinata posizione, otterrà l'elevazione del terreno, il tutto grazie al api libero da https://open-elevation.com/
Clicca su qualsiasi punto della mappa per ottenere l'elevazione
Codice di esempio (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);
Gestire la richiesta con 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: