On connaît tous le projet OpenStreetMap, une alternative gratuite et libre à Google Maps, dont les données sont ouvertes et disponibles sous la licence ODbL.
LeafletJS s'appuie sur ces données pour permettre, en front-end, d'afficher une carte et d'y placer divers contenus.
1. Préparer le terrain
Afin de pouvoir utiliser la bibliothèque, il convient de faire plusieurs opérations. D'abord, la page internet devra charger la bibliothèque JavaScript Leaflet.js ainsi que la feuille de style associée, mais elle devra également contenir un calque identifié de manière unique, lequel sera destiné à recevoir la carte interactive.
Ce calque devra avoir une hauteur fixe, ce qui peut être réglé idéalement par une instruction CSS mise dans la feuille de style du site. Ici, on se contente simplement d'utiliser une balise style.
Enfin, le code permettant de créer la carte ne devra s'exécuter qu'après le chargement complet du DOM par le navigateur, c'est-à-dire de la structure de...
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première