Dans la continuité des micro-tutoriaux précédents sur Leaflet, voyons maintenant comment créer une Polyline, et s’il est possible d’en retrouver les points qui la composent.

Il s’agit d’un préambule au travail sur les traces GPX de mon GPS. En effet, le rendu de cette trace se fera avec une (ou plusieurs) Polyline(s).

Articles précédents :

• Leaflet : créer votre carte rapidement
• Leaflet : création massive de markers
• Leaflet : gérer les layers

Après avoir créé une carte Leaflet (Leaflet, créer votre carte rapidement) et placer des markers (Leaflet : création massive de markers), voyons comment gérer les layers, soit savoir comment changer le fond de carte à la volée ou afficher/masquer les markers qui sont présents sur la carte.

• Fonds de carte
• Groupes de markers
• Code complet

Dans la continuité de l’article sur la création d’une carte Leaflet (Leaflet, créer votre carte rapidement), voyons maintenant comment créer massivement des markers.

En effet, il est rare de créer une carte pour n’en créer qu’un seul, et si lorsqu’il y en a moins d’une 10aine, on peut se permettre de les créer unitairement, au delà il vaut mieux travailler avec une boucle qui lit un tableau contenant les markers.

• Création de markers en série
• Gestion des événements individualisée
• Code complet

En recherchant comment manipuler des fichiers au format GPX avec l’API Google Maps, j’avais repéré il y a déjà des mois de cela un module qui semblait permettre de lire un GPX natif et de le placer sur une carte. Sauf qu’il s’agissait d’un plugin pour Leaflet, plutôt que pour Google Maps.

J’ai donc décidé de m’intéresser à cette API, et j’ai été ravi de la rapidité d’implémentation. Avant de rentrer plus en détail sur mon travail avec les GPX, voici donc un morceau de code pour implémenter une carte Leaflet ! Cela se résume en quelques lignes de HTML et de Javascript.

Ce qui suit ne se veut pas être un tutoriel complet sur Leaflet, juste une amorce pour les curieux qui voudrait comparer avec Google Maps.

• Mise en place d’un fond de carte
• Création d’un premier Marker