{"id":13162,"date":"2025-05-02T10:07:18","date_gmt":"2025-05-02T08:07:18","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?p=13162"},"modified":"2025-05-05T17:23:19","modified_gmt":"2025-05-05T15:23:19","slug":"tutorial-leaflet-sesion-2","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/es\/tutorial-leaflet-sesion-2\/","title":{"rendered":"Tutorial Leaflet: sesi\u00f3n 2"},"content":{"rendered":"\n

<\/span>Capas e interactividad con Leaflet<\/em><\/span><\/h1>\n\n\n
<\/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…<\/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-es.pptx&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<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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\/es\/tutorial-leaflet-sesion-2\/#Capas_e_interactividad_con_Leaflet\" >Capas e interactividad con 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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_1_Introduccion_a_las_capas\" >Diapositiva 1: Introducci\u00f3n a las capas<\/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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_2_Anadir_una_capa_de_mosaico\" >Diapositiva 2: A\u00f1adir una capa de mosaico<\/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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_3_Anadir_poligonos_y_polilineas\" >Diapositiva 3 : A\u00f1adir pol\u00edgonos y polil\u00edneas<\/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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_4_Popups_y_tooltips\" >Diapositiva 4 : Popups y 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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_5_LayerGroups\" >Diapositiva 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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_6_Control_de_capas\" >Diapositiva 6: Control de capas<\/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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_7_Anadir_una_capa_GeoJSON\" >Diapositiva 7 : A\u00f1adir una capa 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\/es\/tutorial-leaflet-sesion-2\/#Diapositiva_8_Eventos_de_usuario\" >Diapositiva 8 : Eventos de usuario<\/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\/es\/tutorial-leaflet-sesion-2\/#Ejercicio_Sesion_2-_Gestion_de_capas_e_interaccion_en_Leaflet\" >Ejercicio Sesi\u00f3n 2- Gesti\u00f3n de capas e interacci\u00f3n en 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\/es\/tutorial-leaflet-sesion-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\/es\/tutorial-leaflet-sesion-2\/#Instrucciones\" >Instrucciones:<\/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\/es\/tutorial-leaflet-sesion-2\/#Cambios_sugeridos\" >Cambios sugeridos:<\/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\/es\/tutorial-leaflet-sesion-2\/#Ver_el_resultado_en_una_nueva_pestana\" >Ver el resultado en una nueva pesta\u00f1a.<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_1_Introduccion_a_las_capas\"><\/span>Diapositiva 1: Introducci\u00f3n a las capas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n:<\/strong> <\/p>\n\n\n\n<p>Las capas en Leaflet son objetos geogr\u00e1ficos que se a\u00f1aden a un mapa. Existen dos tipos principales:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Capas de mosaico: Se utilizan como fondo del mapa (por ejemplo, OpenStreetMap).<\/li>\n\n\n\n<li>Capas vectoriales: Se utilizan para a\u00f1adir elementos geogr\u00e1ficos como puntos, l\u00edneas o pol\u00edgonos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_2_Anadir_una_capa_de_mosaico\"><\/span>Diapositiva 2: A\u00f1adir una capa de mosaico<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n: <\/strong><\/p>\n\n\n\n<p>Las capas de mosaico muestran la imagen de fondo del mapa. El ejemplo muestra c\u00f3mo a\u00f1adir una capa de OpenStreetMap utilizando el m\u00e9todo L.tileLayer().<\/p>\n\n\n\n<p>C\u00f3digo de ejemplo:<\/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>Los mosaicos permiten ver el fondo del mapa mientras se muestran otros elementos geogr\u00e1ficos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_3_Anadir_poligonos_y_polilineas\"><\/span>Diapositiva 3 : A\u00f1adir pol\u00edgonos y polil\u00edneas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n : <\/strong><\/p>\n\n\n\n<p>Los pol\u00edgonos y las polil\u00edneas se utilizan para a\u00f1adir formas geom\u00e9tricas al mapa. Las polil\u00edneas se utilizan para dibujar l\u00edneas (por ejemplo, rutas), mientras que los pol\u00edgonos se utilizan para dibujar \u00e1reas (por ejemplo, parques, edificios).<\/p>\n\n\n\n<p>Ejemplo de polil\u00ednea:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.polyline([[48.8566, 2.3522], [48.8569, 2.3525]]).addTo(map);<\/code><\/pre>\n\n\n\n<p>Ejemplo de pol\u00edgono:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.polygon([[48.8566, 2.3522], [48.8569, 2.3525], [48.8571, 2.3520]]).addTo(map);<\/code><\/pre>\n\n\n\n<p>Estos elementos pueden utilizarse para definir \u00e1reas de inter\u00e9s geogr\u00e1fico.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_4_Popups_y_tooltips\"><\/span>Diapositiva 4 : Popups y tooltips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n :<\/strong><\/p>\n\n\n\n<p> Los marcadores se utilizan para situar puntos en el mapa, y pueden asociarse a popups o tooltips. Los popups muestran informaci\u00f3n detallada cuando el usuario hace clic en un marcador, mientras que los tooltips muestran informaci\u00f3n temporal cuando el usuario pasa el rat\u00f3n por encima del marcador.<\/p>\n\n\n\n<p>Ejemplo de popup:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker([48.8566, 2.3522]).addTo(map) .bindPopup(\"\u00a1Bienvenido a Par\u00eds!\") .openPopup();<\/code><\/pre>\n\n\n\n<p>Ejemplo de tooltip:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker([48.8566, 2.3522]).addTo(map) .bindTooltip(\"Par\u00eds\", { permanent: true, direction: 'top' }) . openTooltip();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_5_LayerGroups\"><\/span>Diapositiva 5 : LayerGroups<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n :<\/strong><\/p>\n\n\n\n<p> Los grupos de capas se utilizan para organizar varios elementos geogr\u00e1ficos bajo un mismo grupo. Esto facilita mostrar u ocultar varios objetos en el mapa en una sola operaci\u00f3n.<\/p>\n\n\n\n<p>Ejemplo de c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var markers = L.layerGroup([marker1, marker2, marker3]).addTo(map);<\/code><\/pre>\n\n\n\n<p>Aqu\u00ed, los marcadores se a\u00f1aden a un grupo, facilitando la gesti\u00f3n de los elementos geogr\u00e1ficos en el mapa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_6_Control_de_capas\"><\/span>Diapositiva 6: Control de capas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n: <\/strong><\/p>\n\n\n\n<p>El control de capas permite al usuario elegir qu\u00e9 capas mostrar u ocultar en el mapa. Esto incluye la posibilidad de activar diferentes capas de azulejos o elementos vectoriales como marcadores o pol\u00edgonos. El control de capas es una caracter\u00edstica clave para los mapas interactivos.<\/p>\n\n\n\n<p>Ejemplo 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>Esto permite al usuario cambiar entre diferentes capas de visualizaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_7_Anadir_una_capa_GeoJSON\"><\/span>Diapositiva 7 : A\u00f1adir una capa GeoJSON<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n : <\/strong><\/p>\n\n\n\n<p>GeoJSON es un formato de datos utilizado habitualmente para mostrar objetos geogr\u00e1ficos. Leaflet facilita la carga de datos GeoJSON y su visualizaci\u00f3n como puntos, l\u00edneas o pol\u00edgonos.<\/p>\n\n\n\n<p>C\u00f3digo de ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.geoJSON(geojsonData).addTo(map);<\/code><\/pre>\n\n\n\n<p>Esto permite superponer datos geogr\u00e1ficos externos directamente sobre el mapa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diapositiva_8_Eventos_de_usuario\"><\/span>Diapositiva 8 : Eventos de usuario<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Explicaci\u00f3n : <\/strong><\/p>\n\n\n\n<p>Leaflet le permite gestionar eventos de usuario como hacer clic, pasar el rat\u00f3n o arrastrar sobre el mapa. Estos eventos pueden asociarse a acciones espec\u00edficas, como mostrar informaci\u00f3n o realizar c\u00e1lculos.<\/p>\n\n\n\n<p>Ejemplo de un evento de clic en el mapa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>map.on('click', function(e) { alert(\"Ha hecho clic en el mapa en \" + e.latlng);});<\/code><\/pre>\n\n\n\n<p>Esto a\u00f1ade interactividad al mapa y permite a los usuarios interactuar directamente con los elementos geogr\u00e1ficos.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ejercicio_Sesion_2-_Gestion_de_capas_e_interaccion_en_Leaflet\"><\/span>Ejercicio Sesi\u00f3n 2- Gesti\u00f3n de capas e interacci\u00f3n en 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>Crear un mapa con varios tipos de capas vectoriales, organizarlas en un grupo, a\u00f1adir popups y tooltips y gestionar los eventos de usuario.<\/p>\n\n\n\n<p><strong>Fichero a crear: exercise-layers.html<\/strong><\/p>\n\n\n\n<p>En un editor de texto, copie y pegue el siguiente c\u00f3digo y guarde el fichero con el nombre exercise-layers.html.<\/p>\n\n\n\n<p><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><!DOCTYPE html><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><html><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><head><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <title>Exercice Couches Leaflet<\/title><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <meta charset=\"utf-8\" \/><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <style><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        #map { height: 500px; width: 100%; }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <\/style><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><\/head><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><body><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <h2>Gestion des couches et interactions<\/h2><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <div id=\"map\"><\/div><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <script><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var map = L.map('map').setView([-20.2, 57.5], 10);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        \/\/ Fond de carte<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        <\/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>            <\/code><code>attribution: '\u00a9 OpenStreetMap contributors'<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        }).addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        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>            attribution: '\u00a9 Stamen'<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        });<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        \/\/ <\/code><code>\u27a4 Polygone : zone<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var zone = L.polygon([<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            [-20.24, 57.48], [-20.26, 57.50], [-20.25, 57.52], [-20.23, 57.50]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        ], {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            color: 'green',<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            fillOpacity: 0.4<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        }).bindPopup(\"Zone naturelle\").bindTooltip(\"Zone verte\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        \/\/ <\/code><code>\u27a4 Polyligne : trajet<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        <\/code><code>var ligne = L.polyline([<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            [-20.17, 57.51], [-20.20, 57.54], [-20.22, 57.52]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        ], {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            color: 'blue',<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            weight: 4<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        }).bindPopup(\"Trajet principal\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        \/\/ <\/code><code>\u27a4 Cercle<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var cercle = L.circle([-20.19, 57.48], {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            radius: 2000,<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            color: 'red',<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            fillOpacity: 0.3<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        }).bindPopup(\"Rayon de 2 km\").bindTooltip(\"Zone d\u2019influence\");<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        \/\/ <\/code><code>\u27a4 Couche GeoJSON<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        <\/code><code>var geojsonData = {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            \"type\": \"FeatureCollection\",<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            \"features\": [{<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                \"type\": \"Feature\",<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                \"properties\": { \"nom\": \"Zone agricole\" },<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                \"geometry\": {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                    \"type\": \"Polygon\",<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                    \"coordinates\": [[[57.52, -20.24], [57.54, -20.24], [57.54, -20.22], [57.52, -20.22], [57.52, -20.24]]]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            }]<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        };<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var geojsonLayer = L.geoJSON(geojsonData, {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            style: { color: \"orange\", weight: 2, fillOpacity: 0.5 },<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            onEachFeature: function (feature, layer) {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                layer.bindPopup(\"Nom : \" + feature.properties.nom);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                layer.on(\"click\", function () {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                    console.log(\"Clic sur \" + feature.properties.nom);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                    map.fitBounds(layer.getBounds());<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>                });<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            }<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        });<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        \/\/ <\/code><code>\u27a4 Groupes de couches<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var couchesVecteurs = L.layerGroup([zone, ligne, cercle]);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        <\/code><code>var couchesGeoJSON = L.layerGroup([geojsonLayer]);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        \/\/ <\/code><code>\u27a4 Contr\u00f4le des calques<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var fond = {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>            <\/code><code>\"OpenStreetMap\": osm,<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            \"Toner Lite\": toner<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        };<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code> <\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        var donnees = {<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            \"Objets vectoriels\": couchesVecteurs,<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>            \"GeoJSON Zones\": couchesGeoJSON<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        };<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        L.control.layers(fond, donnees).addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        \/\/ Ajout par d\u00e9faut<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>        couchesVecteurs.addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>        <\/code><code>couchesGeoJSON.addTo(map);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>    <\/script><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><\/body><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><\/html><\/code><\/pre>\n\n\n\n<p><\/div><\/div><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Instrucciones\"><\/span>Instrucciones:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Abra el archivo HTML en su navegador.<\/li>\n\n\n\n<li>Explore las capas mostradas: \u00e1rea verde, polil\u00ednea azul, c\u00edrculo rojo y un pol\u00edgono GeoJSON naranja.<\/li>\n\n\n\n<li>Utilice el control de capas de la parte superior derecha para activar\/desactivar las capas.<\/li>\n\n\n\n<li>Haga clic en los objetos para ver las ventanas emergentes; pase el rat\u00f3n por encima para ver la informaci\u00f3n sobre herramientas.<\/li>\n\n\n\n<li>Abra la consola (F12) y haga clic en el \u00e1rea GeoJSON para ver el mensaje en la consola + 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=\"Cambios_sugeridos\"><\/span>Cambios sugeridos:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A\u00f1adir otro pol\u00edgono GeoJSON con un estilo diferente.<\/li>\n\n\n\n<li>Personalizar los tooltips (a\u00f1adir informaci\u00f3n \u00fatil).<\/li>\n\n\n\n<li>Modificar el layer.on(\u201cclick\u201d) para cambiar el color al hacer clic o a\u00f1adir un efecto visual.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ver_el_resultado_en_una_nueva_pestana\"><\/span><a href=\"https:\/\/www.nasca.ovh\/downloads\/exercice-couches-modifie.html\" title=\"Ver el resultado en una nueva pesta\u00f1a\">Ver el resultado en una nueva pesta\u00f1a<\/a>.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-buttonlink has-vivid-cyan-blue-background-color has-background wp-element-button\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/es\/tutorial-leaflet-sesion-1\"><-Sesi\u00f3n 1: Introducci\u00f3n a Leaflet<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-buttonlink has-vivid-cyan-blue-background-color has-background wp-element-button\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/es\/tutorial-leaflet-sesion-3\">->Sesi\u00f3n 3: Capas GeoJSON<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Capas e interactividad con Leaflet Diapositiva 1: Introducci\u00f3n a las capas Explicaci\u00f3n: Las capas en Leaflet son objetos geogr\u00e1ficos que se a\u00f1aden a un mapa. Existen dos tipos principales: Diapositiva 2: A\u00f1adir una capa de mosaico…<\/p>\n","protected":false},"author":1,"featured_media":13188,"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_post_was_ever_published":false,"_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":""},"categories":[3018],"tags":[2003,3032,3034,3024,2939,3030,2180,3028,3026,2032],"class_list":["post-13162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-es","tag-capas","tag-eventos","tag-interacciones","tag-interactividad","tag-leaflet-es","tag-personalizacion","tag-poligonos-es","tag-polilineas","tag-puntos","tag-tutorial"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/04\/seance-2-es.jpg?fit=1280%2C720&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3qi","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13162","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=13162"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13162\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13188"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}