topic Re: how to display photo or attachment in infotemplate in ArcGIS JavaScript Maps SDK Questions

how to display photo or attachment in infotemplate

veenahosur1 — Fri, 05 Feb 2016 05:45:36 GMT

i need to display photos in info template.can any one tell me how to do it

Re: how to display photo or attachment in infotemplate

JakeSkinner — Sat, 11 Dec 2021 10:49:59 GMT

Hi Veena,

I found the following sample on GitHub:

Add an attachment image to popup infoWindow for ArcGIS JavaScript API. · GitHub

Here it is an example of the code converted to AMD:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://js.arcgis.com/3.15/"></script>
    <script>
      var map, popup, featureLayer;

      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Popup",
        "dojo/dom-construct","dojo/on",
        "dojo/domReady!"
        ], function (
            Map, FeatureLayer, Popup,
            domConstruct, on
        ) {
            popup = new Popup(null, domConstruct.create('div'));

            map = new Map('mapDiv', {
                basemap: 'streets',
                center: [-74.0499, 40.0403],
                zoom: 17,
                infoWindow: popup
            });
            on(map, 'load', function (_map_) {
                featureLayer = new FeatureLayer('http://services.arcgis.com/dlFJXQQtlWFB4qUk/arcgis/rest/services/ResidentialBuildings/FeatureServer/0', {
                    mode: FeatureLayer.MODE_ONDEMAND
                    });
                on(featureLayer, 'click', function (e) {
                    var objectId, el;
                    objectId = e.graphic.attributes[featureLayer.objectIdField];
                    featureLayer.queryAttachmentInfos(objectId, function (infos) {
                        map.infoWindow.setTitle(objectId);
                        el = document.createElement('img');
                        if (!!infos[0].url) {
                            el.setAttribute('src', infos[0].url);
                            map.infoWindow.setContent(el);
                            map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
                        }

                    });
                });
                map.addLayer(featureLayer);
            });
        });
    </script>
  </head>

  <body class="claro">

    <div id="mapDiv"></div>

  </body>
</html>

Re: how to display photo or attachment in infotemplate

veenahosur1 — Sat, 06 Feb 2016 04:41:07 GMT

its displaying only image i need to dispaly something like this

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_popupfl

above example is for popup window but i need to do it for infotemplate

Re: how to display photo or attachment in infotemplate

RobertScheitlin__GISP — Sat, 06 Feb 2016 13:08:57 GMT

Veena,

Can you explain why you have a requirement to use infoTemplate? I have found that most of the time people just think that they need infoTemplate and really have no specific requirement.

Re: how to display photo or attachment in infotemplate

veenahosur1 — Mon, 08 Feb 2016 04:41:31 GMT

i am using identifier so i am using info template

Re: how to display photo or attachment in infotemplate

RobertKirkwood — Mon, 03 Apr 2017 16:27:09 GMT

what would you use?

Re: how to display photo or attachment in infotemplate

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:50:02 GMT

Robert,

Here is that sample updated to use the popups media infos, so that multiple images are supported and the images are more manageable size:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Sample Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://js.arcgis.com/3.20/"></script>
  <script>
    var map, popup, featureLayer;

    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Popup",
      "esri/dijit/PopupTemplate", "dojo/dom-construct", "dojo/on",
      "dojo/_base/array", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Popup,
      PopupTemplate, domConstruct, on, arrayUtils
    ) {
      popup = new Popup(null, domConstruct.create('div'));

      map = new Map('mapDiv', {
        basemap: 'streets',
        center: [-74.0499, 40.0403],
        zoom: 17,
        infoWindow: popup
      });
      on(map, 'load', function(_map_) {
        featureLayer = new FeatureLayer('some url', {
          mode: FeatureLayer.MODE_ONDEMAND
        });
        on(featureLayer, 'click', function(e) {
          var objectId, el;
          var pminfos = [];
          var popUpMediaInfo;
          objectId = e.graphic.attributes[featureLayer.objectIdField];
          featureLayer.queryAttachmentInfos(objectId, function(infos) {
            var popUpInfo = {
              title: "Attachment images",
              description: "",
              showAttachments: false
            };
            arrayUtils.map(infos, function(info){
              if (!!info.url) {
                popUpMediaInfo = {};
                popUpMediaInfo.type = 'image';
                popUpMediaInfo.value = {};
                popUpMediaInfo.value.sourceURL = info.url;
                popUpMediaInfo.value.linkURL = info.url;
                popUpMediaInfo.caption = info.name;
                pminfos.push(popUpMediaInfo);
              }
            });
            popUpInfo.mediaInfos = pminfos;
            var pt = new PopupTemplate(popUpInfo);
            e.graphic.setInfoTemplate(pt);
            map.infoWindow.setFeatures([e.graphic]);
            map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
          });
        });
        map.addLayer(featureLayer);
      });
    });
  </script>
</head>

<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: how to display photo or attachment in infotemplate

RobertKirkwood — Tue, 04 Apr 2017 16:17:20 GMT

Thanks so much! That is pretty slick!

Re: how to display photo or attachment in infotemplate

RobertKirkwood — Sat, 11 Dec 2021 10:50:05 GMT

on(myLayer, 'click', function (e) {
                    map.graphics.clear();
                    var id;
                    var pminfosA = [];
                    id = e.graphic.attributes[artlayers.objectIdField];
                    artlayers.queryAttachmentInfos(id, function (infos) {
                        if (infos.length > 0) {
                            arrayUtils.map(infos, function (info) {
                                var popUpMediaInfo;
                                if (!!info.url) {
                                    popUpMediaInfo = {};
                                    popUpMediaInfo.type = 'image';
                                    popUpMediaInfo.value = {};
                                    popUpMediaInfo.value.sourceURL = info.url;
                                    popUpMediaInfo.value.linkURL = info.url;
                                    popUpMediaInfo.caption = info.name;
                                    pminfosA.push(popUpMediaInfo);
                                }
                            });
                            var pt = new PopupTemplate({
                                title: "{FEATURE_NAME}",
                                showAttachments: false,
                                mediaInfos: (pminfosA)
                            });
                            e.graphic.setInfoTemplate(pt);
                            map.infoWindow.setFeatures([e.graphic]);
                            map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
                        }
                        else {
                            var pt2 = new PopupTemplate({
                                title: "{FEATURE_NAME}",
                                showAttachments: false,
                                description: "no images available"

                            });
                            e.graphic.setInfoTemplate(pt2);
                            map.infoWindow.setFeatures([e.graphic]);
                            map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
                        }
                    });
                });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: how to display photo or attachment in infotemplate

RobertKirkwood — Wed, 28 Jun 2017 13:37:18 GMT

Above is some code that will show multiple photos. Also, How would i display a PDF in the pop that is an attachment?

Re: how to display photo or attachment in infotemplate

RobertScheitlin__GISP — Wed, 05 Jul 2017 13:47:18 GMT

Robert,

Displaying a PDF in the popup is not supported.