voorbeelden verplaatst

Author: derekvb

docs/tiles/Maak een kaart met OGC API - Tiles.md

@@ -15,13 +15,6 @@ In deze casus nemen we jou stap voor stap mee:
 4. Voeg OGC API - Features toe aan jouw kaart
 5. Evalueer het eindresultaat
 
-## Zelf code runnen
-
-Maak gebruik van een platform of IDE naar keuze om code uit te voeren. Hieronder een uitleg voor VSCode, maar je kunt natuurlijk zelf een keuze maken. 
-
-- **Fork de Git repository**
-- **Clone de Git repository**
-
 ## Bekijk een voorbeeld
 Leerdoelen: 
 
@@ -30,7 +23,7 @@ Leerdoelen:
 
 We gaan eerst een voorbeeld bekijken. 
 
-- **Bekijk** `voorbeelden/tiles_maplibre/index.html`
+- **Bekijk** [voorbeelden/tiles/index.html](../../voorbeelden/tiles/index.html)
 - **Bekijk de kaart zelf, zoom eens in en uit**
 
 Dit is een web viewer die gemaakt is met de library MapLibre. Deze kaart maakt gebruik van de OGC API – Tiles van de BRT Achtergrondkaart: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1> 
@@ -50,9 +43,7 @@ Merk op dat er onder andere een `main.js` en `https://api.pdok.nl/kadaster/brt-a
 
 - **Zoom eens in en uit**
 
-Merk op dat er nu veel bestanden worden ingeladen, bijvoorbeeld `262?f=mvt`. De volledige URL van is: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/tiles/WebMercatorQuad/9/168/262?f=mvt> 
-
-Dit zijn de tiles (kaarttegels) zelf. 
+Merk op dat er nu veel bestanden worden ingeladen, bijvoorbeeld `262?f=mvt`. Dit bestand is 1 tile (kaarttegel). De volledige URL van deze tile is: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/tiles/WebMercatorQuad/9/168/262?f=mvt> 
 
 Je kunt nu zien dat deze web viewer de BRT Achtergrondkaart gebruikt, en meer specifiek de WebMercatorQuad TileMatrixSet. Dat zie je aan de URL’s van de tiles. En je ziet dat de standaard style wordt gebruikt voor deze tilematrixset. Dat zie je aan de style URL die na `main.js` werd ingeladen: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>
 
@@ -72,51 +63,59 @@ De URL is als volgt opgebouwd:
 
 ### Bekijk nu de code van dichtbij
 
-- **Open de repository in VSCode of een andere IDE**
+Maak gebruik van een code editor of IDE naar keuze om code te bekijken en uit te voeren. Hieronder een uitleg voor VSCode, maar je kunt natuurlijk zelf een keuze maken. 
+
+- **Fork de Git repository**
+- **Clone de Git repository**
+- **Open de repository**
 
 Laten we deze code runnen zodat we de applicatie eerst in de browser kunnen bekijken:
 
-- **Start een web server, bijvoorbeeld met python:**
+- **Start lokaal een web server, bijvoorbeeld met python:**
 
 ```
 > python -m http.server
 Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
 ```
-- **Bekijk nu** `voorbeeld\index.html` **in de browser**
+- **Bekijk nu [voorbeelden/tiles/index.html](../../voorbeelden/tiles/index.html) in de browser**
 
 ![voorbeeld van kaart die met maplibre is gemaakt](msedge_gjEJAEdbND.png)
 
-Laten we in de code duiken:
+Laten we nu eens de code bekijken in een editor:
 
-- **Bekijk** `voorbeeld\index.html`
-- **Bekijk** `voorbeeld\main.js`
+- **Bekijk** `voorbeelden\tiles\index.html`
+- **Bekijk** `voorbeelden\tiles\main.js`
 - **Bekijk** <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>
 
 Als het goed is, zie je in de code `index.html` een `div` met als id `map`.
 
-In `main.js` zie je dat er bij `container` dat er naar diezelfde `map` wordt verwezen. In dit javascript bestand wordt allereerst de `mmaplibre-gl` library geïmporteerd. Daarna wordt de kaart gedefinieerd:
+In `main.js` zie je dat er bij `container` dat er naar diezelfde `map` wordt verwezen. In dit javascript bestand wordt allereerst de `mmplibre-gl` library geïmporteerd. Daarna wordt de kaart gedefinieerd:
 
 - `container`: `map` object in `index.html`
-- `style`: verwijst naar een `style.json` bestand. Hierin wordt gedefinieerd hoe de tiles gevisualiseerd worden
+- `style`: verwijst naar een json-bestand: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>. Hierin wordt gedefinieerd hoe de tiles gevisualiseerd worden
 - `center`: bepaalt het startmiddenpunt van de kaart (x- en y-coördinaten)
 - `zoom`: bepaalt het startzoomlevel van de kaart
 - `minZoom`: bepaalt het maximale niveau dat je mag uitzoomen
 - `maxZoom`: bepaalt het maximale niveau dat je mag inzoomen
 
-Merk op dat je de URL naar de tegels zelf niet ziet in de `main.js`. Die wordt in de `style.json` aangeroepen. De `main.js` roept de `style.json` aan en die roept vervolgens de tiles aan en bepaalt hoe die tiles weergegeven moeten worden: bijvoorbeeld welke kleuren en diktes de lijnen op de kaart moeten krijgen. 
+Merk op dat je de URL naar de tegels zelf niet ziet in `main.js`. Die URL wordt namelijk in de `style json` aangeroepen. De `main.js` roept de `style json` aan en die roept vervolgens de bron van van de tiles aan. De `style json`  bepaalt ook hoe die tiles weergegeven moeten worden. 
+De bron van de tiles is in dit geval dus <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt>
+
+- **Zoek in de** `style json` **de URL van de tiles op.**
 
 !!! note "Wil je hier meer over weten?"
 
     Kijk voor een deep dive op <https://ogcapi-workshop.ogc.org/api-deep-dive/tiles/> 
 
-- **Bekijk nog eens** `style.json`
+- **Bekijk nog eens** de `style json`: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>
+
 
-Dit is een erg omvangrijke stijl. Hoe is dit opgebouwd? Dit is een json waarin de bron gedefinieerd wordt en de layers die daar in zitten en hoe die layers getoond moeten worden (kleuren, diktes, etc.)
+Dit is een erg omvangrijke stijl. Hoe is dit opgebouwd? Dit is een json waarin de bron gedefinieerd wordt en de layers die daar in zitten en hoe die layers getoond moeten worden (kleuren, diktes, etc.).
 
 - **Bekijk nog eens** `main.js`
 
-In dit geval staat de `style.json` op een externe locatie, maar het kan ook een bestand op je eigen server zijn. 
-In dit geval is de `style.json` beschikbaar gesteld door PDOK, maar je kunt ook zelf `style.json` bestanden maken. Het voorbeeld is een erg omvangrijke stijl, maar er zijn ook simpelere stijlen mogelijk.  
+In dit geval staat de `style json` op een externe locatie, maar het kan ook een bestand op je eigen server zijn. 
+In dit geval is de `style json` beschikbaar gesteld door PDOK, maar je kunt ook zelf `style json` bestanden maken. Het voorbeeld is een erg groot stijlbestand, maar er zijn ook simpelere stijlen mogelijk.  
 
 ## Maak een kaart 
 We gaan nu onze eigen web map met een OGC API Tiles achtergrondkaart (BRT) maken, aan de hand van het voorbeeld. 

voorbeelden/features/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>maplibre example</title>
+    <script type="module" src="main.js"></script>
+    <style>
+      @import url("https://esm.sh/maplibre-gl/dist/maplibre-gl.css");
+
+      body {
+        margin: 0;
+      }
+
+      #map {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+  </body>
+</html>

voorbeelden/features/main.js

@@ -0,0 +1,31 @@
+import * as maplibregl from "https://esm.sh/maplibre-gl";
+import OGCFeatureCollection from './mapbox-gl-ogc-feature-collection.patched.js';
+
+const map = new maplibregl.Map({
+    container: 'map', // container id
+    style: 'https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json', // style URL
+    center: [5.44, 52.05], // starting position [lng, lat]
+    zoom: 7, // starting zoomlevel
+    minZoom: 6, // minimum zoomlevel zoom out
+    maxZoom: 14 // maximum zoomlevel zoom in
+});
+
+map.on('load', () => {
+    const provinciegebiedsource = 'collection-src'
+
+    new OGCFeatureCollection(provinciegebiedsource, map, {
+        url: 'https://api.pdok.nl/kadaster/bestuurlijkegebieden/ogc/v1',
+        collectionId: 'provinciegebied',
+        limit: 100
+    })
+
+    map.addLayer({
+        'id': 'provinciegebied-outline',
+        'source': provinciegebiedsource,
+        'type': 'line',
+        'paint': {
+            'line-color': '#000000',
+            'line-width': 2
+        }
+    });
+})

voorbeelden/features/mapbox-gl-ogc-feature-collection.patched.js

@@ -0,0 +1,203 @@
+import * as tilebelt from "https://unpkg.com/@mapbox/[email protected]/dist/esm/index.js";
+
+class OGCFeatureCollection {
+    constructor(sourceId, map, collectionOptions, geojsonSourceOptions) {
+        if (!sourceId || !map || !collectionOptions) throw new Error('Source id, map and collectionOptions must be supplied as the first three arguments.')
+        if (!collectionOptions.url) throw new Error('A url must be supplied as part of the collectionOptions object.')
+        if (!collectionOptions.collectionId) throw new Error('A collectionId must be supplied as part of the collectionOptions object.')
+
+        this.sourceId = sourceId;
+        this._map = map;
+
+        this._tileIndices = new Map();
+        this._featureIndices = new Map();
+        this._featureCollections = new Map();
+
+        this._collectionServiceOptions = Object.assign({
+            limit: 5000,
+            useStaticZoomLevel: false,
+            minZoom: collectionOptions.useStaticZoomLevel ? 7 : 2
+        }, collectionOptions);
+
+        this.serviceMetadata = null;
+        this._maxExtent = [-Infinity, Infinity, -Infinity, Infinity];
+
+        const gjOptions = !geojsonSourceOptions ? {} : geojsonSourceOptions;
+        this._map.addSource(sourceId, Object.assign(gjOptions, {
+            type: 'geojson',
+            data: this._getBlankFc()
+        }));
+
+        this.enableRequests();
+        this._clearAndRefreshTiles();
+    }
+
+    destroySource() {
+        this.disableRequests();
+        this._map.removeSource(this.sourceId);
+    }
+
+    _getBlankFc() {
+        return {
+            type: 'FeatureCollection',
+            features: []
+        }
+    }
+
+    disableRequests() {
+        this._map.off('moveend', this._boundEvent);
+    }
+
+    enableRequests() {
+        this._boundEvent = this._findAndMapData.bind(this);
+        this._map.on('moveend', this._boundEvent);
+    }
+
+    _clearAndRefreshTiles() {
+        this._tileIndices = new Map();
+        this._featureIndices = new Map();
+        this._featureCollections = new Map();
+        this._findAndMapData();
+    }
+
+    _createOrGetTileIndex(zoomLevel) {
+        const existingZoomIndex = this._tileIndices.get(zoomLevel);
+        if (existingZoomIndex) return existingZoomIndex
+        const newIndex = new Map();
+        this._tileIndices.set(zoomLevel, newIndex);
+        return newIndex
+    }
+
+    _createOrGetFeatureCollection(zoomLevel) {
+        const existingZoomIndex = this._featureCollections.get(zoomLevel);
+        if (existingZoomIndex) return existingZoomIndex
+        const fc = this._getBlankFc();
+        this._featureCollections.set(zoomLevel, fc);
+        return fc
+    }
+
+    _createOrGetFeatureIdIndex(zoomLevel) {
+        const existingFeatureIdIndex = this._featureIndices.get(zoomLevel);
+        if (existingFeatureIdIndex) return existingFeatureIdIndex
+        const newFeatureIdIndex = new Map();
+        this._featureIndices.set(zoomLevel, newFeatureIdIndex);
+        return newFeatureIdIndex
+    }
+
+    async _findAndMapData() {
+        const z = this._map.getZoom();
+
+        if (z < this._collectionServiceOptions.minZoom) {
+            return
+        }
+        const bounds = this._map.getBounds().toArray();
+        const primaryTile = tilebelt.bboxToTile([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
+
+        // If we're not using a static zoom level we'll round to the nearest even zoom level
+        // This means we don't need to request new data for every zoom level allowing us to reuse the previous levels data
+        const zoomLevel = this._collectionServiceOptions.useStaticZoomLevel ? this._collectionServiceOptions.minZoom : 2 * Math.floor(z / 2);
+        const zoomLevelIndex = this._createOrGetTileIndex(zoomLevel);
+        const featureIdIndex = this._createOrGetFeatureIdIndex(zoomLevel);
+        const fc = this._createOrGetFeatureCollection(zoomLevel);
+
+        const tilesToRequest = [];
+
+        if (primaryTile[2] < zoomLevel) {
+            let candidateTiles = tilebelt.getChildren(primaryTile);
+            let minZoomOfCandidates = candidateTiles[0][2];
+            while (minZoomOfCandidates < zoomLevel) {
+                const newCandidateTiles = [];
+                candidateTiles.forEach(t => newCandidateTiles.push(...tilebelt.getChildren(t)));
+                candidateTiles = newCandidateTiles;
+                minZoomOfCandidates = candidateTiles[0][2];
+            }
+
+            for (let index = 0; index < candidateTiles.length; index++) {
+                if (this._doesTileOverlapBbox(candidateTiles[index], bounds)) {
+                    tilesToRequest.push(candidateTiles[index]);
+                }
+            }
+        } else {
+            tilesToRequest.push(primaryTile);
+        }
+
+        for (let index = 0; index < tilesToRequest.length; index++) {
+            const quadKey = tilebelt.tileToQuadkey(tilesToRequest[index]);
+            if (zoomLevelIndex.has(quadKey)) {
+                tilesToRequest.splice(index, 1);
+                index--;
+            } else zoomLevelIndex.set(quadKey, true);
+        }
+
+        if (tilesToRequest.length === 0) {
+            this._updateFcOnMap(fc);
+            return
+        }
+
+        // This tolerance will be used to inform the quantization/simplification of features
+        const mapWidth = Math.abs(bounds[1][0] - bounds[0][0]);
+        const tolerance = (mapWidth / this._map.getCanvas().width) * this._collectionServiceOptions.simplifyFactor;
+        await this._loadTiles(tilesToRequest, tolerance, featureIdIndex, fc);
+        this._updateFcOnMap(fc);
+    }
+
+    async _loadTiles(tilesToRequest, tolerance, featureIdIndex, fc) {
+        return new Promise((resolve) => {
+            const promises = tilesToRequest.map(t => this._getTile(t, tolerance));
+            Promise.all(promises).then((featureCollections) => {
+                featureCollections.forEach((tileFc) => {
+                    if (tileFc) this._iterateItems(tileFc, featureIdIndex, fc);
+                });
+                resolve();
+            });
+        })
+    }
+
+    _iterateItems(tileFc, featureIdIndex, fc) {
+        if (tileFc.features != null){
+            tileFc.features.forEach((feature) => {
+                if (!featureIdIndex.has(feature.id)) {
+                    fc.features.push(feature);
+                    featureIdIndex.set(feature.id);
+                }
+            });
+        }
+    }
+
+    _getTile(tile) {
+        const tileBounds = tilebelt.tileToBBOX(tile);
+
+        let urlParams = `limit=${this._collectionServiceOptions.limit}&bbox=${tileBounds[0]},${tileBounds[1]},${tileBounds[2]},${tileBounds[3]}`;
+
+        let blacklist_parameters = ['limit','url','useStaticZoomLevel','collectionId','minZoom'];
+
+        for(let option in this._collectionServiceOptions){
+            if (! blacklist_parameters.includes(option)){
+                urlParams += `&${option}=${this._collectionServiceOptions[option]}`;
+            }
+        }
+
+        return new Promise((resolve) => {
+            fetch(`${`${this._collectionServiceOptions.url}/collections/${this._collectionServiceOptions.collectionId}/items?${urlParams}`}`, this._collectionServiceOptions.fetchOptions)
+                .then(response => (response.json()))
+                .then((data) => {
+                    resolve(data);
+                });
+        })
+    }
+
+    _updateFcOnMap(fc) {
+        this._map.getSource(this.sourceId).setData(fc);
+    }
+
+    _doesTileOverlapBbox(tile, bbox) {
+        const tileBounds = tile.length === 4 ? tile : tilebelt.tileToBBOX(tile);
+        if (tileBounds[2] < bbox[0][0]) return false
+        if (tileBounds[0] > bbox[1][0]) return false
+        if (tileBounds[3] < bbox[0][1]) return false
+        if (tileBounds[1] > bbox[1][1]) return false
+        return true
+    }
+}
+
+export { OGCFeatureCollection as default };

docs/tiles/voorbeeld/index.html voorbeelden/tiles/index.htmldocs/tiles/voorbeeld/index.html renamed to voorbeelden/tiles/index.html

@@ -1,9 +1,9 @@
-import * as maplibregl from "https://esm.sh/maplibre-gl"; //import 
+import * as maplibregl from "https://esm.sh/maplibre-gl";
 
 const map = new maplibregl.Map({
     container: 'map', // container id
     style: 'https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json', // style URL
-    center: [5.4407, 52.0518], // starting position [lng, lat]
+    center: [5.44, 52.05], // starting position [lng, lat]
     zoom: 7, // starting zoomlevel
     minZoom: 6, // minimum zoomlevel zoom out
     maxZoom: 14 // maximum zoomlevel zoom in