opmaak vragen en opdrachten

Author: derekvb

docs/achtergrondinformatie/Achtergrondinformatie.md

@@ -14,7 +14,12 @@ OGC API's stellen geodata beschikbaar. Wat is geodata, ook wel **ruimtelijke inf
 
 Wat is ruimtelijke informatie, ook wel geo-informatie genoemd, en wat kun je ermee? Geodata is overal om ons heen. Vaak hoor je dat 80% van alle data over een plek op aarde gaat. 
 
-TO DO Voorbeelden / use cases die de meerwaarde van geodata aantonen. Verschillende vormen van ruimtelijke informatie / geodata 
+!!! warning "TO DO"
+    Voorbeelden / use cases die de meerwaarde van geodata aantonen. Verschillende vormen van ruimtelijke informatie / geodata 
+
+!!! question "Vraag"
+
+    Welke toepassingen van geo-informatie ken jij? Schrijf een aantal voorbeelden op. 
 
 ## Wat doet het Kadaster / PDOK? 
 

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

@@ -19,8 +19,8 @@ In deze casus nemen we jou stap voor stap mee:
 
 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
+- **Fork de Git repository**
+- **Clone de Git repository**
 
 ## Bekijk een voorbeeld
 Leerdoelen: 
@@ -30,23 +30,25 @@ Leerdoelen:
 
 We gaan eerst een voorbeeld bekijken. 
 
-- Bekijk `voorbeelden/tiles_maplibre/index.html`
-- Bekijk de kaart zelf, zoom eens in en uit
+- **Bekijk** `voorbeelden/tiles_maplibre/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> 
 
 <img width="476" height="535" alt="brtachtergrondkaart" src="https://github.com/user-attachments/assets/d26c23cb-a1c3-480b-843e-168c22b3cb4b" />
 
-> **VRAAG:** wat verandert er als je in- en uitzoomt op de kaart? 
+!!! question "Vraag"
 
-- Open de developer tools in je browser. 
-- Refresh de pagina
-- Open het Netwerk (Network) tabblad
-- Bekijk de requests die verschijnen in het Netwerktabblad
+    Wat verandert er als je in- en uitzoomt op de kaart? 
 
-Merk op dat er onder andere een `main.js` en `https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json` worden ingeladen
+- **Open de developer tools in je browser.** 
+- **Refresh de pagina**
+- **Open het Netwerk (Network) tabblad**
+- **Bekijk de requests die verschijnen in het Netwerktabblad**
 
-- Zoom eens in en uit
+Merk op dat er onder andere een `main.js` en `https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json` worden ingeladen.
+
+- **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> 
 
@@ -55,7 +57,10 @@ Dit zijn de tiles (kaarttegels) zelf.
 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>
 
 - Zoek deze TileMatrixSet en Style ook op via de landing page in de browser: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1> 
-> **VRAAG:** Waar vind je de URL van de TileMatrixSet en de Style die gebruikt zijn in het voorbeeld?
+
+!!! question "Vraag"
+
+    Waar vind je de URL van de TileMatrixSet en de Style die gebruikt zijn in het voorbeeld?
 
 Dit is een visuele weergave van een Tile Matrix Set:
 
@@ -67,25 +72,25 @@ De URL is als volgt opgebouwd:
 
 ### Bekijk nu de code van dichtbij
 
-- Open de repository in VSCode of een andere IDE
+- **Open de repository in VSCode of een andere IDE**
 
 Laten we deze code runnen zodat we de applicatie eerst in de browser kunnen bekijken:
 
-- Start een web server, bijvoorbeeld met python:
+- **Start 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 browser
+- **Bekijk nu** `voorbeeld\index.html` **in de browser**
 
 ![voorbeeld van kaart die met maplibre is gemaakt](msedge_gjEJAEdbND.png)
 
 Laten we in de code duiken:
 
-- Bekijk `voorbeeld\index.html`
-- Bekijk `voorbeeld\main.js`
-- Bekijk <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>
+- **Bekijk** `voorbeeld\index.html`
+- **Bekijk** `voorbeeld\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`.
 
@@ -100,13 +105,15 @@ In `main.js` zie je dat er bij `container` dat er naar diezelfde `map` wordt ver
 
 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. 
 
-Wil je hier meer over weten? Kijk voor een deep dive op <https://ogcapi-workshop.ogc.org/api-deep-dive/tiles/> 
+!!! 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** `style.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.)
 
-- Bekijk nog eens `main.js`
+- **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.  

docs/tiles/Verken OGC API - Tiles in de browser.md

@@ -4,25 +4,29 @@ Laten we eerst in de browser verkennen wat je allemaal met OGC API - Features ku
 
 ## api.pdok.nl
 
-- Ga naar <https://api.pdok.nl>
+- **Ga naar <https://api.pdok.nl>**
 
 Je vind hier een overzicht van alle API’s van PDOK.  
 
-- Scan de hele pagina eens.
+- **Scan de hele pagina eens.**
 
-> **VRAAG:** Zijn dit allemaal OGC API’s of ook andere soorten API’s?
+!!! question "Vraag"
 
-- Zoek de volgende API op en klik deze aan: Basisregistratie Grootschalige Topografie (OGC API)
+    Zijn dit allemaal OGC API’s of ook andere soorten API’s?
+
+- **Zoek de volgende API op en klik deze aan: *Basisregistratie Grootschalige Topografie (OGC API)***
 
 ## Landing page
 
 Je bent nu op de landing page van de BGT OGC API terecht gekomen. De BGT (Basisregistratie Grootschalige Topografie) is een landelijke dataset, met objecten in de openbare ruimte die meestal door overheden beheerd worden, zoals wegen, water en groen. We gebruiken de OGC API van deze dataset even als voorbeeld. 
 
 De landing page is een voor mensen leesbare beschrijving en toegangspunt van de API. Door mensen leesbaar? Ja wel, want er is ook een beschrijving die vooral voor machines is gemaakt.  
 
-> **VRAAG:** Waar vind je de beschrijving die voor machines is bedoeld? Bekijk deze ook eens.
+!!! question "Vraag"
+
+    Waar vind je de beschrijving die voor machines is bedoeld? Bekijk deze ook eens.
 
-- En ga daarna terug naar de HTML-weergave (de leesbare variant)
+- **En ga daarna terug naar de HTML-weergave (de leesbare variant)**
 
 Een landing page bevat een beschrijving van de dataset met eventueel verwijzingen naar andere bronnen, de trefwoorden en metadata.