Leaflet est un outil JavaScript simple d'utilisation et assez puissant qui nous permet de créer et d'afficher des cartes sur un site Web. Cet article vous guidera dans la configuration de Leaflet, puis dans la création d'une carte simple comportant une couche de mosaïque de Mapbox et quelques autres calques et fonctionnalités.

Première partie de deux:
Configuration de la carte

  1. 1 Ouvrez ou créez votre page Web. Si vous ne possédez pas encore de page Web dans laquelle vous souhaitez insérer la carte, vous pouvez utiliser le modèle HTML5 suivant. Enregistrez-le sous le nom 'map_page.html': 
      <html lang="fr"> <tête> <meta charset="utf-8"> <Titre>Ma carte de brochure</Titre> </tête> <corps>  </corps> </html>
  2. 2 Incluez les fiches JavaScript et les fichiers CSS. Votre page Web devra inclure le fichier JavaScript Leaflet et le fichier CSS. Pour ce faire, collez la ligne de code suivante dans votre fichier HTML, à l'intérieur du zone, sur une nouvelle ligne en dessous du : 
     <scénario src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></scénario> <lien rel="feuille de style" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  3. 3 Ajouter un conteneur de carte HTML. Leaflet affichera la carte dans un élément HTML, vous devez donc en fournir un pour cela. Collez la ligne de balisage suivante à l'intérieur du : 
     <div id="carte"></div>
  4. 4 Style du conteneur de carte. Vous devez définir la taille de la carte lorsqu'elle sera affichée et vous devez utiliser CSS pour ce faire. Vous pouvez ajouter les éléments suivants au document : 
     <>> #carte  la taille: 500px; largeur: 700px;  >
  5. 5 Créez l'objet carte. Pour commencer à écrire le code JavaScript qui configure la carte, vous devez ajouter un zone à la après le conteneur de carte div. Vous pouvez également créer l’objet cartographique en appelant le carte() fonction de l'objet dépliant, comme ceci: 
     <type de script='text / javascript'> var carte = L.carte('carte'); scénario>
  6. 6 Définissez la vue de la carte. La propriété de vue d'une carte Leaflet est ce qui gère quelle partie de la carte vous voyez. Définissez la vue de votre carte pour qu'elle soit centrée sur les coordonnées [0, 0] (au large des côtes de l'Afrique centrale):
    Remarque: Contrairement à la bibliothèque de cartographie OpenLayers, Leaflet traite des coordonnées dans le format [latitude, longitude]. 
     carte.setView([0, 0], 2);
  7. 7 Ajoutez une couche de tuiles. Les cartes de dépliant ont des couches empilées les unes sur les autres et sont ce que vous voyez réellement sur une carte. Il existe plusieurs types de calques: interface utilisateur (marqueurs et fenêtres contextuelles), raster (calques de mosaïque), vecteur (formes) et autres. Les couches de tuiles sont les couches standard de base et peuvent provenir de fournisseurs de cartes tels que Google Maps, MapQuest ou OpenStreetMaps. Chaque couche a un urlTemplate qui indique à Leaflet d'où proviennent les informations de la couche. Vous devez également fournir des informations d'attribution pour indiquer aux visiteurs d'où proviennent les tuiles de carte. 
     var couche = L.tileLayer('http: // s .tile.osm.org / z / x / y .png',  attribution: '© OpenStreetMap contributeurs ); couche.ajouter à(carte);


Deuxième partie de deux:
Ajout de couches et de fonctionnalités supplémentaires

  1. 1 Ajouter un marqueur Les marqueurs indiquent l'emplacement d'un point sur une carte. Dans Leaflet, les marqueurs sont un type de «couche d'interface utilisateur», de sorte qu'ils peuvent être directement ajoutés aux cartes. Copiez simplement la ligne de code suivante dans votre élément:. 
     var marqueur = L.marqueur([20, 20]); marqueur.ajouter à(carte);
  2. 2 Ajouter un popup Les fenêtres contextuelles permettent d'ajouter des informations contextuelles à un marqueur ou à un autre calque. 
     marqueur.bindPopup("Tchad"); marqueur.openPopup();
  3. 3 Ajouter une polyligne. Dans Leaflet, une polyligne est une ligne comportant plusieurs segments et constitue un type de «calque vectoriel». 
     var polyligne = L.polyligne([ [20, 10], [10, 20], [20, 30] ]) polyligne.ajouter à(carte);
  4. 4 Définir le style d'un calque vectoriel. Les styles déterminent l'apparence du vecteur et incluent la couleur de la ligne, le style de trait, la couleur de remplissage, l'opacité, etc. Différentes options de style s'appliquent à différents types de vecteurs. Par exemple, une polyligne n'a pas d'aire, donc les options de remplissage ne s'appliquent pas. 
     polyligne.setStyle( Couleur: 'rouge' );
  5. 5 Ajouter un contrôle d'échelle. Les contrôles vous permettent d'interagir avec la carte de différentes manières ou d'afficher des informations supplémentaires sur la carte. Un contrôle d'échelle affiche la distance sur la carte, qui change lorsque la carte est agrandie. 
     var échelle = L.contrôle.échelle() échelle.ajouter à(carte);
  6. 6 La carte finie