This sample is similar to the Feature widget in a side panel sample with the exception that this sample demonstrates working with multiple layers of different types. It uses two different layers: one imagery layer and one feature layer and shows how to use the Popup's fetchFeatures method. The method returns an array of graphics at a given screen location and the information based on the layer's associated PopupTemplate is displayed in a Calcite Panel.
How it works
First, listen for the view's click event using reactiveUtils and pass this into the fetchFeatures method.
reactiveUtils.on(
() => view,
"click",
async (event) => {
// Call fetchFeatures and pass in the click event location.
const fetchFeaturesResponse = await view.popup.fetchFeatures(event);
...
});Next, iterate through all of the returned graphics and pass each graphic into the Feature widget's graphic property. If a graphic comes from a feature layer, highlight the graphic in the map using the layerView.highlight method.
// Iterate through the returned graphics once the allGraphicsPromise resolves.
const graphics = await fetchFeaturesResponse.allGraphicsPromise;
if (graphics.length > 0) {
graphics.forEach((graphic) => {
const featureChild = new Feature({
container: document.createElement("div"),
graphic: graphic
});
// If the graphic comes from a feature layer, add a highlight
// to that feature using the layerView.highlight method.
if (graphic.layer.type === "feature") {
layerViews.forEach((layerView) => {
if (graphic.layer.name === layerView.layer.name) {
handles.add(layerView.highlight(graphic));
}
});
}
}
}
