leafletIniziare con il volantino


Osservazioni

Leaflet Logo

Leaflet è una libreria JavaScript open source per la creazione di mappe interattive.

Versioni

Versione Data di rilascio
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

Implementazione di Leaflet.js con HTML e JavaScript

Per usare Leaflet, carica il suo foglio di stile e il file JavaScript nella tua pagina:

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

Queste risorse possono essere scaricate da una varietà di luoghi come la homepage di Leaflet o il repository Github Leaflet , oppure puoi usare direttamente CDN come,

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

Hai bisogno di un contenitore per la tua mappa. È comune per gli sviluppatori utilizzare un div con un id di "mappa" per questo. Assicurati di dare un'altezza alla tua div della mappa o che la mappa non venga visualizzata.

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

L'inizializzazione della mappa viene effettuata creando un oggetto mappa utilizzando il Leaflet.map(mapContainerId) . Nell'esempio seguente, una latitudine e una longitudine sono impostate come predefinite con un livello di zoom predefinito di 13.

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

Questo crea la nostra mappa vuota, dovremmo ora fornire un livello tile per agire come la nostra mappa di base. Un tilelayer è un servizio che fornisce immagini di mappe in tessere, piccole immagini a cui si accede con i parametri x, yez in un ordine particolare (vedi sotto).

Un URL del tile layer può apparire come questo, dove {s} , {z} , {x} e {y} sono segnaposto che Leaflet cambierà automaticamente durante l'operazione:

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

Ora possiamo aggiungere il nostro tilelayer, insieme alle informazioni di attribuzione e al massimo livello di zoom possibile, e aggiungerlo alla mappa:

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);
 

Nota: l' inizializzazione della mappa e il caricamento del layer tile devono verificarsi dopo l'inclusione di leaflet.js e dell'elemento div contenitore di mappe.

Volantino Quick Start

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