APIs Geográficas para Dummies

En esta sesión abordaremos el concepto de API (Application Programming Interface). Una API actúa como el puente que comunica una interfaz con un servidor, permitiendo realizar peticiones y obtener respuestas. Utilizaremos una API geográfica gratuita del USGS que provee información en tiempo real sobre eventos sísmicos a nivel mundial.

Configuración y Petición HTTP

Se requieren las librerías requests y folium. La respuesta exitosa tiene código 200:

import requests

url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson"
response = requests.get(url)
terremotos = response.json()

Extracción de Atributos

El GeoJSON del USGS organiza la información en features. Las coordenadas están en orden [Longitud, Latitud, Profundidad]:

for terremoto in terremotos['features']:
    coordenadas = terremoto['geometry']['coordinates']
    lugar = terremoto['properties']['place']
    magnitud = terremoto['properties']['mag']

Visualización con Folium

Folium requiere coordenadas en orden [Latitud, Longitud], inverso al GeoJSON:

import folium

m = folium.Map(location=[0, 0], zoom_start=2)

for terremoto in terremotos['features']:
    coords = terremoto['geometry']['coordinates']
    lugar = terremoto['properties']['place']
    mag = terremoto['properties']['mag']
    
    folium.Marker(
        location=[coords[1], coords[0]],  # [Lat, Lng]
        popup=f"{lugar} - Magnitud: {mag}"
    ).add_to(m)

m.save("terremotos.html")

En esta clase se abordará el procedimiento técnico para integrar datos meteorológicos en tiempo real utilizando Python y la API de OpenWeatherMap. A diferencia de otras fuentes abiertas, OpenWeatherMap requiere una API Key (clave alfanumérica) que se obtiene registrándose en la plataforma oficial.

Configuración del Mapa Base

Se utilizan las librerías requests y folium en un entorno Jupyter Notebook:

import requests
import folium

mapa = folium.Map(location=[4.57, -74.29], zoom_start=5)

Petición a la API

La URL se construye con f-strings incluyendo latitud, longitud y API Key. El servidor responde con código 200 (éxito) y datos JSON:

api_key = "TU_API_KEY"
latitud, longitud = 4.60, -74.08
url = f"https://api.openweathermap.org/data/2.5/weather?lat={latitud}&lon={longitud}&appid={api_key}"

response = requests.get(url)
data_clima = response.json()

Extracción y Conversión de Datos

La descripción está en weather[0]['description'] y la temperatura en main['temp'] (Kelvin). Para convertir a Celsius se resta 273.15:

descripcion = data_clima['weather'][0]['description']
temp_celsius = data_clima['main']['temp'] - 273.15
texto_popup = f"Clima: {descripcion} | Temp: {temp_celsius:.2f} °C"

Automatización con Múltiples Ciudades

Para mapear varias ubicaciones sin código redundante, se usa un diccionario y un ciclo for:

ciudades = {
    "Bogotá": [4.60, -74.08],
    "Medellín": [6.24, -75.58],
    "Cali": [3.45, -76.53]
}

for ciudad, coords in ciudades.items():
    lat, lon = coords
    url = f"https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={api_key}"
    data = requests.get(url).json()
    temp = data['main']['temp'] - 273.15
    desc = data['weather'][0]['description']
    
    folium.Marker(
        location=[lat, lon],
        popup=f"{ciudad}: {desc}, {temp:.2f}°C",
        icon=folium.Icon(color="green", icon="info-sign")
    ).add_to(mapa)

En esta lección profundizaremos en la geocodificación directa e inversa utilizando JavaScript y la API de HERE Maps. A diferencia de Python, demostraremos la independencia del lenguaje al interactuar con APIs geográficas. Primero, debemos registrarnos en el portal de HERE y generar una API Key.

Geocodificación Directa (Dirección → Coordenadas)

Usamos fetch para peticiones HTTP asíncronas. El endpoint es geocode y usamos Promesas con .then():

