Tiles vectoriales vs. tiles raster: ¿cuál debe usar tu aplicación web?

Cuando integras un mapa en una aplicación web, hay una decisión de arquitectura que condiciona todo lo demás: tiles raster o tiles vectoriales. Si aciertas, tu mapa será rápido, nítido y adaptable. Si te equivocas, estarás sirviendo una imagen de fondo pixelada y lenta que choca con tu sistema de diseño a cada paso.

Esta guía explica la diferencia técnica entre los dos formatos, repasa los compromisos reales que importan a un desarrollador frontend y te da un marco de decisión claro. Al terminar, sabrás qué formato elegir para tu proyecto y cómo empezar con tiles vectoriales en MapAtlas.

La pregunta del formato de tiles aparece pronto en casi cualquier proyecto de mapas, e internet está lleno de respuestas superficiales que se quedan en "los tiles vectoriales son más nuevos". Esta guía va más allá: cubre los pipelines de renderizado, el tamaño de las cargas, la compatibilidad con navegadores, el control de estilos y los casos concretos en los que los tiles raster siguen siendo la opción correcta.

Si ya estás desarrollando y solo necesitas el código, ve directamente a la sección Inicio rápido.

Qué son los tiles raster

Un tile raster es una imagen PNG o JPEG prerrenderizada, normalmente de 256×256 o 512×512 píxeles, que representa un fragmento fijo del mundo a un nivel de zoom concreto. Cuando el usuario desplaza el mapa o hace zoom, el navegador solicita los tiles adyacentes o de mayor resolución, que el servidor ya ha renderizado y guardado en caché.

El renderizado ocurre por completo en el servidor. La imagen que llega al navegador es un dibujo terminado: los píxeles ya están colocados y los colores ya están fijados. El navegador solo tiene que mostrarla.

Cómo funcionan los servidores de tiles raster

Un stack de tiles raster suele tener este aspecto:

1. Los datos geográficos en bruto (OpenStreetMap, datos catastrales, modelos de elevación) se procesan y se cargan en una base de datos.
2. Un motor de renderizado (Mapnik es la opción clásica) prerrenderiza los tiles de cada nivel de zoom en una caché de tiles.
3. Un servidor de tiles (TileServer GL en modo raster o una CDN gestionada) sirve las imágenes en caché siguiendo la convención de URL /{zoom}/{x}/{y}.png.

El resultado es sencillo, rápido y sin estado. Cualquier cliente HTTP puede pedir un tile: un navegador, una app móvil, un proceso de servidor que genera una imagen de mapa o una aplicación GIS de escritorio.

Puntos fuertes de los tiles raster

• Sin coste de renderizado en el cliente. El navegador solo muestra una imagen. No hace falta WebGL, ni compilar shaders, ni renderizar fuentes.
• Compatibilidad universal. Funcionan en cualquier navegador y versión, incluidos Internet Explorer y los entornos de renderizado headless.
• Aspecto predecible. El mapa se ve exactamente como lo renderizó el servidor de tiles. No hay variaciones en el cliente.
• Generación sencilla de imágenes en el servidor. Perfectos para generar imágenes de mapas estáticos para emails, informes PDF o tarjetas para redes sociales.

Puntos débiles de los tiles raster

• Archivos grandes. Un tile PNG de 256×256 pesa desde un par de KB en campo abierto hasta unos 40-45 KB sobre un centro urbano denso. Un tile Retina (512×512) tiene cuatro veces más píxeles.
• Pixelado en pantallas de alta densidad. Un tile renderizado para una pantalla 1x se ve borroso en una pantalla Retina 2x, salvo que sirvas tiles @2x, lo que duplica el ancho de banda.
• Sin rotación ni inclinación. Si giras un mapa raster, las etiquetas de texto giran con él y dejan de leerse. Por eso los mapas raster casi siempre se muestran con el norte arriba.
• Sin cambios de estilo en el cliente. ¿Quieres cambiar el color de las carreteras, ocultar los iconos de POI o pasar a modo oscuro? Necesitas un nuevo juego de tiles, prerrenderizado en el servidor.
• Interpolación del zoom. Entre niveles de zoom enteros, el navegador escala la imagen existente, lo que la emborrona. La sensación de "zoom fluido" de los tiles vectoriales no existe con raster.

Qué son los tiles vectoriales

Un tile vectorial contiene los datos geográficos en bruto de una zona del mapa (geometrías de carreteras, polígonos de edificios, masas de agua, usos del suelo, datos de colocación de etiquetas) codificados en un formato binario compacto, normalmente Mapbox Vector Tile (.mvt). El tile no contiene píxeles. Describe qué hay en esa zona, no cómo debe verse.

El renderizado ocurre por completo en el cliente, con WebGL. Cuando cargas un mapa compatible con Mapbox GL JS (como MapAtlas), el SDK solicita tiles vectoriales, recibe los datos de geometría y usa tu especificación de estilo para dibujar cada carretera, edificio y etiqueta en un elemento <canvas> en tiempo real, a un máximo de 60 fotogramas por segundo en hardware con capacidad suficiente.

