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.
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.