{"id":8177,"date":"2019-04-18T07:30:12","date_gmt":"2019-04-18T10:30:12","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8177"},"modified":"2020-09-04T17:05:53","modified_gmt":"2020-09-04T20:05:53","slug":"introducao-ao-leaflet-estilos-parte-13","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/04\/18\/introducao-ao-leaflet-estilos-parte-13\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Estilos"},"content":{"rendered":"

Hoje vamos dar uma olhada em outro plugin, que nos permite alterar interativamente o estilo de recursos em nosso mapa: Leaflet.StyleEditor<\/a>. Isso ilustra como podemos personalizar nosso mapa alterando estilos dinamicamente e tamb\u00e9m serve como ponto de partida para uma personaliza\u00e7\u00e3o ainda maior.<\/p>\n

1. Instalar o plugin<\/strong><\/p>\n

A p\u00e1gina do plugin fornece informa\u00e7\u00f5es sobre como instal\u00e1-lo. Isso requer a obten\u00e7\u00e3o dos arquivos css, js e imagens, inseri-los no local adequado e, em seguida, fazer refer\u00eancia a eles em nosso arquivo HTML:<\/p>\n

\r\n  <link rel=\"stylesheet\" href=\"\/stylesheets\/leaflet.css\" \/>\r\n  <link rel=\"stylesheet\" href=\"\/stylesheets\/Leaflet.StyleEditor.min.css\" \/>\r\n  <script src=\"\/js\/leaflet.js\"><\/script>\r\n  <script src=\"\/js\/Leaflet.StyleEditor.min.js\"><\/script>\r\n<\/pre>\n
Adicionamos as linhas 2 e 4 ap\u00f3s os arquivos CSS e JavaScript do Leaflet.<\/p>\n
O plugin espera encontrar seus arquivos de imagem em um diret\u00f3rio chamado img, um n\u00edvel acima do arquivo CSS.<\/p>\n
2. Adicionar o Editor de Estilo ao Mapa<\/strong><\/p>\n
Em seguida, modificamos o c\u00f3digo JavaScript para adicionar o controle ao mapa:<\/p>\n
\r\n\/\/Initialize the StyleEditor\r\nlet styleEditor = L.control.styleEditor({\r\n    position: 'bottomleft'\r\n});\r\nmap.addControl(styleEditor)\r\n<\/pre>\n
Isso coloca o controle do editor no canto inferior esquerdo do mapa. Para fazer isso, verifique se voc\u00ea ainda n\u00e3o tem um controle posicionado l\u00e1.<\/p>\n
3. Usar o Editor de Estilo<\/strong><\/p>\n
Para us\u00e1-lo, clique na ferramenta no canto inferior esquerdo e, em seguida, clique em um recurso para exibir o editor:<\/p>\n

\n\"\"
\n<\/center><\/p>\n
Aqui n\u00f3s mudamos o estilo da linha e a largura. Brinque com o editor para ver o que voc\u00ea pode mudar para marcadores e linhas (n\u00e3o temos pol\u00edgonos no nosso mapa).<\/p>\n
Voc\u00ea pode personalizar ainda mais a configura\u00e7\u00e3o do editor de estilo:<\/p>\n
\r\n\/\/Initialize the StyleEditor\r\nlet styleEditor = L.control.styleEditor({\r\n    position: 'bottomleft',\r\n    colorRamp: ['#1abc9c', '#2ecc71', '#3498db'],\r\n    markers: ['circle-stroked', 'circle', 'square-stroked', 'square']\r\n});\r\n<\/pre>\n
Isso configura as cores e estilos de marcadores dispon\u00edveis para o editor. N\u00f3s n\u00e3o mudamos nada, ent\u00e3o o que voc\u00ea v\u00ea no mapa s\u00e3o os padr\u00f5es.<\/p>\n
4. O C\u00f3digo<\/strong><\/p>\n
Para baixar o c\u00f3digo fonte completo, clique aqui<\/a>.<\/p>\n
5. YouTube<\/strong><\/p>\n
Voc\u00ea pode tamb\u00e9m assistir o que foi apresentado nesse post no YouTube:<\/p>\n

\n