Cómo funciona el renderizado de tiles vectoriales

Vector tile (.mvt) + Style JSON → WebGL shader → Canvas pixels

El JSON de estilo (un archivo estructurado que controlas tú) le dice al renderizador: dibuja las carreteras de este color, extruye los edificios a esta altura, usa esta fuente en las etiquetas, oculta estos tipos de capa por debajo del zoom 12. El estilo se puede cambiar en tiempo de ejecución sin descargar tiles nuevos.

Puntos fuertes de los tiles vectoriales

• Menos descargas al hacer zoom. Un tile vectorial se descarga hasta el zoom máximo de la fuente (a menudo 14) y se reutiliza en todos los niveles de zoom más cercanos, mientras que un mapa raster descarga cuatro tiles nuevos en cada paso de zoom. En centros urbanos densos, un solo tile vectorial puede pesar más que su equivalente raster, así que el ahorro viene de la reutilización y no de archivos más pequeños.
• Nitidez a cualquier resolución. La geometría vectorial escala matemáticamente. Una pantalla Retina recibe el mismo tile que una pantalla estándar: el renderizador simplemente genera más píxeles. No hacen falta variantes @2x.
• Zoom y rotación fluidos. Como el renderizador trabaja sobre geometría en bruto, el zoom se interpola de forma continua (no solo en niveles enteros) y el mapa se puede inclinar y girar con las etiquetas siempre derechas.
• Control total del estilo en el cliente. Cambia cualquier propiedad visual (color de las carreteras, fuente de las etiquetas, visibilidad de capas, opacidad) actualizando el objeto de estilo. Sin nuevas peticiones de tiles. El modo oscuro es un cambio de JSON de estilo, no un nuevo juego de tiles.
• Extrusión de edificios en 3D. Los tiles vectoriales incluyen metadatos de altura de los edificios. Los renderizadores pueden extruir polígonos en 3D con WebGL. Los tiles raster no tienen concepto de altura.
• Estilos basados en datos. Colorea las carreteras según el límite de velocidad, sombrea los usos del suelo por categoría o escala los marcadores según la población, todo a partir de propiedades de los datos del tile y sin tocar el servidor.

Puntos débiles de los tiles vectoriales

• Necesitan WebGL. Sin soporte de WebGL no hay renderizado de tiles vectoriales. Esto deja fuera a navegadores muy antiguos (IE11) y a ciertos entornos headless.
• Carga de CPU y GPU en el cliente. El renderizado ocurre en el dispositivo del usuario. En móviles Android de gama baja o en ordenadores muy cargados, los estilos complejos con muchas capas pueden provocar caídas de fotogramas.
• Configuración inicial más compleja. Necesitas una librería de renderizado (Mapbox GL JS, MapLibre GL o el MapAtlas SDK) y un JSON de estilo, no basta con una etiqueta <img>.
• Carga de fuentes y glifos. Renderizar etiquetas requiere servir aparte los archivos de glifos. Eso añade algunas peticiones de red en la primera carga.

Comparativa de rendimiento: cifras reales

Para concretar el compromiso, así se compara el centro de Ámsterdam a nivel de zoom 14 en servidores públicos de tiles de OpenStreetMap (medido en septiembre de 2026):

A escala, la diferencia se nota más en el número de peticiones que en los bytes. Una prueba de carga revisada por pares concluyó que las interacciones de zoom y desplazamiento descargaban uno o dos tiles vectoriales frente a 40 tiles raster, aunque los tiles vectoriales transportaban más datos. En una app de tráfico medio que genera 10 millones de peticiones de tiles al mes, reducir peticiones importa, porque la petición de tile es la unidad por la que factura una API de mapas. La página de precios de la API de mapas muestra los tramos de peticiones de tiles junto a los de geocodificación y rutas.

Cuándo usar tiles raster

Los tiles raster no están obsoletos. Hay casos claros en los que siguen siendo la opción correcta:

Integración con sistemas heredados. Si vas a incrustar un mapa en una app .NET WebForms, en una vista de Rails renderizada en el servidor o en un entorno donde solo controlas HTML y JavaScript básico, una capa de tiles raster con Leaflet u OpenLayers es más sencilla y fiable que introducir un renderizador WebGL.

Generación de imágenes de mapa en el servidor. Si necesitas renderizar capturas de mapas en un servidor Node.js para plantillas de email, exportaciones a PDF o imágenes Open Graph, el renderizado raster headless es el camino. Herramientas como node-canvas con una fuente de tiles raster funcionan donde WebGL no llega.

Imágenes de satélite y aéreas. La fotografía aérea es, por naturaleza, un dato raster. Incluso en un mapa vectorial, la capa de imágenes de satélite se entrega siempre como tiles raster. Los mapas híbridos combinan ambos formatos: vectorial para carreteras y etiquetas, raster para la base fotográfica.

Casos de uso muy sencillos. ¿Vas a incrustar un mapa estático de ubicación en una página de contacto? Una configuración sencilla de Leaflet con tiles raster de OpenStreetMap lleva 20 minutos y no añade complejidad de JavaScript. Pasar a tiles vectoriales no se justifica para un pin de ubicación no interactivo.

