﻿{"id":13163,"date":"2025-05-09T09:34:07","date_gmt":"2025-05-09T07:34:07","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?p=13163"},"modified":"2025-05-08T18:17:48","modified_gmt":"2025-05-08T16:17:48","slug":"tutorial-leaflet-sessao-2","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/","title":{"rendered":"Tutorial Leaflet: sess\u00e3o 2"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenu <\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Camadas_e_interatividade_com_o_Leaflet\" >Camadas e interatividade com o Leaflet<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_1_Introducao_as_camadas\" >Slide 1: Introdu\u00e7\u00e3o \u00e0s camadas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_2_Adicionando_uma_camada_de_ladrilho\" >Slide 2: Adicionando uma camada de ladrilho<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_3_Adicionando_poligonos_e_polilinhas\" >Slide 3: Adicionando pol\u00edgonos e polilinhas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_4_Popups_e_tooltips\" >Slide 4: Popups e tooltips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_5_LayerGroups\" >Slide 5 : LayerGroups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_6_Controle_de_camadas\" >Slide 6: Controle de camadas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_7_Adicionando_uma_camada_GeoJSON\" >Slide 7: Adicionando uma camada GeoJSON<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Slide_8_Eventos_do_usuario\" >Slide 8 : Eventos do usu\u00e1rio<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Sessao_de_exercicios_2-_Gerenciamento_e_interacao_de_camadas_no_Leaflet\" >Sess\u00e3o de exerc\u00edcios 2- Gerenciamento e intera\u00e7\u00e3o de camadas no Leaflet<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Objetivo\" >Objetivo:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Instrucoes\" >Instru\u00e7\u00f5es:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Alteracoes_sugeridas\" >Altera\u00e7\u00f5es sugeridas:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-2\/#Visualizar_o_resultado_em_uma_nova_guia\" >Visualizar o resultado em uma nova guia.<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Camadas_e_interatividade_com_o_Leaflet\"><\/span><em>Camadas e interatividade com o Leaflet<\/em><span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n<div class=\"ead-preview\"><div class=\"ead-document\" style=\"position: relative;padding-top: 90%\"><div class=\"ead-iframe-wrapper\"><iframe src=\"\/\/docs.google.com\/viewer?url=https%3A%2F%2Fwww.sigterritoires.fr%2Fwp-content%2Fuploads%2F2025%2F04%2FInitiation-a-leaflet-seance-2-pt.pptx&amp;embedded=true&amp;hl=en\" title=\"Document embarqu\u00e9\" class=\"ead-iframe\" style=\"width: 100%;height: 100%;border: none;position: absolute;left: 0;top: 0;visibility: hidden;\"><\/iframe><\/div>\t\t\t<div class=\"ead-document-loading\" style=\"width:100%;height:100%;position:absolute;left:0;top:0;z-index:10\">\n\t\t\t\t<div class=\"ead-loading-wrap\">\n\t\t\t\t\t<div class=\"ead-loading-main\">\n\t\t\t\t\t\t<div class=\"ead-loading\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sigterritoires.fr\/wp-content\/plugins\/embed-any-document\/images\/loading.svg\" width=\"55\" height=\"55\" alt=\"Chargeur\">\n\t\t\t\t\t\t\t<span>En cours de chargement&hellip;<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"ead-loading-foot\">\n\t\t\t\t\t\t<div class=\"ead-loading-foot-title\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sigterritoires.fr\/wp-content\/plugins\/embed-any-document\/images\/EAD-logo.svg\" alt=\"Logo EAD\" width=\"36\" height=\"23\"\/>\n\t\t\t\t\t\t\t<span>Cela prend trop de temps\u00a0?<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<div class=\"ead-document-btn ead-reload-btn\" role=\"button\">\n\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sigterritoires.fr\/wp-content\/plugins\/embed-any-document\/images\/reload.svg\" alt=\"Recharger\" width=\"12\" height=\"12\"\/> Recharger le document\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<span>|<\/span>\n\t\t\t\t\t\t\t<a href=\"https:\/\/docs.google.com\/viewer?url=https%3A%2F%2Fwww.sigterritoires.fr%2Fwp-content%2Fuploads%2F2025%2F04%2FInitiation-a-leaflet-seance-2-pt.pptx&#038;hl=en\" class=\"ead-document-btn\" target=\"_blank\">\n\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sigterritoires.fr\/wp-content\/plugins\/embed-any-document\/images\/open.svg\" alt=\"Ouvert\" width=\"12\" height=\"12\"\/> Ouvrir dans un nouvel onglet\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_1_Introducao_as_camadas\"><\/span>Slide 1: Introdu\u00e7\u00e3o \u00e0s camadas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> As camadas no Leaflet s\u00e3o objetos geogr\u00e1ficos adicionados a um mapa. H\u00e1 dois tipos principais:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Camadas de ladrilhos: s\u00e3o usadas como plano de fundo para o mapa (por exemplo, OpenStreetMap).<\/li>\n\n\n\n<li>Camadas de vetor: s\u00e3o usadas para adicionar elementos geogr\u00e1ficos, como pontos, linhas ou pol\u00edgonos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_2_Adicionando_uma_camada_de_ladrilho\"><\/span>Slide 2: Adicionando uma camada de ladrilho<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> As camadas de ladrilho exibem a imagem de fundo do mapa. O exemplo mostra como adicionar uma camada do OpenStreetMap usando o m\u00e9todo L.tileLayer().<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C\u00f3digo do exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Os blocos permitem que voc\u00ea visualize o plano de fundo do mapa enquanto exibe outros elementos geogr\u00e1ficos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_3_Adicionando_poligonos_e_polilinhas\"><\/span>Slide 3: Adicionando pol\u00edgonos e polilinhas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> Os pol\u00edgonos e as polilinhas s\u00e3o usados para adicionar formas geom\u00e9tricas ao mapa. As polilinhas s\u00e3o usadas para desenhar linhas (por exemplo, rotas), enquanto os pol\u00edgonos s\u00e3o usados para desenhar \u00e1reas (por exemplo, parques, edif\u00edcios).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de uma polilinha:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.polyline(&#091;&#091;48.8566, 2.3522], &#091;48.8569, 2.3525]]).addTo(map);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de um pol\u00edgono:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.polygon(&#091;&#091;48.8566, 2.3522], &#091;48.8569, 2.3525], &#091;48.8571, 2.3520]]).addTo(map);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esses elementos podem ser usados para definir \u00e1reas de interesse geogr\u00e1fico.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_4_Popups_e_tooltips\"><\/span>Slide 4: Popups e tooltips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o: <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os marcadores s\u00e3o usados para colocar pontos no mapa e podem ser associados a popups ou dicas de ferramentas. Os pop-ups exibem informa\u00e7\u00f5es detalhadas quando o usu\u00e1rio clica em um marcador, enquanto as dicas de ferramentas exibem informa\u00e7\u00f5es tempor\u00e1rias quando o usu\u00e1rio passa o mouse sobre o marcador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de um popup:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker(&#091;48.8566, 2.3522]).addTo(map) .bindPopup(\"Welcome to Paris!\") .openPopup();<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de um  tooltip<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker(&#091;48.8566, 2.3522]).addTo(map) .bindTooltip(\"Paris\", { permanent: true, direction: 'top' }) . openTooltip();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_5_LayerGroups\"><\/span>Slide 5 : LayerGroups<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o: <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os grupos de camadas s\u00e3o usados para organizar v\u00e1rios elementos geogr\u00e1ficos em um \u00fanico grupo. Isso facilita a exibi\u00e7\u00e3o ou oculta\u00e7\u00e3o de v\u00e1rios objetos no mapa em uma \u00fanica opera\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var markers = L.layerGroup(&#091;marker1, marker2, marker3]).addTo(map);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui, os marcadores s\u00e3o adicionados a um grupo, facilitando o gerenciamento de elementos geogr\u00e1ficos no mapa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_6_Controle_de_camadas\"><\/span>Slide 6: Controle de camadas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o: <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O controle de camadas permite que o usu\u00e1rio escolha quais camadas mostrar ou ocultar no mapa. Isso inclui a capacidade de ativar diferentes camadas de ladrilhos ou elementos vetoriais, como marcadores ou pol\u00edgonos. O controle de camadas \u00e9 um recurso fundamental para mapas interativos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var baseMaps = { \"OpenStreetMap\": osmLayer, \"Satellite\": satelliteLayer};<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var overlayMaps = { \"Markers\": markersLayer};<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>L.control.layers(baseMaps, overlayMaps).addTo(map);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permite que o usu\u00e1rio alterne entre diferentes camadas de exibi\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_7_Adicionando_uma_camada_GeoJSON\"><\/span>Slide 7: Adicionando uma camada GeoJSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> GeoJSON \u00e9 um formato de dados comumente usado para exibir objetos geogr\u00e1ficos. O Leaflet facilita o carregamento de dados GeoJSON e sua exibi\u00e7\u00e3o como pontos, linhas ou pol\u00edgonos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.geoJSON(geojsonData).addTo(map);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permite que dados geogr\u00e1ficos externos sejam sobrepostos diretamente no mapa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_8_Eventos_do_usuario\"><\/span>Slide 8 : Eventos do usu\u00e1rio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Explica\u00e7\u00e3o: <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O Leaflet permite que voc\u00ea gerencie os eventos do usu\u00e1rio, como clicar, passar o mouse ou arrastar no mapa. Esses eventos podem ser associados a a\u00e7\u00f5es espec\u00edficas, como a exibi\u00e7\u00e3o de informa\u00e7\u00f5es ou a realiza\u00e7\u00e3o de c\u00e1lculos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo de um evento de clique no mapa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>map.on('click', function(e) { alert(\"You have clicked on the map at \" + e.latlng);});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Isso adiciona interatividade ao mapa e permite que os usu\u00e1rios interajam diretamente com os elementos geogr\u00e1ficos.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sessao_de_exercicios_2-_Gerenciamento_e_interacao_de_camadas_no_Leaflet\"><\/span>Sess\u00e3o de exerc\u00edcios 2- Gerenciamento e intera\u00e7\u00e3o de camadas no Leaflet<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Objetivo\"><\/span>Objetivo:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crie um mapa com v\u00e1rios tipos de camadas vetoriais, organize-as em um grupo, adicione pop-ups e dicas de ferramentas e gerencie os eventos do usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Arquivo a ser criado: exercise-layers.html<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em um editor de texto, copie e cole o c\u00f3digo a seguir e salve o arquivo com o nome exercise-layers.html.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><div class='stb-container stb-style-download stb-caption-box'><div class='stb-caption'><div class='stb-logo'><img class='stb-logo__image' src='data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN\/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz\/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH\/w\/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA\/g88wAAKCRFRHgg\/P9eM4Ors7ONo62Dl8t6r8G\/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt\/qIl7gRoXgugdfeLZrIPQLUAoOnaV\/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl\/AV\/1s+X48\/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H\/LcL\/\/wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93\/+8\/\/UegJQCAZkmScQAAXkQkLlTKsz\/HCAAARKCBKrBBG\/TBGCzABhzBBdzBC\/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD\/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q\/pH5Z\/YkGWcNMw09DpFGgsV\/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY\/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4\/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L\/1U\/W36p\/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N\/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26\/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE\/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV\/MN8C3yLfLT8Nvnl+F30N\/I\/9k\/3r\/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt\/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi\/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a\/zYnKOZarnivN7cyzytuQN5zvn\/\/tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO\/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3\/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA\/0HIw6217nU1R3SPVRSj9Yr60cOxx++\/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3\/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX\/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8\/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb\/1tWeOT3dvfN6b\/fF9\/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR\/cGhYPP\/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF\/6i\/suuFxYvfvjV69fO0ZjRoZfyl5O\/bXyl\/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o\/2j5sfVT0Kf7kxmTk\/8EA5jz\/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5\/wAAgOkAAHUwAADqYAAAOpgAABdvkl\/FRgAADcFJREFUeNrsmnmQXNV1xn\/3Lf1eb9OzdM+qGe2DFgZFIGQIizFGBpRAgQUhmDUOqQI7qYIirtguAgHbyBUbO3FsEpcTIixMICKgsDgskYyNWGwEaLEQoA1mn+np6Z6ZXt9288d9o8E2IhKSUymXXtWrN931+vX97vnOOd93eoSUkt+FQ+N35DgO5DiQ39JhfNCbQojfeC+ia0RtC8\/zKdUclvUspVQus3hJD\/nxMfoGhwkqU3zi\/NV2NF7X+OSjD2WSDem6IJAWgKGJ2kR+fPLiNX+UrZaL45ue+XHViCbo7GijpaWVHdu3kYhH2frGTmzTQAiB5\/u4fvAba\/mgAmUczS4IIfA9j+pUIbpo4bwerLozS1b6FLtjwfJP\/sU3WnNTtVix7JgEAUnLcNPJSAlqw6X+\/W\/0nHrGa8ItbRkZHNjpNjVVP2jzjjoih3VIKE5MGF2zu1bH5yy9WrZ0n5N1zMzOgTFGXxrAK1XA80FK8APwPAuBZdrRxpbGhiWL5i6+qi0psk0L9m1u0ksP\/PzFF5+ORdu8j7ypHxSmD6eWR6nmsmJZz6KTV11y+z6v8Q\/2lURd\/0gOr1gEASBACAUiEBAEClQQQAB4EnyJmUgxb14ny+emJhdEhp7a9Oj6r7z82vbdlqGjadoRUeuIgFimQaXqcO6qVZfPP++P7970zviCvXv2EggDYgkQEiRhFMK\/gzAivgShhfVFqKsPeGDE6jj1lKV8+pTY3lf+\/e9v+4+NTz1sGTpSSpxjDUQHIgL90muuvTl65pV3\/dvz22Pl0QHwqmqBdh1omtp1yftASBUFCUgdhD4DBB00AzQbtCQdJ53IFy9bUHln\/V\/f\/t17f\/BtobbgsIAcdvnVBNql11x7q7HqhrXrt\/bFyq4Ltg1GBHwPnKpa7K9uSUgzDTQLTAuMXzvNOMQbobmTgckodzyvRRfe9J27P3\/TDV8QR7K+w71x1YWrr01ccMOdD768z3Q8D+oaIJoEwwRdA68CgaeiIlA5IoR6rZkKsG6BFlGgtBBErAHqZ0FmNjS3MZ6rcMcjA+aCq+6647I1l15\/TIEsnNu1fPEVf\/61B7b2216tBpapAMTqwIqCpgMBuI56pBAc5JcIgei2AqJH1GnGQhDt0NQJdRnFX1Ekv38\/X3\/kHfvsz962dkn33BXHBIita6k1N976lScOVNvL+TxYEbU4ISBiQaIhBKNB4IAMFO\/F+2hlRn6VVmZ0BkS6E1Jp0CRUJ6A4BrLE8N5e1m+tNt\/wl3d+LaJRd9RAzr\/o4iv3pntW7enPqcV6rtps3QijkoREWi2QAHxXRUDTFRjdACMKhq0iEYlCvAEa2iHTCXXNoAmoFmBqFKbyUKtCRPCL7ft5W19yzqcvv\/yqowLSEDXTs89aff2W\/ZMRKXTQTdUXPE+BMUy104l6RQ3DVGCmaRcJIxCJQTSuSnS8HhrboLkTUs1qBZVxmByFYgGcmqp8AgLf55lt2Uj32Zdc15CwMkcMZLr4nnb2OasGY3NOGslOQuCD1ELa6ApMEIBpQiwO9RlIpsE01FlzYXAA+nphYBgGRqEqoKkDWmere5FQzYcg8uBUQPozC9AE\/UN5ekVHz2lnnPVJAP0QUsY4hPpAB635hGXn7iiaUemEVPJDBaELRR3fn8kBTVfn2ADs3UU608Q5n+gJfq+7q2hEkuweLie39DliXxHIpBSdSuMwOQKlvIoE8mDFRqrK51Wr7B4OYiuWnf4p45n\/3uBJ6R+R1upsb+5KdC1ZPjRUUHmhh7yXngLkS1V28VUuWLb68vwEl328x7vzxst3z25t3O041UKlUsZz\/fqi0Jf+8w5v0Xef7dXdhAVuXtHJdZQqQMxEIwjRiIDBbJFgVueSlkx9+0C20HdEQKxEalb\/hN+RHehXOy+tsGfoICKqZ7ieAumbIAX09XLN6tO9H9y8ZrOpadt937ftaMw2IlHGstmRYGL8vS+ubBwW1eCcbz28UyedVJ9HqggRyhv5vqjogqHcBOX5mXnp1vZ5hwKiHQpdqr5pbtUVLf5oPxRzMDEGk+NQmoRqRckOEYHAAC+AwX46jTJ3XX3udsvQt2u6niyVy9ozzz777qZNmw7ohqEnG9PJ4aHc63+2IrVzaaMLY7kwp3QwNBVhXczQiwC0AK84RWDVZ1pa2+dHxBHI+PbWNM2tbe0emqBcBGmDqIKhQyXs0tN9wTRVjozkuOSiE91ZDfFfOq5re57v33LLLU+88MILL0spWbly5elr1679w3hdg21r3q4LTuk4cdejbxs0N4AIVbEfyn4pFX0DBwIXfJeJsosVT2Yy6frDr1rxRBzTsut8N1C77fvqwbUa1EpQmlDRKYxCIQfj41Aq0t3ZUiqWSmXTjMQefvjhnevWrXs+lUpN1tXVTT700EPPb968eXdbW2scoU0snF0\/RSwOEQNMoapV4IDngF8BWQXpKpCapOh4eGh2Ll84fCD7DvQKTdc06fvKR\/jB+67Tpw+uD46jzkBD001ZLleo1WpaLpcrtbe312zbJpFI0N3d7dRqtXIsFtNsOyo14fqYDkQkmBI0XxUS6QAuCB90qShnGkhdBylFzUMcNrUcX0rfccqGJpTkkHJGemtGqJ1CEWjaYCchoTFWFvHAd+yR0dHKeeedd1JbW9uSe++9902AtWvXLlq2bNlix3EqqWQyvufA1iQTg+CmVNWLWWCb4QZ5SiH4QWjGfBJxG6EJT36Axv7QqpUdHc4m53gqH9BVH9EjKi+08KqHeWInIGPz3N5y5PpPRU7Ij2RfyLS2NS6PRP5kzZo1L5umycqVK0+fNWtWKvC93JSr9Tz3zphFRwvogXKMEUt9l9BnzJgbVsaKT6o+xlilWDhiz54bG+1tCGp5YnUNyECp14NSPIzK9NWwYXYLL40GbHyPkz8zp360f3jorVRjuu6mz33uoqhtS8dxKp7r5QzT6P76gz9esW2kBMuWQtVRKsBH5YOuK2GqaYoJToDWbBExKpPZ4cHeI9ZaTnmqvz1lDqcbGkGG0RBm6BX1UAFbilbJDDTPIuhcxB0bJuwf7qhd0JhuPNOUTiQ3MlgcHx0q6tI1y7XaGV\/6\/mMX3rPuKZtUQjWKmAmJKMQjilo6qslqEiwDYhFaZ6exykO92YH+A0cckYGBwV53vO\/t1ubuxWO5ogq5mAagK2MUTUB9M6RnQTQFEgo5nb\/63jZ7Q2dwxkUrO09ePDc9JUSZ7W\/9PLlhy87ortGqoHOhyoH8BNQnFQBfU0VEhtJfovIDQUeTRXTXuwdGsvm+IwZS8ynk3nvzxRNWrLz4l\/uyGlKbAWPYEK1TIJo6lCdxfZgcA6+Al4rxyr4R8crubTFMPQZVqGYhakDnQtX0KhOQL4Q6TVUmNA1cpXzRNZAawogwP1IJ9r7005\/VoPCRZPxrL2\/ZPD9e3d+STs8oXyOqLG6qBdIdSsK7nuopuUHIj4BbhXQjzOmCznaY1QlzFkBjE1QKKieEptTuVBEcX\/UqXSg6aeHgQkpaMnHmTR048PqLWzZ\/ZD8ykM3vGN31kyc\/fupcVal0G2IpaGiFTDskGxQd8iOQG4CJUaiVlX5ya0oMTjdTNyynTlndE4T0qVSgWFHPCQK1Iss46P1PazYZfOaxJ\/vzk9uPxiF6Gzc8eP\/HMvnd3Yvngx6HhhbIdCiX53gKxNgAFLJQKYemy1eJ7PsKgOMoCaJHVJXzQ60WhHlQqkDFC1\/Lg1ZhTlcjHxt\/8+3HfvTAOlUBjsLqFqbKuzd876v33Hh+V7W+eyEkmpX78zzIj4aRGINqWe289FUTDRuZUsdeOFExwl4B+E44hfTU\/aUK1EJL4AVEklGuaqe28W\/vvGeiWtt9LKYozitbt23c+8R37rvtmh6sTBNM1WAiC+NDSmvVyqoKSVfJjMBXC\/RcpZ2kFyqD0AIYlhoxShlqudDflGpQdiBicV1PM333ffNffvHG9scA51gAkUDuX++779vu0\/c8\/uUL01jOJAz0qSpVK4W764bRCDVT4M6o1yCcFwotVAiWUtL4KipuTUWl4iEcwRXL2ok+\/v3HHvnRA9+SMMYhZMlHGtBVXH\/v3bf\/zZfEk199\/NbzEtiiCoUC+LUQxPTi3VAnTQPxQqc3PXHUFb0MWzU9gSoCpRJmNMpnlreTefIf\/3PdPd\/4ctn19x3zafxB56iLhdf96Q1f6Dr3s9fev3nQ2rOnN1SqMxPSg5NGjbBHmBCJKAOl6+Ec21dj1kACJm1dHVxxctrJPvVP6x754f3frAVyzyEpcjRD7F8bsrSevvKUSy+6\/ubP7yy1LX7u1XdFLptH+o7a5Wm3p2nKHkdCA2boytKGQIUOdQmbMxa00+Pvf+sn6\/\/uH159bdtGCUMfRqdjBWQaTCwZs5atueLKqzM9564+UE51vjNQ1AayExSKJXw3rJZ6CMSyIGqjxywa6uK0ZOLMr9OCzlp\/X\/61p\/\/rqUceWj9RcbYD5f8tJ44lkPcfdS2NqeW\/f9bZq1KzFp0aa1t0QlHEmkfKwnb1mAg0E2maGKaGqbmyJSarca+QLR3Y8XZh385XX\/nZT58dKUy+Dkwd9o9lvyUgB38LMgWts7s6FiTqG+fokVhbfWM6bVh2DCEInGo5n8uO+dXS0FQ+9957fUN7XBg+nNL6fw3k16lnAaErI9TmOEDtcMrpMQFy\/B8GjgM5DuQ4kP+3x\/8MAHWpUzAU7qJ7AAAAAElFTkSuQmCC' alt='img'\/><\/div><div class='stb-caption-content'>exercice-couches.html<\/div><div class='stb-tool'><\/div><\/div><div class='stb-content'><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;title&gt;Exercice Couches Leaflet&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;meta charset=\"utf-8\" \/&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;style&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #map { height: 500px; width: 100%; }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;h2&gt;Gestion des couches et interactions&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;div id=\"map\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;script&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var map = L.map('map').setView(&#091;-20.2, 57.5], 10);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ Fond de carte<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>var osm = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>attribution: '\u00a9 OpenStreetMap contributors'<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }).addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var toner = L.tileLayer('https:\/\/stamen-tiles.a.ssl.fastly.net\/toner-lite\/{z}\/{x}\/{y}.png', {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; attribution: '\u00a9 Stamen'<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ <\/code><code>\u27a4 Polygone : zone<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var zone = L.polygon(&#091;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#091;-20.24, 57.48], &#091;-20.26, 57.50], &#091;-20.25, 57.52], &#091;-20.23, 57.50]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ], {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: 'green',<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fillOpacity: 0.4<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }).bindPopup(\"Zone naturelle\").bindTooltip(\"Zone verte\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ <\/code><code>\u27a4 Polyligne : trajet<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>var ligne = L.polyline([<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#091;-20.17, 57.51], &#091;-20.20, 57.54], &#091;-20.22, 57.52]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ], {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: 'blue',<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; weight: 4<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }).bindPopup(\"Trajet principal\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ <\/code><code>\u27a4 Cercle<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var cercle = L.circle(&#091;-20.19, 57.48], {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; radius: 2000,<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: 'red',<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fillOpacity: 0.3<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }).bindPopup(\"Rayon de 2 km\").bindTooltip(\"Zone d\u2019influence\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ <\/code><code>\u27a4 Couche GeoJSON<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>var geojsonData = {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"type\": \"FeatureCollection\",<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"features\": &#091;{<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"type\": \"Feature\",<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"properties\": { \"nom\": \"Zone agricole\" },<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"geometry\": {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"type\": \"Polygon\",<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"coordinates\": &#091;&#091;&#091;57.52, -20.24], &#091;57.54, -20.24], &#091;57.54, -20.22], &#091;57.52, -20.22], &#091;57.52, -20.24]]]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var geojsonLayer = L.geoJSON(geojsonData, {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style: { color: \"orange\", weight: 2, fillOpacity: 0.5 },<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onEachFeature: function (feature, layer) {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer.bindPopup(\"Nom : \" + feature.properties.nom);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layer.on(\"click\", function () {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(\"Clic sur \" + feature.properties.nom);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.fitBounds(layer.getBounds());<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ <\/code><code>\u27a4 Groupes de couches<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var couchesVecteurs = L.layerGroup(&#091;zone, ligne, cercle]);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>var couchesGeoJSON = L.layerGroup([geojsonLayer]);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ <\/code><code>\u27a4 Contr\u00f4le des calques<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fond = {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>\"OpenStreetMap\": osm,<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"Toner Lite\": toner<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var donnees = {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"Objets vectoriels\": couchesVecteurs,<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \"GeoJSON Zones\": couchesGeoJSON<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L.control.layers(fond, donnees).addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/ Ajout par d\u00e9faut<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; couchesVecteurs.addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>couchesGeoJSON.addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;&nbsp;&nbsp; &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/div><\/div><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Instrucoes\"><\/span>Instru\u00e7\u00f5es:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Abra o arquivo HTML em seu navegador.<\/li>\n\n\n\n<li>Explore as camadas exibidas: \u00e1rea verde, polilinha azul, c\u00edrculo vermelho e um pol\u00edgono GeoJSON laranja.<\/li>\n\n\n\n<li>Use o controle de camada no canto superior direito para ativar\/desativar as camadas.<\/li>\n\n\n\n<li>Clique nos objetos para ver os pop-ups; passe o mouse sobre eles para ver as dicas de ferramentas.<\/li>\n\n\n\n<li>Abra o console (F12) e clique na \u00e1rea GeoJSON para ver a mensagem no console + zoom autom\u00e1tico.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alteracoes_sugeridas\"><\/span>Altera\u00e7\u00f5es sugeridas:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adicionar outro pol\u00edgono GeoJSON com um estilo diferente.<\/li>\n\n\n\n<li>Personalizar as dicas de ferramentas (adicionar informa\u00e7\u00f5es \u00fateis).<\/li>\n\n\n\n<li>Modificar o layer.on(\u2018click\u2019) para alterar a cor ao clicar ou adicionar um efeito visual.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Visualizar_o_resultado_em_uma_nova_guia\"><\/span><a href=\"https:\/\/www.nasca.ovh\/downloads\/exercice-couches-modifie.html\" title=\"Visualizar o resultado em uma nova guia.\">Visualizar o resultado em uma nova guia.<\/a><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-buttons is-nowrap is-layout-flex wp-container-core-buttons-is-layout-8f761849 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-vivid-cyan-blue-background-color has-background wp-element-button\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-1\">&lt;-Sess\u00e3o 1: Introdu\u00e7\u00e3o ao Leaflet<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-vivid-cyan-blue-background-color has-background wp-element-button\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-3\">-&gt;Sess\u00e3o 3: Camadas GeoJSON<strong><strong> <\/strong><\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Camadas e interatividade com o Leaflet Slide 1: Introdu\u00e7\u00e3o \u00e0s camadas Explica\u00e7\u00e3o: As camadas no Leaflet s\u00e3o objetos geogr\u00e1ficos adicionados a um mapa. H\u00e1 dois tipos principais: Slide 2: Adicionando uma camada de ladrilho Explica\u00e7\u00e3o: As&hellip;<\/p>\n","protected":false},"author":1,"featured_media":13190,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3021],"tags":[3074,3088,3080,3076,3078,3082,2146,3084,3086,2809],"class_list":["post-13163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-pt","tag-camadas","tag-eventos-pt","tag-folheto","tag-interacoes","tag-interatividade","tag-personalizacao","tag-poligonos","tag-polilinhas","tag-pontos","tag-tutorial-pt"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/04\/seance-2-pt.jpg?fit=1280%2C720&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3qj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=13163"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13163\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13190"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}