const apiKey = "TU_API_KEY";
const direccion = "Plaza de Bolívar Bogotá Colombia";
const url = `https://geocode.search.hereapi.com/v1/geocode?q=${direccion}&apiKey=${apiKey}`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    const latitud = data.items[0].position.lat;
    const longitud = data.items[0].position.lng;
    console.log(latitud, longitud);
  });

Visualización con Mapbox

Las coordenadas obtenidas se pueden asignar dinámicamente a un marcador de Mapbox GL JS, centrando la vista o añadiendo un pin en el lugar correspondiente para validar visualmente la geocodificación.

Geocodificación Inversa (Coordenadas → Dirección)

El proceso opuesto usa el endpoint revgeocode con el parámetro at (coordenadas separadas por coma):

const lat = 6.25184;
const lng = -75.56359;
const urlReverse = `https://revgeocode.search.hereapi.com/v1/revgeocode?at=${lat},${lng}&apiKey=${apiKey}`;

fetch(urlReverse)
  .then(response => response.json())
  .then(data => {
    // Obtener dirección completa
    console.log(data.items[0].address.label);
  });

La respuesta incluye atributos como calle, número, barrio y ciudad, completando el ciclo de transformación de datos espaciales con JavaScript puro.

Esta guía detalla la generación de rutas óptimas utilizando JavaScript, Leaflet y la API de LocationIQ. El ruteo calcula el camino más eficiente entre dos puntos, resolviendo problemas logísticos. Primero, debemos registrarnos en LocationIQ para obtener una API Key.

Configuración de la Petición

Se usa Axios (via CDN) para peticiones HTTP. La URL requiere: perfil de navegación (driving), coordenadas en orden [longitud, latitud] separadas por coma, y el parámetro geometries=geojson:

const apiKey = "TU_API_KEY";
const origen = "-74.08,4.60";  // lng,lat
const destino = "-75.58,6.24";
const url = `https://us1.locationiq.com/v1/directions/driving/${origen};${destino}?key=${apiKey}&geometries=geojson`;

axios.get(url).then(response => {
    const ruta = response.data.routes[0];
    const duracion = ruta.duration; // segundos
    const distancia = ruta.distance; // metros
    const coordenadas = ruta.geometry.coordinates;
});

Inversión de Coordenadas

La API devuelve [lng, lat] pero Leaflet espera [lat, lng]. Usamos .map() con arrow function para invertir:

const puntosLeaflet = coordenadas.map(coord => [coord[1], coord[0]]);

Visualización con Leaflet

Se usan marcadores para origen/destino y L.polyline para la ruta:

L.marker([4.60, -74.08]).addTo(mapa);
L.marker([6.24, -75.58]).addTo(mapa);

L.polyline(puntosLeaflet, {
    color: "blue",
    weight: 4
}).addTo(mapa);

En esta clase se construirá un visor de tráfico aéreo en tiempo real integrando OpenLayers con la API de OpenSky Network. El proyecto se inicializa con npm create ol-app vuelos-tiempo-real y se ejecuta con npm start (puerto 5173).

Obtención de Datos

La API retorna un arreglo states donde los índices 5 y 6 son longitud y latitud. Se usa fetch() con Promesas:

fetch('https://opensky-network.org/api/states/all')
  .then(res => res.json())
  .then(data => {
    const vuelos = data.states;
    // Índice 5 = lng, 6 = lat
  });

Creación de Features

Se transforman las coordenadas con fromLonLat y se crean objetos Feature con geometría Point:

import { fromLonLat } from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

const features = vuelos.map(v => {
  return new Feature({
    geometry: new Point(fromLonLat([v[5], v[6]])),
    icao: v[0],
    pais: v[2]
  });
});

Renderización y Actualización

Se crea VectorSource y VectorLayer, añadiendo la capa con map.addLayer(). Para tiempo real, se usa setInterval cada 10 segundos, eliminando la capa anterior con map.removeLayer() antes de agregar la nueva.

Interactividad

Para obtener info de un vuelo al hacer clic:

map.on('click', (e) => {
  map.forEachFeatureAtPixel(e.pixel, (feature) => {
    alert('Vuelo: ' + feature.get('icao'));
  });
});