Explore in the sandboxView live

This sample shows how to access an OGC API Features service using an OGCFeatureLayer. Since this layer type brings the data in as features, you can perform your own rendering, labeling, clustering, etc. See the API Reference for more information on what is supported.

The url and collectionId properties are required when creating a new OGCFeatureLayer.

const windmillsLayer = new OGCFeatureLayer({
  url: "https://demo.pygeoapi.io/stable", // url to the OGC service
  collectionId: "dutch_windmills", // unique id of the collection
  renderer: { ... },
  popupTemplate: { ... }

Create the Popup

To create the popup, we will define the popupTemplate on the OGCFeatureLayer. This layer has a lot of fields we can use to display in the popup, like an image, name, type, condition, link, etc. We can display the image in the popup using the MediaContent popup content type.

windmillsLayer.popupTemplate = {
  title: "{NAAM}", // name of the windmill
  content: [{
    type: "media", // autocasts to MediaContent
    mediaInfos: [{
      type: "image", // autocasts to ImageMediaInfo
      value: {
        sourceURL: "{THUMBNAIL}", // url to the image
        linkURL: "{FOTO_GROOT}" // link will open if the user clicks the image
    type: "fields", // autocasts to FieldsContent
    fieldInfos: [...]

We can define the rest of the fields we want to show in te FieldsContent popup element. This will show all of the defined fields at their values in a table within the popup. The resulting popup will look something like this:

ogc popup

Filter the features on the OGCFeatureLayerView

The OGCFeatureLayer supports working with your features on the client through the OGCFeatureLayerView. We can use the filter button in the top-right of the view to filter the layerView by the type of windmill. When a windmill is selected, we call the following function to apply the filter and effect.

function filterByType(event) {
  // determine filter definition based on the selected type
  const selectedType = event.target.getAttribute("data-windmill");
  let filterDef = "";
  if (selectedType != "other") {
    filterDef = "FUNCTIE = '" + selectedType + "'"
  } else {
    filterDef = "NOT FUNCTIE = 'korenmolen' AND NOT FUNCTIE = 'poldermolen'"
  // apply the effect to the features
  windmillLayerView.effect = {
    filter: {
      where: filterDef // apply filter
    excludedEffect: "opacity(20%)" // set effect on features excluded from the filter