Para mostrar mapas de Mapbox en tu Progressive Web App (PWA), necesitas una cuenta de Mapbox y un token de acceso público. Si aún no has elegido tu servicio de mapas, lee primero Activar los mapas en tu PWA .
Tu PWA muestra los mapas con Mapbox GL JS. Cada mapa mostrado cuenta como una carga, válida hasta 12 horas de uso de ese mapa. Mapbox necesita un navegador compatible con WebGL 2.
Tu PWA muestra los mapas con Mapbox GL JS. Cada mapa mostrado cuenta como una carga, válida hasta 12 horas de uso de ese mapa. Mapbox necesita un navegador compatible con WebGL 2.
1. Crear tu cuenta de Mapbox
1. Regístrate en Mapbox y confirma tu dirección de correo electrónico con el enlace que te envía Mapbox (caduca a las 24 horas).
2. En tu cuenta de Mapbox, abre Billing y añade un método de pago. Sin él, no puedes crear un token y tu cuenta queda limitada a 5 000 cargas de mapa al mes.
No uses el Default public token. Tu cuenta incluye un Default public token, pero no se puede limitar a tu dominio: la columna URLs de la página Tokens muestra N/A. Un token de mapa se puede leer en el código de cualquier página web: cualquiera podría copiarlo y mostrar mapas facturados a tu cuenta de Mapbox. Un token limitado a tu dominio solo funciona en tu PWA.
Si Mapbox te propone renovar el token por defecto al añadir un método de pago, ese token deja de funcionar: actualízalo también en tu back office si lo usabas.
2. En tu cuenta de Mapbox, abre Billing y añade un método de pago. Sin él, no puedes crear un token y tu cuenta queda limitada a 5 000 cargas de mapa al mes.
No uses el Default public token. Tu cuenta incluye un Default public token, pero no se puede limitar a tu dominio: la columna URLs de la página Tokens muestra N/A. Un token de mapa se puede leer en el código de cualquier página web: cualquiera podría copiarlo y mostrar mapas facturados a tu cuenta de Mapbox. Un token limitado a tu dominio solo funciona en tu PWA.
Si Mapbox te propone renovar el token por defecto al añadir un método de pago, ese token deja de funcionar: actualízalo también en tu back office si lo usabas.
2. Crear un token limitado a tu PWA
3. Abre la página Tokens y haz clic en "Create a token".
4. Dale un nombre, por ejemplo "PWA". Deja marcados los Public scopes por defecto (tu PWA necesita styles:read, fonts:read y styles:tiles) y no marques ningún Secret scope.
4. Dale un nombre, por ejemplo "PWA". Deja marcados los Public scopes por defecto (tu PWA necesita styles:read, fonts:read y styles:tiles) y no marques ningún Secret scope.
5. En Token restrictions > URLs, añade todas las direcciones de tu PWA y haz clic en "Add URL":
- tu dominio, por ejemplo midominio.com. También autoriza sus subdominios (www.midominio.com, app.midominio.com), así que no añadas ningún *;
- tu dirección de GoodBarber, por ejemplo miapp.goodbarber.app, mientras tu PWA la use.
6. Haz clic en "Create token" y copia el nuevo token. Empieza por pk.
Atención: cuando instales un nuevo dominio en tu PWA, añádelo a las URLs de este token (página Tokens y después editar el token), si no los mapas dejarán de cargarse en esa dirección. Nunca pegues un token secreto (que empieza por sk.) en tu back office. Puedes seguir tus cargas de mapa en la página Statistics de tu cuenta de Mapbox.
- tu dominio, por ejemplo midominio.com. También autoriza sus subdominios (www.midominio.com, app.midominio.com), así que no añadas ningún *;
- tu dirección de GoodBarber, por ejemplo miapp.goodbarber.app, mientras tu PWA la use.
6. Haz clic en "Create token" y copia el nuevo token. Empieza por pk.
Atención: cuando instales un nuevo dominio en tu PWA, añádelo a las URLs de este token (página Tokens y después editar el token), si no los mapas dejarán de cargarse en esa dirección. Nunca pegues un token secreto (que empieza por sk.) en tu back office. Puedes seguir tus cargas de mapa en la página Statistics de tu cuenta de Mapbox.
7. En tu back office, ve al menú Ajustes > Conexiones externas
8. En la lista de proveedores de mapas, selecciona Mapbox GL
9. Pega tu token público
10. Opcional: pega la URL de un estilo creado en Mapbox Studio para dar estilo a todos los mapas de tu app (ver más abajo). Deja el campo vacío para usar el mapa de Mapbox por defecto.
11. Haz clic en "Guardar"
8. En la lista de proveedores de mapas, selecciona Mapbox GL
9. Pega tu token público
10. Opcional: pega la URL de un estilo creado en Mapbox Studio para dar estilo a todos los mapas de tu app (ver más abajo). Deja el campo vacío para usar el mapa de Mapbox por defecto.
11. Haz clic en "Guardar"
12. Actualiza los ajustes de tu app para integrar tu token en tu PWA.
3. Dar estilo a tus mapas con Mapbox Studio (opcional)
1. Crea o abre un estilo en Mapbox Studio y publícalo.
2. En la página de estilos de Studio, haz clic en el icono Share de tu estilo.
3. En Developer resources, copia la Style URL. Tiene este aspecto: mapbox://styles/username/style-id.
2. En la página de estilos de Studio, haz clic en el icono Share de tu estilo.
3. En Developer resources, copia la Style URL. Tiene este aspecto: mapbox://styles/username/style-id.
4. Pégala en Ajustes > Conexiones externas para dar estilo a todos los mapas de tu app.
5. Para dar un estilo propio a una sección Mapas, una sección Agenda o un widget Mapa, pega una URL de estilo en los ajustes de mapa de su diseño. Deja ese campo vacío para mantener el estilo de la app.
6. Actualiza los ajustes de tu PWA.
5. Para dar un estilo propio a una sección Mapas, una sección Agenda o un widget Mapa, pega una URL de estilo en los ajustes de mapa de su diseño. Deja ese campo vacío para mantener el estilo de la app.
6. Actualiza los ajustes de tu PWA.
