Leaflet is een eenvoudig te gebruiken en tamelijk krachtige JavaScript-tool waarmee we kaarten op een website kunnen maken en weergeven. Dit artikel zal je helpen bij het opzetten van Leaflet en vervolgens een eenvoudige kaart maken met een tegellaag van Mapbox en een paar andere lagen en functies.

Deel een van de twee:
De kaart instellen

  1. 1 Open of maak uw webpagina. Als u nog geen webpagina heeft waar u de kaart in wilt invoegen, kunt u de volgende HTML5-sjabloon gebruiken; sla het op als 'map_page.html': 
      <html LANG="En"> <hoofd> <meta charset="UTF-8"> <titel>My Leaflet Map</titel> </hoofd> <lichaam>  </lichaam> </html>
  2. 2 Neem de leaflet JavaScript- en CSS-bestanden op. Uw webpagina moet het leaflet JavaScript-bestand en CSS-bestand bevatten. Plak hiertoe de volgende regel code in uw HTML-bestand, in de gebied, op een nieuwe regel onder de : 
     <script src="Http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> <link rel="Stylesheet" href="Http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  3. 3 Voeg een HTML-kaartcontainer toe. In de bijsluiter wordt de kaart in een HTML-element weergegeven, dus u moet er een opgeven. Plak de volgende regel met markeringen in de : 
     <div ID kaart="kaart"></div>
  4. 4 Stijl de kaartcontainer. U moet instellen hoe groot de kaart zal zijn wanneer deze wordt weergegeven en u moet CSS gebruiken om dit te doen. U kunt het volgende aan het document toevoegen : 
     <>> #kaart  hoogte: 500px; breedte: 700px;  >
  5. 5 Maak het kaartobject. Als u wilt beginnen met het schrijven van de JavaScript-code die de kaart instelt, moet u een gebied naar de na de kaartcontainer div. Ook hierbinnen kunt u het kaartobject maken door het kaart() functie van het folderobject, zoals dit: 
     <scripttype='Text / javascript'> var kaart = L.kaart('kaart'); script>
  6. 6 Stel de kaartweergave in. De weergaveeigenschap van een leafletkaart is wat beheert welk deel van de kaart u ziet. Stel de weergave van je kaart in op de coördinaten [0, 0] (voor de kust van centraal Afrika):
    Notitie: In tegenstelling tot de OpenLayers-toewijzingsbibliotheek, behandelt Leaflet coördinaten in het formaat [breedtegraad, lengtegraad]. 
     kaart.setview([0, 0], 2);
  7. 7 Voeg een tegellaag toe. Leafletmappen hebben lagen die op elkaar zijn gestapeld en zijn wat u daadwerkelijk op een kaart ziet. Er zijn verschillende soorten lagen: UI (markeringen en pop-ups), Raster (tegellagen), Vector (vormen) en Overig. Tegellagen zijn de standaard 'basislagen' en kunnen afkomstig zijn van kaartaanbieders zoals Google Maps, MapQuest of OpenStreetMaps. Elke laag heeft een urlTemplate, die Leaflet vertelt waar de laaginformatie vandaan komt. Je moet ook toewijzingsinformatie opgeven om bezoekers te laten zien waar de kaarttegels vandaan komen. 
     var laag = L.tileLayer('Http: // s .tile.osm.org / z / x / y PNG',  attributie: '© OpenStreetMap contributors' ); laag.optellen bij(kaart);


Deel twee van twee:
Extra lagen en functies toevoegen

  1. 1 Voeg een marker toe. Markeringen geven de locatie van een punt op een kaart aan. In Leaflet zijn markeringen een type 'UI-laag', zodat ze direct aan kaarten kunnen worden toegevoegd. Kopieer eenvoudig de volgende regel code naar uw element:. 
     var markeerstift = L.markeerstift([20, 20]); markeerstift.optellen bij(kaart);
  2. 2 Voeg een popup toe. Pop-ups worden gebruikt om contextuele informatie toe te voegen aan een markering of andere laag. 
     markeerstift.bindPopup('Tsjaad'); markeerstift.openPopup();
  3. 3 Voeg een polylijn toe. In Leaflet is een polylijn een lijn met meerdere segmenten en is het een soort 'vectorlaag'. 
     var polyline = L.polyline([ [20, 10], [10, 20], [20, 30] ]) polylijn.optellen bij(kaart);
  4. 4 Stel de stijl van een vectorlaag in. Stijlen bepalen hoe de vector eruit ziet en omvatten lijnkleur, lijnstijl, opvulkleur, dekking, enzovoort. Verschillende stijlopties zijn van toepassing op verschillende soorten vectoren; een polylijn heeft bijvoorbeeld geen gebied, dus de vulopties zijn niet van toepassing. 
     polylijn.setStyle( kleur: 'rood' );
  5. 5 Voeg een schaalcontrole toe. Via besturingselementen kun je op verschillende manieren met de kaart communiceren of aanvullende informatie over de kaart weergeven. Een schaalbesturing geeft aan hoe groot de afstand op de kaart is, wat verandert wanneer de kaart wordt ingezoomd. 
     var schaal = L.controle.schaal() schaal.optellen bij(kaart);
  6. 6 De voltooide kaart.