In deze tutorial maken we een eigen webkaart met Mapbox Studio en CartoCSS, en voegen we gemeentegrenzen toe met Leaflet. Deze tutorial is gemaakt voor de Maptime-workshop tijdens het beginevenement van Code for NL, op 6 maart 2015.
Voor meer informatie over Maptime, zie:
Voor deze tutorial heb je een paar dingen nodig:
- Mapbox Studio, en een Mapbox-account.
- Een moderne browser, zoals Firefox, Safari, Chrome, of een recente versie van Internet Explorer.
- Een goede texteditor, bijvoorbeeld Sublime Text, Textmate of Notepad++.
De tutorial bestaat uit twee onderdelen:
- Deel 1: We downloaden en installeren van Mapbox Studio, we maken een eigen kaartstijl met CartoCSS, en publiceren deze via Mapbox.com.
- Deel 2: We downloaden gemeentegrensdata van 't CBS, en we maken een simpele webpagina met HTML en Leaflet.
Ga naar https://www.mapbox.com/mapbox-studio/ en download Mapbox Studio. Mapbox Studio is beschikbaar voor Mac OS, Windows en Linux.
Om Mapbox Studio te gebruiken heb je een Mapbox-account nodig: https://www.mapbox.com/signup/.
Start Mapbox Studio, log in, en begin een nieuw project.
Klik op Save as, en kies een locatie op je harde schijf.
Nu begint het echte werk! Met Mapbox Studio kun je je kaart vormgeven met behulp van CartoCSS, een op CSS-gebaseerde stijltaal. Je kunt CartoCSS het beste leren door het gewoon te proberen: kijk naar de met Mapbox Studio meegeleverde voorbeeldkaartstijlen (via github.com/mapbox kun je er nog meer vinden) en pas waardes aan en kijk wat er gebeurt.
Ook staan er veel goede tutorials online, bijvoorbeeld:
- https://www.mapbox.com/guides/intro-to-studio/
- https://speakerdeck.com/almccon/advanced-cartocss-tricks-foss4g-2014
Geef de kaart een blauwe achtergrondkleur:
Map {
background-color: #0000ff;
}Teken snelwegen met een donkergrijze lijn:
#road {
[class='motorway'] {
line-color: #444;
line-cap: round;
line-width: 0.6;
}
}In Mapbox Studio kun je via de knop Docs documentatie over CartoCSS bekijken.
Via de knop Layers krijg je informatie over de beschikbaren datalagen.
Via Settings kun je de instellingen van je kaart aanpassen. Dit is niet nodig, maar het is handig als je je kaart een eigen startpositie geeft (klik op het slotje en beweeg de kaart op de huidige positie van de kaart over te nemen). Mapbox Studio centreert de kaart op deze positie als je je kaart later opnieuw opent.
Met een gratis Mapbox-account kun je één eigen kaartstijl via Mapbox.com publiceren. Dit is nodig als je je kaart via een webpagina wilt ontsluiten (dat doen we in deel 2 van deze tutorial). Sla de kaart op, daarna kun je met de knop Upload to Mapbox uploaden naar Mapbox.com. Je kaart krijgt dan een eigen Map ID, deze heb je later nodig. Via https://www.mapbox.com/styles/ krijg je een overzicht van je eigen gepubliceerde kaartstijlen.
(Als je geen QGIS geinstalleerd hebt of wilt installeren, kun de volgende stappen overslaan en naar de stap Maak een simpele webpagina met Leaflet gaan.)
Via de website van 't CBS is een Shapefile te downloaden met de gemeente-, wijk- en buurtgrenzen uit 2013:
Als je dit ZIP-bestand download en uitpakt, ziet 't er ongeveer zo uit:
Download en intalleer QGIS, een open source GIS-programma, en open hiermee gem_2013.shp.
De data van het CBS is in 't Nederlandse coördinatensysteem. Dit is niet handig voor webcartografie. Bij 't exporteren van onze gemeente, kan QGIS de data omzetten naar een andere projectie. Voor webkaarten wordt meestal WGS 84 (ofwel EPSG:4326) gebruikt.
Selecteer één gemeente met de selectietool van QGIS (het gele vierkantje met wil pijltje), en kies Layer > Save As.... Kies GeoJSON als formaat, met Browse een plek voor het bestand op je harde schijf, WGS 84 bij CRS. En vink Save only selected features aan!
Nu is het tijd om een webpagina te maken die met behulp Leaflet onze kaartstijl laat zien, en het GeoJSON-bestand met gemeentegrens tekent.
Dit kan op twee manieren:
- Maak nieuwe directory op je harde schijf, maak in deze directory een bestand genaamd
index.html, en kopieer de inhoud vanindex.htmluit deze GitHub-repository in dit nieuwe bestand, - Of download deze GitHub-repository in zijn geheel (als ZIP-bestand) of gebruik Git en voer
git clone https://github.com/maptime-ams/animated-borders-d3js.gituit.
Als je met QGIS een eigen GeoJSON-bestand gemaakt hebt dien je dit bestand te verplaatsen of te kopiëren naar onze nieuwe directory, anders kun je een van de bestaande GeoJSON-bestanden met gemeentegrenzen uit de directory data/gemeente gebruiken.
We kunnen index.html in de browser bekijken door te dubbelklikken op het bestand. Echter, omdat we later het GeoJSON-bestand via JavaScript in onze webpagina willen laden is dit niet genoeg. Browsers staan het standaard niet toe dat pagina's data uit externe bronnen laden. Door een eigen webserver te starten overkom je dit probleem.
Kortom: we hebben een eigen webserver nodig! Op een Mac of met Linux kun je eenvoudig de terminal starten, naar de directory gaan waar index.html staat, en het volgende commando typen:
python -m SimpleHTTPServer
Klaar! De webpagina is nu beschikbaar via http://localhost:8000/!
Windows-gebruikers kunnen bijvoorbeeld Fenix gebruiken.
Pas index.html aan en voeg je vervang de bestaande Map ID en API access token voor die van jezelf. En vervang de locatie van het huidige GeoJSON-bestand (data/gemeente/t/tubbergen.geojson) voor de naam van het bestand dat je met QGIS hebt geëxporteerd.
Uiteindelijk ziet de webpagina er ongeveer zo uit, maar dan met je eigen gemeente en kaartstijl:
