topic Re: Display Attachement in Popup Template in ArcGIS JavaScript Maps SDK Questions

Display Attachement in Popup Template

cadgism — Mon, 24 Oct 2022 05:48:02 GMT

Hi All Greetings

Trying to display the attachment image in Popup Template, but not able to display the full image . It shows only like a broken link image. But when clicked , it opens in new window and displaying like charm.

How can I display the full image it inside the popup , please

Thank you.

urlNaturalresourcesF = "https://xxxxxxxxxxx/arcgis/rest/services/WebQuery/ Naturalresources/MapServer/0"; naturalServicepathF = new FeatureLayer(urlNaturalresourcesF, { id: "naturalRes", mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], listMode: "hide" }); //Attachment content let attachmentsElement = new AttachmentsContent({ displayType: "auto" //displayType: "preview" }); let template = new PopupTemplate({ title: "Natural Resources", outFields: ["*"], content: [attachmentsElement] }); naturalServicepathF.popupTemplate = template; //check crome if service is running without safe browse for https map.add(naturalServicepathF);

Re: Display Attachement in Popup Template

JayakumarPD — Mon, 24 Oct 2022 06:15:53 GMT

See will this helps you.

https://developers.arcgis.com/javascript/latest/api-reference/esri-popup-content-ImageMediaInfo.html

// Create the ImageMediaInfoValue let imageMediaInfoValue = new ImageMediaInfoValue({ sourceURL: "<insert URL>" }); // Create the ImageMediaInfo let imageElement = new ImageMediaInfo({ title: "<b>Mexican Fan Palm</b>", caption: "tree species", value: imageMediaInfoValue }); // Create the MediaContent let mediaElement = new MediaContent({ mediaInfos: [ imageElement ] });

Re: Display Attachement in Popup Template

cadgism — Mon, 24 Oct 2022 06:22:25 GMT

Thank you Jayakumar PD

This is an attachment, how do I specify the source URL here

PREVIEW

let imageMediaInfoValue = new ImageMediaInfoValue({ sourceURL: "<insert URL>" });

Re: Display Attachement in Popup Template

JayakumarPD — Mon, 24 Oct 2022 06:28:33 GMT

Is it possible to share the code. I don't have any service layer with image.

Re: Display Attachement in Popup Template

cadgism — Mon, 24 Oct 2022 06:38:32 GMT

Sure, Will publish a service and share

Re: Display Attachement in Popup Template

JayakumarPD — Mon, 24 Oct 2022 07:19:07 GMT

Done, then I will also try to figure it out, once you publish.

Re: Display Attachement in Popup Template

cadgism — Mon, 24 Oct 2022 10:27:46 GMT

Solved. This is how it works. Your reply was helpful to solve this issue.

Re: Display Attachement in Popup Template

RobertKirkwood — Tue, 05 Mar 2024 22:46:41 GMT

I am still getting a broken picture. Can you show the rest of the code? I may be missing where getGraphics is being used.

My code is below

Thanks!

Re: Display Attachement in Popup Template

