Para exibir mapas Mapbox no seu Progressive Web App (PWA), você precisa de uma conta Mapbox e de um token de acesso público. Se ainda não escolheu o seu serviço de mapas, leia primeiro Ativar mapas no seu PWA .
O seu PWA exibe os mapas com o Mapbox GL JS. Cada mapa exibido conta como um carregamento, válido por até 12 horas de uso desse mapa. O Mapbox exige um navegador compatível com WebGL 2.
O seu PWA exibe os mapas com o Mapbox GL JS. Cada mapa exibido conta como um carregamento, válido por até 12 horas de uso desse mapa. O Mapbox exige um navegador compatível com WebGL 2.
1. Criar a sua conta Mapbox
1. Cadastre-se no Mapbox e confirme o seu endereço de e-mail com o link enviado pelo Mapbox (ele expira após 24 horas).
2. Na sua conta Mapbox, abra Billing e adicione um método de pagamento. Sem ele, você não pode criar um token e a sua conta fica limitada a 5.000 carregamentos de mapa por mês.
Não use o Default public token. A sua conta vem com um Default public token, mas ele não pode ser limitado ao seu domínio: a coluna URLs da página Tokens mostra N/A. Um token de mapa pode ser lido no código de qualquer página web: qualquer pessoa poderia copiá-lo e exibir mapas cobrados na sua conta Mapbox. Um token limitado ao seu domínio só funciona no seu PWA.
Se o Mapbox propuser renovar o token padrão quando você adicionar um método de pagamento, esse token deixa de funcionar: atualize-o também no seu back office se você o usava.
2. Na sua conta Mapbox, abra Billing e adicione um método de pagamento. Sem ele, você não pode criar um token e a sua conta fica limitada a 5.000 carregamentos de mapa por mês.
Não use o Default public token. A sua conta vem com um Default public token, mas ele não pode ser limitado ao seu domínio: a coluna URLs da página Tokens mostra N/A. Um token de mapa pode ser lido no código de qualquer página web: qualquer pessoa poderia copiá-lo e exibir mapas cobrados na sua conta Mapbox. Um token limitado ao seu domínio só funciona no seu PWA.
Se o Mapbox propuser renovar o token padrão quando você adicionar um método de pagamento, esse token deixa de funcionar: atualize-o também no seu back office se você o usava.
2. Criar um token limitado ao seu PWA
3. Abra a página Tokens e clique em "Create a token".
4. Dê um nome a ele, por exemplo "PWA". Mantenha os Public scopes marcados por padrão (o seu PWA precisa de styles:read, fonts:read e styles:tiles) e não marque nenhum Secret scope.
4. Dê um nome a ele, por exemplo "PWA". Mantenha os Public scopes marcados por padrão (o seu PWA precisa de styles:read, fonts:read e styles:tiles) e não marque nenhum Secret scope.
5. Em Token restrictions > URLs, adicione todos os endereços do seu PWA e clique em "Add URL":
- o seu domínio, por exemplo meudominio.com. Ele também autoriza os seus subdomínios (www.meudominio.com, app.meudominio.com), então não adicione nenhum *;
- o seu endereço GoodBarber, por exemplo meuapp.goodbarber.app, enquanto o seu PWA o usar.
6. Clique em "Create token" e copie o novo token. Ele começa com pk.
Atenção: quando você instalar um novo domínio no seu PWA, adicione-o às URLs deste token (página Tokens e depois editar o token), senão os mapas deixam de carregar nesse endereço. Nunca cole um token secreto (que começa com sk.) no seu back office. Você pode acompanhar os seus carregamentos de mapa na página Statistics da sua conta Mapbox.
- o seu domínio, por exemplo meudominio.com. Ele também autoriza os seus subdomínios (www.meudominio.com, app.meudominio.com), então não adicione nenhum *;
- o seu endereço GoodBarber, por exemplo meuapp.goodbarber.app, enquanto o seu PWA o usar.
6. Clique em "Create token" e copie o novo token. Ele começa com pk.
Atenção: quando você instalar um novo domínio no seu PWA, adicione-o às URLs deste token (página Tokens e depois editar o token), senão os mapas deixam de carregar nesse endereço. Nunca cole um token secreto (que começa com sk.) no seu back office. Você pode acompanhar os seus carregamentos de mapa na página Statistics da sua conta Mapbox.
7. No seu back office, acesse o menu Configurações > Conexões externas
8. Na lista de provedores de mapas, selecione Mapbox GL
9. Cole o seu token público
10. Opcional: cole a URL de um estilo criado no Mapbox Studio para estilizar todos os mapas do seu app (veja abaixo). Deixe o campo vazio para usar o mapa padrão do Mapbox.
11. Clique em "Salvar"
8. Na lista de provedores de mapas, selecione Mapbox GL
9. Cole o seu token público
10. Opcional: cole a URL de um estilo criado no Mapbox Studio para estilizar todos os mapas do seu app (veja abaixo). Deixe o campo vazio para usar o mapa padrão do Mapbox.
11. Clique em "Salvar"
12. Atualize as configurações do seu app para integrar o token ao seu PWA.
3. Estilizar os seus mapas com o Mapbox Studio (opcional)
1. Crie ou abra um estilo no Mapbox Studio e publique-o.
2. Na página de estilos do Studio, clique no ícone Share do seu estilo.
3. Em Developer resources, copie a Style URL. Ela tem este formato: mapbox://styles/username/style-id.
2. Na página de estilos do Studio, clique no ícone Share do seu estilo.
3. Em Developer resources, copie a Style URL. Ela tem este formato: mapbox://styles/username/style-id.
4. Cole-a em Configurações > Conexões externas para estilizar todos os mapas do seu app.
5. Para dar um estilo próprio a uma seção Mapas, uma seção Agenda ou um widget Mapa, cole uma URL de estilo nas configurações de mapa do seu design. Deixe esse campo vazio para manter o estilo do app.
6. Atualize as configurações do seu PWA.
5. Para dar um estilo próprio a uma seção Mapas, uma seção Agenda ou um widget Mapa, cole uma URL de estilo nas configurações de mapa do seu design. Deixe esse campo vazio para manter o estilo do app.
6. Atualize as configurações do seu PWA.
