nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how to display photo or attachment in infotemplate

veenahosur1

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

Find more posts tagged with

Accepted answers

All comments

JakeSkinner

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>

veenahosur1

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

RobertScheitlin__GISP

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.

veenahosur1

i am using identifier so i am using info template

Mr_Kirkwood

what would you use?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.