This sample demonstrates docking the Feature component into a side panel. This is useful in circumstances where you may not necessarily want or need the associated feature's information to display directly within the map. It displays information based on the PopupTemplate using the Feature component. The content of the PopupTemplate is saved within the referenced layer and makes use of custom text elements with chart media.
This example adds the Feature component to a Calcite side panel and references the map component.
<calcite-shell>
<calcite-shell-panel slot="panel-start" position="start" width-scale="l">
<arcgis-feature style="width:100%" reference-element="my-map"></arcgis-feature>
</calcite-shell-panel>
<arcgis-map id="my-map" item-id="cab6c53ebefc428191dea9b5d855d060" popup-disabled>
<arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-expand slot="bottom-right">
<arcgis-legend></arcgis-legend>
</arcgis-expand>
</arcgis-map>
</calcite-shell>
Then, an event listener is added to the Map component arcgis event and performs a hit test to get the feature under the cursor to display popup template information in the side panel.
const hitTest = promiseUtils.debounce((event) => {
return viewElement.hitTest(event).then((hit) => {
const result = hit.results.find((r) => r.graphic.layer === featureLayer);
return result ? {
graphic: result.graphic,
screenPoint: hit.screenPoint
} :
null;
});
});
viewElement.addEventListener("arcgisViewPointerMove", async (event) => {
try {
const hit = await hitTest(event.detail);
if (hit) {
const newObjectId = hit.graphic?.attributes[featureLayer.objectIdField];
if (!newObjectId) {
highlight.remove();
arcgisFeature.graphic = defaultGraphic;
} else if (objectId !== newObjectId) {
highlight?.remove();
objectId = newObjectId;
arcgisFeature.graphic = hit.graphic;
highlight = layerView.highlight(hit.graphic);
}
}
} catch (error) {
if (error.name !== "AbortError") {
console.error("Unexpected hitTest error:", error);
}
}
});