En cours de chargement…

Cela prend trop de temps ?

Recharger le document

| Ouvrir dans un nouvel onglet

Objectifs de la séance : Réalisation d’un mini-projet cartographique

Cette séance vise à mobiliser toutes les compétences acquises au fil du cours d’introduction à Leaflet pour créer une carte interactive complète.
Les apprenants choisissent un thème parmi plusieurs propositions de mini-projets et mettent en œuvre les notions techniques et méthodologiques vues lors des séances précédentes.

Objectifs pédagogiques

• Concevoir une carte web interactive et cohérente
• Organiser les données géographiques (points, lignes, polygones)
• Manipuler les événements et l’interactivité (clics, survols, filtres…)
• Intégrer une interface utilisateur (menus, filtres, légendes…)
• Publier la carte dans un environnement local ou en ligne

Thèmes de mini-projets proposés

1. Carte des sentiers de randonnée

But : créer une carte qui présente un ou plusieurs itinéraires de randonnée.

Contenu possible :

• Tracés GPX/GeoJSON des sentiers
• Points d’intérêt : départs, belvédères, aires de pique-nique
• Popups illustrés (textes + images)
• Charte du randonneur (en popup ou lien)
• Mini-carte ou échelle
• Bouton de zoom sur le parcours

Compétences mobilisées :

• Affichage de lignes et de points
• Utilisation de styles personnalisés
• Ajout d’icônes et d’images
• Contrôles Leaflet (scale, mini-map, layer control)

2. Carte touristique d’un village

But : proposer une carte interactive destinée à des visiteurs.

Contenu possible :

• Monuments, musées, hébergements, restaurants
• Filtres par catégories (hébergement / culture / nature…)
• Descriptions et horaires dans les popups
• Ajout d’un fond de carte thématique (ex. OpenStreetMap Humanitarian, Topo…)

Compétences mobilisées :

• Groupes de calques et couches filtrables
• Popups dynamiques
• Intégration d’icônes personnalisées
• Contrôle de légende et menus HTML interactifs

3. Carte de localisation de services publics

But : créer une carte à vocation utilitaire pour les habitants ou visiteurs.

Contenu possible :

• Emplacements d’écoles, hôpitaux, mairies, postes, commissariats
• Requêtes simples : afficher les écoles dans un rayon de X km
• Itinéraires ou liens vers Google Maps
• Affichage des horaires ou des contacts

Compétences mobilisées :

• Gestion de données ponctuelles
• Réactions aux événements (clic sur une catégorie → mise à jour de la carte)
• Popups enrichis
• Ajout de menus déroulants

Résultat attendu

Une carte interactive fonctionnelle comportant :

• Un fond de carte et des couches de données géographiques
• Une ou plusieurs formes d’interaction (clics, menus, filtres…)
• Une mise en page propre, lisible et engageante

Cette carte pourra être publiée sur un dépôt GitHub ou intégrée dans un site personnel ou un blog.

Présentation de GitHub Pages

GitHub Pages est un service d’hébergement gratuit qui permet de publier un site web statique directement à partir d’un dépôt GitHub. Il est particulièrement utile pour héberger des projets personnels, des portfolios, ou des projets comme des cartes interactives créées avec Leaflet. Ce service est parfait pour les petits projets web où vous avez besoin de publier rapidement une version en ligne sans avoir à vous soucier de la configuration d’un serveur.

Étapes pour utiliser GitHub Pages :

1. Créez un dépôt sur GitHub

• Qu’est-ce qu’un dépôt GitHub ?
  Un dépôt GitHub (ou « repository ») est l’endroit où vous stockez tous les fichiers relatifs à votre projet. Cela inclut les fichiers HTML, CSS, JavaScript, ainsi que les ressources comme les images et les fichiers de données.
• Comment créer un dépôt ?
  • Connectez-vous à votre compte GitHub.
  • Cliquez sur le bouton « New » ou « Créer un nouveau dépôt ».
  • Nommez votre dépôt (par exemple, ma-carte-leaflet).
  • Si nécessaire, ajoutez une description de votre projet.
  • Assurez-vous que le dépôt est public pour pouvoir le rendre accessible en ligne.

  • Une fois le dépôt créé, GitHub vous fournira un URL de dépôt (par exemple, https://github.com/nom_utilisateur/cartes-leaflet).

2. Téléchargez ou poussez votre code dans le dépôt

Une fois que votre dépôt est créé, vous devez ajouter les fichiers de votre projet dedans. Il existe plusieurs méthodes pour cela, selon vos préférences.

Méthode 1 : Téléchargement manuel des fichiers

• Cliquez sur le bouton « Add file » dans votre dépôt GitHub, puis sélectionnez « Upload files ».
• Glissez-déposez vos fichiers (HTML, CSS, JavaScript, images, etc.) dans la fenêtre d’upload.
• Cliquez sur « Commit changes » pour enregistrer les fichiers dans votre dépôt.

Méthode 2 : Pousser votre code depuis Git

• Si vous travaillez en local avec Git, vous pouvez pousser les fichiers directement dans le dépôt avec les commandes suivantes :

·        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. Allez dans les paramètres du dépôt et activez GitHub Pages sous la section « Pages »

• Une fois les fichiers de votre projet téléchargés dans le dépôt, vous devez activer GitHub Pages pour publier le site en ligne.
• Étapes :
  • Ouvrez votre dépôt sur GitHub.
  • Allez dans l’onglet « Settings » du dépôt.
  • Dans le menu latéral, descendez jusqu’à la section « GitHub Pages ».
  • Sous la rubrique « Source », choisissez la branche à partir de laquelle vous voulez héberger le site. Généralement, vous utilisez la branche « main » ou « master ».

  • Cliquez sur le bouton « Save » pour activer GitHub Pages.

GitHub va alors générer une URL unique pour votre site web, qui ressemble à ceci :

• https://username.github.io/ma-carte-leaflet/
• Cette URL sera l’adresse publique à laquelle votre carte Leaflet sera accessible.

4. Votre site sera accessible via l’URL générée

• URL publique : Après avoir activé GitHub Pages, l’URL générée sera la suivante :

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

• Il est important de noter que la génération du site peut prendre quelques minutes. Vous pouvez ensuite accéder à votre carte Leaflet en ouvrant cette URL dans un navigateur.
• Si vous souhaitez personnaliser le nom de domaine de votre site, GitHub permet d’utiliser un nom de domaine personnalisé (par exemple, www.macarteleaflet.com) en ajoutant un fichier CNAME dans votre dépôt.

Conseils supplémentaires :

• Vérification : Avant de rendre votre site public, assurez-vous que tous les fichiers nécessaires sont correctement inclus dans votre dépôt, y compris les fichiers de carte, les ressources JavaScript (Leaflet, etc.) et les fichiers CSS.
• Dépôt privé : Si vous avez un dépôt privé et souhaitez utiliser GitHub Pages, sachez que cette option n’est disponible que pour les utilisateurs payants. Cependant, pour des projets simples et publics, la version gratuite de GitHub Pages fonctionne parfaitement.
• Dépannage : Si votre carte ne s’affiche pas correctement, vérifiez que tous les fichiers sont bien reliés et que les liens vers les ressources externes (par exemple, Leaflet CDN) sont valides.

Avec ces étapes, vous pouvez facilement mettre en ligne vos cartes interactives créées avec Leaflet. Cela offre un moyen rapide et simple de partager vos projets avec d’autres utilisateurs, ou même de les déployer sur un serveur personnel.

Présentation de Netlify

Netlify est une plateforme d’hébergement rapide et moderne dédiée aux sites web statiques. Elle permet de déployer, gérer et héberger des sites web de manière simple, avec une automatisation du déploiement depuis un dépôt Git (GitHub, GitLab, Bitbucket). Netlify se distingue par sa facilité d’utilisation, son intégration continue, et ses nombreuses fonctionnalités comme la gestion des redirections, des formulaires, et des noms de domaine personnalisés.

Avec Netlify, vous pouvez déployer des sites web statiques (comme des cartes Leaflet), des applications modernes, et d’autres projets en quelques clics seulement. Il offre également des services gratuits de CDN (Content Delivery Network), de SSL, et d’optimisation des performances.

Étapes pour utiliser Netlify :

1. Créez un compte Netlify

• Qu’est-ce qu’un compte Netlify ?
  Un compte Netlify vous permettra de gérer vos déploiements de sites web statiques. Vous pouvez vous inscrire avec votre adresse e-mail, ou plus facilement en utilisant votre compte GitHub, GitLab ou Bitbucket.
• Étapes pour créer un compte :
  • Rendez-vous sur Netlify.
  • Cliquez sur « Sign Up » (S’inscrire).
  • Choisissez une méthode d’inscription (e-mail ou via GitHub).

  • Suivez les instructions pour configurer votre compte.

2. Connectez votre dépôt GitHub

• Connexion à GitHub :
  Une fois votre compte Netlify créé, vous devez connecter Netlify à votre dépôt GitHub où se trouve le code de votre projet (la carte Leaflet).
• Étapes pour connecter GitHub à Netlify :
  • Allez dans votre tableau de bord Netlify.
  • Cliquez sur « New Site from Git ».
  • Choisissez GitHub comme source.
  • Netlify vous demandera d’autoriser l’accès à votre compte GitHub, ce qui lui permettra de récupérer vos dépôts.

  • Sélectionnez le dépôt GitHub contenant votre projet Leaflet (par exemple, ma-carte-leaflet).

3. Sélectionnez le projet à déployer

• Sélection du projet :
  Après avoir connecté votre compte GitHub à Netlify, Netlify affichera tous vos dépôts GitHub. Sélectionnez le dépôt contenant le code de votre projet de carte.
• Configurer les paramètres du projet :
  • Netlify vous demandera de configurer les paramètres de déploiement (par exemple, la branche à déployer, généralement main ou master).
  • Si vous avez des fichiers particuliers à générer ou compiler avant le déploiement (par exemple, si vous utilisez un générateur de site statique comme Jekyll ou Hugo), vous pouvez spécifier les commandes de build. Pour un projet Leaflet simple, vous n’avez pas besoin de configuration supplémentaire.

  • Cliquez sur « Deploy Site » pour lancer le déploiement.

4. Netlify déploiera automatiquement votre site et générera une URL unique

• Déploiement automatique :
  Après avoir sélectionné le dépôt et configuré les paramètres, Netlify commence le processus de déploiement. Le site est alors automatiquement construit et publié.
• URL générée :
  Dès que le déploiement est terminé, Netlify génère une URL unique pour accéder à votre carte en ligne. L’URL sera généralement sous la forme :

  • https://nom-du-projet.netlify.app/

Exemple : Si votre projet s’appelle ma-carte-leaflet, l’URL pourrait être :
https://ma-carte-leaflet.netlify.app/

Conseils supplémentaires :

• Modifier l’URL du site : Si vous souhaitez utiliser un nom de domaine personnalisé (par exemple, www.macarteleaflet.com), vous pouvez facilement configurer cela dans le tableau de bord de Netlify en ajoutant un domaine personnalisé et en configurant les DNS.
• Contrôler les mises à jour : Netlify offre un système de déploiement continu, ce qui signifie que dès que vous poussez des modifications dans votre dépôt GitHub, le site sera automatiquement mis à jour.
• Surveillance des performances : Netlify propose également des outils pour suivre les performances de votre site (temps de chargement, disponibilité, etc.).

Avantages de Netlify pour l’hébergement de votre carte Leaflet :

• Déploiement rapide et facile : Publiez votre carte en quelques clics.
• Hébergement CDN : Netlify fournit une infrastructure CDN qui optimise la vitesse de chargement de vos pages.
• SSL gratuit : Chaque site déployé sur Netlify bénéficie automatiquement d’un certificat SSL (HTTPS).
• Support des sites statiques : Parfait pour héberger des cartes Leaflet et autres projets web statiques.
• Déploiement continu : Automatisez le processus de mise à jour de votre site dès que vous poussez de nouvelles modifications sur GitHub.

Avec ces étapes, vous pouvez rapidement mettre en ligne votre carte Leaflet sur Netlify et la partager facilement avec d’autres personnes. C’est un excellent moyen d’héberger des projets de cartographie interactifs, sans avoir à gérer des serveurs complexes.

Soumettez votre projet Leaflet

Dans le cadre de cette dernière séance, vous aurez réalisé un projet individuel intégrant les principaux éléments étudiés (couches, styles, interactions, contrôles, etc.).

Nous vous invitons à partager votre réalisation, pour bénéficier d’un retour personnalisé et, si vous le souhaitez, figurer parmi les exemples valorisés dans nos publications futures

Comment faire ?

Publiez votre projet (code et carte) sur GitHub ou un service équivalent, puis envoyez nous le lien vers votre dépôt via le formulaire mis à votre disposition ci-dessous.

Les projets seront examinés selon les critères suivants :

• Bonne pratique de l’API Leaflet
• Lisibilité et organisation du code
• Qualité visuelle et fonctionnelle de la carte
• Pertinence du sujet et des données choisies

Merci de remplir le formulaire ci-dessous. Vous recevrez une réponse personnalisée dans les jours qui suivent.

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