Formation Leaflet : Apprenez à créer des cartes interactives de qualité professionnelle
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Formation Leaflet : Apprenez à créer des cartes interactives de qualité professionnelle

Carl Brison
Promo -62%
99,00€261,00€
3 paiements de 33,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 1/12 - Prendre en main une carte OpenStreetMap Cours 1

Formation Leaflet 1/12 - Prendre en main une carte OpenStreetMap

Formation Leaflet 2/12 - Coupler une carte OpenStreetMap avec une base de données Cours 2

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 Cours 3

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 Cours 4

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 Cours 5

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 Cours 6

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 Cours 7

Formation Leaflet 7/12 - Afficher les restaurants disponibles dans un certain rayon

Formation Leaflet 8/12 - Définir un itinéraire sur une carte Cours 8

Formation Leaflet 8/12 - Définir un itinéraire sur une carte

Formation Leaflet 9/12 - Manipuler les cartes Cours 9

Formation Leaflet 9/12 - Manipuler les cartes

Formation Leaflet 10/12 - Exercice. Afficher les infos du lieu choisi par l'utilisateur Cours 10

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 Cours 11

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 Cours 12

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

Détail des avis
24
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Florent Lefevre
Florent Lefevre
Publié le 31/03/2024
Bonjour, Je viens de finir la totalité de vos cours sur Leaflet tres bien fait, mais j'aurai une question sur l'aspect de la sélection des markers au sein d'un rayon défini (trigonométrie). Existe t'il des api web services qui proposent la même chose que la requête SQL (cosinus avec degrés), pour sélectionner un ensemble de points cartographiques geojson et json au sein (inclus) d'un périmétrie défini. En effet, on utilise le stockage sur IPFS (Interplanetary Protocol File System - protocole Web 3.0) et on a de fait AUCUNE base de données relationnelles ou documentaire (type : couchDB). les fichiers sont stockées et adressées sous forme de clés hachées et gérées par DHT (Distrubuted Hash Table)., comme le peer to peer, comme BitTorrent. pour le répondre : florent.lefevre3@free.fr
Carl Brison
Carl Brison
Bonjour Florent, merci beaucoup pour votre commentaire. Malheureusement, je n'ai pas la réponse à votre question. Interrogez une IA, peut-être qu'elle pourra vous orienter sur une telle API. A bientôt, Carl.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard ou en 3x

Prix d'achat : 99,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 33,00 €
tous les mois, sans intérêts
Total : 99,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1384 tutos gratuits

Notre politique de protection des données