Formation : cartographie web avec l’API JavaScript Leaflet

Introduction à la formation cartographie web avec l’API JavaScript Leaflet

Installation des outils de développement

• Installation de Visual Studio Code;
• Installation de QGIS;
• Installation de XAMP;

Introduction à la programmation web

• Comment fonctionne Internet;
• Comment fonctionne un site web;
• Front-End VS Back-End;

L’essentiel du HTML5 pour appréhender Leaflet

• Créer un document HTML;
• Head et Body;
• Les titres;
• Les paragraphes et les listes;
• Les images;
• Les liens;
• Les formats;
• Les tables;
• Les bloques;
• Les « Layouts »;
• Les formulaires, les boutons, et les « inputs »;
• Les commentaires;
• Les ID et les classes;
• Création de l’interface HTML;

L’essentiel du CSS3 pour appréhender Leaflet

• Inclure un fichier CSS dans son document html;
• Les sélecteurs;
• Modifier le rendu du texte;
• Modifier l’arrière-plan d’un élément;
• Les largeurs et les hauteurs;
• Le positionnement;
• Les types d’affichages (display);
• Les marges externes et internes;
• Les bordures;
• Les media query

L’essentiel de JavaScript pour appréhender Leaflet

• Déclarer une variable et les types de données;
• Les opérateurs;
• Les opérateurs conditionnels;
• Les boucles;
• Les fonctions;
• JavaScript et le DOM;
• Le scope;
• Le hoisting;

L’essentiel de JQuery pour appréhender Leaflet

• Sélectionner des éléments avec JQuery;
• Les évènements avec JQuery;
• Les effets avec JQuery;
• Modifier le DOM avec JQuery;
• Sélectionner les parents et les enfants d’un élément;
• AJAX

Les bases de Leaflet

• Créer sa première carte avec Leaflet;
• Changer les fonds de carte avec Leaflet;
• Ajouter un marqueur à sa carte;
• Ajouter un pop-up;

Le GeoJSON

• Transformer une Shapefile en GeoJSON avec QGIS
• La structure du GeoJSON;
• Ajouter un GeoJSON a une carte Leaflet;
• Styler les GeoJSON dans Leaflet;
• Créer un pop-up avec les attributs du GeoJSON;
• Interagir avec le tableau de bord en fonction d’évènement sur la carte

Centrer la carte sur la position de l’utilisateur

• Utiliser l’API HTML de géolocalisation pour récupérer la position de l’usager;
• Centrer la carte sur la position de l’utilisateur;
• Créer un marqueur pour la position de l’utilisateur

Créer un géocodeur avec l’API Nominatim – Open Street Map

• Créer le formulaire;
• Récupérer la valeur du formulaire;
• Passer la valeur à l’API Nominatim
• Récupérer la position et centrer la carte sur celle-ci
• Créer un marqueur pour la position de l’utilisateur

Pour aller plus loin

• Les bases de données à référence spatiales
• Les serveurs cartographiques
• Générer des GeoJSON dynamiques côté serveur
• Créer des applications transactionnelles