Em essência, o Leaflet é projetado para ser leve. Dito isto, existem centenas de plugins disponíveis para ampliar e melhorar as funcionalidades dos seus mapas na web.

Hoje vamos ilustrar a adição de um plugin ao nosso mapa a partir do dia 6.

O plugin L.Control.ZoomBar adiciona um controle de zoom personalizado que nos permite desenhar uma caixa ao redor da área que queremos ampliar, bem como adicionar um botão Home para retornar à visualização inicial do mapa.

1. Instalando o Plugin

O procedimento de instalação de um plug-in do Leaflet varia. Alguns são instalados usando npm outros, colocando manualmente os arquivos. Para o plugin ZoomBar, a instalação é um processo manual.

O plugin e as instruções podem ser encontrados em:
– https://github.com/elrobis/L.Control.ZoomBar.

Depois de baixar os arquivos e colocá-los no(s) local(is) apropriado(s), adicionamos o seguinte referência ao cabeçalho do nosso arquivo HTML:

<link rel="stylesheet" type="text/css" href="stylesheets/L.Control.ZoomBar.css"/>

<script type="text/javascript" src="js/L.Control.ZoomBar.js"></script>

As imagens para o plugin ZoomBar devem ser instaladas no mesmo local que outras imagens do Leaflet, no nosso caso:

stylesheets/images

2. Configurando o Controle

Em seguida, precisamos fazer algumas modificações no nosso arquivo JavaScript. A declaração do mapa é alterada para:

var map = L.map(document.getElementById('mapDIV'), {
    center: [-20.231, -44.250],
    zoom: 9,
    zoomControl: false
});

Alteramos um pouco o centro do mapa, bem como o nível de zoom, para começarmos com uma visão mais ampla. A opção zoomControl:false desativa o controle de zoom padrão para que possamos usar o ZoomBar.

Agora tudo o que precisamos fazer é adicionar o ZoomBar no final do código JavaScript:

// Adicionando o ZoomBar
var zoom_bar = new L.Control.ZoomBar({position: 'topleft'}).addTo(map);

Observe que definimos a posição no canto superior esquerdo do mapa. Por padrão, ele ficará lá, mas isso ilustra a opção necessária para definir o local do controle. Por exemplo, se quiséssemos no canto superior direito, usaríamos:

var zoom_bar = new L.Control.ZoomBar({position: 'topright'}).addTo(map);

Com essas poucas alterações, obtemos o novo controle de zoom no canto superior esquerdo:



Clicar no botão de zoom para a área (inferior) nos permite desenhar uma caixa de zoom e aplicar zoom nela.

O botão home nos retorna para a visualização inicial.

Nota: em telas pequenas (ou seja, Mobile), o botão de zoom na área não é exibido devido ao recurso de zoom de captura do dispositivo. Se você não vir o botão inferior, é por isso.

Dê uma olhada na página Plugins do Leaflet para ver o que mais você pode achar útil.

3. O Código

Para visualizar o código-fonte completo, clique aqui.

4. YouTube

Você pode também assistir o que foi apresentado nesse post no YouTube: