Si has usado Google Maps, OpenStreetMap o cualquier mapa web moderno en la última década, cada carretera y edificio que viste probablemente se cargó como un vector tile. El formato es el héroe silencioso de la cartografía web moderna. Es lo que hace que los mapas web carguen rápido, se vean nítidos en cualquier pantalla y permitan a los diseñadores publicar mapas con estilo de marca sin tener que rerenderizar el mundo entero para cada proyecto.
Esta guía explica qué es un vector tile, cómo funciona, por qué reemplazó a los raster tiles en la mayoría de los casos y cómo MapAtlas los sirve en producción.
La definición en una frase
Un vector tile es un archivo binario pequeño que contiene las features geográficas de una tesela de mapa en un nivel de zoom específico, codificadas como datos y no como una imagen pre-renderizada.
La parte de "datos en lugar de imagen" es toda la clave. Con un raster tile, el servidor ya ha decidido cómo se ve cada píxel. Con un vector tile, el cliente recibe la geometría subyacente (líneas, polígonos, puntos) y las etiquetas, y las renderiza al vuelo con el estilo que el usuario ha elegido.
Cómo usan las teselas los mapas web
Todos los mapas web que hayas usado dividen el mundo en una cuadrícula de teselas. En el zoom 0, el mundo entero cabe en una sola tesela. En el zoom 1 hay 4 teselas, en el zoom 2 hay 16, y así sucesivamente. Cada tesela se identifica con tres números: zoom (z), columna (x) y fila (y). Cuando haces pan o zoom, la librería de mapas descarga solo las teselas visibles, las cachea y descarta las que han salido del viewport.
Con los raster tiles, el servidor pre-renderiza un PNG para cada combinación (z, x, y). Funciona, pero tiene limitaciones: el estilo queda fijado en el momento del renderizado, cada cambio de estilo implica rerenderizar el mundo entero y las imágenes tienen que enviarse en resolución 1x y 2x para verse nítidas en pantallas retina.
Los vector tiles invierten el modelo. El servidor envía geometría. El cliente renderiza. Un solo tileset soporta cualquier número de estilos, se ve nítido a cualquier DPI y es más pequeño en la transmisión.
El formato MVT
El formato estándar de facto es MVT, la especificación Mapbox Vector Tile. MVT es una codificación Protocol Buffers que organiza las features en capas con nombre, típicamente:
transportation(carreteras, ferrocarriles)buildings(huellas de edificios)places(ciudades, pueblos, barrios con nombre)landuse(parques, zonas residenciales, comerciales)water(océanos, lagos, ríos)boundaries(áreas administrativas)
Cada feature de una capa tiene una geometría (punto, línea, polígono) y un conjunto de atributos (nombre, tipo, importancia, variantes de idioma). Las coordenadas de geometría son enteros en el espacio de coordenadas local de la tesela, de 0 a 4096, lo que le da a MVT su tamaño compacto.
MVT es completamente abierto, independiente del proveedor y compatible con todos los principales motores de renderizado: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl y los SDKs de Mapbox para iOS y Android.
Por qué los vector tiles reemplazaron a los raster tiles
Hay cinco razones por las que los mapas web modernos usan casi universalmente vector tiles para la capa base:
Flexibilidad de estilo. Con un solo tileset puedes renderizar un tema claro, un tema oscuro, un estilo optimizado para imprimir, un estilo con superposición de satélite y un estilo con colores de marca para marketing. Sin rerenderizado en el servidor.
Perfección de píxeles a cualquier DPI. Un raster tile a 1x se ve borroso en una pantalla Retina. Un vector tile se renderiza desde cero en el cliente a la resolución nativa del dispositivo.
Payloads más pequeños. Una tesela urbana compleja a menudo pesa menos como MVT que como PNG de alta calidad, especialmente con gzip.
Interactividad en tiempo de ejecución. Puedes resaltar una carretera concreta al pasar el cursor, atenuar las capas que no se usan, animar transiciones y responder a clics en features porque el cliente sabe qué representa cada píxel.
Zoom y rotación suaves. La geometría vectorial rota y escala sin aliasing. Los raster tiles se ven pixelados cuando se hace zoom entre niveles enteros o se rotan fuera del eje.
El coste es el trabajo de CPU y GPU del cliente, lo cual no es ningún problema en cualquier dispositivo fabricado en la última década.
Qué puedes estilizar en tiempo de ejecución
Un documento de estilo (típicamente un JSON según la Mapbox Style Spec, también adoptada por MapLibre) describe cómo debe dibujarse cada capa. Ejemplos de lo que puedes cambiar sin tocar los datos de la tesela:
- El color de cada clase de carretera
- El ancho de las líneas de carretera, variando por zoom
- Qué etiquetas de lugar se muestran en qué zoom
- Fuente, tamaño y halo de cada etiqueta de texto
- Visibilidad de capas enteras (desactiva todos los límites administrativos con un solo toggle)
- Rellenos de patrones, líneas discontinuas, degradados, efectos de desenfoque
Esto es lo que hace posibles los mapas con marca. Un equipo de diseño puede entregar un JSON de estilo Mapbox, un JSON de estilo MapLibre o un preset de estilo de MapAtlas y el mismo tileset se renderiza con su identidad de marca.
Caché y rendimiento
Los vector tiles se cachean muy bien porque la geometría del mundo no cambia cada minuto. Las cachés CDN edge típicamente guardan los tiles MVT durante horas o días. La librería de mapas precarga teselas en la dirección probable del desplazamiento del usuario y mantiene las teselas vistas recientemente en memoria. El resultado es que un usuario desplazándose por una ciudad ve una experiencia fluida porque las teselas del próximo viewport ya están cargadas.
Los servicios de tiles en producción típicamente exponen las teselas en una ruta como /{z}/{x}/{y}.pbf (PBF es la extensión binaria de protobuf). Una conexión HTTP/2 o HTTP/3 moderna multiplexa docenas de peticiones de teselas en paralelo.
El lugar de MapAtlas
MapAtlas sirve vector tiles compatibles con MVT para el producto Dynamic Maps, con alojamiento exclusivo en la UE, precios predecibles y un esquema de teselas diseñado para el estilizado downstream y la anotación por IA. Las mismas capas de datos que impulsan el mapa visible (places, transportation, buildings, puntos de interés) también se exponen como datos estructurados a través de las APIs de Geocoding y Search, de modo que una feature que ves en el mapa puede recuperarse como un registro JSON tipado para tu propia lógica.
Para una visión más profunda de la capa de renderizado, la guía de estilos de mapa personalizados cubre cómo publicar un estilo de vector tile alineado con tu marca de principio a fin.
Preguntas frecuentes
¿Qué es un vector tile?
Un vector tile es un archivo binario pequeño que contiene las features geográficas (carreteras, edificios, puntos de interés, etiquetas) para una sola tesela de un mapa web en un nivel de zoom específico. A diferencia de un raster tile, que es una imagen PNG o JPG pre-renderizada, un vector tile guarda la geometría subyacente y los atributos como datos. El navegador o el cliente móvil renderiza esos datos en píxeles en tiempo de ejecución, lo que significa que la misma tesela puede estilizarse de forma diferente, rotarse y renderizarse a cualquier densidad de píxeles sin perder nitidez.
¿Cuál es la diferencia entre un vector tile y un raster tile?
Un raster tile es una imagen PNG o JPG fija, típicamente de 256x256 o 512x512 píxeles, pre-renderizada en el servidor con un estilo fijo. Un vector tile es un archivo binario con geometría y atributos, renderizado en píxeles por el cliente. Los vector tiles son más pequeños en la transmisión, admiten reestilizado en tiempo de ejecución, se ven nítidos a cualquier zoom y DPI, y permiten activar o desactivar capas sin volver a descargarlas. La contrapartida es que el cliente tiene que hacer el trabajo de renderizado, lo cual no es ningún problema en cualquier dispositivo moderno.
¿Qué es el formato MVT?
MVT es la especificación Mapbox Vector Tile, el formato estándar de facto para vector tiles. Es una codificación Protocol Buffers (protobuf) de features geográficas para una sola tesela, organizada en capas con nombre (por ejemplo, roads, buildings, places). El formato es abierto, independiente del proveedor y compatible con todos los renderizadores de mapas modernos (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas sirve tiles compatibles con MVT a través de su endpoint de mapas dinámicos.
¿Qué tamaño tienen los vector tiles?
Un vector tile urbano típico en el zoom 14 pesa entre 50 KB y 200 KB en la transmisión, a menudo comprimido a 30-100 KB con gzip. El tamaño depende de la densidad de datos de la zona: una tesela que cubre el centro de París es más pesada que una que cubre el océano Atlántico. La mayoría de los mapas en producción logran un desplazamiento y zoom suaves porque las teselas se cachean agresivamente, se precargan en la dirección probable del usuario y se renderizan en la GPU.
