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
1h17m
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
41m19s
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
02m36s
Leçon 1Pour la prochaine fois
Leçon 1Prendre connaissance de ce que nous allons réaliser
06m39s
Leçon 2Mettre en place la base de données
08m02s
Leçon 3Mettre en place les bases de notre projet
05m49s
Leçon 4Insérer des datas
06m13s
Leçon 5Afficher la carte
06m44s
Leçon 6Afficher l'icone
05m33s
Leçon 7Mettre en place l'instance PDO
10m28s
Leçon 8Créer une classe d'entité
17m40s
Leçon 9Créer une classe manager
08m21s
Leçon 10Créer la méthode ReadAllVille
17m42s
Leçon 11Instancier notre classe d'entité et de manager
19m23s
Leçon 12Complèment
01m53s
Leçon 13Mettre en place la technologie AJAX
16m50s
Leçon 14Afficher tous les marqueurs
12m48s
Leçon 15Sécuriser l'affichage des marqueurs
03m10s
Leçon 16Tester notre programme
03m36s
Leçon 17Rendre notre script totalement dynamique
04m28s
Leçon 18Mettre en place une animation d'attente
12m47s
Leçon 19Programme l'affichage de l'animation d'attente
05m39s
Leçon 20Pour la prochaine fois
01m36s
Leçon 1Prendre connaissance de ce que nous allons réaliser
03m17s
Leçon 2Modifier la base de données
09m23s
Leçon 3Mettre en place une méthode de lecture des régions
11m02s
Leçon 4Mettre en place le menu déroulant
09m35s
Leçon 5Mettre en place la technologie AJAX
14m18s
Leçon 6Mettre en place l'appel à la méthode readAllRegion
12m33s
Leçon 7Modifier la méthode readAllVille
09m39s
Leçon 8Adapter notre script à la nouvelle méthode readAllVille
10m14s
Leçon 9Vider l'instance de la carte
07m10s
Leçon 10Dynamiser le titre de niveau 1
03m22s
Leçon 11Adapter le loading d'attente
08m54s
Leçon 12Pour la prochaine fois
01m38s
Leçon 1Revoir les bases de la mise en place d'une carte
10m38s
Leçon 2Découvrir l'API Nominatim
06m11s
Leçon 3Mettre en place un menu déroulant
06m38s
Leçon 4Communiquer avec l'API Nominatim
18m35s
Leçon 5Mettre en place la fonction reponse
05m05s
Leçon 6Afficher la carte de la ville demandée
03m37s
Leçon 7Améliorer notre page web
04m27s
Leçon 8Mettre en place un loader
16m17s
Leçon 9Pour la prochaine fois
01m30s
Chapitre 1 : Dessiner des figures géométriques sur une carte
28m46s
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
29m03s
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
01m42s
Leçon 1Pour la prochaine fois
Leçon 1Comprendre le travail à réaliser
02m59s
Leçon 2Ecrire le code HTML et CSS
07m12s
Leçon 3Récupérer les fichiers geoJson
02m23s
Leçon 4Créer la base de données
04m28s
Leçon 5Instancier la classe PDO
05m35s
Leçon 6Créer une classe d'entité
06m18s
Leçon 7Créer une classe manager
11m41s
Leçon 8Mettre en place la technologie Ajax
08m20s
Leçon 9Mettre en place le fichier readAllRegion
14m12s
Leçon 10Afficher les régions dans le menu déroulant
07m35s
Leçon 11Mettre en place une animation d'attente
15m17s
Leçon 12Ecouter la validation du formulaire
09m28s
Leçon 13Ecrire la méthode readRegion
06m25s
Leçon 14Appeler la méthode readRegion
07m07s
Leçon 15Afficher la carte de france
06m46s
Leçon 16Afficher la découpe de la région choisie
13m20s
Leçon 17Réactualiser la carte
05m49s
Leçon 18Pour la prochaine fois
01m23s
Leçon 1Comprendre le travail à réaliser
03m07s
Leçon 2Mettre en place les bases HTML et CSS
05m02s
Leçon 3Mettre en place la base de données
03m58s
Leçon 4Instancier la classe PDO
04m55s
Leçon 5Mettre en place la classe d'entité
05m27s
Leçon 6Mettre en place la classe manager
17m43s
Leçon 7Mettre en place la technologie Ajax
09m25s
Leçon 8Instancier la classe RestaurantManager
13m03s
Leçon 9Afficher la carte
05m57s
Leçon 10Afficher le cercle de recherche
04m37s
Leçon 11Afficher les marqueurs
08m53s
Leçon 12Afficher la popup d'un marqueur
03m17s
Leçon 13Contrôler la présence d'un rayon correct
05m48s
Leçon 14Mettre en place une animation d'attente
15m31s
Leçon 15Pour la prochaine fois
01m33s
Chapitre 1 : Définir un parcours sur une carte
18m22s
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
1h03m
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
01m29s
Leçon 1Pour la prochaine fois
Chapitre 1 : Définir un geocodeur
28m52s
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
44m09s
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
01m37s
Leçon 1Pour la prochaine fois
Leçon 1Découvrir ce que nous allons faire
01m57s
Leçon 2Ecrire les codes de base HTML et CSS
07m
Leçon 3Ecrire les codes de base de la librairie Leaflet
04m26s
Leçon 4Ecouter le clic sur la carte
08m22s
Leçon 5Récupérer les infos du lieu retournés par Nominatim
10m04s
Leçon 6Afficher les infos du lieu retournés par Nominatim
10m22s
Leçon 7Afficher un marqueur sur la carte
07m55s
Leçon 8Déplacer le marqueur sur la carte
12m44s
Leçon 9Effacer le marqueur précédent
03m28s
Leçon 10Mettre en place une animation d'attente
15m25s
Leçon 11Pour la prochaine fois
01m02s
Leçon 1Découvrir ce que nous allons réaliser
02m25s
Leçon 2Ecrire le HTML et le CSS
09m26s
Leçon 3Ecouter l'événement du clic sur le bouton du formulaire
06m38s
Leçon 4Appeler la librairie Nominatim
11m44s
Leçon 5Afficher le marqueur à l'adresse entrée par l'utilisateur
13m31s
Leçon 6Pour la prochaine fois
01m16s
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
Avis des apprenants