This sample is similar to the Feature component 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 FeaturesViewModel'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 map's arcgis event using reactiveUtils and pass this into the fetchFeatures method.
reactiveUtils.on(
() => arcgisViewClick,
"click",
async (event) => {
// Call fetchFeatures and pass in the click event screen point.
const fetchFeaturesResponse = await featuresViewModel.fetchFeatures(event.detail.screenPoint);
...
});Next, iterate through all of the returned graphics and pass each graphic into the Feature component'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 = document.createElement("arcgis-feature");
featureChild.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));
}
});
}
}
}
