leafletCommencer avec la brochure


Remarques

Logo de la brochure

Leaflet est une bibliothèque JavaScript open source permettant de créer des cartes interactives.

Versions

Version Date de sortie
1.0.3 2017-01-23
1.0.2 2016-11-21
1.0.1 2016-09-30
1.0 2016-09-27
0.7 2013-11-18
0,6 2013-06-26
0.5 2013-01-17
0,4 2012-07-30
0.3 2012-02-13
0,2 2011-06-17
0,1 2011-05-16

Implémenter Leaflet.js avec HTML et JavaScript

Pour utiliser Leaflet, chargez sa feuille de style et son fichier JavaScript sur votre page:

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>
 

Ces ressources peuvent être téléchargées à partir de divers emplacements, tels que la page d'accueil de Leaflet ou le référentiel Leaflet Github , ou vous pouvez directement utiliser CDN comme,

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
 

Vous avez besoin d'un conteneur pour votre carte. Il est courant que les développeurs utilisent un div avec un identifiant de "map" pour cela. Assurez - vous de donner votre carte div une hauteur aussi bien ou la carte peut ne pas apparaître.

<div id="map" style="height: 200px;"></div>
 

L'initialisation de la carte se fait en créant un objet map à l'aide de la méthode Leaflet.map(mapContainerId) . Dans l'exemple ci-dessous, une latitude et une longitude sont définies par défaut avec un niveau de zoom par défaut de 13.

var map = L.map('map').setView([42.35, -71.08], 13);
 

Cela crée notre carte vide, nous devrions maintenant fournir une couche de tuiles pour agir comme notre carte de base. Un tilelayer est un service qui fournit des images de carte en mosaïque, de petites images accessibles par les paramètres x, y et z dans un ordre particulier (voir ci-dessous).

Une URL de couche de mosaïque pourrait ressembler à ceci, où {s} , {z} , {x} et {y} sont des espaces réservés que Leaflet changera automatiquement au cours de l'opération:

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"
 

Nous pouvons maintenant ajouter notre tilelayer, avec les informations d'attribution et le niveau de zoom maximal possible, et l'ajouter à la carte:

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);
 

Remarque: L' initialisation de la carte et le chargement de la couche de mosaïque doivent avoir lieu après l'inclusion de leaflet.js et de l'élément div conteneur de carte.

Guide de démarrage rapide

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>