Adding an image to PopupTemplate V3.4

HadiHoteit — Mon, 19 Jun 2023 02:15:47 GMT

Im trying to add an image to PopupTemplate in V3.4,

doing something like this didn't work for me

return new PopupTemplate({
              title: `${event.mapPoint.x},  ${event.mapPoint.y}`,
              description:
                `<div class="popup-content">` +
                "<img src='widgets/TowersConnection/images/Green-2G.png' alt='Image Description' " 

            });

i always get src empty in the browser so image never loads, how do i set an image then?

Re: Adding an image to PopupTemplate V3.4

JeffreyWilkerson — Mon, 19 Jun 2023 15:45:14 GMT

Not sure, maybe you need to add your HTML to Content instead of Description?

I added a green button to this sample popup code from Esri:

<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Popup actions | Sample | ArcGIS Maps SDK for JavaScript 4.27</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.27/"></script> <script> require([ "esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView", "esri/geometry/geometryEngine", "esri/core/reactiveUtils" ], (Map, FeatureLayer, MapView, geometryEngine, reactiveUtils) => { // Create the Map const map = new Map({ basemap: "gray-vector" }); // Create the MapView const view = new MapView({ container: "viewDiv", map: map, center: [-117.08, 34.1], zoom: 11 }); /************************************************************* * The PopupTemplate content is the text that appears inside the * popup. Bracketed {fieldName} can be used to reference the value * of an attribute of the selected feature. HTML elements can be * used to provide structure and styles within the content. **************************************************************/ // Add this action to the popup so it is always available in this view const measureThisAction = { title: "Measure Length", id: "measure-this", image: "https://developers.arcgis.com/javascript/latest//sample-code/popup-actions/live/Measure_Distance16.png" }; const template = { // autocasts as new PopupTemplate() title: "Trail run", content: "<div>{name}</div><div class='popup-content'><img src='https://w7.pngwing.com/pngs/714/342/png-transparent-computer-icons-button-green-green-3d-computer-graphics-grass-color-thumbnail.png' height='20px' alt='image description'></div>", actions: [measureThisAction] }; const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0", popupTemplate: template }); map.add(featureLayer); // Execute each time the "Measure Length" is clicked function measureThis() { const geom = view.popup.selectedFeature.geometry; const initDistance = geometryEngine.geodesicLength(geom, "miles"); const distance = parseFloat(Math.round(initDistance * 100) / 100).toFixed(2); view.popup.content = view.popup.selectedFeature.attributes.name + "<div style='background-color:DarkGray;color:white'>" + distance + " miles.</div>"; } // Event handler that fires each time an action is clicked. reactiveUtils.on( () => view.popup, "trigger-action", (event) => { // Execute the measureThis() function if the measure-this action is clicked if (event.action.id === "measure-this") { measureThis(); } } ); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

topic Re: Adding an image to PopupTemplate V3.4 in ArcGIS JavaScript Maps SDK Questions

Adding an image to PopupTemplate V3.4

Re: Adding an image to PopupTemplate V3.4