Premiers pas avec le dépliant

Implémentation de 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][1] ou le [référentiel Leaflet Github][2], ou vous pouvez directement utiliser CDN comme,

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" ></script>

Vous avez besoin d’un conteneur pour votre carte. Il est courant pour les développeurs d’utiliser un div avec un identifiant de “map” pour cela. Assurez-vous de donner également une hauteur à votre carte div, sinon la carte pourrait ne pas s’afficher.

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

L’initialisation de la carte se fait en créant un objet carte à 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 devons maintenant fournir une couche de tuiles pour servir de carte de base. Un tilelayer est un service qui fournit des images cartographiques en tuiles, de petites images auxquelles on accède par les paramètres x, y et z dans un ordre particulier (voir ci-dessous).

Une URL de couche de tuiles peut ressembler à ceci, où {s}, {z}, {x} et {y} sont des espaces réservés que Leaflet changera automatiquement pendant le fonctionnement :

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

Nous pouvons maintenant ajouter notre tilelayer, ainsi que 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 tuiles doivent avoir lieu après l’inclusion de leaflet.js et de l’élément div du conteneur de carte.

[1] : http://www.leafletjs.com [2] : https://github.com/Leaflet/Leaflet

Dépliant Démarrage rapide

<!DOCTYPE html>
<html>

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

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

    <script src="//unpkg.com/[email protected]/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>