Todos los mapas que has visto en la app de un competidor usan el mismo estilo por defecto. Las carreteras beige genéricas, el agua en tono turquesa, los iconos de POI abarrotados que compiten con tu propia interfaz: son los valores predeterminados universales, diseñados para no molestar a nadie y no deleitar a nadie. Comunican algo con claridad: este producto está usando una librería de mapas, no apropiándose de la experiencia cartográfica.
El diseño personalizado de mapas cambia eso. Un mapa en modo oscuro en un panel de logística, una red de carreteras en el verde corporativo de una app inmobiliaria, un estilo minimalista limpio con tu logo donde antes estaba la marca de agua: son detalles que elevan una herramienta y la convierten en un producto.
Este tutorial recorre la Mapbox Style Specification tal como la implementa MapAtlas, desde la estructura del JSON de estilo hasta un toggle completo de modo claro/oscuro en React. No necesitas experiencia en SIG. Solo necesitas sentirte cómodo con JSON y JavaScript.
Si aún no has configurado un mapa básico, empieza con Cómo añadir mapas interactivos a tu sitio web primero y vuelve aquí para el diseño.
Por qué los estilos de mapa predeterminados se ven genéricos
El estilo predeterminado de un proveedor de tiles está diseñado para ser universalmente legible para el mayor público posible, en el contexto más amplio posible. Prioriza la densidad informativa sobre la opinión estética. Las carreteras deben ser visibles. Las etiquetas deben contrastar. Los iconos de POI deben ser reconocibles.
Ninguno de esos objetivos se alinea con los de tu producto. Tu app probablemente se preocupa por un pequeño subconjunto de lo que aparece en el mapa: rutas de entrega, ubicaciones de propiedades, centros sanitarios. Todo lo demás es ruido visual.
El diseño personalizado te permite suprimir lo que no necesitas, enfatizar lo que sí, y garantizar que el mapa se lea como parte de tu producto en lugar de un widget de terceros.
Entendiendo la especificación de estilo
Un estilo de MapAtlas es un documento JSON con cinco secciones clave:
{
"version": 8,
"name": "My Brand Style",
"sources": { ... },
"glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
"sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
"layers": [ ... ]
}
sources: de dónde provienen los datos del mapa (endpoints de tiles vectoriales de MapAtlas)glyphs: de dónde cargar los archivos de fuentes para el renderizado de etiquetassprite: de dónde cargar las imágenes de iconos para los marcadores de POIlayers: la lista ordenada de capas visuales, cada una con propiedades de pintura y diseño
El array layers es donde pasas la mayor parte del tiempo. Cada capa especifica un tipo de dato (fill, line, symbol, circle, fill-extrusion), qué elementos de la fuente se deben dibujar y cómo pintarlos.
Aquí tienes un estilo mínimo pero completo que renderiza una base de tiles vectoriales:
{
"version": 8,
"name": "Brand Base",
"sources": {
"mapatlas": {
"type": "vector",
"tiles": ["https://tiles.mapatlas.eu/v1/tiles/{z}/{x}/{y}.mvt?key=YOUR_API_KEY"],
"minzoom": 0,
"maxzoom": 14
}
},
"glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
"sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
"layers": [
{
"id": "background",
"type": "background",
"paint": { "background-color": "#f5f0eb" }
}
]
}
Esto renderiza un lienzo en blanco con el color de fondo que elijas. A partir de aquí añades capas para el agua, el uso del suelo, las carreteras, los edificios y las etiquetas.
Modo oscuro: cambiar los colores principales
Un mapa en modo oscuro no es simplemente una imagen rasterizada invertida. Es un conjunto completamente diferente de propiedades de pintura aplicadas a la misma geometría vectorial. Esta es una de las razones fundamentales por las que existen los tiles vectoriales: un tile, interpretaciones visuales infinitas.
Los colores clave que actualizar para un tema oscuro:
| Capa | Modo claro | Modo oscuro |
|---|---|---|
| Fondo (tierra) | #f5f0eb | #1a1a2e |
| Agua | #a8d5e5 | #0d3b66 |
| Uso del suelo urbano | #e8e0d5 | #16213e |
| Parques/zonas verdes | #c8e6c9 | #1b4332 |
| Carreteras (principales) | #ffffff | #3a3a5c |
| Carreteras (secundarias) | #efefef | #2d2d4a |
| Etiquetas de carretera | #333333 | #cccccc |
Así se aplica esto en una capa de estilo:
{
"id": "water",
"type": "fill",
"source": "mapatlas",
"source-layer": "water",
"paint": {
"fill-color": "#0d3b66",
"fill-opacity": 1
}
}
{
"id": "road-major",
"type": "line",
"source": "mapatlas",
"source-layer": "transportation",
"filter": ["==", "class", "primary"],
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#3a3a5c",
"line-width": ["interpolate", ["linear"], ["zoom"], 10, 1, 16, 4]
}
}
La expresión interpolate en line-width escala el ancho de la carretera según el nivel de zoom: estrecho a zoom bajo, más ancho al acercarse. Esto es diseño basado en datos sin solicitudes de red adicionales.
Aplicar colores de marca
La mayoría de los sistemas de diseño definen un color primario (por ejemplo, #97C70A), un color secundario y una paleta neutral. El mapa debería usar exactamente esos mismos valores, no aproximaciones.
Estas son las capas objetivo para aplicar colores de marca:
Las carreteras como elementos de marca. Si tu color corporativo es lo suficientemente vivo, úsalo para las carreteras principales o rutas destacadas:
{
"id": "road-highlighted",
"type": "line",
"source": "mapatlas",
"source-layer": "transportation",
"filter": ["==", "class", "primary"],
"paint": {
"line-color": "#97C70A",
"line-width": 3,
"line-opacity": 0.8
}
}
Marcadores de POI personalizados. Sustituye los iconos del sprite predeterminado por los tuyos alojando una hoja de sprites personalizada y actualizando la URL de sprite. Luego referencia tus iconos en las capas de símbolos:
{
"id": "brand-poi",
"type": "symbol",
"source": "mapatlas",
"source-layer": "poi",
"layout": {
"icon-image": "brand-pin",
"icon-size": 1.2,
"text-field": ["get", "name"],
"text-font": ["Inter Bold", "Noto Sans Regular"],
"text-size": 12,
"text-offset": [0, 1.5],
"text-anchor": "top"
},
"paint": {
"text-color": "#97C70A",
"text-halo-color": "#1a1a2e",
"text-halo-width": 1
}
}
Fuentes personalizadas para las etiquetas del mapa
Las fuentes predeterminadas de las etiquetas del mapa son genéricas. Si tu marca usa Inter, Roboto o una tipografía personalizada, también puedes usarla en las etiquetas del mapa.
MapAtlas sirve glifos desde su propio endpoint de glifos, que admite el formato de glifo estándar de Mapbox. Para usar una fuente personalizada:
- Genera archivos de glifo
.pbfa partir de tu tipografía usando una herramienta comofontnik. - Aloja los archivos de glifo en una CDN o en tu propio servidor.
- Actualiza el campo
glyphsen tu JSON de estilo:
{
"glyphs": "https://your-cdn.com/fonts/{fontstack}/{range}.pbf"
}
- Referencia la fuente en la propiedad
text-fontde cualquier capa de símbolo:
"text-font": ["Inter Bold", "Noto Sans Regular"]
Proporciona siempre una fuente de respaldo (Noto Sans cubre los caracteres Unicode que tu fuente principal puede no incluir). El renderizador usa la primera fuente del array que contiene un glifo para cada carácter.
Eliminar marcas de agua y atribución
MapAtlas permite el despliegue de marca blanca completo. Puedes eliminar completamente el logo de MapAtlas del mapa.
En el SDK, la atribución se gestiona mediante un control que puedes desactivar:
const map = new mapmetricsgl.Map({
container: 'map',
style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
center: [4.9041, 52.3676],
zoom: 12,
attributionControl: false, // Remove the default attribution control
});
Si quieres mantener la atribución pero adaptarla a tu interfaz, oculta el control predeterminado y añade el tuyo:
map.addControl(
new mapmetricsgl.AttributionControl({
customAttribution: 'Map data © OpenStreetMap contributors',
compact: true,
}),
'bottom-left'
);
Esto reemplaza la marca con una atribución mínima y legalmente conforme que respeta la licencia de OpenStreetMap y se adapta a tu interfaz. A diferencia de Google Maps, que exige que su logo permanezca visible en todo momento independientemente de tu plan, MapAtlas te da control total.
Toggle de tema claro/oscuro en React
Aquí tienes un componente React completo que gestiona un mapa con un toggle de modo claro/oscuro, usando propiedades personalizadas CSS para mantener el tema sincronizado con el resto de tu interfaz:
import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';
const STYLES = {
light: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
dark: 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY',
};
export function BrandedMap({ center = [4.9041, 52.3676], zoom = 12 }) {
const containerRef = useRef(null);
const mapRef = useRef(null);
const [theme, setTheme] = useState('light');
useEffect(() => {
const map = new mapmetricsgl.Map({
container: containerRef.current,
style: STYLES.light,
center,
zoom,
attributionControl: false,
});
map.addControl(
new mapmetricsgl.AttributionControl({ compact: true }),
'bottom-left'
);
mapRef.current = map;
return () => map.remove();
}, []);
useEffect(() => {
if (mapRef.current) {
mapRef.current.setStyle(STYLES[theme]);
}
}, [theme]);
return (
<div style={{ position: 'relative' }}>
<div ref={containerRef} style={{ width: '100%', height: '500px' }} />
<button
onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
style={{
position: 'absolute',
top: 12,
right: 12,
padding: '8px 16px',
background: theme === 'dark' ? '#ffffff' : '#1a1a2e',
color: theme === 'dark' ? '#1a1a2e' : '#ffffff',
border: 'none',
borderRadius: 6,
cursor: 'pointer',
zIndex: 1,
}}
>
{theme === 'light' ? 'Dark mode' : 'Light mode'}
</button>
</div>
);
}
La llamada a setStyle vuelve a renderizar el mapa con el nuevo esquema de colores. Los datos de tiles que ya están en caché no se vuelven a descargar: solo cambia la interpretación visual.
Alojar un JSON de estilo personalizado
Para tener control total, aloja tu JSON de estilo como un archivo estático en tu CDN o en un bucket de S3. Esto te permite:
- Versionar tu estilo junto con el código de tu aplicación.
- Actualizar el diseño visual sin redesplegar la aplicación (solo actualiza el JSON alojado).
- Usar diferentes estilos para distintos entornos (preview vs. producción).
Carga un estilo alojado en tiempo de ejecución:
const map = new mapmetricsgl.Map({
container: 'map',
style: 'https://your-cdn.com/styles/brand-dark.json',
center: [4.9041, 52.3676],
zoom: 12,
});
La única restricción es CORS: el JSON de estilo debe servirse con Access-Control-Allow-Origin: * (o tu dominio específico) para que el navegador pueda cargarlo de forma cruzada.
Flujo de trabajo de desarrollo de estilos
La forma más rápida de construir un estilo personalizado es iterativa: ver los cambios en tiempo real sin reescribir código.
- Parte del JSON de estilo base de MapAtlas como fundamento. Descárgalo accediendo a
https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY. - Edita el JSON en tu editor, observando qué capa afecta a qué elemento visual.
- Recarga el mapa con tu JSON de estilo modificado para ver el resultado.
- Una vez estable, haz commit del JSON de estilo a tu repositorio y alójalo en tu CDN.
Para una personalización más profunda, consulta la documentación de visualización y diseño de mapas para la referencia completa de capas, tipos de propiedades de pintura y sintaxis de expresiones.
Si vienes de Mapbox y te preguntas qué cambió, consulta Mapbox vs. MapAtlas: ¿Qué API de mapas es la adecuada para tu proyecto en la UE? para una comparación detallada de características y precios.
Y para entender la base arquitectónica de por qué los tiles vectoriales hacen posible todo esto, Tiles vectoriales vs. tiles rasterizados explica el pipeline de renderizado en detalle.
Resumen
El diseño personalizado de mapas no es un lujo: es la diferencia entre un mapa que parece un widget de terceros y uno que parece construido para tu producto. Con MapAtlas:
- La especificación de estilo es JSON estándar compatible con las herramientas de Mapbox GL JS.
- El modo oscuro es un intercambio de JSON de estilo, no un nuevo conjunto de tiles ni una configuración de servidor.
- Los colores de marca se aplican a carreteras, etiquetas e iconos de POI mediante propiedades de pintura.
- Las fuentes personalizadas se cargan desde cualquier endpoint de glifos que controles.
- Las marcas de agua y la atribución son totalmente configurables; la marca blanca está disponible en todos los planes de pago.
- El estilo completo puede alternarse en tiempo de ejecución sin recargar la página.
Empieza a construir tu mapa con marca personalizada hoy. Regístrate para obtener una clave API gratuita de MapAtlas y carga el JSON de estilo base como punto de partida. El primer estilo personalizado tarda unos 30 minutos en quedar bien; las iteraciones posteriores se hacen en minutos.