Cuándo usar tiles vectoriales

Elige tiles vectoriales en cualquier aplicación web moderna en la que te importe lo siguiente:

• Estilo de marca personalizado. Si tu sistema de diseño tiene colores concretos, tu mapa también debería tenerlos. Con tiles vectoriales es un cambio de JSON.
• Soporte de modo oscuro. Un estilo oscuro es un único archivo de configuración. Pasar de claro a oscuro es una llamada a map.setStyle().
• Nitidez en pantallas de alta densidad y Retina. Especialmente importante en apps mobile-first y en cualquier interfaz donde la nitidez sea una prioridad de diseño.
• Experiencia de usuario fluida. La interpolación continua del zoom y el renderizado fluido de un mapa vectorial se notan de inmediato. En contextos interactivos, los mapas raster resultan toscos en comparación.
• Capas de visualización de datos. Añadir un mapa de calor, un coroplético o una capa de agrupación a un mapa vectorial solo requiere configuración en el cliente. En un mapa raster tendrías que generar una nueva capa de tiles o recurrir a un apaño con una superposición de canvas.
• Perspectivas en 3D o inclinadas. Solo son posibles con tiles vectoriales y WebGL.

Inicio rápido: tiles vectoriales con MapAtlas

MapAtlas sirve tiles vectoriales a través de una API compatible con Mapbox GL JS. Si ya has usado Mapbox GL JS, la migración consiste en cambiar la URL del estilo y la clave de API. Si empiezas desde cero, esta es la configuración completa.

Instala el SDK

npm install @mapmetrics/mapmetrics-gl

O mediante CDN en proyectos de HTML plano:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Renderiza un mapa vectorial

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // ID de tu <div>
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [longitud, latitud], Ámsterdam
  zoom: 12,
  pitch: 0,     // 0 = vista cenital, 60 = inclinación 3D
  bearing: 0,   // 0 = norte arriba, cualquier otro valor = rotado
});

La URL de style apunta a un archivo JSON alojado en los servidores de MapAtlas que define todas las capas, fuentes y orígenes de datos. También puedes alojar tu propio JSON de estilo para controlar cada aspecto visual del mapa; consulta la guía de visualización y estilos de mapas.

Cambia a modo oscuro en tiempo de ejecución

const LIGHT_STYLE = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY';
const DARK_STYLE  = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY';
let isDark = false;

document.getElementById('toggle-dark').addEventListener('click', () => {
  isDark = !isDark;
  map.setStyle(isDark ? DARK_STYLE : LIGHT_STYLE);
});

No se lanzan nuevas peticiones de tiles para los datos que ya están en caché. Solo cambia el estilo: los tiles siguen siendo la misma geometría binaria, renderizada de nuevo con otros colores.

Añade una capa de datos GeoJSON

Una de las funciones más útiles de los tiles vectoriales es superponer tus propios datos como una capa con estilo:

map.on('load', () => {
  // Añade tu propia fuente de datos
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Dale estilo como capa de relleno de color
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

Este patrón (añadir una fuente, añadir una capa, pintar con expresiones de estilo) es el mismo para mapas de calor, líneas de ruta, polígonos de isócronas y mapas coropléticos. Funciona porque los tiles vectoriales entregan al renderizador geometría en bruto, no píxeles terminados.

Migrar de raster a vectorial

Si ya tienes una configuración de Leaflet con tiles raster y quieres actualizarla, esta es la ruta de migración mínima:

1. Sustituye Leaflet por el MapAtlas SDK (o por MapLibre GL JS si prefieres un renderizador totalmente open source).
2. Sustituye la URL de los tiles por la URL de un JSON de estilo de MapAtlas.
3. Traslada las superposiciones de las capas de Leaflet a fuentes y capas de GL JS.
4. Prueba en entornos sin WebGL. Añade un fallback o un mensaje de degradación elegante para el pequeño porcentaje de usuarios que no tendrán WebGL disponible.

El resultado funcional es un mapa más nítido, que carga más rápido y que puedes cambiar de estilo sin tocar el servidor.

Para un recorrido completo sobre cómo añadir marcadores, ventanas emergentes, búsqueda de direcciones e integración con React sobre una base de tiles vectoriales, consulta Cómo añadir mapas interactivos a tu sitio web.

Para ir más allá con el estilo (modo oscuro, colores de marca, fuentes personalizadas, eliminación de la marca de agua), consulta Cómo diseñar un mapa personalizado con tu marca.

Y si estás comparando MapAtlas con Google Maps en costes y funciones, MapAtlas vs. Google Maps: por qué los desarrolladores están cambiando repasa las diferencias clave.

Resumen: el marco de decisión

Si en 2026 vas a construir algo interactivo, los tiles vectoriales son la opción por defecto. Los tiles raster son la excepción deliberada para restricciones concretas de compatibilidad o de renderizado.

¿Listo para construir con tiles vectoriales? Regístrate para obtener una clave de API gratuita de MapAtlas, sin tarjeta de crédito. Tu clave funciona desde el primer día con las APIs de tiles, geocodificación, rutas e isócronas.