Met Leaflet en jQuery een WFS service uitlezen en op de kaart tonen

Toepassingen
#1

Hallo forum,

De afgelopen dagen heb ik geëxperimenteerd met jQuery en Leaflet en het is mij gelukt om een WFS service uit te lezen en op de kaart te tonen:

https://twiav.nl/nl/nationale_parken_nederland.php

Het is eigenlijk een uitwerking van het voorbeeld dat @simeon in de PDOK / NGR documentatie (en hier op GitHub) geeft.

Ik maak overigens geen gebruik van $.getJSON() maar van $.ajax().

Op de kaart worden alle 21(!) nationale parken getoond, ook het nieuwe park Nieuw Land, dat pas net deze status gekregen heeft: TWIAV - Tips & trucs - Nationale parken in Nederland

Daarmee is deze kaart actueler dan het overzicht op de website van het Samenwerkingsverband Nationale Parken, waar men (op dit moment) nog doodleuk van 20 parken spreekt…

Ach ja, dat is het voordeel van de data direct uitlezen bij de bron. Het nieuwe park verscheen automatisch op mijn kaart, zonder dat ik daar nog iets voor hoefde te doen.

Groet,

Egge-Jan

4 likes
#2

Mooi voorbeeld! Zie ook de Maptime Leaflet-D3-workshop. We gebruiken het native XMLHttpRequest object. Zo kan je van de server kan ophalen zonder gebruik te maken van jQuery :slight_smile: . Zie ook het resultaat: WFS in Leaflet

2 likes
#3

Hoi Edward,

Ik maak gebruik van L.Util.getParamString() om alle parameters van mijn request netjes achter de baseUrl te plakken. Zie code hieronder.

Dit heeft als voordeel

  • dat de code veel leesbaarder is

  • dat de URL netjes geformatteerd wordt, want de : en de / in het request zijn vervangen door de relevante codes (heb ik van @FrieseWoudloper geleerd, dat je daar op moet letten…)

      var baseUrl = 'https://geodata.nationaalgeoregister.nl/nationaleparken/wfs';
  var defaultParams = {
         	service: 'WFS',
         	version: '2.0.0',
         	request: 'GetFeature',
         	typeName: 'nationaleparken:nationaleparken',
         	outputFormat: 'application/json'
  };

  var request = (baseUrl + L.Util.getParamString(defaultParams));

Het request ziet er nu zo uit:

https://geodata.nationaalgeoregister.nl/nationaleparken/wfs?service=WFS&version=2.0.0&request=GetFeature&typeName=nationaleparken%3Anationaleparken&outputFormat=application%2Fjson

Groet,

Egge-Jan

4 likes
#4

Da’s mooi! Dankjewel voor de tip :smiley:

2 likes
#5

Much kennisuitwisseling. I like! :smile_cat:

#6

Daar is dit forum toch voor? Kennis delen maakt machtig!

:slight_smile:

Groet,

E-J

1 like