Criar o mapa
Para começar com o Mapbox, é necessário criar uma conta, caso contrário, não poderá exibir um mapa. Convido-o, portanto, a visitaro site deles para criar uma conta. Assim que a conta for ativada, terá acesso ao seu dashboard, que contém uma informação particularmente importante:
O seu access token (que deve começar porpk.).
Este access token é uma chave necessária para identificá-lo quando quiser exibir um mapa. O objetivo é duplo:
- Permite estabelecer a ligação entre o mapa e a sua conta, considerando assim as modificações que fez nos mapas da sua conta Mapbox. Pode, por exemplo, criar estilos personalizados através dostudio, que são privados por padrão e não poderiam ser encontrados se utilizasse a chave de outra pessoa.
- Também permite contabilizar o número de mapas exibidos para fins estatísticos e de faturação.
O Mapbox oferece 50 000 carregamentos de mapas por mês, o que é suficiente na maioria dos casos. No entanto, se criar um site que rapidamente ultrapasse as 50 000 visitas na página onde está o mapa (o que é difícil de alcançar), terá de pagar 5$ por cada 1000 visualizações adicionais, após as 50 000 gratuitas.
Também existem alternativas ao Mapbox que podem ser mais económicas para volumes elevados de exibição. Além disso, isso não impede que desenvolva o mapa com as ferramentas do Mapbox, utilizando outra API para a exibição.
Vamos a isso, vamos exibir o nosso primeiro mapa!
Vou explicar passo a passo como fazê-lo, mas não se preocupe, o código final está no final da página!
Abra o ficheiro que contém o código HTML da sua página ou, no WordPress, edite a página onde pretende adicionar o mapa, adicionando um bloco Custom HTML, e insira o seguinte conteúdo:
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
<div id="map" style="height: 500px; width: 100%"></div>
<script>
mapboxgl.accessToken = 'Não se esqueça de substituir isto pelo seu Access Token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [2, 45],
zoom: 2
});
</script>
Guarde, visualize e… tadaaaa 🎉 !
Deverá ver o mapa a aparecer na página.
O seu primeiro mapa no seu site com Mapbox
Se analisarmos este código, temos:
- Duas linhas para carregar os recursos necessários para o funcionamento do mapa:
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
Note que a posição dessas linhas influencia o tempo de carregamento da sua página. Elas devem idealmente ser colocadas no final do <body> do seu site. - Uma linha para inserir o mapa na página, contendo também o estilo do contêiner do mapa (500px de altura e 100% da largura):
<div id="map" style="height: 500px; width: 100%"></div>
- E por fim, um script no qual executamos o código que carrega o mapa:
<script>
mapboxgl.accessToken = 'Não se esqueça de substituir isto pelo seu Access Token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [2, 45],
zoom: 2
});
</script>
Não se esqueça de substituir o texto pelo seu access token, caso contrário, o mapa não será carregado.
Os parâmetros passados para a funçãomapboxgl.Map podem ser alterados:
- container: deve ser o mesmo que o ID do elemento onde o seu mapa será inserido (ver acima).
- style: é o estilo do seu mapa. Pode personalizar os seus mapas criando novos no Mapbox Studio. Por padrão, há 4 ou 5 estilos disponíveis. Pré-visualize-os aqui.
- center: é o centro padrão do mapa. O primeiro número
(2) corresponde à longitude, e o segundo (45) corresponde à latitude. - zoom: é o nível de zoom padrão, que deve estar entre0, que é o nível de zoom mais afastado, e20, que é o mais próximo.
No nível de zoom 20, você está ao nível de uma habitação, portanto, para visualizar viagens pelo mundo, o zoom ideal situa-se entre 1 e 3.
