12,00

Tuto Manipuler une carte OpenStreetMap avec Leaflet JS avec JavaScript

12,00

  • Une formation vidéo de 46m29s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Manipuler une carte OpenStreetMap avec Leaflet JS

ajouter ce cours aux favoris retirer ce cours des favoris

Dans ce tuto, nous allons apprendre à manipuler une cartographie en utilisant la librairie JavaScript Leaflet.

Leaflet est une bibliothèque JavaScript libre qui vous permet d'ajouter de l'interactivité sur une carte. Nous allons l'utiliser avec OpenStreetMap, logiciel de cartographie qui propose des cartes opensource.

Ces 2 services vous permettront de voir comment ajouter une carte sur votre site et comment manipuler cette carte en y ajoutant de l'interactivité.
 

Au programme de ce tuto comment manipuler une carte OpenStreetMap avec Leaflet JS 

  • Nous allons apprendre à éditer une carte,
  • Lui donner une taille,
  • Gérer les Zooms,
  • Nous apprendrons à manipuler des marqueurs. Nous installerons un puis plusieurs marqueurs sur la carte (nous personnaliserons également les marqueurs),
  • Nous en profiterons pour installer une popup sur les marqueurs, il s'agit de point d'informations que l'on couple aux marqueurs.

A la fin de ce tuto en vidéo, vous saurez comment éditer et manipuler très facilement une carte OpenStreetMap en utilisant la librairie JavaScript Leaflet.

Je mets à votre disposition, l'ensemble des codes utilisés dans ce tutoriel.
Je reste disponible dans le salon d'entraide pour répondre à vos questions. 
Un QCM est également disponible en fin de formation pour valider vos compétences.

Table des matières de cette formation JavaScript (durée : 46m29s)

  • Installation du plugin
    • Présentation gratuit 00:02:34
    • Installation des scripts de base gratuit 00:02:54
    • Installation de la couche de fond 00:05:33
    • Installation de la couche de la carte 00:03:03
  • Manipulation de la carte
    • Définition des Zooms gratuit 00:02:49
    • Changer de carte 00:01:34
    • Installer un marqueur 00:01:27
    • Installer un popup 00:02:55
  • Plusieurs marqueurs
    • Mise en place de plusieurs marqueurs 00:05:46
    • Rendre les marqueurs dynamiques 00:02:30
  • Personnalisation du marqueur
    • Mise en place d'un marqueur personnalisé 00:04:00
    • Déplacement du popup 00:01:37
  • Ajout de nouvelles infos sur la carte
    • Ajout d'un cercle 00:05:52
    • Ajout d'un polygone 00:02:22
  • Conclusion
    • Conclusion 00:01:33



Formateur : Carl Brison

Carl Brison a publié 306 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 551 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • Avec quelle version de logiciel ce tuto est-il compatible ?
    JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
Parcours Developpeur Front End
accédez à plus de 1422 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données