Aventuras y desventuras de un geógrafo en “desarrollo”

La cartografía siempre ha sido un oficio de precisión, paciencia y criterio espacial. Durante años, el flujo de trabajo de cualquier geógrafo pasaba inevitablemente por entornos de escritorio como ArcGIS Pro o QGIS: cargar capas, ajustar simbología, exportar mapas. Herramientas sólidas, probadas, indispensables. Pero algo está cambiando.

Cada vez más, el análisis espacial ocurre en la nube, en navegadores, en entornos de código. En anteriores post habéis visto algunos test/ideas/aplicaciones que he desarrollado con Javascript Google Earth Engine, que procesa imágenes satelitales a escala planetaria sin mover un solo archivo. Deck.gl y Maplibre renderizan millones de puntos en 3D directamente en el navegador. React convierte un mapa en una aplicación interactiva con pocas líneas de código.

Figura 1 – GEE, segmentación de edificios con imagenes centimétricas en Tallin (Estonia)

Este post es el diario de ese viaje: el de un geógrafo que ha empezado a escribir código no para dejar de ser geógrafo, sino para serlo mejor. Desde la segmentación de ortofotos con algoritmos de machine learning en GEE, hasta la visualización de datos de población en 3D con Maptiler y Deck.gl, pasando por entornos propietarios y de código abierto.

Sin renunciar al criterio espacial. Solo añadiendo nuevas herramientas.

Figura 2 – Entorno de codesandbox.io, eligiendo React

El primer paso fue elegir dónde trabajar. CodeSandbox permite lanzar un entorno React completo directamente en el navegador, sin instalar nada. Basta elegir la plantilla, pegar el código y ver el resultado en tiempo real. Para un geógrafo acostumbrado a instalar plugins y configurar proyectos, la inmediatez es llamativa.

React actúa aquí como el pegamento: gestiona el estado de la aplicación (qué año se muestra, qué capa está activa) y renderiza la interfaz. No es imprescindible saber todo sobre React para empezar — con los hooks básicos useState y useEffect ya se puede construir bastante.

Figura 3 – Conectando con ficheros subidos a Maptiler

Con el entorno listo, el siguiente reto fue conectar datos reales. Los edificios del centro de Madrid — subidos previamente a Maptiler Cloud como GeoJSON — se visualizan en 3D extruidos usando Maplibre GL JS, cargado directamente desde CDN sin necesidad de instalar nada.

El atributo ESTAGL de cada polígono define la altura de la extrusión. El resultado: una vista aérea inclinada de Madrid donde cada edificio tiene volumen real. El basemap de Maptiler topo-v2 aporta el contexto geográfico debajo.

Figura 4 – Simbolización y generación de código para hacer un change detection de población en Madrid 2015-2020-2025

El siguiente experimento usó datos de WorldPop — una fuente de población global a resolución de 100×100 metros — para tres años: 2015, 2020 y 2025. Los datos, originalmente en formato raster, se convirtieron a polígonos y se subieron a Maptiler Cloud como tres datasets independientes.

El reto aquí era visual: las diferencias de población entre años son pequeñas y una escala lineal las hace invisibles. La solución fue aplicar una escala logarítmica (log1p) que comprime los valores extremos y amplifica las diferencias sutiles. El resultado es el mapa amarillo-verdoso de la imagen: la mancha urbana de Madrid claramente definida, con los núcleos de mayor densidad destacados.

Pero la visualización más interesante llegó al pasar al 3D. En lugar de mostrar los valores absolutos, se calculó el delta de cada píxel respecto a 2015 — cuánto ha cambiado la población en cada celda de 100m.

Ese delta se convierte en altura: más cambio, más altura. El color va de verde (poco cambio) a rojo (mucho cambio). El resultado es una especie de paisaje urbano donde las zonas de mayor transformación demográfica emergen literalmente del mapa, extruidas sobre el basemap de Maptiler.

La animación entre 2020 y 2025 — con transición suave usando requestAnimationFrame y una función easeInOut — permite ver cómo evoluciona ese paisaje en el tiempo.

Figura 5 – Probando con diferentes modos de simbolización, interfaces, secuencias temporales, etc

Una de las lecciones más claras de este ejercicio es que la visualización es iterativa. La primera versión del mapa 3D mostraba todos los cambios en verde — funcionaba, pero no comunicaba. ¿Verde intenso significa mucho cambio o poco?

La segunda versión introduce una paleta divergente verde→rojo donde el color codifica la magnitud del delta: verde para cambios pequeños, amarillo para cambios medios, rojo para las zonas de mayor transformación. La altura sigue siendo proporcional al delta, pero ahora el color refuerza ese mensaje.

El resultado — visible en esta imagen de abajo— es un mapa que se lee de forma intuitiva: las zonas rojas y altas son las que más han cambiado demográficamente respecto a 2015. Un lenguaje visual que cualquier persona puede entender sin necesidad de una leyenda detallada.

Figura 6 – El archivo “respira” pasando por los años 2015-2020-2025!!

Pues aquí tenemos el resultado final, un mapa de cambios VIVO (que cambia los slides a lo largo de la linea temporal elegida 2015-2020-2025). Pareciera que se infla 🙂

Espero que os guste, yo por mi parte os aclaro que mi intención no es otra que renovar mi portfolio, mostrar cositas nuevas que sé hacer desde hace poco y enseñar las potencialidades de estas metodologías y procedimientos de alguna manera nuevos para alguien como yo, acostumbrado a unos entornos con mucho fondo pero mucho menos dinámicos y mucho más encorsetados. si ves algo que te interesa, no tienes más que contármelo y hablamos. Por cierto, estoy buscando trabajo!! (por si coincide).

Saludos.
Alberto C.

https://cloud.maptiler.com/
https://codesandbox.io/templates

Leave a comment