Per mostrare mappe Mapbox nella tua Progressive Web App (PWA), ti servono un account Mapbox e un token di accesso pubblico. Se non hai ancora scelto il tuo servizio di mappe, leggi prima Abilitare le mappe sulla tua PWA .
La tua PWA mostra le mappe con Mapbox GL JS. Ogni mappa mostrata conta come un caricamento, valido fino a 12 ore di utilizzo di quella mappa. Mapbox richiede un browser compatibile con WebGL 2.
La tua PWA mostra le mappe con Mapbox GL JS. Ogni mappa mostrata conta come un caricamento, valido fino a 12 ore di utilizzo di quella mappa. Mapbox richiede un browser compatibile con WebGL 2.
1. Creare il tuo account Mapbox
1. Registrati su Mapbox e conferma il tuo indirizzo e-mail con il link che Mapbox ti invia (scade dopo 24 ore).
2. Nel tuo account Mapbox, apri Billing e aggiungi un metodo di pagamento. Senza, non puoi creare un token e il tuo account resta limitato a 5.000 caricamenti di mappa al mese.
Non usare il Default public token. Il tuo account include un Default public token, ma non può essere limitato al tuo dominio: la colonna URLs della pagina Tokens mostra N/A. Un token di mappa è leggibile nel codice di qualsiasi pagina web: chiunque potrebbe copiarlo e mostrare mappe fatturate sul tuo account Mapbox. Un token limitato al tuo dominio funziona solo sulla tua PWA.
Se Mapbox ti propone di rinnovare il token predefinito quando aggiungi un metodo di pagamento, quel token smette di funzionare: aggiornalo anche nel tuo back office se lo usavi.
2. Nel tuo account Mapbox, apri Billing e aggiungi un metodo di pagamento. Senza, non puoi creare un token e il tuo account resta limitato a 5.000 caricamenti di mappa al mese.
Non usare il Default public token. Il tuo account include un Default public token, ma non può essere limitato al tuo dominio: la colonna URLs della pagina Tokens mostra N/A. Un token di mappa è leggibile nel codice di qualsiasi pagina web: chiunque potrebbe copiarlo e mostrare mappe fatturate sul tuo account Mapbox. Un token limitato al tuo dominio funziona solo sulla tua PWA.
Se Mapbox ti propone di rinnovare il token predefinito quando aggiungi un metodo di pagamento, quel token smette di funzionare: aggiornalo anche nel tuo back office se lo usavi.
2. Creare un token limitato alla tua PWA
3. Apri la pagina Tokens e fai clic su "Create a token".
4. Dagli un nome, per esempio "PWA". Lascia selezionati i Public scopes predefiniti (la tua PWA ha bisogno di styles:read, fonts:read e styles:tiles) e non selezionare nessun Secret scope.
4. Dagli un nome, per esempio "PWA". Lascia selezionati i Public scopes predefiniti (la tua PWA ha bisogno di styles:read, fonts:read e styles:tiles) e non selezionare nessun Secret scope.
5. In Token restrictions > URLs, aggiungi tutti gli indirizzi della tua PWA, poi fai clic su "Add URL":
- il tuo dominio, per esempio miodominio.com. Autorizza anche i suoi sottodomini (www.miodominio.com, app.miodominio.com), quindi non aggiungere nessun *;
- il tuo indirizzo GoodBarber, per esempio miaapp.goodbarber.app, finché la tua PWA lo usa.
6. Fai clic su "Create token" e copia il nuovo token. Inizia con pk.
Attenzione: quando installi un nuovo dominio sulla tua PWA, aggiungilo agli URL di questo token (pagina Tokens, poi modifica il token), altrimenti le mappe non si caricano più su quell'indirizzo. Non incollare mai un token segreto (che inizia con sk.) nel tuo back office. Puoi seguire i tuoi caricamenti di mappa nella pagina Statistics del tuo account Mapbox.
- il tuo dominio, per esempio miodominio.com. Autorizza anche i suoi sottodomini (www.miodominio.com, app.miodominio.com), quindi non aggiungere nessun *;
- il tuo indirizzo GoodBarber, per esempio miaapp.goodbarber.app, finché la tua PWA lo usa.
6. Fai clic su "Create token" e copia il nuovo token. Inizia con pk.
Attenzione: quando installi un nuovo dominio sulla tua PWA, aggiungilo agli URL di questo token (pagina Tokens, poi modifica il token), altrimenti le mappe non si caricano più su quell'indirizzo. Non incollare mai un token segreto (che inizia con sk.) nel tuo back office. Puoi seguire i tuoi caricamenti di mappa nella pagina Statistics del tuo account Mapbox.
7. Nel tuo back office, vai al menu Impostazioni > Connessioni esterne
8. Nell'elenco dei fornitori di mappe, seleziona Mapbox GL
9. Incolla il tuo token pubblico
10. Facoltativo: incolla l'URL di uno stile creato in Mapbox Studio per personalizzare tutte le mappe della tua app (vedi sotto). Lascia il campo vuoto per usare la mappa Mapbox predefinita.
11. Fai clic su "Salva"
8. Nell'elenco dei fornitori di mappe, seleziona Mapbox GL
9. Incolla il tuo token pubblico
10. Facoltativo: incolla l'URL di uno stile creato in Mapbox Studio per personalizzare tutte le mappe della tua app (vedi sotto). Lascia il campo vuoto per usare la mappa Mapbox predefinita.
11. Fai clic su "Salva"
12. Aggiorna le impostazioni della tua app per integrare il token nella tua PWA.
3. Personalizzare le mappe con Mapbox Studio (facoltativo)
1. Crea o apri uno stile in Mapbox Studio e pubblicalo.
2. Nella pagina degli stili di Studio, fai clic sull'icona Share del tuo stile.
3. In Developer resources, copia lo Style URL. Ha questo aspetto: mapbox://styles/username/style-id.
2. Nella pagina degli stili di Studio, fai clic sull'icona Share del tuo stile.
3. In Developer resources, copia lo Style URL. Ha questo aspetto: mapbox://styles/username/style-id.
4. Incollalo in Impostazioni > Connessioni esterne per personalizzare tutte le mappe della tua app.
5. Per dare uno stile diverso a una sezione Mappe, una sezione Agenda o un widget Mappa, incolla un URL di stile nelle impostazioni della mappa del suo design. Lascia il campo vuoto per mantenere lo stile dell'app.
6. Aggiorna le impostazioni della tua PWA.
5. Per dare uno stile diverso a una sezione Mappe, una sezione Agenda o un widget Mappa, incolla un URL di stile nelle impostazioni della mappa del suo design. Lascia il campo vuoto per mantenere lo stile dell'app.
6. Aggiorna le impostazioni della tua PWA.
