Back to all workshops

Vector Tiles

the workshop starts here

Vector tile technologie is een nieuw alternatief op de traditionele raster image tiles voor web maps. Zij maken web maps sneller te publiceren en flexibeler vorm te geven.

Voor beginners ligt de focus op de front-end ontwikkeling. We maken een kaart met Maptiler . Daarna zetten we zelf een eenvoudige web-pagina met een kaart-viewer op te zetten met MapLibre.js. We gebruiken de Mapbox Style Specification om een eigen cartografische vormgeving te specificeren in de vorm van een style.json bestand. De vector tiles komen van Maptiler. Enige voorkennis van HTML, CSS en JavaScript is hierbij handig.

Maptiler kaart gebruiken

▶️ En ga naar Maptiler Cloud

▶️ Log in bij Maptiler of maak een account aan.

▶️ Zoek bij Maps de NL Cartiqo topo stijl op.

▶️ Scroll naar beneden en kopieer de Vector style JSON url. Die ziet er ong zo uit:

https://api.maptiler.com/maps/nl-cartiqo-topo/style.json?key=<yourAPIkey>

Maptiler kaart in Maplibre gebruiken

De style.json url van Maptiler kan je gebruiken in jouw MapLibre kaart. Zie de code hieronder.

▶️ Plak de url in jouw Maplibre kaart.

    var map = new maplibregl.Map({
      container: 'map',
      style: 'https://api.maptiler.com/maps/nl-cartiqo-topo/style.json?key=<yourAPIkey>',
      center: [5.12380, 52.09201],
      zoom: 8
    });

Bewerken stijl in Maputnik

🔗 A open source vector styling studio is Maputnik.

▶️ Ga naar Maputnik

▶️ Boven in het menu, klik op Open

▶️ Kopieer de style.json url van de Cartiqo stijl in het vak van Load from url en klik open url

▶️ Bewerk de stijl aan de linker kant.

‼️ Gezamelijke uitleg

Als je klaar bent exporteer dan jouw stijl bestand.

▶️ In het menu bovenin klik export

▶️ Vul jouw Maptiler key in en exporteer. Sla het bestand op in de folder van jouw web map .

Stijl json bestand ontdekken

▶️ Open het stijl json bestand op jouw computer in jouw tekst bewerkingsprogramma. Kijk er eens doorheen. Zie je hoe de lagen zijn opgebouwd?

The style.json

The map style itself is written as rules which define its visual appearance using the Mapbox GL Style Specification. It specifies:

• What data to draw Sources
• What order to draw the data in. Layers
• How to style the data when drawing it. Layers
• Which fonts and icons to use. Glyphs & Fonts, Sprites & Icons

This is the basics of a style.json:

{
    "version": 8,
    "name": "Mijn eigen Stijl",
    "sprite": "url",
    "glyphs": "url/{fontstack}/{range}.pbf",
    "sources": {...},
    "layers": [...]
}

The 2 most important for now are the sources and the layers. The sources tell us where our data is coming from. Vector Tiles or GeoJSON data for example. By setting layers we can style every separate layer available in the vector tiles and assigning it colours etc.

▶️ Kan je alle cruciale onderwerpen terug vinden in jouw bestand?

▶️ Ga naar de stijling specificatie van Maplibre/Mapbox .

Hier vind je de beschrijving van de stijling en wat er allemaal mogelijk is.

▶️ Gebruik dit bestand in jouw Maplibre kaart. Dat doe je zo:

    var map = new maplibregl.Map({
      container: 'map',
      style: './data/mijnstijl.json',
      center: [5.12380, 52.09201],
      zoom: 8
    });

‼️ Als dit niet werkt moet je een lokale server draaien

Stijl json opvragen met JavaScript

Het stijl object is ook op te vragen. Dit werkt altijd, of je kaart nu met een url of met een bestand maakt. Probeer maar eens.

▶️ Voeg de volgende code toe aan je JavaScript en kijk in de console.

map.on('load', function(){
    let stijl = map.getStyle()
    console.log(stijl)
})

Stijling aanpassen met JavaScript

Maplibre heeft een functie en die heet setPaintProperty. Daarmee kunnen we alle paint eigenschappen van een laag bewerken. Bijvoorbeeld de kleur.

map.on('load', function(){
    let stijl = map.getStyle()
    console.log(stijl)

    map.setPaintProperty('water', 'fill-color', '#40bcd8');
    map.setPaintProperty('highway-fill', 'line-color', '#ea4f57');
    map.setPaintProperty('highway-case', 'line-color', '#a7363b');
    map.setPaintProperty('road-fill-main-motor', 'line-color', '#ffaf3f');
    map.setPaintProperty('road-case-main-motor', 'line-color', '#a7363b');
})

Dit kunnen we natuurlijk ook combineren met een loop!

for (let i = 0; i < 5; i++) {
	console.log(i);
 }

We gaan een loop toepassen op alle lagen uit ons styling object.

▶️ Lees deze uitleg over forEach link

:arrow_forard: Maak een knop aan in de HTML en voeg daar een onClick event aan toe. Zorg dat de volgende functie wordt aangeroepen.

▶️ In de Javascript maken we een functie die wordt aangeroepen door deze knop.

function changeColors() {
    let stijl = mapLibreMap.getStyle()
    stijl.layers.forEach((layer) => {
        if (layer.type == "fill") {           
            let randomColor = "#" + Math.floor(Math.random()*16777215).toString(16)
            mapLibreMap.setPaintProperty( layer.id, "fill-color", randomColor);
        }
    });
}

▶️ Lees deze code. Wat denk je wat er gaat gebeuren als je op deze knop klikt?

Andere workshops en tips

Er zijn een heleboel mogelijkheden in JavaScript om je vector tile kaart aan te passen. Zo kan je extra lagen toevoegen, verwijderen, styling aanpassen en ga zo maar door. Kijk ook een naar de Maplibre documentatie. Ik heb nog meer workshops staan waar wat extra dingen staan uitgelegd. Vervang in deze workshops MapBox door Maplibre. Deze werken precies hetzelfde.

https://github.com/NieneB/mgi_workshop/wiki

https://github.com/NieneB/webmapping_for_developers/wiki/MapboxGL-part-1