Formation Leaflet 8/12 - Définir un itinéraire sur une carte
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Formation Leaflet 8/12 - Définir un itinéraire sur une carte

Carl Brison
16,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Pour ce 8ème volet dédié à l'apprentissage de l'utilisation de la librairie Javascript Leaflet, nous allons voir comment créer un itinéraire sur une carte Openstreetmap.

  • Pour cela, nous utiliserons la librairie Leaflet Routing Machine, qui va nous permettre de définir un point de départ (ville de départ) et un point d'arrivée (ville d'arrivée).
  • Nous verrons également comment ajouter des villes étapes entre notre ville de départ et notre ville d'arrivée.
  • Nous verrons comment modifier dynamiquement sur la carte, la ville de départ ainsi que la ville d'arrivée.
  • Nous obtiendrons également la distance du parcours défini.
Afin de suivre ce cours dans de bonnes conditions, il est préférable de connaître :

Retrouvez le début de cette série de formations consacrées à Leaflet.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Définir un parcours sur une carte
Chapitre 2
Exercice. Dynamiser la ville d'arrivée
Chapitre 3
Pour la prochaine fois

Plan détaillé du cours

Chapitre 1 : Définir un parcours sur une carte
18m22s
 
Leçon 1Créer un parcours entre deux villes
Leçon 2Créer un parcours entre plusieurs villes
Chapitre 2 : Exercice. Dynamiser la ville d'arrivée
1h03m
 
Leçon 1Mettre en place les bases HTML et CSS
Leçon 2Mettre en place la technologie Ajax
Leçon 3Mettre en place la librairie leaflet routing machine
Leçon 4Mettre en place les icones
Leçon 5Mettre en place un titre de niveau 1
Leçon 6Mettre en place une animation d'attente
Chapitre 3 : Pour la prochaine fois
01m29s
 
Leçon 1Pour la prochaine fois

Aperçus

Avis des apprenants

Détail des avis
0
Apprenant
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Bernard Chabloz
Bernard Chabloz
Publié le 28/09/2023
Bel outil! Un seul accroc: cette procédure me donne deux marqueurs (dont un sans icone, visiblement lié à “L.Routing.control”). Parade: utiliser “createMarker:...” dans “L.Routing.control”.
Carl Brison
Carl Brison
En effet, peut être une incompatibilité...

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source complet de l'exercice

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données