Cartographie sur le Web
Dans ce cours, vous apprendrez à créer des cartes en JavaScript en utilisant la bibliothèque gratuite Leaflet, référence mondiale, pour les intégrer dans vos pages Web.
+Présentation
La section 1 sera consacrée à quelques révisions html/css/JavaScript, ainsi que la démarche à suivre pour récupérer des données de l’Open Data, et les traiter en JavaScript
Dans la section 2, la première carte construite sera simple, avec un fond de carte et un point central repéré par un marqueur.
Dès la section 3, nous ajouterons d’autres marqueurs, en choisissant la couleur, et intégrant des popups d’information. L’ajout d’une fenêtre de contrôle permettra de choisir quels points seront visibles (et quel fond de carte).
Dans la section 4, nous dessinerons des formes simples (lignes, cercles, rectangles) ou plus complexes (polylines, polygones). Nous ajouterons également des éléments importants de la cartographie: échelle, légende, images… Nous utiliserons même une image de 1900 en fond de carte!
Mais nos cartes peuvent également nous servir à obtenir des informations, ce qui sera l’objet de la section 5. Sans surprise, des coordonnées géographiques (latitudes, longitudes), mais nous pratiquerons le géocodage et le géodécodage (convertir une adresse postale en coordonnées, ou l’inverse), et finirons par de la géolocalisation (où suis-je ?).
La section 6 sera consacrée au format GeoJSON, et nous y verrons comment récupérer sur l’Open Data des fichiers de contours géographiques (pays, régions, départements…) et comment les tracer sur la carte. Nous finirons par une carte choroplèthe (où les régions sont colorées en fonction d’une mesure statistique).
Embarquons ensemble à travers le monde… des cartes Web !
+Objectifs du cours
Intégrer des cartes dans un site Web, créées en Javascript avec Leaflet
Ajouter sur la carte des marqueurs, des images, des légendes, des dessins, des interactions…
Obtenir des données sur les cartes (coordonnées de points, géocodage (adresse postale), géodécodage, géolocalisation…
Afficher des informations sur la carte (zones colorées selon les valeurs contenues dans un fichier GeoJSON)
+Pré-requis
Bases de Html / Css / Javascript
+Programme détaillé
Introduction
Présentation générale du cours et rappels de notions cartographiques (projection, coordonnées, latitude/longitudes, couches…)
- Aperçu du cours…
- Définitions
Préambule technique
Installation des logiciels nécessaires, rappels de Html / Css / Javascript, comment récupérer et traiter des données Open Data en Javascript
- Logiciels
- HTML : rappels minimalistes
- CSS : rappels minimalistes
- Javascript : rappels de base
- Open Data – récupérer des données
- Javascript : charger des données
Carte de base
Notre première carte! Simple, avec un fond de carte au choix, et un marqueur au centre… Ainsi qu’un petit utilitaire pour obtenir les coordonnées d’un point sur la carte.
- Introduction
- Notre première carte
- Changer le fond de carte
- Ajouter un marqueur
- Obtenir la latitude / longitude
- Nécessaire organisation…
- En résumé
Les marqueurs
Tout, tout, tout, vous saurez tout sur les marqueurs: les placer, changer les icônes, utiliser du texte, mettre en place des filtres pour choisir les marqueurs que vous voulez voir…
- Introduction
- Personnaliser les marqueurs
- Multiplier les marqueurs
- Différencier les marqueurs
- Controler, filtrer les marqueurs
- En résumé
Dessiner sur la carte
Voyons comment ajouter des lignes, cercles, rectangles, polygones, images. Puis compléter notre carte d’une légende et d’une échelle. Et comment utiliser une photo en fond de carte.
- Introduction
- Ajouter des formes (lignes, cercles…)
- Ajouter des images
- Zoomer sur une image
- Ajouter une légende, une échelle
- En résumé
Utilitaires
Nous allons faire de la géolocalisation (où suis-je ?), du géocodage, et du géodécodage. C’est à dire obtenir coordonnées latitude/longitude et leurs correspondances postales (ou l’inverse)
- Introduction
- Obtenir la lat/lng (version améliorée)
- Géolocaliser sa position
- Géocodage (adresse -> lat/lng)
- Géodécodage (lat/lng -> adresse)
- Evènements et méthodes
- Compléments sur la carte
- En résumé
GeoJSON
Le GeoJSON est un format d’encodage de données géospatiales simples. Nous verrons comment l’utiliser pour tracer des contours de pays, ainsi que des cartes statistiques choroplèthe.
- Introduction
- Le format GeoJSON
- Tracer des contours
- Interactions
- Visualiser des informations
- En résumé
Conclusion
Nous voici arrivés au bout de la carte, mais prêt à embarquer pour d’autres aventures?
Fichiers
Le dossier images
A déposer dans le dossier img de notre projet