Contenu <\/p>\nToggle<\/span>

Duration: approx. 9-12 hours (divided into 6 sessions)<\/a>
- Program :<\/a><\/li>
- Expected result<\/a><\/li>
- Submit your individual project – Session 6<\/a><\/li>
- How to proceed?<\/a><\/li><\/ul><\/li>
- Teaching method for the Leaflet course<\/a>
  - 1-Introductory slide show<\/a><\/li>
  - 2-Detailed explanatory text<\/a><\/li>
  - 3-Practical exercise at the end of each session<\/a><\/li>
  - 4. Answer key available\u2026 but after the effort!<\/a><\/li>
  - In a nutshell<\/a><\/li><\/ul><\/li>
  - Ready to get started? Go to the first session: Displaying a map with Leaflet!<\/a><\/li><\/ul><\/nav><\/div>\n
    <\/span>Duration: approx. 9-12 hours (divided into 6 sessions)<\/span><\/h2>\n\n\n\n
    <\/span>Program :<\/span><\/h3>\n\n\n\n
    \n
    Introduction to Leaflet online<\/a><\/strong>\n
    \n
    – Installation, basic map structure<\/li>\n\n\n\n
    – Adding map backgrounds (OSM, third-party basemaps)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Layers and interactivity <\/a><\/strong>\n
    \n
    – Points, polylines, polygons<\/li>\n\n\n\n
    – Customization, events, interactions<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    GeoJSON layers and external data <\/a><\/strong>\n
    \n
    – Loading GeoJSON data<\/li>\n\n\n\n
    – Conditional display, dynamic symbols<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Interface controls and tools <\/a><\/strong>\n
    \n
    – Tooltips, popups, legends, layer groups<\/li>\n\n\n\n
    – Layer control and simple filters<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    User events and interactivity<\/a> <\/strong>\n
    \n
    – Reacting to clicks, hovers, element selection<\/li>\n\n\n\n
    – Creating a simple interactive map<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Custom web map mini-project (online 16 \/05\/2025)<\/strong>\n\n
    – Creating a mini-project<\/li>\n\n\n\n
    – Putting it online (GitHub Pages or other free solution)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n\n\n\n
    <\/span>Expected result<\/span><\/h3>\n\n\n\n
    By the end of the course, you’ll be able to create a working Leaflet map with your own data and put it online to share with the world!<\/p>\n\n\n\n
    <\/span>Submit your individual project – Session 6<\/span><\/h3>\n\n\n\n
    In the last session of this module, you will have produced an individual project incorporating the main elements studied (layers, styles, interactions, controls, etc.).<\/p>\n\n\n\n
    We invite you to share your project with us, so as to benefit from personalized feedback and, if you wish, to be featured in future publications<\/p>\n\n\n\n
    <\/span>How to proceed?<\/span><\/h3>\n\n\n\n
    Publish your project (code and map) on GitHub or an equivalent service (the method will be described in session 6), then send us the link to your repository via a form made available to you.<\/p>\n\n\n\n
    Projects will be examined according to the following criteria:<\/p>\n\n\n\n
    \n
    Good use of the Leaflet API<\/li>\n\n\n\n
    Readability and organization of the code<\/li>\n\n\n\n
    Visual and functional quality of the map<\/li>\n\n\n\n
    Relevance of the subject and data chosen<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    To follow the course exercises, you can download a starter kit in zip format from this link.<\/p>\n\n\n
    [wpdm_package id=’13356′]<\/p>\n\n\n\n
    
    Unzip the contents into a directory of your choice where you can store all the files for this course.<\/p>\n\n\n\n
    <\/span>Teaching method for the Leaflet course<\/span><\/h2>\n\n\n\n
    This introductory course to Leaflet.js, the JavaScript library for interactive mapping, is designed to guide you progressively through the learning process, with an active, visual and guided approach.<\/p>\n\n\n\n
    Each session follows a simple, effective teaching structure:<\/strong><\/p>\n\n\n\n
    \n\n\n\n
    <\/span>1-Introductory slide show<\/span><\/h3>\n\n\n\n
    Each session begins with a summary slide show outlining the essential notions to remember:<\/p>\n\n\n\n
    \n
    concepts illustrated with concrete examples,<\/li>\n\n\n\n
    commented code extracts,<\/li>\n\n\n\n
    diagrams or screenshots,<\/li>\n\n\n\n
    icons and visual cues to aid memorization.<\/li>\n<\/ul>\n\n\n\n
    The aim: to quickly understand Leaflet’s functions and possibilities.<\/strong>.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>2-Detailed explanatory text<\/span><\/h3>\n\n\n\n
    Each slide is accompanied by a pedagogical explanatory text, which:<\/p>\n\n\n\n
    \n
    develops the content of the slide show,<\/li>\n\n\n\n
    explains the \u201cwhy\u201d and \u201chow\u201d behind each function,<\/li>\n\n\n\n
    suggests code variants or additional tips,<\/li>\n\n\n\n
    introduces best practices and common mistakes to avoid.<\/li>\n<\/ul>\n\n\n\n
    This text is intended as a stand-alone reading aid, to be consulted before or after the session.ce.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>3-Practical exercise at the end of each session<\/span><\/h3>\n\n\n\n
    At the end of each session, you’ll find a practical exercise to complete:<\/p>\n\n\n\n
    \n
    direct application of the concepts covered,<\/li>\n\n\n\n
    realistic scenario: map of a location, addition of markers, dynamic style, etc.<\/li>\n\n\n\n
    clear instructions, with guided steps if necessary.<\/li>\n<\/ul>\n\n\n\n
    Exercises are an essential step in anchoring what you’ve learned and testing your understanding.votre compr\u00e9hension.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>4. Answer key available\u2026 but after the effort!<\/span><\/h3>\n\n\n\n
    A link at the end of the article takes you to the answer key for the exercise, with:<\/p>\n\n\n\n
    \n
    a commented solution,<\/li>\n\n\n\n
    functional code to copy and paste or adapt,<\/li>\n\n\n\n
    sometimes variants or areas for improvement.<\/li>\n<\/ul>\n\n\n\n
    We strongly recommend that you perform the exercise yourself before consulting the solution.
    This is the best way to progress independently, reinforce your memory and make the concepts your own.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>In a nutshell<\/span><\/h3>\n\n\n\n
    Each session of the course is based on:<\/p>\n\n\n\n
    \n
    a visual slide show to help you understand quickly,<\/li>\n\n\n\n
    a clear explanatory text to help you go deeper,<\/li>\n\n\n\n
    a practical exercise to help you experiment,<\/li>\n\n\n\n
    a guided answer sheet to help you correct yourself and go further.<\/li>\n<\/ul>\n\n\n\n
    This method allows you to learn Leaflet step by step, at your own pace, whether you’re a beginner or already have some basic knowledge of HTML\/JavaScript.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>Ready to get started?
    Go to the first session: Displaying a map with Leaflet!<\/a><\/span><\/h2>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Duration: approx. 9-12 hours (divided into 6 sessions) Program : Expected result By the end of the course, you’ll be able to create a working Leaflet map with your own data and put it online to…<\/p>\n","protected":false},"author":1,"featured_media":13139,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3015],"tags":[2945,2943,2036,2215],"class_list":["post-13134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-en","tag-leaflet-en","tag-program","tag-tutorial-en","tag-webmapping-en"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t

<\/span>Program :<\/span><\/h3>\n\n\n\n\nIntroduction to Leaflet online<\/a><\/strong>\n\n– Installation, basic map structure<\/li>\n\n\n\n– Adding map backgrounds (OSM, third-party basemaps)<\/li>\n<\/ul>\n<\/li>\n\n\n\n