topic Re: Set Image in Popup? in ArcGIS JavaScript Maps SDK Questions

Set Image in Popup?

JaredPilbeam2 — Fri, 21 Sep 2018 16:34:17 GMT

This webpage I'm working on is in a test phase. I have one point on the map. There's a table behind it with the name, type, address, website and photo. I would like to have the photo show up in the popup.

Right now, when you click the point the photo field shows up in the popup as a link. That's not what I'm going for. I want this and each additional point I add to show the photo of its related field directly in the popup.

Here's a sample that does something similar: ArcGIS API for JavaScript Sandbox. Each popup has it's related chart coming from their table. This is what I want to do. The pics here don't change.

Re: Set Image in Popup?

AdrianWelsh — Sat, 11 Dec 2021 17:41:57 GMT

Jared,

How similar is your code to this segment:

            // You can set a media element within the popup as well. This
            // can be either an image or a chart. You specify this within
            // the mediaInfos. The following creates a pie chart in addition
            // to two separate images. The chart is also set up to work with
            // related tables. Similar to text elements, media can only be set within the content.
            type: "media",
            mediaInfos: [{
              title: "<b>Count by type</b>",
              type: "pie-chart",
              caption: "",
              value: {
                theme: "Grasshopper",
                fields: ["relationships/0/Point_Count_COMMON"],
                normalizeField: null,
                tooltipField: "relationships/0/COMMON"
              }
            }, {
              title: "<b>Welcome to Beverly Hills</b>",
              type: "image",
              value: {
                sourceURL: "https://www.beverlyhills.org/cbhfiles/storage/files/13203374121770673849/122707_039r_final.jpg"
              }
            }, {
              title: "<b>Palm tree lined street</b>",
              type: "image",
              value: {
                sourceURL: "https://cdn.loc.gov/service/pnp/highsm/21600/21679r.jpg"
              }
            }]
          },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It seems that this is where the pie chart and images are established and displayed.

Re: Set Image in Popup?

JaredPilbeam2 — Sat, 11 Dec 2021 17:42:00 GMT

Adrian,

That segment is actually where I got the idea. My code has the chart section partially incorporated (using an image). But, I can't get the image to show up in the popup. For one, I'm not sure what the tooltipField variable is or why they include it?

Here's how I incorporated it:

   var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    scale: 500000,
                    center: [-87.95, 41.4],
                    popup: {
                        dockEnabled: true,
                        dockOptions: {
                            //disables the dock button from the pop-up
                            buttonEnabled: false,
                            //ignore the default sizes that trigger responsive docking
                            breakpoint: false,
                        }
                    }
                });
                //popup template
                var template = { //autocasts the new template
                    title: "<font color= '#008000'>{Name}",
                    content: [{ //set content elements in the order to display
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "Type",
                            label: "Type",
                            visible: true,
                        }, {
                            fieldName: "Address",
                            label: "Address",
                            visible: true,
                        }, {
                            fieldName: "Website",
                            label: "Website",
                            visible: true,
                        }, {
                            fieldName: "Photo",
                            label: "Photo",
                            visible: true,
                        },
                        ]
                    }, {
                        // You can set a media element within the popup as well. This
                        // can be either an image or a chart. You specify this within
                        // the mediaInfos. Similar to text elements, media can only be set within the content.
                        type: "media",
                        mediaInfos: [{
                            type: "image",
                            value: {
                                fields: ["Photo"],
                                normalizeField: null,
                            }
                        }]
                    }
                    ]
                };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Set Image in Popup?

JaredPilbeam2 — Fri, 21 Sep 2018 18:34:21 GMT

In my attributes the Photo field is a URL: http://www.willcogis.org/website2014/gis/images/mar.png

So, I thought I'd change the type to "url" instead of "image" under mediaInfos. Nothing.

Re: Set Image in Popup?

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:42:03 GMT

Jared,

Here is a example of what you need:

      var featureLayer = new FeatureLayer({
        url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/MapServer/2",
        popupTemplate: { // autocasts as new PopupTemplate()
          title: "<font color='#008000'>Louisville, Kentucky Traffic Cameras",

          // Set content elements in the order to display.
          // The first element displayed here is the fieldInfos.
          content: [{
            // It is also possible to set the fieldInfos outside of the content
            // directly in the popupTemplate. If no fieldInfos is specifically set
            // in the content, it defaults to whatever may be set within the popupTemplate.
            type: "fields",
            fieldInfos: [{
              fieldName: "URL",
              visible: false,
              label: "Image Url"
            }, {
              fieldName: "ONLINE",
              visible: false,
              label: "Camera Status"
            }, {
              fieldName: "DESCRIPTION",
              visible: false,
              label: "Description"
            }, {
              fieldName: "LAST_UPDATED",
              visible: false,
              label: "Last Updated"
            }]
          },{
            type: "media",
            mediaInfos: [{
              title: "Camera is online: {ONLINE}",
              type: "image",
              value: {sourceURL: '{URL}'}
            }]
          }]
        },
        outFields: ["*"]
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Set Image in Popup?

JaredPilbeam2 — Sat, 11 Dec 2021 17:42:05 GMT

Brilliant. Thanks Robert.

BTW,
I also had to change this section to false or else I was getting the attributes to show up in the popup too.

{
fieldName: "Photo",
label: "Photo",
visible: false,
}‍‍‍‍‍