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: