Loading…

Taking too long?

Reload document

| Open in new tab

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 several mini-project proposals, and apply the technical and methodological notions they have learned in previous sessions.

Learning objectives

• Design a coherent, interactive web map
• Organize geographic data (points, lines, polygons)
• Handle events and interactivity (clicks, hovers, filters, etc.)
• Integrate a user interface (menus, filters, legends, etc.)
• Publish the map in a local or online environment

Suggested mini-project themes

1. Hiking trail map

Aim: create a map showing one or more hiking routes.

Possible content:

• GPX/GeoJSON trail layouts
• Points of interest: trailheads, lookouts, picnic areas
• Illustrated popups (text + images)
• Hiker’s charter (popup or link)
• Mini-map or scale
• Zoom button on the trail

Skills required :

• Displaying lines and points
• Use of custom styles
• Adding icons and images
• Leaflet controls (scale, mini-map, layer control)

2. Tourist map of a village

Aim: to create an interactive map for visitors.

Possible content:

• Monuments, museums, accommodation, restaurants
• Filters by category (accommodation / culture / nature…)
• Descriptions and timetables in popups
• Add a thematic background map (e.g. OpenStreetMap Humanitarian, Topo…)

Skills used :

• Layer groups and filterable layers
• Dynamic popups
• Integration of custom icons
• Legend control and interactive HTML menus

3. Public services location map

Aim: to create a map with a utilitarian purpose for residents or visitors.

Possible content:

• Locations of schools, hospitals, town halls, post offices, police stations
• Simple queries: display schools within an X km radius
• Routes or links to Google Maps
• Display schedules or contacts

Skills required :

• Management of ad hoc data
• Reactions to events (click on a category → map update)
• Enriched popups
• Add drop-down menus

Expected results

A functional interactive map including :

• A background map and geographic data layers
• One or more forms of interaction (clicks, menus, filters, etc.)
• A clean, readable and engaging layout

This map can be published on a GitHub repository or integrated into a personal site or blog.g.

Introducing GitHub Pages

GitHub Pages is a free hosting service that lets you publish a static website directly from a GitHub repository. It’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.

Steps to using GitHub Pages :

1. Create a repository on GitHub

• What is a GitHub repository?

  • 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.

• How to create a repository ?

  • Log in to your GitHub account.Click on the “New” or “Create a new repository” 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.
  • Once the repository has been created, GitHub will provide you with a repository URL (for example, https://github.com/username/cartes-leaflet).

2. Upload or push your code into the repository

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.

Method 1: Manual file upload

• Click on the “Add file” button in your GitHub repository, then select “Upload files”.
• Drag and drop your files (HTML, CSS, JavaScript, images, etc.) into the upload window.
• Click on “Commit changes” to save the files in your repository.

Method 2: Push your code from Git

If you’re working locally with Git, you can push files directly into the repository with the following commands:

·        git init

·        git add .

·        git commit -m "Initial commit"

·        git remote add origin https://github.com/username/ma-carte-leaflet.git

·        git push -u origin master

3. Go to the repository settings and activate GitHub Pages under the “Pages” section.

• Once you’ve uploaded your project files to the repository, you’ll need to enable GitHub Pages to publish the site online.
• Steps:

  • Open your repository on GitHub.Go to the repository’s “Settings” tab.In the side menu, scroll down to the “GitHub Pages” section.Under the “Source” heading, choose the branch from which you want to host the site. Usually, you’ll use the “main” or “master” branch.
  • Click on the “Save” button to activate GitHub Pages.

GitHub will then generate a unique URL for your website, which looks like this:

https://username.github.io/ma-carte-leaflet/

This URL will be the public address at which your Leaflet map can be accessed.

4. Your site will be accessible via the generated URL

• Public URL: After activating GitHub Pages, the URL generated will be as follows:

  • https://username.github.io/my-card-leaflet/

• 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.
• 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.

Additional tips:

• Verification: 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.
• Private repository: 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.
• Troubleshooting: If your map doesn’t display correctly, check that all files are linked and that links to external resources (e.g. Leaflet CDN) are valid.

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.

Introducing Netlify

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.

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.

Steps to using Netlify :

Create a Netlify account

• What is a Netlify account?
  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.
• Steps to create an account:

  • Go to Netlify.
  • Click on “Sign Up”.
  • Choose a registration method (e-mail or via GitHub).
  • Follow the instructions to set up your account.

Connect your GitHub repository

• Connect to GitHub:
  Once you’ve created your Netlify account, you’ll need to connect Netlify to your GitHub repository, where your project code (the Leaflet card) is stored.
• Steps to connect GitHub to Netlify:

  • Go to your Netlify dashboard.
  • Click on “New Site from Git”.
  • Choose GitHub as your source.Netlify will ask you to authorize access to your GitHub account, which will allow it to retrieve your repositories.
  • Select the GitHub repository containing your Leaflet project (for example, my-leaflet-map).

Select the project to deploy

• Project selection:
  After connecting your GitHub account to Netlify, Netlify will display all your GitHub repositories. Select the repository containing the code for your map project.
• 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’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.
• Click on “Deploy Site” to start deployment.

Netlify will automatically deploy your site and generate a unique URL.

• Automatic deployment:
  After selecting the repository and configuring the parameters, Netlify starts the deployment process. The site is then automatically built and published.
• URL generated:
  Once deployment is complete, Netlify generates a unique URL to access your online map. The URL will typically be in the form :

https://project-name.netlify.app/

Example: If your project is called my-map-leaflet, the URL could be:
https://my-map-leaflet.netlify.app/

Additional tips:

Change site URL: 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.

Control updates: 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.

Performance monitoring: Netlify also offers tools for monitoring your site’s performance (load time, availability, etc.).

Advantages of Netlify for hosting your Leaflet map :

• Fast, easy deployment: Publish your map in just a few clicks.
• CDN hosting: Netlify provides a CDN infrastructure that optimizes the loading speed of your pages.
• Free SSL: Every site deployed on Netlify automatically benefits from an SSL certificate (HTTPS).
• Static site support: Perfect for hosting Leaflet maps and other static web projects.
• Continuous deployment: Automate the process of updating your site as soon as you upload new changes to GitHub.

With these steps, you can quickly upload your Leaflet map to Netlify and easily share it with others. It’s a great way to host interactive mapping projects, without having to manage complex servers.

Submit your Leaflet project

In this last session, you will have produced an individual project incorporating the main elements studied (layers, styles, interactions, controls, etc.).

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.

How do you do it?

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.

Projects will be examined according to the following criteria:

• Good use of the Leaflet API
• Code readability and organization
• Visual and functional quality of the map
• Relevance of subject and data selected

Please fill in the form below. You will receive a personalized reply within a few days.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois