leafletKomma igång med broschyren


Anmärkningar

Broschyrlogotyp

Broschyren är ett open-source JavaScript-bibliotek för att skapa interaktiva kartor.

versioner

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

Implementera Leaflet.js med HTML och JavaScript

För att använda Broschyren, ladda dess stilark och JavaScript-fil till din sida:

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

Dessa resurser kan laddas ner från olika platser, till exempel Leaflets hemsida eller Leaflet Github-arkivet , eller så kan du direkt använda CDN som,

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

Du behöver en behållare för din karta. Det är vanligt att utvecklare använder en div med en ID för "karta" för detta. Se till att ge din karta div en höjd annars kan kartan kanske inte dyka upp.

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

Initialisering av kartan görs genom att skapa ett Leaflet.map(mapContainerId) metoden Leaflet.map(mapContainerId) . I exemplet nedan ställs en latitud och longitud in som standard med en standardzoomnivå på 13.

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

Detta skapar vår tomma karta, vi borde nu tillhandahålla ett kakellager för att fungera som vår baskarta. En kakel är en tjänst som tillhandahåller kartbilder i brickor, små bilder som nås av parametrarna x, y och z i en viss ordning (se nedan).

En URL-adress för ett flislager kan se ut så här, där {s} , {z} , {x} och {y} är platshållare som Broschyren automatiskt kommer att ändras under operationen:

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

Vi kan nu lägga till vårt plattskiva tillsammans med attributinfo och maximal möjlig zoomnivå och lägga till den på kartan:

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

Obs: Karta initiering och ladda kakelskiktet behöver ske efter införandet av leaflet.js och kartan behållaren div element.

Broschyr Snabbstart

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