Community
Select to view content in your preferred language

Adding an image to PopupTemplate V3.4

601
1
06-18-2023 07:15 PM
HadiHoteit
by
New Contributor
‎06-18-2023 07:15 PM

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?

0 Kudos
1 Reply
JeffreyWilkerson
by
Frequent Contributor
‎06-19-2023 08:45 AM

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>
0 Kudos