El reto
Cada último sábado de 2024, @Marcos Rayo y yo recorrimos una línea de metro completa de Barcelona caminando — sobre el asfalto, a pie, parada a parada. Sin atajos, sin coger el metro. Solo las calles.
Al final del año habíamos cubierto las 12 líneas de la red: ~200 km de ciudad al ritmo del paso.
Amigos se fueron uniendo en distintas fechas — algunos para una línea, otros para varias. Cada sábado acabó siendo algo propio: distintos barrios, distinto tiempo y el objetivo compartido de llegar a la última estación antes de que cayera el sol.
Ingeniería de las rutas
El objetivo era documentar todo — rutas, estadísticas y las fotos que hicimos en cada parada.
La pipeline de datos fue la parte más interesante:
- Grabación: Registramos cada caminata con el móvil.
- Limpieza: Los archivos GPX exportados se limpiaron en GPX Studio para eliminar la deriva del GPS y corregir segmentos perdidos.
- Procesamiento: Convertidos a GeoJSON para el mapa, pero también se extrajo metadata a una estructura TypeScript personalizada para gestionar la UI.
{
id: "L1",
metadata: {
title: "L1",
subtitle: "Hospital de Bellvitge / Fondo",
color: "#df2937",
distance: 29.64,
timeWalking: "06:56:45",
stations: 30,
}
}Construyendo el mapa
El mapa está construido con MapLibre y React. Al ser un proyecto personal, quería evitar las APIs de Google Maps o Mapbox para mantenerlo completamente gratuito y centrado en la privacidad.
Usé @mapcomponents/react-maplibre, que era potente pero tenía casi cero documentación. Tuve que bucear en el código fuente para entender cómo gestionar la interpolación de capas — haciendo que las líneas se hicieran más gruesas al hacer zoom para mantenerlas visibles.
Seleccionar una línea filtra los datos GeoJSON globales y centra el viewport en esa ruta específica, mostrando las estadísticas en tiempo real extraídas de la metadata.
Fotos de las paradas
En cada estación hicimos una foto. Era la parte más difícil de automatizar: tenemos cientos de fotos nombradas exactamente como los nombres de las estaciones.
En lugar de una base de datos, opté por una convención de nomenclatura simple. La app obtiene el nombre de la parada clicada, identifica la línea y carga dinámicamente la imagen desde una carpeta pública estructurada: /images/${line}/${stop}.jpg.
Es un proyecto pequeño, pero captura el 2024 a la perfección: 12 sábados, 12 líneas, y muchos kilómetros andados.
Enlaces
