{"id":13161,"date":"2025-04-25T10:06:30","date_gmt":"2025-04-25T08:06:30","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?p=13161"},"modified":"2025-04-22T14:05:58","modified_gmt":"2025-04-22T12:05:58","slug":"leaflet-tutorial-session-2","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-2\/","title":{"rendered":"Leaflet tutorial: session 2"},"content":{"rendered":"\n

Layers and interactivity with Leaflet<\/em><\/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-en.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\n<h2 class=\"wp-block-heading\">Slide 1: Introduction to Layers<\/h2>\n\n\n\n<p><strong>Explanation:<\/strong> <\/p>\n\n\n\n<p>Layers in Leaflet are geographic objects added to a map. There are two main types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tile layers: These are used as a background for the map (e.g. OpenStreetMap).<\/li>\n\n\n\n<li>Vector layers: These are used to add geographic elements such as points, lines or polygons.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 2: Adding a tile layer<\/h2>\n\n\n\n<p><strong>Explanation: <\/strong><\/p>\n\n\n\n<p>Tile layers display the background image of the map. The example shows how to add an OpenStreetMap layer via the L.tileLayer() method.<\/p>\n\n\n\n<p>Example 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>Tiles allow you to view the map background while displaying other geographic elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 3 : Adding polygons and polylines<\/h2>\n\n\n\n<p><strong>Explanation :<\/strong> <\/p>\n\n\n\n<p>Polygons and polylines are used to add geometric shapes to the map. Polylines are used to draw lines (e.g. routes), while polygons are used to draw areas (e.g. parks, buildings).<\/p>\n\n\n\n<p>Example of a polyline:<\/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>Example of a polygon:<\/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>These elements can be used to define areas of geographical interest.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 4: Popups and tooltips<\/h2>\n\n\n\n<p><strong>Explanation: <\/strong><\/p>\n\n\n\n<p>Markers are used to place points on the map, and can be associated with popups or tooltips. Popups display detailed information when the user clicks on a marker, while tooltips display temporary information when the user hovers over the marker.<\/p>\n\n\n\n<p>Popup example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker([48.8566, 2.3522]).addTo(map) .bindPopup(\"Welcome to Paris!\") .openPopup();<\/code><\/pre>\n\n\n\n<p>Tooltip example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.marker([48.8566, 2.3522]).addTo(map) .bindTooltip(\"Paris\", { permanent: true, direction: 'top' }) . openTooltip();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 5: LayerGroups<\/h2>\n\n\n\n<p><strong>Explanation: <\/strong><\/p>\n\n\n\n<p>LayerGroups are used to organize several geographic elements under a single group. This makes it easier to display or hide several objects on the map in a single operation.<\/p>\n\n\n\n<p>Code example:<\/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>Here, markers are added to a group, making it easier to manage geographic elements on the map.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 6: Layer Control<\/h2>\n\n\n\n<p><strong>Explanation: <\/strong><\/p>\n\n\n\n<p>Layer Control allows the user to choose which layers to show or hide on the map. This includes the ability to activate different tile layers or vector elements such as markers or polygons. Layer control is a key feature for interactive maps.<\/p>\n\n\n\n<p>Example code:<\/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>This allows the user to switch between different display layers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 7: Adding a GeoJSON layer<\/h2>\n\n\n\n<p><strong>Explanation: <\/strong><\/p>\n\n\n\n<p>GeoJSON is a data format commonly used to display geographic objects. Leaflet makes it easy to load GeoJSON data and display it as points, lines or polygons.<\/p>\n\n\n\n<p>Example code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>L.geoJSON(geojsonData).addTo(map);<\/code><\/pre>\n\n\n\n<p>This allows external geographic data to be superimposed directly on the map.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Slide 8: User events<\/h2>\n\n\n\n<p><strong>Explanation: <\/strong><\/p>\n\n\n\n<p>Leaflet lets you manage user events such as clicking, hovering or dragging on the map. These events can be associated with specific actions, such as displaying information or performing calculations.<\/p>\n\n\n\n<p>Example of a click event on the map:<\/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>This adds interactivity to the map and allows users to interact directly with geographic elements.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Exercise Session 2- Layer management and interaction in Leaflet<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Objective:<\/h2>\n\n\n\n<p>Create a map with several types of vector layers, organize them in a group, add popups and tooltips, and manage user events.<\/p>\n\n\n\n<p><strong>File to be created: exercise-layers.html<\/strong><\/p>\n\n\n\n<p>In a text editor, copy and paste the following code and save the file with the name exercise-layers.html.<\/p>\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-logoimage' 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\">Instructions:<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the HTML file in your browser.<\/li>\n\n\n\n<li>Explore the layers displayed: green area, blue polyline, red circle, and an orange GeoJSON polygon.<\/li>\n\n\n\n<li>Use the layer control at top right to activate\/deactivate layers.<\/li>\n\n\n\n<li>Click on objects to see popups; hover over them to see tooltips.<\/li>\n\n\n\n<li>Open the console (F12) and click on the GeoJSON area to view the message in the console + auto zoom.<\/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\">Suggested changes:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add another GeoJSON polygon with a different style.<\/li>\n\n\n\n<li>Customize tooltips (add useful info).<\/li>\n\n\n\n<li>Modify layer.on(\u2018click\u2019) to change color on click or add a visual effect.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.nasca.ovh\/downloads\/exercice-couches-modifie.html\" title=\"View the result in a new tab.\">View the result in a new tab.<\/a><\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><\/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-buttonlink has-vivid-cyan-blue-background-color has-background wp-element-button\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-1\"><-Session 1: Introduction to 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\/en\/leaflet-tutorial-session-3\">->Session 3: GeoJSON layers<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Layers and interactivity with Leaflet Slide 1: Introduction to Layers Explanation: Layers in Leaflet are geographic objects added to a map. There are two main types: Slide 2: Adding a tile layer Explanation: Tile layers display…<\/p>\n","protected":false},"author":1,"featured_media":13186,"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":[3015],"tags":[3007,3009,3011,3003,3001,2945,3013,2192,3005,2943],"class_list":["post-13161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-en","tag-customization","tag-events","tag-interactions-en","tag-interactivity","tag-layers","tag-leaflet-en","tag-points-en","tag-polygons","tag-polylines","tag-program"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/04\/seance-2-en.jpg?fit=1280%2C720&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3qh","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13161","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=13161"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13161\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13186"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}