{"id":13071,"date":"2025-04-24T10:05:25","date_gmt":"2025-04-24T08:05:25","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?p=13071"},"modified":"2025-04-22T14:05:12","modified_gmt":"2025-04-22T12:05:12","slug":"tutoriel-leaflet-session-2","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/tutoriel-leaflet-session-2\/","title":{"rendered":"Tutoriel Leaflet: session 2"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\"><em>Couches et Interactivit\u00e9 avec Leaflet<\/em><\/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-1.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-1.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<h2 class=\"wp-block-heading\">Diapo 1: <strong>Introduction aux couches (Layers)<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Les <strong>couches<\/strong> dans <a href=\"https:\/\/www.sigterritoires.fr\/index.php\/tutoriel-leaflet\/\">Leaflet<\/a> sont des objets g\u00e9ographiques que l&rsquo;on ajoute \u00e0 une carte. Il existe principalement deux types :<\/p>\n\n\n\n<p><strong>Couches de tuiles<\/strong> : Ces couches servent de fond pour la carte (par exemple, OpenStreetMap).<\/p>\n\n\n\n<p><strong>Couches vectorielles<\/strong> : Elles sont utilis\u00e9es pour ajouter des \u00e9l\u00e9ments g\u00e9ographiques tels que des points, des lignes ou des polygones.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>2: Ajouter une couche de tuiles<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Les <strong>couches de tuiles<\/strong> affichent l&rsquo;image de fond de la carte. L&rsquo;exemple montre comment ajouter une couche <strong>OpenStreetMap<\/strong> via la m\u00e9thode L.tileLayer().<\/p>\n\n\n\n<p>Exemple de code :<\/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> Les tuiles permettent de visualiser le fond de la carte tout en affichant d\u2019autres \u00e9l\u00e9ments g\u00e9ographiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>3 : Ajouter des polygones et des polylignes<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Les <strong>polygones<\/strong> et <strong>polylignes<\/strong> sont utilis\u00e9s pour ajouter des formes g\u00e9om\u00e9triques sur la carte. Les <strong>polylignes<\/strong> permettent de tracer des lignes (par exemple, des itin\u00e9raires), tandis que les <strong>polygones<\/strong> sont utilis\u00e9s pour dessiner des zones (ex. : parcs, b\u00e2timents).<\/p>\n\n\n\n<p>Exemple de polyligne :<\/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>Exemple de polygone :<\/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>Ces \u00e9l\u00e9ments peuvent \u00eatre utilis\u00e9s pour d\u00e9finir des zones d\u2019int\u00e9r\u00eat g\u00e9ographique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>4 : Popups et tooltips<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Les <strong>marqueurs<\/strong> sont utilis\u00e9s pour placer des points sur la carte, et ils peuvent \u00eatre associ\u00e9s \u00e0 des <strong>popups<\/strong> ou <strong>tooltips<\/strong>. Les popups affichent des informations d\u00e9taill\u00e9es lorsque l&rsquo;utilisateur clique sur un marqueur, tandis que les tooltips affichent des informations temporaires au survol du marqueur.<\/p>\n\n\n\n<p>Exemple de popup :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker(&#091;48.8566, 2.3522]).addTo(map)&nbsp; .bindPopup(\"Bienvenue \u00e0 Paris!\")&nbsp; .openPopup(); <\/code><\/pre>\n\n\n\n<p>Exemple de tooltip :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker(&#091;48.8566, 2.3522]).addTo(map)&nbsp; .bindTooltip(\"Paris\", { permanent: true, direction: 'top' })&nbsp; .openTooltip();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>5 : Groupes de calques (<em>LayerGroup<\/em>)<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Les <strong>groupes de calques<\/strong> sont utilis\u00e9s pour organiser plusieurs \u00e9l\u00e9ments g\u00e9ographiques sous un m\u00eame groupe. Cela permet de g\u00e9rer plus facilement l\u2019affichage ou le masquage de plusieurs objets sur la carte en une seule op\u00e9ration.<\/p>\n\n\n\n<p>Exemple de code :<\/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> Ici, les marqueurs sont ajout\u00e9s \u00e0 un groupe, ce qui facilite la gestion des \u00e9l\u00e9ments g\u00e9ographiques sur la carte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>6 : Contr\u00f4le des couches (<em>Layer Control<\/em>)<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Le <strong>contr\u00f4le des couches<\/strong> permet \u00e0 l\u2019utilisateur de choisir quelles couches afficher ou masquer sur la carte. Cela inclut la possibilit\u00e9 d\u2019activer des couches de tuiles diff\u00e9rentes ou des \u00e9l\u00e9ments vectoriels comme des marqueurs ou des polygones. Le contr\u00f4le des couches est une fonctionnalit\u00e9 cl\u00e9 pour les cartes interactives.<\/p>\n\n\n\n<p>Exemple de code :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var baseMaps = {&nbsp; \"OpenStreetMap\": osmLayer,&nbsp; \"Satellite\": satelliteLayer};<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var overlayMaps = {&nbsp; \"Marqueurs\": 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>Cela permet \u00e0 l&rsquo;utilisateur de basculer entre diff\u00e9rentes couches d&rsquo;affichage.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>7 : Ajouter une couche GeoJSON<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Le <strong>GeoJSON<\/strong> est un format de donn\u00e9es couramment utilis\u00e9 pour afficher des objets g\u00e9ographiques. Leaflet permet de charger facilement des donn\u00e9es GeoJSON et de les afficher sous forme de points, lignes ou polygones.<\/p>\n\n\n\n<p>Exemple de code :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.geoJSON(geojsonData).addTo(map);<\/code><\/pre>\n\n\n\n<p>Cela permet de superposer des donn\u00e9es g\u00e9ographiques externes directement sur la carte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Diapo <strong>8 : \u00c9v\u00e9nements utilisateur<\/strong><\/h2>\n\n\n\n<p><strong>Explication :<\/strong> Leaflet permet de g\u00e9rer des \u00e9v\u00e9nements utilisateur tels que le <strong>clic<\/strong>, le <strong>survol<\/strong> ou le <strong>glissement<\/strong> sur la carte. Ces \u00e9v\u00e9nements peuvent \u00eatre associ\u00e9s \u00e0 des actions sp\u00e9cifiques, comme afficher des informations ou effectuer des calculs.<\/p>\n\n\n\n<p>Exemple d\u2019\u00e9v\u00e9nement click sur la carte :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>map.on('click', function(e) {&nbsp; alert(\"Vous avez cliqu\u00e9 sur la carte \u00e0 \" + e.latlng);});<\/code><\/pre>\n\n\n\n<p> Cela ajoute de l\u2019interactivit\u00e9 \u00e0 la carte et permet aux utilisateurs d\u2019interagir directement avec les \u00e9l\u00e9ments g\u00e9ographiques.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Exercice S\u00e9ance 2\u2013 Gestion des couches et interactions dans Leaflet<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Objectif :<\/strong><\/h3>\n\n\n\n<p>Cr\u00e9er une carte avec plusieurs <strong>types de couches vectorielles<\/strong>, les <strong>organiser dans un groupe<\/strong>, y ajouter des <strong>popups<\/strong>, des <strong>tooltips<\/strong>, et g\u00e9rer des <strong>\u00e9v\u00e9nements utilisateur<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Fichier \u00e0 cr\u00e9er : <\/strong><code>exercice-couches.html<\/code><\/h3>\n\n\n\n<p>Dans un \u00e9diteur de texte, copiez-collez le code suivant et enregistrez le fichier avec le nom exercice-couches.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>&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><\/div><\/div><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Instructions  :<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.nasca.ovh\/downloads\/exercice-couches.html\" target=\"_blank\" rel=\"noopener nofollow\" title=\"Ouvrez le fichier HTML dans votre navigateur.\">Ouvrez le fichier HTML dans votre navigateur.<\/a><\/strong><\/li>\n\n\n\n<li><strong>Explorez les couches affich\u00e9es<\/strong> : zone verte, polyligne bleue, cercle rouge, et un polygone GeoJSON orange.<\/li>\n\n\n\n<li><strong>Utilisez le layer control<\/strong> en haut \u00e0 droite pour activer\/d\u00e9sactiver les couches.<\/li>\n\n\n\n<li><strong>Cliquez sur les objets pour voir les popups<\/strong> ; survolez-les pour voir les tooltips.<\/li>\n\n\n\n<li><strong>Ouvrez la console<\/strong> (F12) et cliquez sur la zone GeoJSON pour observer le message dans la console + zoom auto.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Modifications sugg\u00e9r\u00e9es :<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ajoutez un autre polygone GeoJSON avec un style diff\u00e9rent.<\/li>\n\n\n\n<li>Personnalisez les tooltips (ajoutez des infos utiles).<\/li>\n\n\n\n<li>Modifiez le <code>layer.on('click')<\/code> pour <strong>changer la couleur au clic<\/strong> ou <strong>ajouter un effet visuel<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.nasca.ovh\/downloads\/exercice-couches-modifie.html\" target=\"_blank\" rel=\"noopener nofollow\" title=\"Voir le r\u00e9sultat dans un nouvel onglet.\">Voir le r\u00e9sultat dans un nouvel onglet.<\/a><\/h2>\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-button__link has-vivid-cyan-blue-background-color has-background wp-element-button\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/tutoriel-leaflet-session-1\">&lt;-Session 1 : Introduction \u00e0 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\/tutoriel-leaflet-session-3\">-&gt;Session 3 : <strong><strong>Couches GeoJSON <\/strong><\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Couches et Interactivit\u00e9 avec Leaflet Diapo 1: Introduction aux couches (Layers) Explication : Les couches dans Leaflet sont des objets g\u00e9ographiques que l&rsquo;on ajoute \u00e0 une carte. Il existe principalement deux types : Couches de tuiles&hellip;<\/p>\n","protected":false},"author":1,"featured_media":13185,"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":[2929],"tags":[2999,2995,2997,2987,412,2993,2989,363,2991,2931],"class_list":["post-13071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping","tag-couches","tag-evenements","tag-interactions","tag-interactivite","tag-leaflet","tag-personnalisation","tag-points","tag-polygones","tag-polylignes","tag-programme"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/04\/seance-2.jpg?fit=1280%2C720&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3oP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13071","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=13071"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13071\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13185"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}