You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/features/Bevraag OGC API - Features met curl.md
+20-17Lines changed: 20 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,15 +8,15 @@ In dit deel stel je met behulp van de OpenAPI specification GET requests samen o
8
8
9
9
## Voorbereiding
10
10
11
-
-**Open een commandline / terminal venster.**
11
+
**:arrow_right:Open een commandline / terminal venster.**
12
12
13
13
!!! warning "Waarschuwing"
14
14
15
15
Gebruik niet de PowerShell terminal. Die heeft een ingebouwde eigen versie van `curl` met veel minder mogelijkheden. De voorbeelden zullen daar niet in werken.
16
16
17
17
Met de OpenAPI specification pagina kun je heel makkelijk commando's voor `curl` samenstellen.
18
18
19
-
-**Ga naar de OpenAPI specification van de BGT.**
19
+
**:arrow_right:Ga naar de OpenAPI specification van de BGT.**
20
20
21
21
Weet je niet meer waar je die kunt vinden? Kijk dan even in één van de vorige onderdelen.
22
22
@@ -26,12 +26,13 @@ Weet je niet meer waar je die kunt vinden? Kijk dan even in één van de vorige
26
26
27
27
Laten we beginnen met een simpele vraag. We vragen eerst de `OpenAPI specification` zelf op.
28
28
29
-
-**Klap** 'GET `/api` This document' **open**:
29
+
**:arrow_right:Klap** 'GET `/api` This document' **open**:
30
30
31
31
32
32
33
-
-**Klik op *Try it out***
34
-
-**Klik op *Execute***
33
+
**:arrow_right: Klik op *Try it out***
34
+
35
+
**:arrow_right: Klik op *Execute***
35
36
36
37
Je krijgt nu het `curl` commando dat is afgevuurd en het resultaat (response) te zien:
37
38
@@ -45,7 +46,7 @@ We kunnen het `curl` commando kopiëren en zelf uitvoeren in de command line.
45
46
46
47
Pas voor de Windows commandline (`cmd.exe`) de kant-en-klare `curl` commando's aan: zet alles op één regel en verander de 'enkele quotes' in "dubbele quotes". Anders zullen de voorbeelden niet werken.
47
48
48
-
-**Kopieer het**`curl`**commando en plak het in de commandline**
49
+
**:arrow_right:Kopieer het**`curl`**commando en plak het in de commandline**
**:arrow_right: Bekijk de kaart zelf, zoom eens in en uit**
29
+
28
30
29
31
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>
30
32
@@ -34,20 +36,24 @@ Dit is een web viewer die gemaakt is met de library MapLibre. Deze kaart maakt g
34
36
35
37
Wat verandert er als je in- en uitzoomt op de kaart?
36
38
37
-
-**Open de developer tools in je browser.**
38
-
-**Refresh de pagina**
39
-
-**Open het Netwerk (Network) tabblad**
40
-
-**Bekijk de requests die verschijnen in het Netwerktabblad**
39
+
**:arrow_right: Open de developer tools in je browser.**
40
+
41
+
**:arrow_right: Refresh de pagina**
42
+
43
+
**:arrow_right: Open het Netwerk (Network) tabblad**
44
+
45
+
**:arrow_right: Bekijk de requests die verschijnen in het Netwerktabblad**
46
+
41
47
42
48
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.
43
49
44
-
-**Zoom eens in en uit**
50
+
**:arrow_right:Zoom eens in en uit**
45
51
46
52
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>
47
53
48
54
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>
49
55
50
-
-**Zoek deze TileMatrixSet en Style ook op via de landing page in de browser:**<https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1>
56
+
**:arrow_right:Zoek deze TileMatrixSet en Style ook op via de landing page in de browser:**<https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1>
51
57
52
58
!!! question "Vraag"
53
59
@@ -61,27 +67,31 @@ De URL is als volgt opgebouwd:
61
67
62
68
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.
63
69
64
-
-**Fork de Git repository**
65
-
-**Clone de Git repository**
66
-
-**Open de repository**
70
+
**:arrow_right: Fork de Git repository**
71
+
72
+
**:arrow_right: Clone de Git repository**
73
+
74
+
**:arrow_right: Open de repository**
67
75
68
76
Laten we deze code runnen zodat we de applicatie eerst in de browser kunnen bekijken:
69
77
70
-
-**Start lokaal een web server, bijvoorbeeld met python:**
78
+
**:arrow_right:Start lokaal een web server, bijvoorbeeld met python:**
71
79
72
80
```
73
81
> python -m http.server
74
82
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
75
83
```
76
-
-**Bekijk nu**[../voorbeelden/tiles/index.html](../voorbeelden/tiles/index.html)**in de browser**
84
+
**:arrow_right:Bekijk nu**[../voorbeelden/tiles/index.html](../voorbeelden/tiles/index.html)**in de browser**
77
85
78
86
Als het goed is, zie je in de code `index.html` een `div` met als id `map`.
87
97
@@ -97,18 +107,18 @@ In `main.js` zie je dat er bij `container` dat er naar diezelfde `map` wordt ver
97
107
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.
98
108
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>
99
109
100
-
-**Zoek in de**`style json`**de URL van de tiles op.**
110
+
**:arrow_right:Zoek in de**`style json`**de URL van de tiles op.**
101
111
102
112
!!! note "Wil je hier meer over weten?"
103
113
104
114
Kijk voor een deep dive op <https://ogcapi-workshop.ogc.org/api-deep-dive/tiles/>
105
115
106
-
-**Bekijk nog eens** de `style json`: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>
116
+
**:arrow_right:Bekijk nog eens** de `style json`: <https://api.pdok.nl/kadaster/brt-achtergrondkaart/ogc/v1/styles/standaard__webmercatorquad?f=json>
107
117
108
118
109
119
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.).
110
120
111
-
-**Bekijk nog eens**`main.js`
121
+
**:arrow_right:Bekijk nog eens**`main.js`
112
122
113
123
In dit geval staat de `style json` op een externe locatie, maar het kan ook een bestand op je eigen server zijn.
114
124
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.
0 commit comments