Empecemos por explicar que es Mapbox Studio
Mapbox Studio es una plataforma en línea que te permite diseñar, personalizar y publicar mapas vectoriales de forma visual, sin necesidad de escribir código.
Esta herramienta permite controlar colores, textos, símbolos, capas, datos, zoom y más, para crear tu propio estilo de mapa que luego puedes usar en páginas web o apps móviles. Las funcionalidades principales son:
- Personalizar mapas base: calles, etiquetas, agua, bosques, edificios… puedes cambiar el color, tipo de fuente, tamaño, opacidad y orden de cada elemento.
- Agregar tus propios datos (como puntos de interés, rutas, zonas, etc.), ya sea dibujando directamente en el mapa o cargando archivos GeoJSON.
- Crear tilesets optimizados para mapas web.
- Exportar tus mapas o incrustarlos en tu sitio usando HTML y JavaScript.
- Publicar estilos y usarlos con librerías como Mapbox GL JS, Leaflet, React, etc.
Elementos usados en Mapbox Studio
- Styles (Estilos): tus mapas personalizados.
- Datasets: archivos geográficos editables (dibujados o cargados).
- Tilesets: versiones optimizadas de tus datasets para visualización.
- Access Tokens: llaves que te permiten conectar Mapbox con tus proyectos web.
¿Cómo puedes crear tu mapa?
1. Accede a tu cuenta en mapbox.com y explora el área de trabajo
- Entra a https://mapbox.com y crea una cuenta gratuita o inicia sesión.
- Una vez dentro, haz clic en “Mapbox Studio” desde el panel principal o desde el menú superior.
- El área de trabajo incluye:
- Styles: Estilos de mapas personalizados.
- Tilesets: Colecciones de datos geoespaciales vectoriales optimizadas para mapas.
- Datasets: Datos espaciales sin procesar editables.
- Tokens: Claves para autenticarte en aplicaciones con Mapbox.
2. Crear un Token
El Access Token es una clave de autenticación para usar los servicios de Mapbox en tus aplicaciones web. Sigue los siguientes pasos:
- Ve a tu cuenta > “Access tokens”
- Crea un nuevo token personalizado (puedes limitar sus permisos).
- Copia el token, ya que lo necesitarás para usar Mapbox en HTML, JS o cualquier framework.
3. Personalizar Estilos (styles)
Desde Mapbox Studio puedes:
- Crear un nuevo estilo desde cero o desde una plantilla base (ej: Satellite, Streets, Dark).
- Usar la interfaz de diseño para:
- Cambiar colores de capas (agua, calles, edificios).
- Ocultar capas.
- Modificar el texto y símbolos.
- Guardar tu estilo y asignarle un nombre.
4. Crear un Dataset o capa
- En Mapbox Studio, ve a la sección “Datasets”.
- Crea un nuevo dataset con geometrías:
- Puntos, líneas o polígonos.
- Puedes dibujarlos a mano con el editor o cargar un archivo GeoJSON.
- Agrega atributos (nombre, tipo, categoría, etc).
5. Crear un Tileset
Un tileset es un conjunto de “mosaicos vectoriales” que representan tu dataset listo para usarse eficientemente en un mapa. Para esto haz lo siguiente:
- Desde tu dataset, haz clic en “Create tileset”.
- Asigna un nombre y descripción.
- Espera a que se procese y quede listo para usar en un estilo.
6. Agregar dataset (tileset) en un style
- Abre uno de tus estilos en el editor de Mapbox Studio.
- En el panel izquierdo, haz clic en “Layers” y selecciona “Add layer”.
- Elige tu tileset creado en el paso anterior.
- Configura:
- Tipo de geometría (punto, línea, polígono).
- Colores, bordes, opacidad.
- Zoom mínimo/máximo para visualización.
7. Publicar y compartir
Cuando tu estilo esté listo, puedes usarlo para compartirlo o embeberlo en tu sitio web:
- Haz clic en “Publish” (publicar) en la parte superior derecha.
- Luego ve a la vista general del estilo, y verás:
- La URL del mapa.
- El ID del estilo.
- El código de ejemplo para incrustarlo en HTML con Mapbox GL JS.
Te explico el proceso aquí en este video:
