Get elevation with leaflet.js
Leaflet.js és una potent eina web basada en GIS (Sistemes d'informació geogràfica). A continuació es mostra com un usuari després de fer clic a una determinada localització obtindrà l'elevació del terreny, tot això, gràcies a la api gratuïta de https://open-elevation.com/

Feu clic a algun punt del mapa per obtenir l'elevació
Codi d'exemple (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);
            
            
Maneig de la petició amb 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:
captcha

Comentarios: Sin comentarios

L'element àudio en HTML és una eina poderosa per integrar contingut de so a pàgines web....

Seguir leyendo...

La indentació adequada fa que el codi HTML sigui més fàcil de llegir i entendre. Quan les etiquetes HTML estan ben organitzades i imbricades correctament, és més senzill per als desenvolupadors identificar l'estructura del document, veure quins elements c...

Seguir leyendo...

L'element vídeo és una de les característiques més destacades de HTML5, ja que permet als desenvolupadors integrar vídeos directament a les pàgines web....

Seguir leyendo...

A continuació podràs trobar les ordres necessàries per dur a terme una instal·lació correcta de PyQt6...

Seguir leyendo...

A continuació es mostra un exemple de com obtenir dades meteorològiques amb Leaflet.js i l'api gratuïta d'Open-Meteo....

Seguir leyendo...

Per a tasques de traducció automàtica, els models basats en larquitectura Transformer han demostrat ser molt eficaços....

Seguir leyendo...

Un codi ben formatat proporciona una guia visual clara sobre com s'apliquen els estils i com s'agrupen les regles. Un codi CSS ben indentat és més fàcil de mantenir. Quan el codi està organitzat, és més senzill fer modificacions i actualitzacions sense i...

Seguir leyendo...

(GIS) a la web han revolucionat la manera com interactuem amb les dades espacials, a continuació es mostren les llibreria JS més importants....

Seguir leyendo...

La indentació del codi JavaScript no només millora l'estètica del codi, sinó que també ofereix beneficis pràctics significatius que faciliten la lectura, el manteniment, la col·laboració i la qualitat general del programari. És una pràctica essencial...

Seguir leyendo...

A l'article següent es mostra un exemple bàsic de com activar la càmera i l'àudio amb Javascript....

Seguir leyendo...

Explora els avantatges de Kotlin davant de Java en el desenvolupament d'aplicacions Android....

Seguir leyendo...

Descobreix els passos essencials per pujar les teves aplicacions a la Play Store i ser un desenvolupador exitós....

Seguir leyendo...