Remi Forax
“It allows developers without a GIS background to display tiled web maps hosted on a public server, with optional tiled overlays.”
source: Wikipedia.org - Geomatics
Leaflet est composée d'un fichier CSS et d'un fichier JavaScript.
On déclare ceux-ci dans la balise "head" de la page.
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
</head>
Le fichier CSS doit être AVANT le fichier JS !
On déclare un div qui va contenir la carte
<div id="map-id"></div>
On appele la méthode map() sur l'objet L (pour leaflet) avec en premier paramètre l'id du div
C'est équivalent à appeler la méthode map() avec le résultat de document.getElementById()
<div id="map-id2"></div>
Une map doit avoir un "center" [lat, long] et un facteur de "zoom"
L.tileLayer() permet de créer un layer utilisant des tuiles
On peut spécifier le tableau des layers dans les options de la map
On peut ajouter un layer après la création de la map avec layer.addTo(map)
On peut changer de provider et par exemple utiliser les tuiles de GoogleMap
Le site
https://leaflet-extras.github.io/leaflet-providers/preview/
possède plein d'autres références de tuiles.
Lors de la création de la map, on peut indiquer si on veut les différents controls (zoom, attribution)
Un marker permet de distinguer un point précis de la carte
Un tooltip est un texte avec un contenu
marker.bindTooltip() permet d'ajouter un tooltip qui sera visible si on passe la souris dessus (hover)
On peut ajouter des objets géométriques pour indiquer une zone particulière
“an open standard format designed for representing simple geographical features, along with their non-spatial attributes”
source: Wikipedia.org - GeoJSON
Une feature groupe une géométrie et des propriétés.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[1.9221462784913, 48.457599361977],
...
[1.9221462784913, 48.457599361977]
]
]
},
"properties": {
"code": "11",
"nom": "Île-de-France"
}
}, ...
La méthode L.geoJSON() permet de créer un layer à partir des données geoJSON