Formation Leaflet 12/12 - Exercice. Permettre à l'utilisateur de définir un itinéraire
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

Formation Leaflet 12/12 - Exercice. Permettre à l'utilisateur de définir un itinéraire

Carl Brison
25,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Pour ce 12ème et dernier volet dédié à l'apprentissage de l'utilisation de la librairie Javascript Leaflet, nous allons réaliser un exercice d'application global qui va reprendre l'ensemble des compétences Leafleat acquises tout au long de cette formation en ligne.

Nous allons d'abord réaliser un formulaire dynamique qui permet à l'utilisateur d'entrer une ville de départ, puis une ville d'arrivée.
Un programme JavaScript récupérera ces deux informations afin d'interroger l'API nominatim via la technologie Ajax. Cela nous permettra d'obtenir la géolocalisation (latitude et longitude). Nous pourrons afficher sur une carte, un marqueur de la ville de départ ainsi qu'un marqueur pour la ville d'arrivée. Enfin, nous afficherons le trajet entre ces deux villes.

Afin de suivre ce cours dans de bonnes conditions, il est préférable de connaître :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Découvrir ce que nous allons réaliser
Leçon 2
Ecrire le HTML et le CSS
Leçon 3
Ecouter la ville de départ
Leçon 4
Récupérer la latitude et la longitude de la ville de départ
Leçon 5
Récupérer la latitude et la longitude de la ville d'arrivée
Leçon 6
Afficher le trajet sur la carte
Leçon 7
Afficher les marqueurs

Plan détaillé du cours

Leçon 1Découvrir ce que nous allons réaliser
03m27s
Leçon 2Ecrire le HTML et le CSS
07m26s
Leçon 3Ecouter la ville de départ
09m35s
Leçon 4Récupérer la latitude et la longitude de la ville de départ
04m52s
Leçon 5Récupérer la latitude et la longitude de la ville d'arrivée
07m25s
Leçon 6Afficher le trajet sur la carte
09m22s
Leçon 7Afficher les marqueurs
02m33s
Leçon 8Afficher ou cacher le champ demandant la ville d'arrivée
05m15s
Leçon 9Afficher ou cacher le champ demandant la ville de départ
03m30s
Leçon 10Créer un bouton de reload de la page courante
09m09s
Leçon 11Récupérer le nom de la ville de départ
09m36s
Leçon 12Afficher le nom de la ville de départ ainsi que le nom de la ville d'arrivée
06m14s
Leçon 13Mettre en place une animation d'attente
15m22s
Leçon 14Pour la prochaine fois
45s

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 08/11/2023
Merci pour ce bel outil, et à bientôt sur react!
Carl Brison
Carl Brison
Merci beaucoup pour votre confiance ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source de l'exercice

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données