Pour afficher des cartes Mapbox dans votre Progressive Web App (PWA), vous avez besoin d'un compte Mapbox et d'un token d'accès public. Si vous n'avez pas encore choisi votre service de cartographie, lisez d'abord Activer les cartes sur votre PWA .
Votre PWA affiche les cartes avec Mapbox GL JS. Chaque carte affichée compte pour un chargement, valable jusqu'à 12 heures d'utilisation de cette carte. Mapbox nécessite un navigateur compatible WebGL 2.
Votre PWA affiche les cartes avec Mapbox GL JS. Chaque carte affichée compte pour un chargement, valable jusqu'à 12 heures d'utilisation de cette carte. Mapbox nécessite un navigateur compatible WebGL 2.
1. Créer votre compte Mapbox
1. Créez un compte Mapbox et confirmez votre adresse e-mail avec le lien envoyé par Mapbox (il expire au bout de 24 heures).
2. Dans votre compte Mapbox, ouvrez Billing et ajoutez un moyen de paiement. Sans moyen de paiement, vous ne pouvez pas créer de token et votre compte reste limité à 5 000 chargements de carte par mois.
N'utilisez pas le Default public token. Votre compte est livré avec un Default public token, mais il ne peut pas être limité à votre domaine : la colonne URLs de la page Tokens affiche N/A. Un token de carte est lisible dans le code de n'importe quelle page web : n'importe qui pourrait le copier et afficher des cartes facturées sur votre compte Mapbox. Un token limité à votre domaine ne fonctionne que sur votre PWA.
Si Mapbox vous propose de renouveler le token par défaut quand vous ajoutez un moyen de paiement, ce token cesse de fonctionner : mettez-le aussi à jour dans votre back office si vous l'utilisiez.
2. Dans votre compte Mapbox, ouvrez Billing et ajoutez un moyen de paiement. Sans moyen de paiement, vous ne pouvez pas créer de token et votre compte reste limité à 5 000 chargements de carte par mois.
N'utilisez pas le Default public token. Votre compte est livré avec un Default public token, mais il ne peut pas être limité à votre domaine : la colonne URLs de la page Tokens affiche N/A. Un token de carte est lisible dans le code de n'importe quelle page web : n'importe qui pourrait le copier et afficher des cartes facturées sur votre compte Mapbox. Un token limité à votre domaine ne fonctionne que sur votre PWA.
Si Mapbox vous propose de renouveler le token par défaut quand vous ajoutez un moyen de paiement, ce token cesse de fonctionner : mettez-le aussi à jour dans votre back office si vous l'utilisiez.
2. Créer un token limité à votre PWA
3. Ouvrez la page Tokens et cliquez sur "Create a token".
4. Donnez-lui un nom, par exemple "PWA". Gardez les Public scopes cochés par défaut (votre PWA a besoin de styles:read, fonts:read et styles:tiles) et ne cochez aucun Secret scope.
4. Donnez-lui un nom, par exemple "PWA". Gardez les Public scopes cochés par défaut (votre PWA a besoin de styles:read, fonts:read et styles:tiles) et ne cochez aucun Secret scope.
5. Dans Token restrictions > URLs, ajoutez toutes les adresses de votre PWA, puis cliquez sur "Add URL" :
- votre domaine, par exemple mondomaine.com. Il autorise aussi ses sous-domaines (www.mondomaine.com, app.mondomaine.com), n'ajoutez donc aucun * ;
- votre adresse GoodBarber, par exemple monapp.goodbarber.app, tant que votre PWA l'utilise.
6. Cliquez sur "Create token" et copiez le nouveau token. Il commence par pk.
Attention : quand vous installez un nouveau domaine sur votre PWA, ajoutez-le aux URLs de ce token (page Tokens, puis modifier le token), sinon les cartes ne se chargent plus à cette adresse. Ne collez jamais un token secret (qui commence par sk.) dans votre back office. Vous pouvez suivre vos chargements de carte sur la page Statistics de votre compte Mapbox.
- votre domaine, par exemple mondomaine.com. Il autorise aussi ses sous-domaines (www.mondomaine.com, app.mondomaine.com), n'ajoutez donc aucun * ;
- votre adresse GoodBarber, par exemple monapp.goodbarber.app, tant que votre PWA l'utilise.
6. Cliquez sur "Create token" et copiez le nouveau token. Il commence par pk.
Attention : quand vous installez un nouveau domaine sur votre PWA, ajoutez-le aux URLs de ce token (page Tokens, puis modifier le token), sinon les cartes ne se chargent plus à cette adresse. Ne collez jamais un token secret (qui commence par sk.) dans votre back office. Vous pouvez suivre vos chargements de carte sur la page Statistics de votre compte Mapbox.
7. Dans votre back office, allez dans le menu Paramètres > Autres paramètres > Connexions externes
8. Dans la liste des fournisseurs de cartes, sélectionnez Mapbox GL
9. Collez votre token public
10. Facultatif : collez l'URL d'un style créé dans Mapbox Studio pour styliser toutes les cartes de votre app (voir ci-dessous). Laissez le champ vide pour garder la carte Mapbox par défaut.
11. Cliquez sur "Enregistrer"
8. Dans la liste des fournisseurs de cartes, sélectionnez Mapbox GL
9. Collez votre token public
10. Facultatif : collez l'URL d'un style créé dans Mapbox Studio pour styliser toutes les cartes de votre app (voir ci-dessous). Laissez le champ vide pour garder la carte Mapbox par défaut.
11. Cliquez sur "Enregistrer"
12. Mettez à jour les paramètres de votre app pour intégrer votre token à votre PWA.
3. Styliser vos cartes avec Mapbox Studio (facultatif)
1. Créez ou ouvrez un style dans Mapbox Studio et publiez-le.
2. Sur la page des styles de Studio, cliquez sur l'icône Share de votre style.
3. Dans Developer resources, copiez la Style URL. Elle ressemble à mapbox://styles/username/style-id.
2. Sur la page des styles de Studio, cliquez sur l'icône Share de votre style.
3. Dans Developer resources, copiez la Style URL. Elle ressemble à mapbox://styles/username/style-id.
4. Collez-la dans Paramètres > Autres paramètres > Connexions externes pour styliser toutes les cartes de votre app.
5. Pour donner un style différent à une section Carte, une section Agenda ou un widget Carte, collez une URL de style dans les réglages de carte de son design. Laissez ce champ vide pour garder le style de l'app.
6. Mettez à jour les paramètres de votre PWA.
5. Pour donner un style différent à une section Carte, une section Agenda ou un widget Carte, collez une URL de style dans les réglages de carte de son design. Laissez ce champ vide pour garder le style de l'app.
6. Mettez à jour les paramètres de votre PWA.
