<html lang="en">
<head>
  <title>OGC API Features Open Layers integration</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css"/>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
.map {
  width: 100%;
  height: 99%;
  position: fixed;
}
var map = new ol.Map({
    view: new ol.View({
        center: [915801.1809412361, 5909719.679087388],
        zoom: 7
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map'
});

(async () => {
    const features = await fetch(
      
        // Landing page
      
        'https://ogc.heig-vd.ch/pygeoapi/'
      
        // Collections
        
        + 'collections/'
      
        // Collections/{collectionId}
        
        + 'images_footprint/'
      
        // Collections/{collectionId}/items
        
        + 'items'
      
        // bbox (Thun district)
      
        + '?bbox=7.454385291345676,46.677581212968136,7.867799257607846,46.83661250958942'
        
        // Pagination & offset
        
        + '&limit=10&offset=100', {
        
          headers: {
                'Accept': 'application/geo+json'
            }
        }).then(response => response.json());
  //alert(Object.keys(features.features[0].properties));
    map.addLayer(new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(features, {
                featureProjection: 'EPSG:3857'
            })
        }),
    }));
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.