{"id":8086,"date":"2019-04-04T07:30:57","date_gmt":"2019-04-04T10:30:57","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8086"},"modified":"2020-09-04T16:58:59","modified_gmt":"2020-09-04T19:58:59","slug":"introducao-ao-leaflet-zoom-parte-8","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/04\/introducao-ao-leaflet-zoom-parte-8\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet – Zoom"},"content":{"rendered":"

Neste post vamos adicionar um bot\u00e3o de zoom para deslocar o mapa para um ponto na camada de trilhas.<\/p>\n

1. Adicionando um dropdown e um bot\u00e3o<\/strong><\/p>\n

A primeira coisa a fazer \u00e9 adicionar o elemento select e um bot\u00e3o ao HTML:<\/p>\n

\r\n  <select id='zoombox'>\r\n  <\/select>\r\n  <input type=\"button\" id=\"zoomTo\" value=\"Zoom to point\">\r\n<\/pre>\n
Vamos preencher as op\u00e7\u00f5es para o elemento select usando os dados do GeoJSON.<\/p>\n
2. Criando um dicion\u00e1rio e preenchendo a caixa de sele\u00e7\u00e3o<\/strong><\/p>\n
Em seguida, vamos percorrer a camada GeoJSON e criar um dicion\u00e1rio que mapeia o nome para seus dados e, em seguida, adicionar cada um deles como uma op\u00e7\u00e3o a um elemento select:<\/p>\n
\r\n  selectbox = document.getElementById('zoombox');\r\n\r\n  var featuremap = {};\r\n\r\n  for (var i = 0; i < trail_stops['features'].length ; i++){\r\n      feature = trail_stops['features'][i];\r\n      \/\/console.log(feature['properties']['name']);\r\n      featuremap[feature['properties']['name']] = feature['properties'];\r\n      var opt = document.createElement('option');\r\n      opt.value = feature['properties']['name'];\r\n      opt.innerHTML = feature['properties']['name'];\r\n      selectbox.appendChild(opt);\r\n\r\n  }\r\n<\/pre>\n
Veja como \u00e9 o funcionamento:<\/p>\n
 - A primeira linha obt\u00e9m o elemento select no HTML.<\/p>\n
 - A terceira linha declara o dicion\u00e1rio para manter as op\u00e7\u00f5es da caixa de sele\u00e7\u00e3o.<\/p>\n
 - 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).<\/p>\n
 - Remova o coment\u00e1rio da linha 7 se quiser ver cada recurso exibido no console JavaScript.<\/p>\n
 - As linhas 9 a 12 configuram a caixa de sele\u00e7\u00e3o com cada nome.<\/p>\n
3. Ligando o bot\u00e3o<\/strong><\/p>\n
Precisamos configurar o evento onclick<\/em> e definir uma fun\u00e7\u00e3o em nosso arquivo JavaScript para fazer o trabalho real:<\/p>\n
\r\ndocument.getElementById('zoomTo').onclick = zoomToTown;\r\n\r\nfunction zoomToTown(){\r\n    key = selectbox.value;\r\n    obj = featuremap[key];\r\n    map.setView([obj['prim_lat_d'], obj['prim_lon_1']], 9);\r\n}\r\n<\/pre>\n
Vou detalhar abaixo o que foi feito, para facilitar a sua compreens\u00e3o:<\/p>\n
 - A linha 1 configura o evento onclick <\/em>para chamar a fun\u00e7\u00e3o zoomToTown <\/em>quando o bot\u00e3o \u00e9 clicado.<\/p>\n
 - A linha 4 obt\u00e9m o valor atual do dropdown e na linha 5, usamos para buscar o objeto.<\/p>\n
 - Usando os nomes de campo prim_lat_de, prim_lon_1, e a fun\u00e7\u00e3o map.setView para definir a visualiza\u00e7\u00e3o e o n\u00edvel de zoom (15).<\/p>\n
 - O resultado nos d\u00e1 o mapa com um dropdown e um bot\u00e3o abaixo dele. Selecione uma cidade na lista e clique no bot\u00e3o \"Zoom to town\" e o mapa ser\u00e1 deslocado para o novo local.<\/p>\n

\n\"\"
\n<\/center><\/p>\n
4. O C\u00f3digo<\/strong><\/p>\n
Para obter o c\u00f3digo completo, clique aqui<\/a>.<\/p>\n
5. YouTube<\/strong><\/p>\n
Se voc\u00ea quiser, pode ver esse conte\u00fado no YouTube:<\/p>\n

\n