{"id":13793,"date":"2025-05-16T10:00:00","date_gmt":"2025-05-16T08:00:00","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?p=13793"},"modified":"2025-05-19T23:07:42","modified_gmt":"2025-05-19T21:07:42","slug":"leaflet-tutorial-session-6","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/","title":{"rendered":"Leaflet tutorial: session 6"},"content":{"rendered":"<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%2F05%2FInitiation-a-leaflet-seance-6-en.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%2F05%2FInitiation-a-leaflet-seance-6-en.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<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Session_objectives_Creation_of_a_mini-mapping_project\" >Session objectives: Creation of a mini-mapping project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Learning_objectives\" >Learning objectives<\/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\/en\/leaflet-tutorial-session-6\/#Suggested_mini-project_themes\" >Suggested mini-project themes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#1_Hiking_trail_map\" >1. Hiking trail map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#2_Tourist_map_of_a_village\" >2. Tourist map of a village<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#3_Public_services_location_map\" >3. Public services location map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Expected_results\" >Expected results<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Introducing_GitHub_Pages\" >Introducing GitHub Pages<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Steps_to_using_GitHub_Pages\" >Steps to using GitHub Pages :<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#1_Create_a_repository_on_GitHub\" >1. Create a repository on GitHub<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#2_Upload_or_push_your_code_into_the_repository\" >2. Upload or push your code into the repository<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Method_1_Manual_file_upload\" >Method 1: Manual file upload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Method_2_Push_your_code_from_Git\" >Method 2: Push your code from Git<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#3_Go_to_the_repository_settings_and_activate_GitHub_Pages_under_the_%E2%80%9CPages%E2%80%9D_section\" >3. Go to the repository settings and activate GitHub Pages under the \u201cPages\u201d section.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#4_Your_site_will_be_accessible_via_the_generated_URL\" >4. Your site will be accessible via the generated URL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Additional_tips\" >Additional tips:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Introducing_Netlify\" >Introducing Netlify<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Steps_to_using_Netlify\" >Steps to using Netlify :<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Create_a_Netlify_account\" >Create a Netlify account<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Connect_your_GitHub_repository\" >Connect your GitHub repository<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Select_the_project_to_deploy\" >Select the project to deploy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Netlify_will_automatically_deploy_your_site_and_generate_a_unique_URL\" >Netlify will automatically deploy your site and generate a unique URL.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Additional_tips-2\" >Additional tips:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Advantages_of_Netlify_for_hosting_your_Leaflet_map\" >Advantages of Netlify for hosting your Leaflet map :<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#Submit_your_Leaflet_project\" >Submit your Leaflet project<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/leaflet-tutorial-session-6\/#How_do_you_do_it\" >How do you do it?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Session_objectives_Creation_of_a_mini-mapping_project\"><\/span>Session objectives: Creation of a mini-mapping project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The aim of this session is to mobilize all the skills acquired in the introductory course to Leaflet to create a complete interactive map.<\/p>\n\n\n\n<p>Learners choose a theme from several mini-project proposals, and apply the technical and methodological notions they have learned in previous sessions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Learning_objectives\"><\/span>Learning objectives<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Design a coherent, interactive web map<\/li>\n\n\n\n<li>Organize geographic data (points, lines, polygons)<\/li>\n\n\n\n<li>Handle events and interactivity (clicks, hovers, filters, etc.)<\/li>\n\n\n\n<li>Integrate a user interface (menus, filters, legends, etc.)<\/li>\n\n\n\n<li>Publish the map in a local or online environment<\/li>\n<\/ul>\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=\"Suggested_mini-project_themes\"><\/span>Suggested mini-project themes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Hiking_trail_map\"><\/span>1. Hiking trail map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Aim: create a map showing one or more hiking routes<\/strong>.<\/p>\n\n\n\n<p><strong>Possible content:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GPX\/GeoJSON trail layouts<\/li>\n\n\n\n<li>Points of interest: trailheads, lookouts, picnic areas<\/li>\n\n\n\n<li>Illustrated popups (text + images)<\/li>\n\n\n\n<li>Hiker&rsquo;s charter (popup or link)<\/li>\n\n\n\n<li>Mini-map or scale<\/li>\n\n\n\n<li>Zoom button on the trail<\/li>\n<\/ul>\n\n\n\n<p><strong>Skills required :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Displaying lines and points<\/li>\n\n\n\n<li>Use of custom styles<\/li>\n\n\n\n<li>Adding icons and images<\/li>\n\n\n\n<li>Leaflet controls (scale, mini-map, layer control)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Tourist_map_of_a_village\"><\/span>2. Tourist map of a village<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Aim: to create an interactive map for visitors.<\/strong><\/p>\n\n\n\n<p><strong>Possible content:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Monuments, museums, accommodation, restaurants<\/li>\n\n\n\n<li>Filters by category (accommodation \/ culture \/ nature&#8230;)<\/li>\n\n\n\n<li>Descriptions and timetables in popups<\/li>\n\n\n\n<li>Add a thematic background map (e.g. OpenStreetMap Humanitarian, Topo&#8230;)<\/li>\n<\/ul>\n\n\n\n<p><strong>Skills used :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Layer groups and filterable layers<\/li>\n\n\n\n<li>Dynamic popups<\/li>\n\n\n\n<li>Integration of custom icons<\/li>\n\n\n\n<li>Legend control and interactive HTML menus<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Public_services_location_map\"><\/span>3. Public services location map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Aim: to create a map with a utilitarian purpose for residents or visitors.<\/strong><\/p>\n\n\n\n<p><strong>Possible content:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Locations of schools, hospitals, town halls, post offices, police stations<\/li>\n\n\n\n<li>Simple queries: display schools within an X km radius<\/li>\n\n\n\n<li>Routes or links to Google Maps<\/li>\n\n\n\n<li>Display schedules or contacts<\/li>\n<\/ul>\n\n\n\n<p><strong>Skills required :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Management of ad hoc data<\/li>\n\n\n\n<li>Reactions to events (click on a category \u2192 map update)<\/li>\n\n\n\n<li>Enriched popups<\/li>\n\n\n\n<li>Add drop-down menus<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Expected_results\"><\/span>Expected results<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A functional interactive map including :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A background map and geographic data layers<\/li>\n\n\n\n<li>One or more forms of interaction (clicks, menus, filters, etc.)<\/li>\n\n\n\n<li>A clean, readable and engaging layout<\/li>\n<\/ul>\n\n\n\n<p>This map can be published on a GitHub repository or integrated into a personal site or blog.g.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introducing_GitHub_Pages\"><\/span>Introducing GitHub Pages<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>GitHub Pages is a free hosting service that lets you publish a static website directly from a GitHub repository. It&rsquo;s particularly useful for hosting personal projects, portfolios, or projects such as interactive maps created with Leaflet. This service is perfect for small web projects where you need to quickly publish an online version without having to worry about setting up a server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Steps_to_using_GitHub_Pages\"><\/span>Steps to using GitHub Pages :<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Create_a_repository_on_GitHub\"><\/span>1. Create a repository on GitHub<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is a GitHub repository?\n<ul class=\"wp-block-list\">\n<li>A GitHub repository is where you store all the files related to your project. This includes HTML, CSS and JavaScript files, as well as resources such as images and data files.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>How to create a repository ?\n<ul class=\"wp-block-list\">\n<li>Log in to your GitHub account.Click on the \u201cNew\u201d or \u201cCreate a new repository\u201d button.Name your repository (for example, my-leaflet-map).If necessary, add a description of your project.Make sure the repository is public so you can make it accessible online.<\/li>\n\n\n\n<li>Once the repository has been created, GitHub will provide you with a repository URL (for example, https:\/\/github.com\/username\/cartes-leaflet).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Upload_or_push_your_code_into_the_repository\"><\/span>2. Upload or push your code into the repository<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Once your repository is created, you need to add your project files to it. There are several ways to do this, depending on your preferences.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_1_Manual_file_upload\"><\/span>Method 1: Manual file upload<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the \u201cAdd file\u201d button in your GitHub repository, then select \u201cUpload files\u201d.<\/li>\n\n\n\n<li>Drag and drop your files (HTML, CSS, JavaScript, images, etc.) into the upload window.<\/li>\n\n\n\n<li>Click on \u201cCommit changes\u201d to save the files in your repository.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_2_Push_your_code_from_Git\"><\/span>Method 2: Push your code from Git<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>If you&rsquo;re working locally with Git, you can push files directly into the repository with the following commands:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>git init<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>git add .<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>git commit -m \"Initial commit\"<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>git remote add origin https:\/\/github.com\/username\/ma-carte-leaflet.git<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\u00b7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/code><code>git push -u origin master<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Go_to_the_repository_settings_and_activate_GitHub_Pages_under_the_%E2%80%9CPages%E2%80%9D_section\"><\/span>3. Go to the repository settings and activate GitHub Pages under the \u201cPages\u201d section.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once you&rsquo;ve uploaded your project files to the repository, you&rsquo;ll need to enable GitHub Pages to publish the site online.<\/li>\n\n\n\n<li>Steps:\n<ul class=\"wp-block-list\">\n<li>Open your repository on GitHub.Go to the repository&rsquo;s \u201cSettings\u201d tab.In the side menu, scroll down to the \u201cGitHub Pages\u201d section.Under the \u201cSource\u201d heading, choose the branch from which you want to host the site. Usually, you&rsquo;ll use the \u201cmain\u201d or \u201cmaster\u201d branch.<\/li>\n\n\n\n<li>Click on the \u201cSave\u201d button to activate GitHub Pages.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>GitHub will then generate a unique URL for your website, which looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;username.github.io\/ma-carte-leaflet\/<\/code><\/pre>\n\n\n\n<p>This URL will be the public address at which your Leaflet map can be accessed.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Your_site_will_be_accessible_via_the_generated_URL\"><\/span>4. Your site will be accessible via the generated URL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Public URL: After activating GitHub Pages, the URL generated will be as follows:\n<ul class=\"wp-block-list\">\n<li>https:\/\/username.github.io\/my-card-leaflet\/<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Please note that it may take a few minutes to generate the site. You can then access your Leaflet card by opening this URL in a browser.<\/li>\n\n\n\n<li>If you wish to customize the domain name of your site, GitHub allows you to use a personalized domain name (for example, www.macarteleaflet.com) by adding a CNAME file to your repository.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Additional_tips\"><\/span>Additional tips:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Verification<\/strong>: Before making your site public, make sure that all the necessary files are correctly included in your repository, including map files, JavaScript resources (Leaflet, etc.) and CSS files.<\/li>\n\n\n\n<li><strong>Private repository<\/strong>: If you have a private repository and wish to use GitHub Pages, please note that this option is only available to paying users. However, for simple, public projects, the free version of GitHub Pages works perfectly.<\/li>\n\n\n\n<li><strong>Troubleshooting<\/strong>: If your map doesn&rsquo;t display correctly, check that all files are linked and that links to external resources (e.g. Leaflet CDN) are valid.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>With these steps, you can easily put your interactive maps created with Leaflet online. This offers a quick and easy way of sharing your projects with other users, or even deploying them on a personal server.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introducing_Netlify\"><\/span>Introducing Netlify<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>Netlify is a fast, modern hosting platform for static websites. It makes it easy to deploy, manage and host websites, with automated deployment from a Git repository (GitHub, GitLab, Bitbucket). Netlify stands out for its ease of use, continuous integration, and numerous features such as redirection management, forms, and custom domain names.<\/p>\n\n\n\n<p>With Netlify, you can deploy static websites (such as Leaflet maps), modern applications and other projects in just a few clicks. It also offers free CDN (Content Delivery Network), SSL and performance optimization services.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Steps_to_using_Netlify\"><\/span>Steps to using Netlify :<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Netlify_account\"><\/span>Create a Netlify account<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is a Netlify account?<br>A Netlify account will enable you to manage your static website deployments. You can sign up with your e-mail address, or more easily using your GitHub, GitLab or Bitbucket account.<\/li>\n\n\n\n<li>Steps to create an account:\n<ul class=\"wp-block-list\">\n<li>Go to Netlify.<\/li>\n\n\n\n<li>Click on \u00ab\u00a0Sign Up\u00a0\u00bb.<\/li>\n\n\n\n<li>Choose a registration method (e-mail or via GitHub).<\/li>\n\n\n\n<li>Follow the instructions to set up your account.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Connect_your_GitHub_repository\"><\/span>Connect your GitHub repository<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Connect to GitHub:<br>Once you&rsquo;ve created your Netlify account, you&rsquo;ll need to connect Netlify to your GitHub repository, where your project code (the Leaflet card) is stored.<\/li>\n\n\n\n<li>Steps to connect GitHub to Netlify:\n<ul class=\"wp-block-list\">\n<li>Go to your Netlify dashboard.<\/li>\n\n\n\n<li>Click on \u00ab\u00a0New Site from Git\u00a0\u00bb.<\/li>\n\n\n\n<li>Choose GitHub as your source.Netlify will ask you to authorize access to your GitHub account, which will allow it to retrieve your repositories.<\/li>\n\n\n\n<li>Select the GitHub repository containing your Leaflet project (for example, my-leaflet-map).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Select_the_project_to_deploy\"><\/span>Select the project to deploy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Project selection:<br>After connecting your GitHub account to Netlify, Netlify will display all your GitHub repositories. Select the repository containing the code for your map project.<\/li>\n\n\n\n<li>Configure project parameters:Netlify will ask you to configure deployment parameters (for example, which branch to deploy, usually main or master).If you have particular files to generate or compile before deployment (for example, if you&rsquo;re using a static site generator like Jekyll or Hugo), you can specify build commands. For a simple Leaflet project, no additional configuration is required.<\/li>\n\n\n\n<li>Click on \u00ab\u00a0Deploy Site\u00a0\u00bb to start deployment.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Netlify_will_automatically_deploy_your_site_and_generate_a_unique_URL\"><\/span>Netlify will automatically deploy your site and generate a unique URL.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Automatic deployment:<br>After selecting the repository and configuring the parameters, Netlify starts the deployment process. The site is then automatically built and published.<\/li>\n\n\n\n<li>URL generated:<br>Once deployment is complete, Netlify generates a unique URL to access your online map. The URL will typically be in the form :<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;project-name.netlify.app\/<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Example: If your project is called my-map-leaflet, the URL could be:\nhttps:&#47;&#47;my-map-leaflet.netlify.app\/<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Additional_tips-2\"><\/span>Additional tips:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Change site URL<\/strong>: If you want to use a custom domain name (e.g. www.macarteleaflet.com), you can easily set this up in the Netlify dashboard by adding a custom domain and configuring DNS.<\/p>\n\n\n\n<p><strong>Control updates<\/strong>: Netlify offers a continuous deployment system, which means that as soon as you push changes to your GitHub repository, the site will be automatically updated.<\/p>\n\n\n\n<p><strong>Performance monitoring<\/strong>: Netlify also offers tools for monitoring your site&rsquo;s performance (load time, availability, etc.).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advantages_of_Netlify_for_hosting_your_Leaflet_map\"><\/span>Advantages of Netlify for hosting your Leaflet map :<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fast, easy deployment: Publish your map in just a few clicks.<\/li>\n\n\n\n<li>CDN hosting: Netlify provides a CDN infrastructure that optimizes the loading speed of your pages.<\/li>\n\n\n\n<li>Free SSL: Every site deployed on Netlify automatically benefits from an SSL certificate (HTTPS).<\/li>\n\n\n\n<li>Static site support: Perfect for hosting Leaflet maps and other static web projects.<\/li>\n\n\n\n<li>Continuous deployment: Automate the process of updating your site as soon as you upload new changes to GitHub.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>With these steps, you can quickly upload your Leaflet map to Netlify and easily share it with others. It&rsquo;s a great way to host interactive mapping projects, without having to manage complex servers.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Submit_your_Leaflet_project\"><\/span>Submit your Leaflet project<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p>In this last session, you will have produced an individual project incorporating the main elements studied (layers, styles, interactions, controls, etc.).<\/p>\n\n\n\n<p>We invite you to share your project with us, so that we can give you personalized feedback and, if you wish, include it among the examples featured in future publications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_you_do_it\"><\/span>How do you do it?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Publish your project (code and map) on GitHub or an equivalent service, then send us the link to your repository via the form provided below.<\/p>\n\n\n\n<p>Projects will be examined according to the following criteria:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Good use of the Leaflet API<\/li>\n\n\n\n<li>Code readability and organization<\/li>\n\n\n\n<li>Visual and functional quality of the map<\/li>\n\n\n\n<li>Relevance of subject and data selected<\/li>\n<\/ul>\n\n\n\n<p>Please fill in the form below. You will receive a personalized reply within a few days.<\/p>\n\n\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f13334-o1\" lang=\"fr-FR\" dir=\"ltr\" data-wpcf7-id=\"13334\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php\/wp-json\/wp\/v2\/posts\/13793#wpcf7-f13334-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulaire de contact\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"13334\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"fr_FR\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f13334-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<p><label>Your name<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Your e-mail<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Link to GitHub repository<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-github-url\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-url wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-url\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"https:\/\/github.com\/you-name\/projet-leaflet\" value=\"\" type=\"url\" name=\"your-github-url\" \/><\/span><br \/>\n<\/label>\n<\/p>\n<p><label>Your message (optional)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span><br \/>\n<\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Send\" \/>\n<\/p><p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"_wpcf7_ak_\"><label>&#916;<textarea name=\"_wpcf7_ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"_wpcf7_ak_js\" value=\"173\"\/><script data-jetpack-boost=\"ignore\" type=\"text\/javascript\">\n\/* <![CDATA[ *\/\ndocument.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );\n\/* ]]> *\/\n<\/script>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Session objectives: Creation of a mini-mapping project The aim of this session is to mobilize all the skills acquired in the introductory course to Leaflet to create a complete interactive map. Learners choose a theme from&hellip;<\/p>\n","protected":false},"author":1,"featured_media":13803,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3015],"tags":[3154,2945,3162,3158,2036],"class_list":["post-13793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-en","tag-github-en","tag-leaflet-en","tag-mini-project","tag-netlify-en","tag-tutorial-en"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.sigterritoires.fr\/wp-content\/uploads\/2025\/05\/seance-6-en-1.jpg?fit=1280%2C720&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-3At","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13793","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=13793"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/13793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media\/13803"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=13793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=13793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}