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