16,00

Tuto Formation Leaflet 8/12 - Définir un itinéraire sur une carte avec JavaScript

16,00

  • Une formation vidéo de 1h23m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Formation Leaflet 8/12 - Définir un itinéraire sur une carte

ajouter ce cours aux favoris retirer ce cours des favoris


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.

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

  • Définir un parcours sur une carte
    • Créer un parcours entre deux villes 00:14:42
    • Créer un parcours entre plusieurs villes 00:03:40
  • Exercice. Dynamiser la ville d'arrivée
    • Mettre en place les bases HTML et CSS 00:09:42
    • Mettre en place la technologie Ajax 00:14:10
    • Mettre en place la librairie leaflet routing machine 00:12:13
    • Mettre en place les icones 00:10:51
    • Mettre en place un titre de niveau 1 00:04:57
    • Mettre en place une animation d'attente 00:11:28
  • Pour la prochaine fois
    • Pour la prochaine fois 00:01:29



Formateur : Carl Brison

Carl Brison a publié 335 tutoriels et obtenu une note moyenne de 4,9/5 sur 19 061 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de zolb laissé 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”.
    "En effet, peut être une incompatibilité..."

  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
  • Que contient le fichier source ?
    Le code source complet de l'exercice
Parcours Developpeur Front End
accédez à plus de 1434 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données