Cuando pensamos en mapas web solemos pensar en poner un marcador estático con la dirección de un lugar o de una empresa en su página web.

¿Pero qué pasa cuando necesitas construir un navegador GPS real para un vehículo en movimiento?

Durante mis prácticas en empresa de segundo año de DAW he estado trabajando en una Prueba de Concepto (PoC) para integrar un mapa en el Sistema de Información al Conductor de los buses de Barcelona.

Y aquí es donde me he dado cuenta de que mover un puntito en un mapa tiene mucha más tela de la que parece...

Para resolverlo hemos usado el ecosistema de APIs de TomTom, y lo que me he encontrado me dejó sin palabras.

El problema de las líneas rectas

Si le pides a la API oficial del transporte público (en mi caso la del Transporte Metropolitano de Barcelona) dónde están dos paradas de bus y las unes en tu mapa, te sale una línea recta perfecta. ¿El problema? Que en la vida real esa línea recta atraviesa edificios, parques y rotondas por el medio.

Para arreglar esto entra en juego la Routing API de TomTom. Tú le pasas los puntos GPS y ella te dibuja el camino exacto por la carretera. Pero lo mejor no es eso. Lo mejor es que le puedes pasar el parámetro travelMode=bus.

Esto es clave, porque el algoritmo ya sabe que tu vehículo es bastante más grande que un coche y te calcula la ruta esquivando callejuelas estrechas, giros imposibles o puentes bajos.

Y de paso, te muestra las instrucciones de giro para que le puedas poner al conductor el típico cartelito azul de "Gira a la derecha" o "Toma la segunda salida" en una rotonda.

Las coordenadas y el "Snapping"

Luego encontré otra cosa curiosa. Las paradas de autobús (las marquesinas físicas) están en la acera. Pero la ruta del GPS, obviamente, va por el centro de la carretera.

Si tú dejas que tu bus virtual avance por la carretera, matemáticamente nunca llega a pisar la coordenada exacta de la parada.

Para arreglar este caos tuve que montar un algoritmo de Map Matching (o Snapping). Suena muy técnico, pero básicamente es usar una fórmula matemática (la de Haversine) para medir la distancia entre la acera y la calle, y "pegar" virtualmente la parada al centro del carril.

Así nuestra aplicación sabe exactamente en qué momento el bus ha llegado a su destino.

El "Radar" de tráfico en tiempo real

Lo que más me ha gustado ha sido montar el "radar" del entorno que rodea al bus.

Los conductores no puede ir tocando la pantalla del GPS para ver si hay un atasco tres calles más allá como es lógico. Todo tiene que ser automático en la medida de lo posible para no distraer al conductor.

Lo que hicimos fue programar un bucle invisible en segundo plano. Cada 30 segundos, el código mira dónde está el bus y le hace dos consultas rápidas a TomTom:

Límites de velocidad: La API nos chiva cuál es el límite legal de esa calle y a qué velocidad van los coches en ese momento. Así, si nuestro bus se pasa del límite, hacemos que la señal parpadee en rojo en la pantalla de la cabina.
Incidentes cercanos: Por otro lado, creamos una especie de "cuadrado imaginario" de un kilómetro alrededor del bus (un Bounding Box). TomTom escanea ese cuadrado en tiempo real y nos avisa al momento si hay una calle cortada, un accidente o unas obras por donde vamos a pasar.

Rendimiento puro con WebGL

El mapa entero es un lienzo en 3D que tira directamente de la tarjeta gráfica (usando WebGL). Esto es lo que te permite poner la vista desde arriba o inclinar la cámara a ras de suelo como en los GPS modernos, girando suavemente a 60 FPS sin que el navegador explote (una auténtica locura en pocas palabras).

Al final, en clase muchas veces nos quedamos en hacer el típico CRUD (Crear, Leer, Actualizar, Borrar) en una base de datos. Que está genial para aprender la base, claro. Pero salir de ahí, pelearte con temas de geolocalización y mapas de verdad, aplicar mates para mover cosas en tiempo real y leer datos de tráfico de una ciudad... te abre un mundo de posibilidades loquísimo.

Y oye, empezar es súper fácil. TomTom tiene una capa gratuita para hacer pruebas y las librerías para páginas web están bastante bien documentadas.

Si os da curiosidad esto del IoT o la movilidad urbana, echadle un ojo porque merece la pena.

Os dejo algunos enlaces directos a la documentación de Tomtom:

TomTom: Construir un GPS inteligente como un pro