19,00

Tuto Créer des cartes à l'aide de Leaflet avec JavaScript

19,00

  • Une formation vidéo de 1h28m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Créer des cartes à l'aide de Leaflet

ajouter ce cours aux favoris retirer ce cours des favoris

Depuis que Google Maps impose de saisir un numéro de carte bleue afin d'utiliser son (remarquable) service, cela a motivé certains développeurs à aller découvrir des concurrents. En tête de ceux-ci, la librairie Leaflet, open source et gratuite.

Ainsi, si vous souhaitez afficher des cartes interactives sur un site web, cette formation en vidéo est faite pour vous.
Nous mélangerons théorie et cas pratique.
 

Au programme de ce tuto Leaflet

Découvrez dans cette formation Leaflet en ligne qui va à l'essentiel comment :

  • créer une carte,
  • ajouter un marqueur,
  • utiliser un des nombreux layers disponibles,
  • écouter des events,
  • afficher des popups.

Puis, une fois que vous aurez acquis ces compétences essentielles, nous élèverons le niveau en ajoutant des fonctionnalités fréquemment demandées :

  • ajouter des marqueurs personnalisés,
  • ajouter un cercle sur une carte autour d'une région,
  • interagir à l'aide d'un curseur en dehors de votre carte sur le cercle de votre carte.

Enfin, nous ajouterons encore de nouvelles fonctionnalités moins demandées, mais indispensable dans certaines applications :

  • utiliser un service de geocoding permettant d'afficher une adresse à partir de coordonnées GPS,
  • écouter des événements émis par une carte,
  • ajouter et supprimer des listeners sur une map,

Tout cela sans plus avoir à payer de frais de licence (pour rappel, leaflet est totalement gratuit et opensource).
Les fichiers sources sont fournis avec le cours.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur le tuto.

Bonne découverte de Leaflet

Table des matières de cette formation JavaScript (durée : 1h28m)

  • Introduction
    • Pourquoi utiliser Leaflet plutôt que Google Maps ? gratuit 00:01:02
    • Créer notre première carte leaflet 00:12:13
  • Markers, layers et popups
    • Ajouter des markers 00:08:00
    • Utiliser d'autres layers 00:05:35
    • Afficher les nouvelles coordonnées dans la page html 00:10:16
    • Créer une popup 00:03:26
  • Markers personnalisés
    • Associer une icône personnalisée à un marker 00:07:39
    • Positionner une popup sur notre marker personnalisé 00:02:22
  • Ajouter un cercle et le contrôler depuis un curseur extérieur
    • Ajouter un cercle sur notre carte 00:07:24
    • Brancher un range element sur le cercle de notre carte 00:06:02
  • Trouver une adresse à partir de coordonnées GPS
    • Utiliser le service de geocoding 00:10:00
    • Afficher l'adresse 00:03:08
    • Ecouter des événements émis par une carte 00:02:15
    • Ajouter et supprimer des listeners sur une map 00:09:10



Formateur : Codeconcept

Codeconcept a publié 24 tutoriels et obtenu une note moyenne de 4,7/5 sur 263 tutoriels vendus. Voir les autres formations de Codeconcept

4,5
note moyenne

2
avis laissés
5 étoiles
1
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-academy-2385 laissé le 28/03/2020
    Va à l'essentiel, explications claires par l'exemple, mais formation trop courte, on aimerait faire le tour de toutes les possibilités qu'offre Leaflet.

  • 4
    avis de arawakjpb laissé le 18/10/2019
    Bon tuto avec des cas bien concrès

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
  • Bonjour, est-ce que ce tuto explique aussi comment personnaliser l'apparence graphique (couleurs ou thème) des cartes pour l'adapter visuellement à son site ?
    Bonjour, ce tuto montre comment changer de layer (en utilisant une des nombreuses layers créées par la communauté) et donc de modifier l'apparence d'une carte. En revanche, il n'apprend pas à créer sa propre layer totalement custom.
Parcours Developpeur Front End
accédez à plus de 1349 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données