Display an image - Popup ArcGIS API for Javascript

Question

I'm trying to display an image in a popup, I've read the documentation, I've seen the code of some samples (and also made some attempts using ImageValue and ImageContent), but when I click on the map element with the popup, the image doesn't show. I can't figure out what I'm doing wrong. Here is my code now and here is my popup when I click on a point:

            var attr = {
                Lat: arr[i][0], //latitude
                Lng: arr[i][1], //longitude
                Image: "localimage.jpg" //image in same folder
            };
            
            var template = new PopupTemplate({
              title: "Lat: {Lat} Lng: {Lng}",
              mediaInfos: [{
                "title": "",
                "caption": "",
                "type": "image",
                "value": {
                  "sourceURL": "{Image}"
                }
              }]
            });
            
           //when I click on this point after I've added it to the map,
           //the image doesn't show
             var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: pictureMarkerSymbol, //custom marker
                    attributes: attr,
                    popupTemplate: template
             });

EDIT: I've re-read some samples, trying to understand what I was missing and keeping in mind the answer given here, in the end the solution was that I've missed some parenthesis:

var template = new PopupTemplate({
              title: "Lat: {Lat} Lng: {Lng}",
            content: [{ //Missed [ here
                type: "media",
                mediaInfos: [{
                title: "",
                caption: "",
                value: {
                   sourceURL: "{Image}"
                }
        }]
    }] //Missed ] here
});

Thanks for the reply, hope this helps someone in the future

Does it work if you specify a full URL instead of just "localimage.jpg"? — Bjorn Svensson
– Bjorn Svensson, Commented Aug 18, 2020 at 0:23
I've not tried this, because in the end the problem was related to the parenthesis and now it works perfectly — user12649875
– user12649875, Commented Aug 18, 2020 at 18:04

cabesuon · Accepted Answer · 2020-08-18 18:47:16Z

mediaInfos is a property of class MediaContent, that is a type of a possible content of PopupTemplate. So you need to move the media to the content and also indicate the type of the content, by passing a media object or an object to autocast. Something like this,

const template = new PopupTemplate({
  title: "Lat: {Lat} Lng: {Lng}",
  content: [{ // <- media goes in the content
    type: "media", // <- autocast to media
    mediaInfos: [{
      "title": "",
      "caption": "",
      "type": "image",
      "value": {
        "sourceURL": "{Image}"
      }
    }]
  }]
});

UPDATE:

Here you have a working example I made for you,

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer'
    ], function (Map, MapView, FeatureLayer) {

      const map = new Map({
        basemap: 'streets-navigation-vector'
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 12,
        center: {
          latitude: 32.7353,
          longitude: -117.1490
        }
      });

      function toGraphic(lon, lat, ObjectID, title, addrs, webUrl, imgUrl) {
        return {
          geometry: {
            type: 'point',
            longitude: lon,
            latitude: lat
          },
          attributes: {
            ObjectID,
            title,
            addrs,
            webUrl,
            imgUrl
          }
        }
      }
      
      const graphics = [
        toGraphic(
          -117.1560632,
          32.727482,
          1,
          'Automotive Museum',
          '2080 Pan American Plaza, San Diego, CA 92101, United States',
          'http://sdautomuseum.org/',
          'https://lh5.googleusercontent.com/p/AF1QipPSP9PPjlW9nF5OEgvWv9cuXB1TOgYmQg5efP36=w408-h272-k-no'

        ),
        toGraphic(
          -117.1763293,
          32.7136902,
          2,
          'USS Midway Museum',
          '910 N Harbor Dr, San Diego, CA 92101, United States',
          'http://www.midway.org/',
          'https://lh5.googleusercontent.com/p/AF1QipMZfVfLMdgQgmw86X8toLLoe0bLZpYgGHUtz3I2=w408-h306-k-no'
        ),
        toGraphic(
          -117.2284536,
          32.7641112,
          3,
          'SeaWorld',
          '500 Sea World Dr, San Diego, CA 92109, United States',
          'https://seaworld.com/san-diego',
          'https://lh5.googleusercontent.com/p/AF1QipMdd7YDTHMIUsKXyPVSFt_td_EA2WuNyeJF_Tj8=w408-h464-k-no'
        ),
        toGraphic(
          -117.1557741,
          32.7360032,
          4,
          'Zoo',
          '2920 Zoo Dr, San Diego, CA 92101, United States',
          'https://zoo.sandiegozoo.org/',
          'https://lh5.googleusercontent.com/p/AF1QipOQdtIVsWYZG6RvljSRv2LPjwGdXYS3xWJtoIQF=w408-h306-k-no'
        )
      ];

      const layer = new FeatureLayer({
        source: graphics,
        fields: [
          {
            name: 'ObjectID',
            alias: 'ObjectID',
            type: 'oid'
          }, {
            name: 'title',
            alias: 'title',
            type: 'string'
          }, {
            name: 'addrs',
            alias: 'addrs',
            type: 'string'
          }, {
            name: 'webUrl',
            alias: 'webUrl',
            type: 'string'
          },
          {
            name: 'imgUrl',
            alias: 'imgUrl',
            type: 'string'
          }
        ],
        objectIDField: ['ObjectID'],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'red',
            text: '\ue61d',
            font: {
              size: 30,
              family: 'CalciteWebCoreIcons'
            }
          }
        },
        popupTemplate: {
          title: '{title}',
          outFields: ['*'],
          content: [
            {
              type: 'fields',
              fieldInfos: [
                {
                  fieldName: 'addrs',
                  label: 'Address'
                },
                {
                  fieldName: 'webUrl',
                  label: 'Web Page'
                }
              ]
            },
            {
              type: 'media',
              mediaInfos: [
                {
                  type: 'image',
                  value: {
                    sourceURL: '{imgURL}'
                  }
                }
              ]
            }
          ]
        }
      });
      
      map.add(layer);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

I've done what you say here, the image still doesn't display and I get this error: "[esri.PopupTemplate] content error unsupported content value", I've also tryied to put the local path of the image at "sourceURL" but it gives the same result
That is weird, are you sure you don't have any issue with the url .. I have updated the answer with a working example that might guide you
As I've written in my edit, in the end my problem was that I wasn't including between "[ ]" what was written in the "content" section, but thank you for all your support, your initial answer helped me a lot!

Collectives™ on Stack Overflow

Display an image - Popup ArcGIS API for Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related