Hoje vamos dar uma olhada em outro plugin, que nos permite alterar interativamente o estilo de recursos em nosso mapa: Leaflet.StyleEditor. Isso ilustra como podemos personalizar nosso mapa alterando estilos dinamicamente e também serve como ponto de partida para uma personalização ainda maior.

1. Instalar o plugin

A página do plugin fornece informações sobre como instalá-lo. Isso requer a obtenção dos arquivos css, js e imagens, inseri-los no local adequado e, em seguida, fazer referência a eles em nosso arquivo HTML:

  <link rel="stylesheet" href="/stylesheets/leaflet.css" />
  <link rel="stylesheet" href="/stylesheets/Leaflet.StyleEditor.min.css" />
  <script src="/js/leaflet.js"></script>
  <script src="/js/Leaflet.StyleEditor.min.js"></script>

Adicionamos as linhas 2 e 4 após os arquivos CSS e JavaScript do Leaflet.

O plugin espera encontrar seus arquivos de imagem em um diretório chamado img, um nível acima do arquivo CSS.

2. Adicionar o Editor de Estilo ao Mapa

Em seguida, modificamos o código JavaScript para adicionar o controle ao mapa:

//Initialize the StyleEditor
let styleEditor = L.control.styleEditor({
    position: 'bottomleft'
});
map.addControl(styleEditor)

Isso coloca o controle do editor no canto inferior esquerdo do mapa. Para fazer isso, verifique se você ainda não tem um controle posicionado lá.

3. Usar o Editor de Estilo

Para usá-lo, clique na ferramenta no canto inferior esquerdo e, em seguida, clique em um recurso para exibir o editor:



Aqui nós mudamos o estilo da linha e a largura. Brinque com o editor para ver o que você pode mudar para marcadores e linhas (não temos polígonos no nosso mapa).

Você pode personalizar ainda mais a configuração do editor de estilo:

//Initialize the StyleEditor
let styleEditor = L.control.styleEditor({
    position: 'bottomleft',
    colorRamp: ['#1abc9c', '#2ecc71', '#3498db'],
    markers: ['circle-stroked', 'circle', 'square-stroked', 'square']
});

Isso configura as cores e estilos de marcadores disponíveis para o editor. Nós não mudamos nada, então o que você vê no mapa são os padrões.

4. O Código

Para baixar o código fonte completo, clique aqui.

5. YouTube

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