OGC API Features gebruiken met OpenLayers of Leaflet

De meest populaire open-source javascript bibliotheken om geografische gegevens als kaartlagen voor te stellen in web browsers (Openlayers, Leaflet) hebben het “expliciet” gebruik van OGC API Features nog niet ingebouwd.

Wel ondersteunen ze GeoJSON als response formaat.

Dus de objecten kunnen via de request header in GeoJSON vanuit de OGC API Features opgevraagd worden en ze kunnen op deze manier aan het kaartobject toegevoegd worden.

Bijvoorbeeld:

(async () => {
    const zwemwaterlocaties = await fetch('https://geo.api.vlaanderen.be/BWD-IdentifiedBathingWaters/ogc/features/collections/BWDBW/items', {
      headers: {
        'Accept': 'application/geo+json'
      }
    }).then(response => response.json());
})();

In Openlayers worden de features dan aan de kaart toegevoegd als een VectorLayer (ol/layer/Vector) met een Source (ol.source.Vector) waarin de objecten geladen worden via ol.format.GeoJSON().readFeatures().

Bijvoorbeeld:

map.addLayer(new ol.layer.Vector({
    source: new ol.source.Vector({
      features: new ol.format.GeoJSON().readFeatures(zwemwaterlocaties, { featureProjection: 'EPSG:3857' }),
      attributions: ''
    })
}));

In Leaflet wordt een vectorlaag aangemaakt met, in onderstaande voorbeeld pointToLayer, in L.geoJSON waarna deze laag wordt aan de kaart toegevoegd.

Bijvoorbeeld:

L.geoJSON(zwemwaterlocaties, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, { 
      icon: L.icon({
			....
      })
    });
 }
}).addTo(map);