The url and collectionId properties are required when creating a new OGCFeatureLayer.
1
2
3
4
5
6
const windmillsLayer = new OGCFeatureLayer({
url: "https://demo.pygeoapi.io/stable", // url to the OGC servicecollectionId: "dutch_windmills", // unique id of the collectionrenderer: { ... },
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
windmillsLayer.popupTemplate = {
title: "{NAAM}", // name of the windmillcontent: [{
type: "media", // autocasts to MediaContentmediaInfos: [{
type: "image", // autocasts to ImageMediaInfovalue: {
sourceURL: "{THUMBNAIL}", // url to the imagelinkURL: "{FOTO_GROOT}"// link will open if the user clicks the image }
}]
},
{
type: "fields", // autocasts to FieldsContentfieldInfos: [...]
}]
}
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:
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
functionfilterByType(event) {
// determine filter definition based on the selected typeconst selectedType = event.target.getAttribute("data-windmill");
if (!selectedType){
return; // do not set filter if one of the filters has not been clicked }
let filterDef = "";
switch (selectedType){
case"other":
filterDef = "NOT FUNCTIE = 'korenmolen' AND NOT FUNCTIE = 'poldermolen'"break;
case"korenmolen":
case"poldermolen":
filterDef = "FUNCTIE = '" + selectedType + "'"break;
default:
}
// apply the effect to the features windmillLayerView.effect = {
filter: {
where: filterDef // apply filter },
excludedEffect: "opacity(20%)"// set effect on features excluded from the filter };
}
