Ce Bundle sur la librairie Leaflet vous permettra d'acquérir les compétences nécessaires pour créer des cartes interactives de qualité professionnelle, à partir de données cartographiques de votre choix. Vous apprendrez à utiliser Leaflet, une bibliothèque JavaScript open source qui permet de créer des cartes interactives pour le Web.
Contenu de cette formation Leaflet complète :
- Introduction à Leaflet : Comprenez les bases de Leaflet, son architecture, et ses fonctionnalités principales.
- Gestion des Données Géospatiales : Apprenez à intégrer des données géospatiales dans vos cartes, y compris des marqueurs, des formes géométriques, et des couches de fond.
- Personnalisation des Cartes : Explorez les techniques pour personnaliser l'apparence de vos cartes en utilisant des styles, des pop-ups, et des icônes personnalisées.
- Interactivité et Événements : Découvrez comment rendre vos cartes interactives en réagissant aux événements tels que les clics, les survols, et les déplacements.
- Géolocalisation : Intégrez des fonctionnalités de géolocalisation pour permettre aux utilisateurs de rechercher des endroits et de naviguer sur la carte.
- Visualisation de Données : Apprenez à représenter des données complexes sur vos cartes, y compris des tracés de données et des clusters de marqueurs.
- Intégration de Plugins : Découvrez les plug-ins Leaflet populaires pour ajouter des fonctionnalités avancées à vos cartes.
Cette formation en ligne est adaptée aux débutants et aux développeurs expérimentés qui souhaitent maîtriser Leaflet pour créer des cartes interactives web à la pointe de la technologie.
À la fin de la formation, vous serez en mesure de concevoir des cartes web professionnelles et d'intégrer des fonctionnalités géospatiales avancées dans vos projets.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bonne formation !
Tuto composant ce bundle :
Formation Leaflet 1/12 - Prendre en main une carte OpenStreetMap (voir la fiche produit)
Premiers pas avec OpenStreetMap
- Découvrir OpenStreetMap 00:06:20
- Installer la librairie leaflet 00:09:16
- Installer la couche de fond 00:10:56
- Installer la couche de carte 00:05:55
- Gérer le zoom de la carte 00:06:03
- Modifier la carte 00:02:46
- Installer la couche de marqueur 00:06:54
- Installer un popup 00:04:44
- Installer une couche de plusieurs marqueurs 00:08:24
- Dynamiser le contenu des popups 00:03:14
- Personnaliser le marqueur 00:10:58
- Déplacer les popups 00:02:19
Validation des acquis
- Découvrir l'exercice 00:05:12
- Mettre en place les bases 00:05:38
- Mettre en place la couche de fond et la couche de carte 00:07:55
- Mettre en place les marqueurs 00:13:39
- Afficher un marqueur personnalisé 00:08:55
Pour la prochaine fois
- Pour la prochaine fois 00:02:36
Formation Leaflet 2/12 - Coupler une carte OpenStreetMap avec une base de données (voir la fiche produit)
- Prendre connaissance de ce que nous allons réaliser 00:06:39
- Mettre en place la base de données 00:08:02
- Mettre en place les bases de notre projet 00:05:49
- Insérer des datas 00:06:13
- Afficher la carte 00:06:44
- Afficher l'icone 00:05:33
- Mettre en place l'instance PDO 00:10:28
- Créer une classe d'entité 00:17:40
- Créer une classe manager 00:08:21
- Créer la méthode ReadAllVille 00:17:42
- Instancier notre classe d'entité et de manager 00:19:23
- Complèment 00:01:53
- Mettre en place la technologie AJAX 00:16:50
- Afficher tous les marqueurs 00:12:48
- Sécuriser l'affichage des marqueurs 00:03:10
- Tester notre programme 00:03:36
- Rendre notre script totalement dynamique 00:04:28
- Mettre en place une animation d'attente 00:12:47
- Programme l'affichage de l'animation d'attente 00:05:39
- Pour la prochaine fois 00:01:36
Formation Leaflet 3/12 - Aller plus loin avec l'intéraction de la carte (voir la fiche produit)
- Prendre connaissance de ce que nous allons réaliser 00:03:17
- Modifier la base de données 00:09:23
- Mettre en place une méthode de lecture des régions 00:11:02
- Mettre en place le menu déroulant 00:09:35
- Mettre en place la technologie AJAX 00:14:18
- Mettre en place l'appel à la méthode readAllRegion 00:12:33
- Modifier la méthode readAllVille 00:09:39
- Adapter notre script à la nouvelle méthode readAllVille 00:10:14
- Vider l'instance de la carte 00:07:10
- Dynamiser le titre de niveau 1 00:03:22
- Adapter le loading d'attente 00:08:54
- Pour la prochaine fois 00:01:38
Formation Leaflet 4/12 - Obtenir la latitude et la longitude automatiquement (voir la fiche produit)
- Revoir les bases de la mise en place d'une carte 00:10:38
- Découvrir l'API Nominatim 00:06:11
- Mettre en place un menu déroulant 00:06:38
- Communiquer avec l'API Nominatim 00:18:35
- Mettre en place la fonction reponse 00:05:05
- Afficher la carte de la ville demandée 00:03:37
- Améliorer notre page web 00:04:27
- Mettre en place un loader 00:16:17
- Pour la prochaine fois 00:01:30
Formation Leaflet 5/12 - Apprendre à dessiner des figures géométriques sur une carte (voir la fiche produit)
Dessiner des figures géométriques sur une carte
- Apprendre à dessiner un cercle 00:14:27
- Apprendre à dessiner un triangle 00:07:44
- Apprendre à dessiner un rectangle 00:03:15
- Apprendre à dessiner un polygone 00:03:20
Installer des fichiers geojson
- Récupérer des fichiers geojson 00:02:56
- Afficher la carte sur une page web 00:06:39
- Télécharger le fichier geoJson qui nous intéresse 00:02:57
- Ecouter le chargement de la page 00:08:53
- Interpréter un fichier geoJSON 00:07:38
Pour la prochaine fois
- Pour la prochaine fois 00:01:42
Formation Leaflet 6/12 - Application. Afficher la découpe des régions sur une carte (voir la fiche produit)
- Comprendre le travail à réaliser 00:02:59
- Ecrire le code HTML et CSS 00:07:12
- Récupérer les fichiers geoJson 00:02:23
- Créer la base de données 00:04:28
- Instancier la classe PDO 00:05:35
- Créer une classe d'entité 00:06:18
- Créer une classe manager 00:11:41
- Mettre en place la technologie Ajax 00:08:20
- Mettre en place le fichier readAllRegion 00:14:12
- Afficher les régions dans le menu déroulant 00:07:35
- Mettre en place une animation d'attente 00:15:17
- Ecouter la validation du formulaire 00:09:28
- Ecrire la méthode readRegion 00:06:25
- Appeler la méthode readRegion 00:07:07
- Afficher la carte de france 00:06:46
- Afficher la découpe de la région choisie 00:13:20
- Réactualiser la carte 00:05:49
- Pour la prochaine fois 00:01:23
Formation Leaflet 7/12 - Afficher les restaurants disponibles dans un certain rayon (voir la fiche produit)
- Comprendre le travail à réaliser gratuit00:03:07
- Mettre en place les bases HTML et CSS 00:05:02
- Mettre en place la base de données 00:03:58
- Instancier la classe PDO 00:04:55
- Mettre en place la classe d'entité 00:05:27
- Mettre en place la classe manager 00:17:43
- Mettre en place la technologie Ajax 00:09:25
- Instancier la classe RestaurantManager 00:13:03
- Afficher la carte 00:05:57
- Afficher le cercle de recherche 00:04:37
- Afficher les marqueurs 00:08:53
- Afficher la popup d'un marqueur 00:03:17
- Contrôler la présence d'un rayon correct 00:05:48
- Mettre en place une animation d'attente 00:15:31
- Pour la prochaine fois 00:01:33
Formation Leaflet 8/12 - Définir un itinéraire sur une carte (voir la fiche produit)
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
Formation Leaflet 9/12 - Manipuler les cartes (voir la fiche produit)
Définir un geocodeur
- Mettre en place les bases HTML, CSS et JS 00:06:08
- Mettre en place un itinéraire 00:09:09
- Prendre en main le géocodeur 00:04:45
- Afficher les icones 00:03:55
- Ajouter des options 00:04:55
Complèment d'informations
- Modifier la tuile de la carte 00:10:36
- Récupérer dynamiquement la latitude et la longitude 00:08:10
- Afficher des marqueurs 00:06:43
- Afficher un seul marqueur à la fois 00:02:43
- Déplacer un marqueur 00:10:34
- Récupérer les infos du lieu 00:05:23
Pour la prochaine fois
- Pour la prochaine fois 00:01:37
Formation Leaflet 10/12 - Exercice. Afficher les infos du lieu choisi par l'utilisateur (voir la fiche produit)
- Découvrir ce que nous allons faire 00:01:57
- Ecrire les codes de base HTML et CSS 00:07:00
- Ecrire les codes de base de la librairie Leaflet 00:04:26
- Ecouter le clic sur la carte 00:08:22
- Récupérer les infos du lieu retournés par Nominatim 00:10:04
- Afficher les infos du lieu retournés par Nominatim 00:10:22
- Afficher un marqueur sur la carte 00:07:55
- Déplacer le marqueur sur la carte 00:12:44
- Effacer le marqueur précédent 00:03:28
- Mettre en place une animation d'attente 00:15:25
- Pour la prochaine fois 00:01:02
Formation Leaflet 11/12 - Exercice. Permettre à l'utilisateur d'entrer une adresse (voir la fiche produit)
- Découvrir ce que nous allons réaliser 00:02:25
- Ecrire le HTML et le CSS 00:09:26
- Ecouter l'événement du clic sur le bouton du formulaire 00:06:38
- Appeler la librairie Nominatim 00:11:44
- Afficher le marqueur à l'adresse entrée par l'utilisateur 00:13:31
- Pour la prochaine fois 00:01:16
Formation Leaflet 12/12 - Exercice. Permettre à l'utilisateur de définir un itinéraire (voir la fiche produit)
- Découvrir ce que nous allons réaliser 00:03:27
- Ecrire le HTML et le CSS 00:07:26
- Ecouter la ville de départ 00:09:35
- Récupérer la latitude et la longitude de la ville de départ 00:04:52
- Récupérer la latitude et la longitude de la ville d'arrivée 00:07:25
- Afficher le trajet sur la carte 00:09:22
- Afficher les marqueurs 00:02:33
- Afficher ou cacher le champ demandant la ville d'arrivée 00:05:15
- Afficher ou cacher le champ demandant la ville de départ 00:03:30
- Créer un bouton de reload de la page courante 00:09:09
- Récupérer le nom de la ville de départ 00:09:36
- Afficher le nom de la ville de départ ainsi que le nom de la ville d'arrivée 00:06:14
- Mettre en place une animation d'attente 00:15:22
- Pour la prochaine fois 00:00:45
Formateur : Carl Brison
Avis des clients
Questions sur le tuto
-
Quel est le niveau requis pour suivre ce tuto ?débutant
