Neste post vamos adicionar um botão de zoom para deslocar o mapa para um ponto na camada de trilhas.
1. Adicionando um dropdown e um botão
A primeira coisa a fazer é adicionar o elemento select e um botão ao HTML:
<select id='zoombox'> </select> <input type="button" id="zoomTo" value="Zoom to point">
Vamos preencher as opções para o elemento select usando os dados do GeoJSON.
2. Criando um dicionário e preenchendo a caixa de seleção
Em seguida, vamos percorrer a camada GeoJSON e criar um dicionário que mapeia o nome para seus dados e, em seguida, adicionar cada um deles como uma opção a um elemento select:
selectbox = document.getElementById('zoombox'); var featuremap = {}; for (var i = 0; i < trail_stops['features'].length ; i++){ feature = trail_stops['features'][i]; //console.log(feature['properties']['name']); featuremap[feature['properties']['name']] = feature['properties']; var opt = document.createElement('option'); opt.value = feature['properties']['name']; opt.innerHTML = feature['properties']['name']; selectbox.appendChild(opt); }
Veja como é o funcionamento:
- A primeira linha obtém o elemento select no HTML.
- A terceira linha declara o dicionário para manter as opções da caixa de seleção.
- Nas linhas 5 a 12, percorremos cada recurso em nossa camada GeoJSON trail_stops e preenchemos o mapa de recursos, usando o nome como a chave (linha 8).
- Remova o comentário da linha 7 se quiser ver cada recurso exibido no console JavaScript.
- As linhas 9 a 12 configuram a caixa de seleção com cada nome.
3. Ligando o botão
Precisamos configurar o evento onclick e definir uma função em nosso arquivo JavaScript para fazer o trabalho real:
document.getElementById('zoomTo').onclick = zoomToTown; function zoomToTown(){ key = selectbox.value; obj = featuremap[key]; map.setView([obj['prim_lat_d'], obj['prim_lon_1']], 9); }
Vou detalhar abaixo o que foi feito, para facilitar a sua compreensão:
- A linha 1 configura o evento onclick para chamar a função zoomToTown quando o botão é clicado.
- A linha 4 obtém o valor atual do dropdown e na linha 5, usamos para buscar o objeto.
- Usando os nomes de campo prim_lat_de, prim_lon_1, e a função map.setView para definir a visualização e o nível de zoom (15).
- O resultado nos dá o mapa com um dropdown e um botão abaixo dele. Selecione uma cidade na lista e clique no botão "Zoom to town" e o mapa será deslocado para o novo local.
4. O Código
Para obter o código completo, clique aqui.
5. YouTube
Se você quiser, pode ver esse conteúdo no YouTube: