Decisión técnica
Qué es Mapbox y por qué conviene planificarlo
Mapbox es una plataforma de mapas y APIs geoespaciales que se usa para mostrar mapas interactivos, estilos personalizados, búsquedas de direcciones, rutas, tiles y experiencias con datos de ubicación. En una web sencilla puede parecer solo una librería JavaScript, pero detrás hay consumo de servicios y reglas de facturación.
La decisión importante no es solo si Mapbox se ve bien. Antes de integrarlo, define qué producto necesitas, cuántas cargas tendrá la página, si vas a usar búsqueda o rutas, qué token publicarás en el frontend y qué límites o alertas vas a configurar.
Cuándo tiene sentido
- Necesitas mapas vectoriales interactivos, estilos propios o datos geográficos sobre el mapa.
- Quieres una experiencia web con zoom, marcadores, capas o análisis visual en tiempo real.
- Tienes claro el número aproximado de cargas, búsquedas o usuarios antes de publicarlo.
Elige la ruta de integración
Qué producto revisar según el caso
| Necesidad | Ruta habitual | Qué medir |
|---|---|---|
| Mapa interactivo en una página | Mapbox GL JS | Map loads web y rendimiento WebGL |
| Mapa estático para una ficha | Static Images API o imagen generada | Peticiones por imagen y caché |
| Buscar direcciones o lugares | Search o Geocoding API | Sesiones, requests y caducidad de sesión |
| Tiles propios o datos pesados | Tilesets y hosting | Procesamiento, almacenamiento y días alojados |
Pasos antes de ponerlo en producción
- Crea un token público limitado para el frontend y no expongas tokens secretos.
- Prueba el mapa con el mismo estilo, zoom y capas que tendrá la página real.
- Mide cuántas veces se inicializa el mapa por visita y evita recargarlo sin necesidad.
- Comprueba el soporte de WebGL y prepara una alternativa si el navegador no puede renderizarlo bien.
- Revisa el panel de pricing y configura alertas o límites de uso antes de enviarlo tráfico.
Errores frecuentes con Mapbox
- Copiar un token de ejemplo y olvidarlo en el repositorio.
- Confundir token público con token secreto: el secreto no debe ir en JavaScript del navegador.
- Creer que el mapa es gratis sin revisar cargas, sesiones o peticiones de APIs adicionales.
- Inicializar varios mapas por pestaña cuando bastaba con uno.
- No probar rendimiento en móviles o navegadores sin buena aceleración WebGL.
Token, seguridad y coste
Mapbox usa access tokens para asociar las peticiones con una cuenta y controlar a qué APIs puede acceder cada token. Un token público puede estar en el frontend, pero debe estar limitado al uso previsto. Un token secreto o con permisos sensibles no debe aparecer en HTML, JavaScript público ni capturas.
Para Mapbox GL JS, el coste se entiende mejor por cargas de mapa: cada inicialización de un objeto de mapa en una página puede contar como una carga. Si además añades búsqueda, rutas, geocoding o tilesets propios, revisa las métricas específicas de esos productos. Una demo pequeña puede entrar en el tramo gratuito y una página con mucho tráfico puede dejar de hacerlo rápidamente.
Si solo necesitas una imagen o una ubicación fija, tal vez no necesitas un mapa interactivo completo. En cambio, si el usuario debe explorar datos, cambiar capas o comparar ubicaciones, Mapbox GL JS puede aportar valor real y justificar el coste.
Preguntas frecuentes
¿Mapbox es gratis?
Tiene tramos gratuitos y productos con límites concretos, pero debes revisar el pricing actual según map loads, sesiones, requests o tilesets.
¿Necesito un token para usar Mapbox?
Sí. Las herramientas, APIs y SDKs de Mapbox usan access tokens asociados a una cuenta.
¿Puedo poner el token en JavaScript?
Solo un token público y limitado. Los tokens secretos o con permisos de gestión deben quedar fuera del navegador.
¿Mapbox GL JS sirve para cualquier navegador?
Depende de WebGL y del rendimiento del dispositivo. Conviene comprobar soporte y preparar una experiencia alternativa si el navegador no lo soporta bien.
Fuentes consultadas
Fuentes y referencias
Consulta referencias útiles para ampliar o contrastar esta guía.
Siguiente lectura
Guias relacionadas para continuar
Si quieres seguir con el mismo tema, aqui tienes paginas cercanas que amplian la tecnica, comparan variantes o te llevan a la siguiente rutina.
