Blog · Mapas y tecnología

Cómo funcionan los mapas online: teselas, capas y datos en tiempo real

Abrir el mapa →

Abres un mapa en el móvil, arrastras el dedo, haces zoom y el mundo entero responde al instante. Parece magia, pero entender cómo funcionan los mapas online es más sencillo de lo que parece: detrás hay una idea brillante de ingeniería (trocear el planeta en cuadraditos), una proyección con truco, un sistema de capas y un flujo constante de datos hacia tu pantalla. En este artículo desmontamos el mapa web pieza a pieza, en llano y sin jerga innecesaria. Cuando termines, mirarás cualquier mapa interactivo (el de tu app de rutas, el del tiempo o un visor como Argos Atlas) sabiendo exactamente qué está pasando bajo el capó.

La idea genial: trocear el mundo en teselas

El problema original era brutal: ¿cómo sirves un mapa de todo el planeta, con detalle de calle, a millones de personas a la vez? Imposible enviar un mapa gigante a cada usuario. La solución que adoptó la industria fue trocear el mundo en teselas: cuadrados de mapa precalculados, organizados por niveles de zoom.

Funciona como una pirámide. En el nivel de zoom 0, el mundo entero cabe en una sola tesela. En el nivel 1, ese cuadrado se divide en cuatro. En el nivel 2, en dieciséis. Y así sucesivamente: cada nivel cuadruplica el número de teselas y duplica el detalle. En los niveles altos de zoom, donde se ven portales y pasos de cebra, el planeta está dividido en miles de millones de cuadraditos, cada uno con su dirección única: nivel de zoom, columna y fila.

Cuando mueves el mapa, tu navegador hace una cuenta sencilla: «estoy mirando esta zona a este zoom, luego necesito estas teselas concretas». Las pide al servidor, las recibe y las coloca como piezas de un puzle. Por eso los mapas cargan «por cuadraditos»: estás viendo literalmente las teselas llegar una a una. Y por eso el mapa es tan rápido: el servidor no calcula nada al vuelo, solo entrega piezas ya preparadas, que además tu navegador guarda en caché para no volver a pedirlas.

Teselas raster vs vectoriales: imagen pintada o datos en bruto

No todas las teselas son iguales. Las hay de dos familias, y la diferencia explica muchas cosas que habrás notado al usar mapas.

Teselas raster: la foto del mapa

Las teselas clásicas son raster: imágenes ya pintadas, normalmente de 256 píxeles de lado. El servidor dibujó el mapa una vez (con sus colores, sus tipografías, sus iconos) y te envía el resultado como quien envía una foto. Ventaja: cualquier dispositivo puede mostrarlas, por antiguo que sea. Inconveniente: son rígidas. Si haces zoom intermedio se ven borrosas, y si quieres el mapa en otro idioma u otro estilo, necesitas otro juego completo de imágenes.

Teselas vectoriales: los datos que tu navegador pinta

Los mapas modernos usan teselas vectoriales: en lugar de una imagen, el servidor envía los datos en bruto (esta línea es una carretera, este polígono es un parque, este punto es una estación) y es tu navegador quien los pinta y estiliza al vuelo.

Esto cambia el juego. Como el dibujo se hace en tu dispositivo, el mapa puede cambiar de idioma o de tema visual sin descargar nada nuevo: el modo oscuro de muchos mapas no es otro juego de imágenes, es el mismo dato pintado con otra paleta. Los textos se mantienen nítidos a cualquier zoom, las etiquetas pueden rotar con el mapa y la transición entre niveles es suave en lugar de saltar de imagen en imagen.

Abrir el mapa →

Web Mercator: la proyección con trampa (asumida)

La Tierra es (casi) una esfera y tu pantalla es plana, así que algo hay que sacrificar. Los mapas web usan de forma casi universal la proyección Web Mercator, heredera de la Mercator clásica de los navegantes del siglo XVI. Es el estándar de facto de la tecnología de mapas web.

Su gran virtud: conserva los ángulos. Las calles se cruzan en el mapa con el mismo ángulo que en la realidad, el norte siempre está arriba y las formas locales no se deforman. Para un mapa donde haces zoom hasta tu portal, es exactamente lo que quieres.

Su gran trampa: distorsiona las áreas, y mucho, según te alejas del ecuador. El ejemplo canónico es Groenlandia: en cualquier mapa web parece un continente comparable a África, cuando en realidad África es muchísimo mayor. La distorsión es matemática, conocida y asumida; no es un error, es el precio de la proyección.

Hay una consecuencia curiosa de todo esto: las rutas más cortas entre dos puntos lejanos del planeta (los círculos máximos que siguen los aviones) se ven como curvas sobre un mapa Mercator, aunque sobre el globo sean la línea recta. Si alguna vez te has preguntado por qué un vuelo Madrid–Los Ángeles parece dar un rodeo por el norte, en las rutas aéreas más transitadas lo contamos con calma.

Las capas: el mapa base y todo lo que va encima

Hasta aquí, el mapa base: el fondo con calles, ríos y fronteras, que suele construirse con datos de proyectos como OpenStreetMap. Pero un mapa interactivo moderno es un sándwich de capas apiladas sobre ese fondo.

Cada capa es un conjunto de datos con entidad propia, que se dibuja encima del mapa base usando tres tipos de geometría:

• Puntos: cámaras de tráfico, aviones en vuelo, barcos, aeropuertos, centrales eléctricas.
• Líneas: rutas, trayectorias, carreteras destacadas.
• Polígonos: zonas, áreas de cobertura, términos municipales.

Lo importante es que cada capa tiene su propia fuente y su propia cadencia. En un visor que combine varias (por ejemplo, cámaras públicas de tráfico junto a vuelos y barcos en vivo), la capa de aviones puede refrescarse cada pocos segundos mientras la imagen de una cámara se renueva al ritmo que decide el organismo que la publica. El mapa los muestra juntos, pero cada dato vive a su propio tempo. Entender esto evita confusiones muy comunes al interpretar lo que ves.

Abrir el mapa →

Datos en tiempo real sobre el mapa: cómo llega el movimiento

¿Y cómo se mueven los puntos? Hay dos mecanismos genéricos que usan prácticamente todos los servicios:

1. Consultas periódicas: tu navegador pregunta al servidor cada pocos segundos «¿hay posiciones nuevas?» y actualiza lo que cambia.
2. Conexión abierta: el navegador mantiene un canal permanente con el servidor, que empuja los datos nuevos en cuanto los tiene, sin esperar a que nadie pregunte.

En ambos casos, lo que ves en pantalla no es «el presente» en sentido estricto, sino el último dato que ha completado el viaje desde el sensor hasta tu pantalla. Ese matiz (qué significa de verdad «en vivo», cuánta latencia hay y por qué dos webs pueden mostrar el mismo avión en sitios distintos) da para artículo propio: lo desarrollamos en qué significa «en vivo» en un mapa.

Estilos y modos: el mismo mundo, varias pieles

Como las teselas vectoriales separan el dato del dibujo, un mismo mapa puede ofrecer varias «pieles». Las dos más habituales:

• Modo oscuro: la misma cartografía con paleta nocturna, más cómoda de noche y que hace resaltar los puntos de datos encima.
• Modo satélite: sustituye el dibujo cartográfico por imágenes aéreas y de satélite, útil para reconocer el terreno real. Ojo: esas imágenes no son en directo, son mosaicos compuestos; en imágenes satelitales gratuitas explicamos qué esperar de ellas.

Argos Atlas, por ejemplo, ofrece ambos modos (oscuro y satélite) sobre su mapa de cámaras, vuelos, barcos e infraestructuras, además de búsqueda global para saltar a cualquier punto del planeta.

