Débuter avec Leaflet!
Elle est fortement inspirée de la présentation de
@lyzidiamond.
Salut! je suis Arnaud. Je vie à
Grenoble. Je travaille chez
esri France. Je participe à
Maptime Alpes.
Parlons de web maps!
Qu'est ce qu'une web map?
Avant tout: une web map est une carte sur le web.
(Heu.)
Comment mettre des cartes sur le web?
HTML!
Le HTML est le langage des sites web.
Mais quand nous pensons web maps, nous pensons interactivité. Nous pensons...
Google Maps!
Je me trompe?
Nous voulons de l'interactivité. Nous voulons que les utilisateurs agissent avec nos cartes.
Comment ajoute-t-on de l'interactivité sur le web?
Javascript!
Mais revenons à la base et parlons d'une web map.
Parlons d'abord de tuiles.
Tuiles Raster (images), souvent. Tuiles Vectorielle dans certains cas.
"... web maps sont constituées de nombreuses images carrées appelées tuiles."
"Ces tuiles sont généralement de 256x256 pixels, et sont positionnées côte à côte afin de créer une grande image."
Toutes ces tuiles se chargent plus vite qu'une seule grande image.
Cela permet ensuite de repositionner la carte avec fluidité.
Chaque niveau de zoom a son propre jeu de tuiles.
Niveau de zoom 0: 1 tuile pour le monde.
A chaque niveau de zoom, le nombre de tuile augmente exponentiellement.
Niveau de zoom 1: 4 tuiles pour le monde.
Niveau de zoom 2: 16 tuiles pour le monde.
... vous avez compris l'idée.
Les cartes tuilées sont des images statiques sur internet.
Super! Quel est le rapport avec
Leaflet?
Ces fichiers existent quelque part sur une page web. Ils doivent savoir quand se charger et quand réagir aux clics et autres tirer/glisser.
Leaflet est une librairie Javascript permettant de faire cela.
Ajouter des libraries Javascript dans vos pages c'est étendre les possibilités de votre code.
Vous avez accès grâce à la librairie à de nombreux outils pour créer des cartes et leur donner des fonctionnalités usuelles.
Première chose que nous allons faire avec Leaflet: créer un conteneur de carte.
var map = L.map('leaflet-map');'leaflet-map'
fait référence à un
div où la carte va se positionner.
Mais c'est vide. Nous n'avons ajouté aucune tuile. Allons y!.
Il existe de nombreux
jeux de tuiles gratuits sur internet. Nous allons utiliser un jeu de
Stamen.
var map = L.map('leaflet-map').
setView([45.18, 5.72], 13);
L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png').
addTo(map);Nous avons ajouté des tuiles, et centré la carte sur Grenoble, avec un niveau de zoom.
Nous avons ainsi une carte de référence sans information, mais une carte tout de même.
Que pouvons nous montrer sur la carte? Peut être CoWork où nous sommes.
Nous pouvons le faire!
L.marker([45.19129, 5.73332]).addTo(map);
Nous avons ajouté un marker aux coordonnées lat/lon de CoWork sur la carte.
Dernière chose: ajoutons une popup au marker. Un clic affichera des informations.
L.marker([45.19129, 5.73332])
.bindPopup("CoWork").addTo(map);
Associons une popup au marker indiquant ainsi CoWork.
C'est fait! Nous avons créer une web map!
Est-ce que c'est fun?!
Vous allez maintenant faire votre carte!
Allez sur
http://jsbin.com/hivulaAide leaflet:
http://leafletjs.comURL pour les tuiles Stamen watercolor
'http://{s}.tile.stamen.com/
watercolor/{z}/{x}/{y}.png'Centrer la carte sur Grenoble lat/lon [45.18, 5.72] et zoom 13
Merci pour votre participation!
N'hésitez pas à me contacter sur Twitter
@arferrand!