leafletAan de slag met folder


Opmerkingen

Leaflet-logo

Leaflet is een open-source JavaScript-bibliotheek voor het maken van interactieve kaarten.

versies

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

Leaflet.js implementeren met HTML en JavaScript

Om Leaflet te gebruiken, laadt u het stylesheet en JavaScript-bestand naar uw pagina:

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

Deze bronnen kunnen worden gedownload van verschillende locaties, zoals de startpagina van Leaflet of de Leaflet Github-repository , of u kunt CDN direct gebruiken als,

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

U heeft een container nodig voor uw kaart. Het is gebruikelijk dat ontwikkelaars hiervoor een div met een id van "map". Zorg ervoor dat u uw kaart div een hoogte geeft, anders wordt de kaart mogelijk niet weergegeven.

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

De kaart wordt Leaflet.map(mapContainerId) door een Leaflet.map(mapContainerId) maken met de methode Leaflet.map(mapContainerId) . In het onderstaande voorbeeld zijn een breedte- en lengtegraad als standaard ingesteld met een standaard zoomniveau van 13.

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

Dit maakt onze lege kaart, we moeten nu een tegellaag leveren die als onze basiskaart fungeert. Een tilelayer is een service die kaartafbeeldingen biedt in tegels, kleine afbeeldingen die worden benaderd door x-, y- en z-parameters in een bepaalde volgorde (zie hieronder).

Een tegellaag-URL kan er zo uitzien, waarbij {s} , {z} , {x} en {y} tijdelijke aanduidingen zijn die Leaflet tijdens bedrijf automatisch zal wijzigen:

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

We kunnen nu onze tilelayer toevoegen, samen met attributiegegevens en het maximale zoomniveau, en deze toevoegen aan de kaart:

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

Opmerking: leaflet.js en het laden van de leaflet.js moeten plaatsvinden na de opname van leaflet.js en het div element van de leaflet.js .

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