RobertKirkwood — Tue, 05 Mar 2024 13:59:29 GMT

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <link rel="shortcut icon" href="//uwoperations.uwyo.edu/uwopsmaps/Documents/Icons/favicon.ico" /> <title>Query Attachments Buildings</title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #attachmentsDiv { height: 100%; width: 30%; float: left; padding: 20px; overflow: auto; min-width: 240px; } #viewDiv { height: 100%; max-width: 70%; } .queryImg { width: 175px; padding-right: 5px; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" /> <link rel="stylesheet" href="css/allStyles.css"> <script src="https://js.arcgis.com/4.29/"></script>  <script> require ([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Legend", "esri/PopupTemplate", "esri/popup/content/AttachmentsContent", "esri/popup/content/support/ImageMediaInfoValue", "esri/popup/content/ImageMediaInfo", "esri/popup/content/MediaContent" ], function ( Map, MapView, FeatureLayer, Legend, PopupTemplate, AttachmentsContent, ImageMediaInfoValue, ImageMediaInfo, MediaContent ) { function showAtts (event) { view.hitTest (event).then (function getGraphics (response) { if (response.results.length) { graphic = response.results[0].graphic; console.log (graphic); lyrUrl = graphic.layer.url + "/0/"; objID = graphic.getAttribute ('RemarkPoint.OBJECTID'); attID = graphic.getAttribute ('RemarkPoint__ATTACH.ATTACHMENTID'); imgUrlPath = lyrUrl + objID + "/attachments/" + attID; let imageMediaInfoValue = new ImageMediaInfoValue ({ sourceURL: imgUrlPath }); let imageElement = new ImageMediaInfo ({ title: "{LONGNAME}", caption: "Photo", value: imageMediaInfoValue }); let mediaElement = new MediaContent ({ mediaInfos: [imageElement] }); let template = new PopupTemplate ({ title: "{LONGNAME}", outFields: ["*"], showAttachments: true, content: [mediaElement] }); layer.popupTemplate = template; } }); } // get layer from online portal const layer = new FeatureLayer ({ url: "https://uwoperations.uwyo.edu/hostgis/rest/services/CampusMap/CampusMap_Buildings/FeatureServer/0", //popupTemplate: template, outFields: ["*"] }); // setup the map const map = new Map ({ basemap: "topo-vector", layers: [layer] }); const view = new MapView ({ container: "viewDiv", map: map, center: [-105.567, 41.313193], zoom: 16 }); view.ui.add (new Legend ({view: view}), "bottom-left"); let highlight; view.on ("click", function (event) { clearMap (); queryFeatures (event); showAtts (event); }); function queryFeatures (screenPoint) { const point = view.toMap (screenPoint); // Query the for the object ids within 800m from where the user clicked layer.queryObjectIds ({ geometry: point, spatialRelationship: "intersects", distance: 10, units: "meters", returnGeometry: false, outFields: ["*"] }) .then (function (objectIds) { if (!objectIds.length) { showMessage (); return; } // Highlight the query-area on the map view.whenLayerView (layer).then (function (layerView) { if (highlight) { highlight.remove (); } highlight = layerView.highlight (objectIds); }); // Query the for the attachments from the object ids found return layer.queryAttachments ({ attachmentTypes: ["image/jpeg"], objectIds: objectIds }); }) .then (function (attachmentsByFeatureId) { if (!attachmentsByFeatureId) { return; } if (Object.keys (attachmentsByFeatureId).length === 0) { const infoP = document.createElement ("p"); infoP.innerHTML = "<b>There are no building image/jpeg attachments located in your query area.</b>"; document.getElementById ("queryResults").appendChild (infoP); } // Display the attachments Object.keys (attachmentsByFeatureId) .forEach (function (objectId) { const attachments = attachmentsByFeatureId[objectId]; attachments.forEach (function (attachment) { const image = document.createElement ("img"); image.src=attachment.url; image.className = "queryImg"; document.getElementById ("queryResults").appendChild (image); }); }); }) .catch (function (error) { showMessage (); }) } function showMessage () { clearMap (); const infoP = document.createElement ("p"); infoP.innerHTML = "<b>There are no building image/jpeg attachments located in your query area. Please click within the feature layer to get results.</b>"; document.getElementById ("queryResults").appendChild (infoP); } // Clear attachments from div function clearMap () { if (highlight) { highlight.remove (); } const att = document.getElementById ("queryResults"); while (att.firstChild) { att.removeChild (att.firstChild); } } }); </script> </head> <body> <div id="attachmentsDiv" class="esri-widget"> <h2 align="center"> <input id="LogoA" title="UW Website" type="image" alt="LogoA" src="Icons/UWWebA.png" onClick="javascript&colon; return popitup ('http://www.uwyo.edu/')" /></h2> <h2>Building Photos</h2> <p>Click somewhere in the map to query for images of trees located on a block within 800m of your desired location. </p> <div id="queryResults"></div> </div> <div id="viewDiv"></div> </body> </html>