{"id":8147,"date":"2019-04-15T07:30:39","date_gmt":"2019-04-15T10:30:39","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8147"},"modified":"2020-09-04T17:05:21","modified_gmt":"2020-09-04T20:05:21","slug":"introducao-ao-leaflet-plugins-parte-11","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/15\/introducao-ao-leaflet-plugins-parte-11\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Plugins"},"content":{"rendered":"

Em ess\u00eancia, o Leaflet<\/a> \u00e9 projetado para ser leve. Dito isto, existem centenas de plugins dispon\u00edveis<\/a> para ampliar e melhorar as funcionalidades dos seus mapas na web.<\/p>\n

Hoje vamos ilustrar a adi\u00e7\u00e3o de um plugin ao nosso mapa a partir do dia 6<\/a>.<\/p>\n

O plugin L.Control.ZoomBar<\/a> adiciona um controle de zoom personalizado que nos permite desenhar uma caixa ao redor da \u00e1rea que queremos ampliar, bem como adicionar um bot\u00e3o Home para retornar \u00e0 visualiza\u00e7\u00e3o inicial do mapa.<\/p>\n

1. Instalando o Plugin<\/strong><\/p>\n

O procedimento de instala\u00e7\u00e3o de um plug-in do Leaflet varia. Alguns s\u00e3o instalados usando npm outros, colocando manualmente os arquivos. Para o plugin ZoomBar, a instala\u00e7\u00e3o \u00e9 um processo manual.<\/p>\n

O plugin e as instru\u00e7\u00f5es podem ser encontrados em:
\n – https:\/\/github.com\/elrobis\/L.Control.ZoomBar<\/a>. <\/p>\n

Depois de baixar os arquivos e coloc\u00e1-los no(s) local(is) apropriado(s), adicionamos o seguinte refer\u00eancia ao cabe\u00e7alho do nosso arquivo HTML:<\/p>\n

\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"stylesheets\/L.Control.ZoomBar.css\"\/>\r\n\r\n<script type=\"text\/javascript\" src=\"js\/L.Control.ZoomBar.js\"><\/script>\r\n<\/pre>\n
As imagens para o plugin ZoomBar devem ser instaladas no mesmo local que outras imagens do Leaflet, no nosso caso:<\/p>\n
stylesheets\/images<\/em><\/p>\n
2. Configurando o Controle<\/strong><\/p>\n
Em seguida, precisamos fazer algumas modifica\u00e7\u00f5es no nosso arquivo JavaScript. A declara\u00e7\u00e3o do mapa \u00e9 alterada para:<\/p>\n
\r\nvar map = L.map(document.getElementById('mapDIV'), {\r\n    center: [-20.231, -44.250],\r\n    zoom: 9,\r\n    zoomControl: false\r\n});\r\n<\/pre>\n
Alteramos um pouco o centro do mapa, bem como o n\u00edvel de zoom, para come\u00e7armos com uma vis\u00e3o mais ampla. A op\u00e7\u00e3o zoomControl:false<\/em> desativa o controle de zoom padr\u00e3o para que possamos usar o ZoomBar<\/em>.<\/p>\n
Agora tudo o que precisamos fazer \u00e9 adicionar o ZoomBar <\/em>no final do c\u00f3digo JavaScript:<\/p>\n
\r\n\/\/ Adicionando o ZoomBar\r\nvar zoom_bar = new L.Control.ZoomBar({position: 'topleft'}).addTo(map);\r\n<\/pre>\n
Observe que definimos a posi\u00e7\u00e3o no canto superior esquerdo do mapa. Por padr\u00e3o, ele ficar\u00e1 l\u00e1, mas isso ilustra a op\u00e7\u00e3o necess\u00e1ria para definir o local do controle. Por exemplo, se quis\u00e9ssemos no canto superior direito, usar\u00edamos:<\/p>\n
\r\nvar zoom_bar = new L.Control.ZoomBar({position: 'topright'}).addTo(map);\r\n<\/pre>\n
Com essas poucas altera\u00e7\u00f5es, obtemos o novo controle de zoom no canto superior esquerdo:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Clicar no bot\u00e3o de zoom para a \u00e1rea (inferior) nos permite desenhar uma caixa de zoom e aplicar zoom nela.<\/p>\n
O bot\u00e3o home nos retorna para a visualiza\u00e7\u00e3o inicial.<\/p>\n
Nota: em telas pequenas (ou seja, Mobile), o bot\u00e3o de zoom na \u00e1rea n\u00e3o \u00e9 exibido devido ao recurso de zoom de captura do dispositivo. Se voc\u00ea n\u00e3o vir o bot\u00e3o inferior, \u00e9 por isso.<\/p>\n
D\u00ea uma olhada na p\u00e1gina Plugins do Leaflet<\/a> para ver o que mais voc\u00ea pode achar \u00fatil.<\/p>\n
3. O C\u00f3digo<\/strong><\/p>\n
Para visualizar o c\u00f3digo-fonte completo, clique aqui<\/a>.<\/p>\n
4. YouTube<\/strong><\/p>\n
Voc\u00ea pode tamb\u00e9m assistir o que foi apresentado nesse post no YouTube:<\/p>\n

\n