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
Sous-titres non disponibles
1h34
de formation
14
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

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

4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
1h34
de formation
14
leçons vidéo
1
chapitre

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

Table des matières

Leçon 1

Découvrir ce que nous allons réaliser

03m27
Leçon 2

Ecrire le HTML et le CSS

07m26
Leçon 3

Ecouter la ville de départ

09m35
Leçon 4

Récupérer la latitude et la longitude de la ville de départ

04m52
Leçon 5

Récupérer la latitude et la longitude de la ville d'arrivée

07m25
Leçon 6

Afficher le trajet sur la carte

09m22
Leçon 7

Afficher les marqueurs

02m33
Leçon 8

Afficher ou cacher le champ demandant la ville d'arrivée

05m15
Leçon 9

Afficher ou cacher le champ demandant la ville de départ

03m30
Leçon 10

Créer un bouton de reload de la page courante

09m09
Leçon 11

Récupérer le nom de la ville de départ

09m36
Leçon 12

Afficher le nom de la ville de départ ainsi que le nom de la ville d'arrivée

06m14
Leçon 13

Mettre en place une animation d'attente

15m22
Leçon 14

Pour la prochaine fois

45s

Aperçus

Avis des apprenants

Détail des avis
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

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
24,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h34 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 791 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données