This sample demonstrates how to query attachments from a FeatureLayer with crowd sourced data using the queryObjectIDs() and queryAttachments() methods. When the user clicks somewhere in the map, the attachments located within 3 miles of the click location will appear in the panel on the left hand side.
How it works
A function is called whenever the user clicks on the map, which first queries for all object ids within 3 miles of the point where the map was clicked.
const objectIds = await layer.queryObjectIds({
geometry: event.mapPoint,
spatialRelationship: "intersects",
returnGeometry: false,
outFields: ["*"],
distance: 3,
units: "miles",
});
An array of object ids are returned and highlighted to show the user the bounds of their query. The object IDs are then passed to the queryAttachments() method to query for attachments that exist on the queried features.
const attachmentsByFeatureId = await layer.queryAttachments({
attachmentTypes: ["image/*"],
objectIds: objectIds,
});
An array of queried attachment ids are returned, which are displayed in the Calcite panel.
Object.keys(attachmentsByFeatureId).forEach((objectId) => {
const attachments = attachmentsByFeatureId[objectId];
attachments.forEach((attachment) => {
const block = document.createElement("calcite-block");
block.expanded = true;
block.heading = attachment.name;
const card = document.createElement("calcite-card");
const spanHeading = document.createElement("span");
spanHeading.slot = "description";
spanHeading.innerHTML = `Attachment type: ${attachment.contentType}`;
const image = document.createElement("img");
image.slot = "thumbnail";
image.src = attachment.url;
card.append(image, spanHeading);
block.appendChild(card);
panel.appendChild(block);
});
});