Ingediend door Arnout op

Op deze pagina vind je een beknopte handleiding voor de interactieve webkaart die ik maakte. De kaart laat toe om adressen te geocoderen en om zelf kaartlagen toe te voegen via externe webservices.

Ik bouwde de kaart met JavaScript (Leaflet) en maak gebruik van open data via webservices zoals die van Digitaal Vlaanderen. Hieronder beschrijf ik de verschillende mogelijkheden/functies van deze kaarttoepassing en leg ik per knop uit wat er technisch achter de schermen gebeurt.

Boven de kaart vind je het veld “Zoek op adres of perceel”. Geef hier een adres of perceel in en klik op “Zoek adres”. De kaart zoomt automatisch naar de juiste locatie en plaatst een marker op het resultaat.

Voorbeeld (Geo API Vlaanderen)

GET https://geo.api.vlaanderen.be/geolocation/v4/Location?q=Nieuwstraat%201%2C%209300%20Aalst&c=1
{"LocationResult:[{"Municipality":"Aalst","Zipcode":"9300","Thoroughfarename":"Nieuwstraat","Housenumber":"1","ID":2501655,"FormattedAddress":"Nieuwstraat 1, 9300 Aalst","Location":"Lat_WGS84":50.938416914099165,"Lon_WGS84":4.0379867827221965,"X_Lambert72":126751.0,"Y_Lambert72":180953.92,"X_Lambert2008":626749.57,"Y_Lambert2008":680951.47},
                                        "LocationType":"basisregisters_huisnummer_aangeduidDoorBeheerder",
                                         "BoundingBox":{"LowerLeft":{"Lat_WGS84":50.938416914099165,"Lon_WGS84":4.0379867827221965,"X_Lambert72":126751.0,"Y_Lambert72":180953.92,"X_Lambert2008":626749.57,"Y_Lambert2008":680951.47},
"UpperRight":"Lat_WGS84":50.938416914099165,"Lon_WGS84":4.0379867827221965,"X_Lambert72":126751.0,"Y_Lambert72":180953.92,"X_Lambert2008":626749.57,"Y_Lambert2008":680951.47}}}]}

Achter de schermen zorgde ik er voor dat de zoekfunctie detecteert of het om een adres of perceel gaat (wanneer een zoekopdracht met een nummer begint en deze een '/' bevat, is het een perceelnummer is, anders een adres). Zo kon ik beide zoekopties via eenzelfde zoekknop uitwerken. Het script vraagt de coördinaten op via Geo API Vlaanderen en zoomt automatisch naar het resultaat.

Klik op de knop “Klik op de knop voor coördinaten” en klik daarna op de kaart. De aangeklikte locatie wordt via een marker op de kaart weergegeven, alsook een tabel met EPSG:4326, EPSG:31370 en EPSG:3812 coördinaten van de aangeklikte locatie op de kaart.

Je kan ook manueel coördinaten invoeren en laten omzetten naar een ander coördinatenreferentiesysteem. Om deze functionaliteit te realiseren, maak ik eveneens gebruik van de Geolocation API via Digitaal Vlaanderen

Geef de URL van een WMS op en klik op “Lagen uit webservice oplijsten”. Alle lagen uit de opgegeven webservice worden dan opgehaald en getoond in een keuzelijst. Een kaartlaag aan de webmap toevoegen door deze in de keuzelijst aan te duiden en vervolgens te klikken op "Geselecteerde laag toevoegen".

  1. URL ingeven
  2. Lagen oplijsten via de knop "Lagen uit webservice oplijsten"
  3. Laag selecteren
  4. Geselecteerde laag toevoegen

Voorbeeld (GetCapabilities)

https://geo.api.vlaanderen.be/VMM/wms?SERVICE=WMS&REQUEST=GetCapabilities

Achter de schermen:Wanneer je een geldige URL naar een WMS ingeeft, leest JavaScript de XML-respons (via de 'GetCapabilities' van de webservice), haalt alle <Layer>-namen eruit en vult hiermee automatisch de keuzelijst. Ook voor het visualiseren van kaarten gebruik ik Javascript.

Voor elke toegevoegde laag verschijnt automatisch een radiobutton. Via de radiobutton kan je aanduiden welke kaartlaag je wil bevragen (Identify). Klik vervolgens op de Identify-knop om een bevraging te starten. Klik nu in de kaart op een object uit de bevraagbare laag om objectinformatie over het object op te vragen. De attributen worden getoond.

  • ✔ Eén actieve identify-laag tegelijk
  • ✔ Attributen verschijnen in een tabel

Niet elke WMS ondersteunt GetFeatureInfo. Als er geen gegevens verschijnen, biedt de service dit mogelijk niet aan.

Indien beschikbaar wordt de legende van een WMS-laag automatisch opgehaald via GetLegendGraphic en weergegeven naast de kaart.

GET .../wms?REQUEST=GetLegendGraphic
&FORMAT=image/png
&LAYER=laagnaam

Voorbeeld: https://geo.api.vlaanderen.be/VMM/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=Rioolstrng
Bovenstaande URL geeft de legende uit de dataset RioolStrengen Vlaanderen weer.

De legende verschijnt automatisch zodra een laag actief is.