Agrupando marcadores estilizados com o plugin L.MakiMarkers


De Belém do Pará – Brasil, chegou a seguinte dúvida: como utilizar o plugin L.MakiMarkers junto com a classe L.LayerGroup? A ideia é criar um mapa como este:

A primeira coisa a ser feita é revisar, no livro, as seções “Agrupando marcadores em camadas” (p. 38) e o capítulo “Expandindo as funcionalidades do nosso mapa” (p. 74).

Feito isso, o que temos a fazer é colocar a…

…Mão na Massa!

Faça o download do arquivo ‘mix.html’, clicando aqui (o código está comentado).

Agora, descompacte o arquivo que você baixou e salve-o na pasta ‘wm07/Leaflet.MakiMarkers’.

Perfeito! Abra o arquivo em seu navegador web e cheque se você visualiza um mapa como apresentado acima.

Tudo certo? Então, vamos seguir…

…Dissecando o código!

(A) Primeiro, nós declaramos as variáveis responsáveis por aplicar os estilos aos nossos marcadores (de acordo com o plugin L.MakiMarkers), conforme o trecho de código a seguir:

        var estilochimarrao = L.MakiMarkers.icon({
        icon: “heart”,
        color: “#ff0000”,
        size: “l”
        });

         var estiloeventosgauchos = L.MakiMarkers.icon({
         icon: “heart”,
         color: “#00a002”,
         size: “l”
         });

(B) A seguir, nós utilizamos duas novas variáveis (‘chimarrao’ e ‘eventosgauchos’) para agrupar os nossos marcadores, utilizando a classe L.layerGroup:

          var chimarrao = L.layerGroup([
          L.marker([-30.034142, -51.241201], {icon: estilochimarrao} (…)

          var eventosgauchos = L.layerGroup([
          L.marker([-30.065430, -51.235901], {icon: estiloeventosgauchos} (…)

(Dê uma olhada no código aberto em seu editor de textos. Note que em cada grupo são 03 marcadores diferentes. Note também os trechos de códigos ‘{icon: estilochimarrao}’ e ‘{icon: estiloeventosgauchos}’ – eles indicam qual o estilo dos marcadores que serão utilizados em cada um dos grupos – fazem a ligação entre os estilos declarados (A) e os marcadores (B).

(C) Por fim, nós utilizamos o controle L.control.layers, para apresentar os grupos de marcadores em nosso “controlador de camadas”:

          L.control.layers ({},{ Chimarrão!‘: chimarrao, (…)

Simples assim!

Um abraço para o pessoal de Belém!

Dúvidas sobre o livro? envie um email para contato@geotecnologias.org.