Usando la API de datos abiertos de AEMET OpenData

En este post explicaba directamente cómo añadir las estaciones de AEMET con ciertos datos, usando mi plugin leafMET para Leaflet (disponible en github):

https://github.com/TheRoam/leafMET

Vamos a detenernos ahora en el detalle de cómo funciona la API y cómo acceder a todos los datos disponibles.

Acceso a la API

Para usar la API necesitamos una clave de acceso, o API key. Accedemos a la página de AEMET OpenData y hacemos click en el botón "Solicitar" debajo de Obtención de API key.

A continuación se nos pedirá una dirección de correo electrónico para enviarnos dicha clave.

Nos enviarán un primer correo de confirmación, y a continuación recibiremos un segundo correo con la clave de acceso. La copiamos y seguimos.

Documentación y ejemplos

Volvemos a la página de AEMET OpenData y entramos al Acceso Desarrolladores.

Nos interesa la documentación dinámica, que muestra todas las peticiones de datos disponibles y que podemos probar directamente desde allí.

Podemos pulsar sobre cada tema y se mostrará la sintaxis a usar para cada petición de datos.

Vamos a desplegar observación-convencional y, dentro, /api/observacion/convencional/todas.

Veremos un icono de aviso rojo a la derecha, donde podemos introducir la API key y probar la petición.

Ahora pulsamos el botón Try it out! y nos dará:

un ejemplo de petición curl
la URL de la petición
el cuerpo, código y encabezados de la respuesta

Si abrimos la dirección URL que nos ofrece el campo "datos" veremos el listado completo de datos de todas las estaciones. A mi me sale todo este chorizo de JSON:

Cargando...

Los campos más interesantes son los siguientes:

idema: ID o código de la estación.
lat y lon: coordenadas de latitud y longitud.
alt: altitud de la estación.
fint: fecha del intervalo (horario) de los datos.
prec: precipitación registrada en ese periodo.
vv: velocidad del viento en la estación.
ta: temperatura ambiente en la estación

Petición de datos para web mediante javascript

Estructura HTML

Voy a desarrollar un ejemplo incrustado para acceder a los datos y hacer uso de ellos. Simplemente creo un documento .html con un botón de solicitud y una línea de texto y una función de solicitud:

Pulsa el botón para solicitar los datos

<html>
<body>
<button id="solicitud" onclick="solicitar()">Solicitar</button>
<p id="texto">Pulsa el botón para solicitar los datos</p>
</body>
<script>
function solicitar(){
document.getElementById("texto").innerHTML="Todavía no he programado eso..";
}
</script>
</html>

TIP! Copia y pega este código en un documento de texto con extensión .html para abrirlo en tu navegador.

Solicitud HTTP

Realizamos la solicitud de datos con javascript usando el objeto XMLHttpRequest. En w3schools nos ponen un ejemplo muy simple:

https://www.w3schools.com/js/js_ajax_http.asp

Como vimos usando la documentación dinámica, después de hacer la solicitud, recibimos un enlace para acceder a los datos, lo cual es otra solicitud, así que debemos anidar dos solicitudes así:

<script>
function solicitar(){
// Definir texto de carga
document.getElementById("texto").innerHTML="Cargando datos...";
// Definir la API Key
var AK=tUApiKey;
// Definir URLs de solicitud
var URL1="https://opendata.aemet.es/opendata/api/observacion/convencional/todas";
var URL2="";

// Crear objetos XMLHttpRequest
const xhttp1 = new XMLHttpRequest();
const xhttp2 = new XMLHttpRequest();

// Definir función de respuesta a la primera solicitud:
// Queremos acceder a la URL del campo "datos"
xhttp1.onload = function() {
  // 1º Pasamos la respuesta a JSON:
  URL2=JSON.parse(this.responseText);
  // 2º Obtenemos el campo "datos":
  URL2=URL2.datos;  
  // 3º Hacemos la nueva petición:
  xhttp2.open("GET", URL2);
  xhttp2.send();
}

// Definir función de respuesta a la segunda solicitud:
// Modificaremos la línea de texto de la página con información descargada
xhttp2.onload = function() {
  // 1º Pasamos la respuesta a JSON (se trabaja mejor así):
  var datos=JSON.parse(this.responseText);

  // 2º Obtenemos la longitud del objeto JSON
  // Esto equivale a registros horarios individuales por estaciones
  var registros=datos.length;

  // 3º Obtenemos la fecha del primer registro.
  // Le daremos un formato más legible ya que está en ISO
  var fechaini=datos[0].fint;
  fechaini=new Date(fechaini+"Z");
  fechaini=fechaini.toLocaleDateString()+" "+fechaini.toLocaleTimeString();

  // 4º Obtenemos la fecha del último registro
  // Le damos el mismo formato
  var fechafin=datos[(datos.length-1)].fint;
  fechafin=new Date(fechaini+"Z");
  fechafin=fechafin.toLocaleDateString()+" "+fechafin.toLocaleTimeString();

  // 5º Unimos la información en la línea de texto
  document.getElementById("texto").innerHTML="Se han descargado <b>"+registros+"</b> registros desde el <b>"+fechaini+"</b> hasta el <b>"+fechafin+"</b>. <a href='"+URL2+"' target='_blank'>Ver todos los datos.</a>";
}

// Enviar la solicitud
xhttp1.open("GET", URL1+"/?api_key="+AK);
xhttp1.send();

}
</script>

Veamos el resultado a continuación: