Leaflet.js: Wat het is en waarvoor je het kunt gebruiken

Op veel websites staan een of meerdere landkaarten, al of niet voorzien van markers en/of de mogelijkheid een routebeschrijving te laten maken. Vaak wordt daarbij een webdienst voor gebruikt, zoals Maps van Google en Maps van Bing (=Microsoft).

Diensten als die van Google en Bing hebben een nadeel: Je kunt ze niet tot in detail aanpassen aan je eigen smaak en behoefte. Hier komt leaflet.js om de hoek kijken: daarmee kan het wel.

Leaflet.js is een JavaScript-platform waarmee je kaarten op je website kunt laten zien.

De kaarten worden geleverd door externe leveranciers. Op deze site is openstreetmap.org ingezet. Dat is een gemeenschap van kaartenmakers die gegevens over wegen, paden, cafés, treinstations en nog veel meer, over de hele wereld bijdragen en onderhouden.

De kaarten worden beschikbaar gesteld onder een Creative Commons Naams­vermelding-Gelijk delen 2.0 (CC BY-SA). Als je de deze kaarten gebruikt in je eigen site ben je gebonden aan de voorwaarden van die licentie.

Hier onder zie je een kaart die met Leaflet.js is gemaakt. Met een paar regels code maak je ruimte voor de kaart in je document, haal je een kaart op van de server een kaartenmaker en ze er markers en pop-ups in.

Leaflet.js geeft je veel mogelijkheden:

• Om een kaart op je site te zetten maak je een enkele <div>-tag met alleen een id. De afmetingen stel je in met CSS. Daarna volgt wat JavaScript, om de kaart in de div te zetten.
• Je geeft het middelpunt van de kaart aan met behulp van coördinaten in decimale graden, in combinatie met een zoom-instelling. Er kan gezoomd worden van 'de hele wereld' tot op straat-niveau met huisnummers.
• In plaats van de standaard-markers kun je ook je eigen markers maken en tonen op de kaart.
• Pop-ups zijn beschikbaar en kunnen naar wens verschijnen of verdwijnen bij het laden van de kaart, door er met de muis overheen te gaan en/of er op te klikken (op de hele kaart, op delen van de kaart of op markers).
• De kaart, delen daarvan en markers kunnen worden ingezet als hyperlink, bijvoorbeeld om de website van een winkel of restaurant te openen.

Als je een kaart van een externe leverancier gebruikt, ben je verplicht copyright-informatie er in op te nemen. Die verschijnt in de rechter onderhoek. Weglaten is mogelijk, maar is een inbreuk op de rechten van derden.

Leaflet.js is goed gedocumenteerd. Uitgebreide beschrijvingen van de API, voorbeelden (van eenvoudig to héél ingewikkeld) vind je op hun website.

Het middelpunt van de kaart geef je op met coördinaten in decimale graden. Noorderbreedte en Oosterlengte zijn positief, Zuiderbreedte en Westerlengte zijn negatief.
Voor het vinden van de juiste coördinaten kun je Google Maps, Google Earth of Bing Kaarten gebruiken. Omrekenen van graden-minuten-seconden naar decimale graden doe je met de formule: decimale graden = graden + minuten/60 + seconden/3600.

Om Leaflet.js te kunnen gebruiken heb je een JavaScript-file en een CSS-bestand nodig, dat je linkt in de head-sectie van je document. Je kunt die van een CDN halen of zelf de bestanden downloaden van de Leaflet.js-website en die hosten op je eigen server of provider.

Op het moment dat dit geschreven wordt is Leaflet.js versie 1.3.4. De makers wijzen erop dat volgende versies niet noodzakelijk achterwaarts compatibel zijn. Upgraden naar een volgende versie vraagt dus was studie en experimenteren vooraf.

Opmerking:
 
Een goed voorbeeld van het gebruik van Leafjet.js is Luchtmeetnet.nl. Vermoedelijk gebruiken zij een eigen kaart waar alleen Nederland op staat. De copyright-vermelding is daarom weggelaten.