El render en tu dispositivo: miles de puntos sin despeinarse

Queda la última pieza: ¿cómo puede tu móvil dibujar miles de puntos moviéndose a la vez sin arrastrarse? La respuesta es que los mapas modernos no se dibujan con las técnicas normales de una página web, sino aprovechando la aceleración gráfica del navegador: el mismo hardware que mueve los videojuegos se encarga de pintar el mapa.

Eso permite redibujar la escena entera muchas veces por segundo: rotar el mapa, inclinarlo, animar miles de aviones y barcos deslizándose suavemente entre actualización y actualización. Cuando un mapa va fino con muchísimos datos encima, no es casualidad: es la tarjeta gráfica de tu propio dispositivo haciendo el trabajo pesado, con el navegador como intermediario.

Por qué entender esto te hace mejor usuario de mapas

Puede parecer cultura general sin más, pero saber cómo funciona un mapa web cambia cómo lo usas:

• Si el mapa carga a trozos, sabes que es normal: son las teselas llegando, no un fallo.
• Si comparas tamaños de países a simple vista, sabes que Mercator te está engañando y buscas el dato real.
• Si ves datos «en vivo», sabes preguntarte por la fuente y la cadencia de cada capa antes de sacar conclusiones.
• Si el modo satélite muestra tu calle con obras que acabaron hace tiempo, sabes que estás viendo un mosaico de fechas mezcladas, no una cámara.

En resumen: dejas de tratar el mapa como un oráculo y empiezas a tratarlo como lo que es, una herramienta con reglas conocidas. Y las herramientas se aprovechan mucho mejor cuando conoces sus reglas.

Preguntas frecuentes

¿Por qué los mapas cargan por cuadraditos?

Porque el mundo está troceado en teselas: cuadrados de mapa precalculados para cada nivel de zoom, organizados en una pirámide donde cada nivel cuadruplica el detalle. Tu navegador calcula qué teselas necesita para la zona que miras, las pide al servidor y las coloca según llegan. Esos cuadraditos que ves completarse son, literalmente, las teselas aterrizando en tu pantalla.

¿Qué es una capa en un mapa?

Un conjunto de datos con fuente propia que se dibuja encima del mapa base: puntos (cámaras, aviones, barcos), líneas (rutas, carreteras) o polígonos (zonas, áreas). Cada capa se actualiza a su propio ritmo y suele poder activarse o desactivarse de forma independiente. Un visor moderno es básicamente un mapa base más una pila de capas bien ordenadas.

¿Por qué Groenlandia se ve tan grande?

Por la proyección Web Mercator, el estándar de los mapas web. Esta proyección conserva los ángulos (imprescindible para que las calles no se deformen al hacer zoom), pero a cambio estira las áreas cuanto más lejos del ecuador. Groenlandia, muy al norte, sale enormemente inflada: parece rivalizar con África cuando en realidad es muchísimo menor. Es una distorsión conocida y asumida, no un error del mapa.

¿Cómo se actualiza un mapa en tiempo real?

De dos formas genéricas: o el navegador pregunta al servidor cada pocos segundos si hay datos nuevos, o mantiene una conexión abierta por la que el servidor empuja las novedades en cuanto las tiene. En ambos casos, cada capa tiene su propia cadencia: los aviones pueden refrescarse en segundos mientras una cámara de tráfico se renueva al ritmo que marque su fuente oficial.

Conclusión

Un mapa online es una pirámide de teselas, una proyección que sacrifica áreas para conservar ángulos, una pila de capas con sus propias fuentes y un flujo de datos que tu navegador pinta con ayuda de la tarjeta gráfica. Nada de magia: ingeniería elegante que llevas en el bolsillo. La mejor forma de fijar todo esto es verlo en acción: abre el mapa, activa y desactiva capas, cambia entre modo oscuro y satélite, haz zoom hasta tu calle y observa cómo llegan las teselas. Ahora ya sabes exactamente qué estás viendo.