Formation Leaflet 1/12 - Prendre en main une carte OpenStreetMap
Formation Leaflet 1/12 - Prendre en main une carte OpenStreetMap
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 !
Cours dans ce bundle
Formation Leaflet 2/12 - Coupler une carte OpenStreetMap avec une base de données
Formation Leaflet 2/12 - Coupler une carte OpenStreetMap avec une base de données
Formation Leaflet 3/12 - Aller plus loin avec l'intéraction de la carte
Formation Leaflet 3/12 - Aller plus loin avec l'intéraction de la carte
Formation Leaflet 4/12 - Obtenir la latitude et la longitude automatiquement
Formation Leaflet 4/12 - Obtenir la latitude et la longitude automatiquement
Formation Leaflet 5/12 - Apprendre à dessiner des figures géométriques sur une carte
Formation Leaflet 5/12 - Apprendre à dessiner des figures géométriques sur une carte
Formation Leaflet 6/12 - Application. Afficher la découpe des régions sur une carte
Formation Leaflet 6/12 - Application. Afficher la découpe des régions sur une carte
Formation Leaflet 7/12 - Afficher les restaurants disponibles dans un certain rayon
Formation Leaflet 7/12 - Afficher les restaurants disponibles dans un certain rayon
Formation Leaflet 8/12 - Définir un itinéraire sur une carte
Formation Leaflet 8/12 - Définir un itinéraire sur une carte
Formation Leaflet 9/12 - Manipuler les cartes
Formation Leaflet 9/12 - Manipuler les cartes
Formation Leaflet 10/12 - Exercice. Afficher les infos du lieu choisi par l'utilisateur
Formation Leaflet 10/12 - Exercice. Afficher les infos du lieu choisi par l'utilisateur
Formation Leaflet 11/12 - Exercice. Permettre à l'utilisateur d'entrer une adresse
Formation Leaflet 11/12 - Exercice. Permettre à l'utilisateur d'entrer une adresse
Formation Leaflet 12/12 - Exercice. Permettre à l'utilisateur de définir un itinéraire
Formation Leaflet 12/12 - Exercice. Permettre à l'utilisateur de définir un itinéraire
Plan détaillé des cours
Chapitre 1 : Premiers pas avec OpenStreetMap
1h17
Leçon 1Découvrir OpenStreetMap
Leçon 2Installer la librairie leaflet
Leçon 3Installer la couche de fond
Leçon 4Installer la couche de carte
Leçon 5Gérer le zoom de la carte
Leçon 6Modifier la carte
Leçon 7Installer la couche de marqueur
Leçon 8Installer un popup
Leçon 9Installer une couche de plusieurs marqueurs
Leçon 10Dynamiser le contenu des popups
Leçon 11Personnaliser le marqueur
Leçon 12Déplacer les popups
Chapitre 2 : Validation des acquis
41m19
Leçon 1Découvrir l'exercice
Leçon 2Mettre en place les bases
Leçon 3Mettre en place la couche de fond et la couche de carte
Leçon 4Mettre en place les marqueurs
Leçon 5Afficher un marqueur personnalisé
Chapitre 3 : Pour la prochaine fois
02m36
Leçon 1Pour la prochaine fois
Leçon 1Prendre connaissance de ce que nous allons réaliser
06m39
Leçon 2Mettre en place la base de données
08m02
Leçon 3Mettre en place les bases de notre projet
05m49
Leçon 4Insérer des datas
06m13
Leçon 5Afficher la carte
06m44
Leçon 6Afficher l'icone
05m33
Leçon 7Mettre en place l'instance PDO
10m28
Leçon 8Créer une classe d'entité
17m40
Leçon 9Créer une classe manager
08m21
Leçon 10Créer la méthode ReadAllVille
17m42
Leçon 11Instancier notre classe d'entité et de manager
19m23
Leçon 12Complèment
01m53
Leçon 13Mettre en place la technologie AJAX
16m50
Leçon 14Afficher tous les marqueurs
12m48
Leçon 15Sécuriser l'affichage des marqueurs
03m10
Leçon 16Tester notre programme
03m36
Leçon 17Rendre notre script totalement dynamique
04m28
Leçon 18Mettre en place une animation d'attente
12m47
Leçon 19Programme l'affichage de l'animation d'attente
05m39
Leçon 20Pour la prochaine fois
01m36
Leçon 1Prendre connaissance de ce que nous allons réaliser
03m17
Leçon 2Modifier la base de données
09m23
Leçon 3Mettre en place une méthode de lecture des régions
11m02
Leçon 4Mettre en place le menu déroulant
09m35
Leçon 5Mettre en place la technologie AJAX
14m18
Leçon 6Mettre en place l'appel à la méthode readAllRegion
12m33
Leçon 7Modifier la méthode readAllVille
09m39
Leçon 8Adapter notre script à la nouvelle méthode readAllVille
10m14
Leçon 9Vider l'instance de la carte
07m10
Leçon 10Dynamiser le titre de niveau 1
03m22
Leçon 11Adapter le loading d'attente
08m54
Leçon 12Pour la prochaine fois
01m38
Leçon 1Revoir les bases de la mise en place d'une carte
10m38
Leçon 2Découvrir l'API Nominatim
06m11
Leçon 3Mettre en place un menu déroulant
06m38
Leçon 4Communiquer avec l'API Nominatim
18m35
Leçon 5Mettre en place la fonction reponse
05m05
Leçon 6Afficher la carte de la ville demandée
03m37
Leçon 7Améliorer notre page web
04m27
Leçon 8Mettre en place un loader
16m17
Leçon 9Pour la prochaine fois
01m30
Chapitre 1 : Dessiner des figures géométriques sur une carte
28m46
Leçon 1Apprendre à dessiner un cercle
Leçon 2Apprendre à dessiner un triangle
Leçon 3Apprendre à dessiner un rectangle
Leçon 4Apprendre à dessiner un polygone
Chapitre 2 : Installer des fichiers geojson
29m03
Leçon 1Récupérer des fichiers geojson
Leçon 2Afficher la carte sur une page web
Leçon 3Télécharger le fichier geoJson qui nous intéresse
Leçon 4Ecouter le chargement de la page
Leçon 5Interpréter un fichier geoJSON
Chapitre 3 : Pour la prochaine fois
01m42
Leçon 1Pour la prochaine fois
Leçon 1Comprendre le travail à réaliser
02m59
Leçon 2Ecrire le code HTML et CSS
07m12
Leçon 3Récupérer les fichiers geoJson
02m23
Leçon 4Créer la base de données
04m28
Leçon 5Instancier la classe PDO
05m35
Leçon 6Créer une classe d'entité
06m18
Leçon 7Créer une classe manager
11m41
Leçon 8Mettre en place la technologie Ajax
08m20
Leçon 9Mettre en place le fichier readAllRegion
14m12
Leçon 10Afficher les régions dans le menu déroulant
07m35
Leçon 11Mettre en place une animation d'attente
15m17
Leçon 12Ecouter la validation du formulaire
09m28
Leçon 13Ecrire la méthode readRegion
06m25
Leçon 14Appeler la méthode readRegion
07m07
Leçon 15Afficher la carte de france
06m46
Leçon 16Afficher la découpe de la région choisie
13m20
Leçon 17Réactualiser la carte
05m49
Leçon 18Pour la prochaine fois
01m23
Leçon 1Comprendre le travail à réaliser
03m07
Leçon 2Mettre en place les bases HTML et CSS
05m02
Leçon 3Mettre en place la base de données
03m58
Leçon 4Instancier la classe PDO
04m55
Leçon 5Mettre en place la classe d'entité
05m27
Leçon 6Mettre en place la classe manager
17m43
Leçon 7Mettre en place la technologie Ajax
09m25
Leçon 8Instancier la classe RestaurantManager
13m03
Leçon 9Afficher la carte
05m57
Leçon 10Afficher le cercle de recherche
04m37
Leçon 11Afficher les marqueurs
08m53
Leçon 12Afficher la popup d'un marqueur
03m17
Leçon 13Contrôler la présence d'un rayon correct
05m48
Leçon 14Mettre en place une animation d'attente
15m31
Leçon 15Pour la prochaine fois
01m33
Chapitre 1 : Définir un parcours sur une carte
18m22
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
1h03
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
01m29
Leçon 1Pour la prochaine fois
Chapitre 1 : Définir un geocodeur
28m52
Leçon 1Mettre en place les bases HTML, CSS et JS
Leçon 2Mettre en place un itinéraire
Leçon 3Prendre en main le géocodeur
Leçon 4Afficher les icones
Leçon 5Ajouter des options
Chapitre 2 : Complèment d'informations
44m09
Leçon 1Modifier la tuile de la carte
Leçon 2Récupérer dynamiquement la latitude et la longitude
Leçon 3Afficher des marqueurs
Leçon 4Afficher un seul marqueur à la fois
Leçon 5Déplacer un marqueur
Leçon 6Récupérer les infos du lieu
Chapitre 3 : Pour la prochaine fois
01m37
Leçon 1Pour la prochaine fois
Leçon 1Découvrir ce que nous allons faire
01m57
Leçon 2Ecrire les codes de base HTML et CSS
07m
Leçon 3Ecrire les codes de base de la librairie Leaflet
04m26
Leçon 4Ecouter le clic sur la carte
08m22
Leçon 5Récupérer les infos du lieu retournés par Nominatim
10m04
Leçon 6Afficher les infos du lieu retournés par Nominatim
10m22
Leçon 7Afficher un marqueur sur la carte
07m55
Leçon 8Déplacer le marqueur sur la carte
12m44
Leçon 9Effacer le marqueur précédent
03m28
Leçon 10Mettre en place une animation d'attente
15m25
Leçon 11Pour la prochaine fois
01m02
Leçon 1Découvrir ce que nous allons réaliser
02m25
Leçon 2Ecrire le HTML et le CSS
09m26
Leçon 3Ecouter l'événement du clic sur le bouton du formulaire
06m38
Leçon 4Appeler la librairie Nominatim
11m44
Leçon 5Afficher le marqueur à l'adresse entrée par l'utilisateur
13m31
Leçon 6Pour la prochaine fois
01m16
Leçon 1Découvrir ce que nous allons réaliser
03m27
Leçon 2Ecrire le HTML et le CSS
07m26
Leçon 3Ecouter la ville de départ
09m35
Leçon 4Récupérer la latitude et la longitude de la ville de départ
04m52
Leçon 5Récupérer la latitude et la longitude de la ville d'arrivée
07m25
Leçon 6Afficher le trajet sur la carte
09m22
Leçon 7Afficher les marqueurs
02m33
Leçon 8Afficher ou cacher le champ demandant la ville d'arrivée
05m15
Leçon 9Afficher ou cacher le champ demandant la ville de départ
03m30
Leçon 10Créer un bouton de reload de la page courante
09m09
Leçon 11Récupérer le nom de la ville de départ
09m36
Leçon 12Afficher le nom de la ville de départ ainsi que le nom de la ville d'arrivée
06m14
Leçon 13Mettre en place une animation d'attente
15m22
Leçon 14Pour la prochaine fois
45s
Avis des apprenants