Leaflet deel 1 - NieneB/pzh_web_map GitHub Wiki
Leaflet is een open-source JavaScript library om interactieve kaarten mee te maken. Het is lichtgewicht, simpel en flexibel, en waarschijnlijk een van de meest populaire open-source mapping libraries van het moment. Leaflet is ontwikkeld door Vladimir Agafonkin (momenteel bij MapBox)en andere contributers.
Leaflet maakt "Slippy" maps met raster tegel basis lagen, gebruikers interactie zoals pannen en zoomen, en feature lagen die je zelf aanlevert. Het zorgt voor de meest basis taken als muis klik interacties en data omzetten naar kaart lagen, het is makkelijk uittebereiden met versichillende plug-ins.
Including a JavaScript library in your code is like copying and pasting someone else's code into yours. You have access to everything in that library. In our case, it's a bunch of cool tools to make web maps and give them familiar functionality.
In deel 1 van Leaflet gaan we de basis voor een web kaart opzetten en een standaard achtergrond kaart toevoegen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>basis HTML</title>
</head>
<body>
<H1>voorbeeld</H1>
</body>
</html>jouwWerkFolder en noem het index.html.
<div> in de <body>.
<div id="map"></div>De <div> is een soort frame waar de kaart gaat komen! Het frame bevat nu nog niks en is nog niks. We moeten het eerst dimensies geven om de inhoud te kunnen laten zien. We gaan de hoogte en breedte van het element aangeven in CSS, zodat de <div> straks zichtaar word. Later, gaan we de inhoud invullen met JavaScript. Om deze koppelingen te maken geven we een uniek id mee aan de <div> (hier "map") om er naar te kunnen verwijzen in zowel CSS als JavaScript.
main.css in jouwWerkFolder.
Met CSS gaan we de stijl van ons <div> element definiëren. We refereren doormidden van de id met de #map selector en geven het een hoogte en breedte:
#map {
height: 500px;
width:100%;
} Om ons CSS bestand te gebruiken moeten we deze toevoegen aan ons HTML bestand.
<link rel="stylesheet" href="main.css"/>Ga terug naar je index.html bestand en zet de volgende link naar je CSS bestand in de <head>.
<link rel="stylesheet" href="main.css"/>Nu gaan we echt starten met de JavaScript library Leaflet!
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script><head> van je HTML bestand.
<body>.
Vaak zie je dit ook in de
<head>staan. Het is sneller als je het juist zo ver mogelijk onderaan doet.
Als het goed is heb je nu dit:
<!doctype html>
<html>
<head>
<title>Mijn eerste web map</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<H1>example</H1>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</body>
</html>De basis staat!
Voor de echte kaart heb je een baselayer nodig. Dit is je ondergrond kaart. Deze is opgebouwd uit raster tegels ofwel allemaal kleine PNG plaatjes, dat laadt lekker snel.
<body> van je HTML bestand.
<script>
//initialize the map
var map = L.map('map').setView([52.18, 5.5308], 12);
//Create baselayer - tegels
var achtergrondkaart = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
attribution: '<a href="http://openstreetmap.org">OpenStreetMap</a>contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 19
}
);
achtergrondkaart.addTo(map);
</script>Je hebt nu een kaart gemaakt!
ℹ️ var map = L.map("map") is het initialiseren van een "map" variabele.
ℹ️ setView() is een manier voor het centreren van de map (latitude, longitude, zoom level).
ℹ️ De standaard projectie is in Google WebMercator EPSG:3857
ℹ️ Vervolgens voegden we een baselayer van tegels toe. L.tileLayer('http://...') haalt deze van internet. Deze komt bijvoorbeeld van OpenStreetMap.
ℹ️ achtergrondkaart.addTo() is het commando om de laag echt toe te voegen aan de map
Zie je een kaart? Super!
Open de debugger
- Klik met de rechter muisknop in het scherm van de browser en kies :
Inspect Element- Je kan ook F12 drukken.
De debugger laat de inhoud van de web pagina zien. Maar ook logs en errors! Ga naar het tab blad,
Web Consoleom te zien of er een error is die je een handig kan zijn om je web site de debuggen.Krijg je:
ReferenceError: L is not definedHerstructureer je bestand! Zet de
leaflet.js scriptboven je eigen script!
Oefen met verschillende tegels, coördinaten en zoom levels om een gevoel te krijgen wat deze parameters doen.
L.tileLayer (... ); om verschillende kaarten uit te proberen.
Kijk eens op Leaflet provider preview voor de verschillende kaarten die beschikbaar zijn.
Leaflet.js bevat de meest basis taken voor het maken van een Web Map. Daarom is het ook zo klein en snel. Ideaal voor kleine kaartjes en snelle toepassingen op de mobiel met weinig internet.
Een handige plugin is bijvoorbeeld de Leaflet-hash plugin. Deze laat de positie van de web kaart in de url van je web pagina zien. Zo kan je altijd terug naar waar je de kaart op hebt geopend.
Laten we deze plug-in toevoegen en gebruiken!
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.js"></script><script> in de html te zetten. Net onder de Leaflet library.
hash toevoegen aan onze map. Zet het onder de map.
// Hash in URL
var hash = new L.Hash(map);z/x/y positie van de kaart in de url staan?
We gaan een marker toevoegen op de plaats van het provinciehuis met een simpele popup voor als je er op klikt.
Voeg handmatig een marker toe:
var pzhuis = L.marker([52.087075, 4.317155]).addTo(map);JS
varstands for variable. Variables store data so that they can be used later on in the program. Here the keywordvarcreates a new variable namedmarker. The value stored is a Leaflet marker which is immediately added to our map.
var popup = "Dit is het Provincie Huis! ";
pzhuis.bindPopup(popup); JS Did you notice a
;at the end of every statement? The semicolon tells the computer that the statement has ended.
Our reference map consists of multiple tiles: static raster images. If you zoom or pan the map, new raster images are loaded into view. In this step, we will use native Leaflet JS functionality to draw markers, circles and polygons: vector objects. If you zoom or pan the map, these vector objects simply scale or move along.
Raster data is like a picture that you would take with a digital camera: at the lowest level of abstraction, it is a list of pixels with values. When you ‘zoom in’ and look closer at raster data using an image viewer application, at some point you’ll see these discrete pixels, and it will look pixelated.
Vector data stores basic geometries rather than pixel data. No matter how much you ‘zoom in’ on vector data, you won’t see pixels: the data stored is composed of geometric points and lines, and only converted into an image when necessary.
var circle = L.circle([52.087075, 4.317155], 4500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);JS The double slashes
//mark a Single line comment. Any text between//and the end of the line will be ignored by JavaScript (will not be executed). JavaScript comments can be used to explain JavaScript code, and to make it more readable.
Zie de Leaflet documentatie voor de mogelijkheden om een vector object te stijlen!
Werkt alles in je kaart?
➡️ Ga dan naar Leaflet deel 2