Display attachments in popup

4763
20
Jump to solution
10-03-2017 02:56 PM
Quynh_NhuMai
New Contributor III

I am trying to display an attachment (originally added using the attachment tool in Desktop) in a arcgis jsapi 3.17 Popup. I am unable, however, to query the attachment infos and receive an IO error.

Running the code below, the 'infos' printed to the console returns the image information, but the popup does not display an image nor hyperlink.


var identifyTask, identifyParams, idPoint;
var identifyResults;
window.idHandler;

require([
  "esri/dijit/Popup",
  "esri/dijit/PopupTemplate",
  "esri/tasks/IdentifyTask",
  "esri/tasks/IdentifyParameters",
  "esri/layers/FeatureLayer",
  "dijit/form/CheckBox",
  "dijit/form/Select",
  "dijit/form/ToggleButton",
  "dijit/registry",
  "dojo/on",
  "dojo/query",
  "dojo/dom-construct",
  "dojo/promise/all",
  "dojo/domReady!"
], function (
  Popup, PopupTemplate, IdentifyTask, IdentifyParameters, FeatureLayer, CheckBox, Select, ToggleButton, registry, on, query, domConstruct, All)
  {
    var popup = new Popup({
      fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
    }, dojo.create("div"));
    
    
    var idButton = new ToggleButton({
      label: "Identifier les entités",
      showLabel: false,
      iconClass: "identifyIcon",
      checked: false,
      onChange: function (val) {
        //alert("test button clicked")
        if (val) {
          window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
          toggleButtonIcon(this);
          console.log("Identify started");
        }
        else {
          window.idHandler.pause();
          console.log("Identify paused");
        }
        //toggleButtonIcon(this);
      }
    }, "id_button");
    idButton.startup();
    
    function mapReady(map) {
      //window.connect = dojo.connect(window.myMap, "onClick", runIdentifies);
      window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
    }
    
    function runIdentifies(evt) {
      identifyResults = [];
      idPoint = evt.mapPoint;
      var layers = dojo.map(window.myMap.layerIds, function (layerId) {
        return window.myMap.getLayer(layerId);
      });
      layers = dojo.filter(layers, function (layer) {
        //console.log(layer.layerInfos[0].name);
        if (layer.visibleLayers[0] !== -1) {
          return layer.getImageUrl && layer.visible
        }
      }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
      var tasks = dojo.map(layers, function (layer) {
        return new IdentifyTask(layer.url);
      }); //map each visible dynamic layer to a new identify task, using the layer url
      var defTasks = dojo.map(tasks, function (task) {
        return new dojo.Deferred();
      }); //map each identify task to a new dojo.Deferred
      var params = createIdentifyParams(layers, evt);
      
      var promises = [];
      
      for (i = 0; i < tasks.length; i++) {
        promises.push(tasks[i].execute(params[i])); //Execute each task
      }
      
      var allPromises = new All(promises);
      allPromises.then(function (r) { showIdentifyResults(r, tasks); });
    }
    
    function showIdentifyResults(r, tasks) {
      var results = [];
      var taskUrls = [];
      var resultNames = [];
      var identifySelect;
      
      
      r = dojo.filter(r, function (result) {
        return r[0];
      });
      for (i = 0; i < r.length; i++) {
        results = results.concat(r[i]);
        for (j = 0; j < r[i].length; j++) {
          taskUrls = taskUrls.concat(tasks[i].url);
        }
      }
      
      var idx = 0;
      results = dojo.map(results, function (result, index) {
        if (!result.layerName == "CADRILLAGE"
      )) {
        var feature = result.feature;
        var layerName = result.layerName;
        var serviceUrl = taskUrls[index];
        //resultNames[index] = result.layerName;
        resultNames.push({
          value: idx,
          label: result.layerName
        });
        idx++;
        feature.attributes.layerName = result.layerName;
        
       
        
        
        identifySelect = dijit.byId("id_select");
        
        identifySelect.removeOption(identifySelect.getOptions());
        identifySelect.addOption(resultNames);
        //var identifiedList = getIdentifiedList(resultNames);
        //console.log(identifiedList);
        
        
        if (layerName === 'E_HYDRAN') {
          
          
          var template = new PopupTemplate({
            title: "My Title",
            fieldInfos: [
              {fieldName: "Address", label: "<b>Address:</b>", visible: true},
              {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
              showAttachments:true,
            });
            
            var featureLayer = new FeatureLayer("http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3",{
              mode: FeatureLayer.MODE_ONDEMAND,
              infoTemplate: template,
              outFields: ["*"]
            });
            
            var objectId, el;
            
            objectId = feature.attributes.objectid;
            
            featureLayer.queryAttachmentInfos(objectId, function (infos) {
              //map.infoWindow.setTitle(objectId);
              el = document.createElement('img');
              if (infos[0].url) {
                el.setAttribute('src', infos[0].url);
                template.setContent(el);
                //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
              }
            });
            
            
            //var template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
            feature.setInfoTemplate(template);
          }
          else {
            template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
            feature.setInfoTemplate(template);
          }
            
            
            
            var resultGeometry = feature.geometry;
            var resultType = resultGeometry.type;
            return feature;
          }
          
        });
        
        results = results.filter(function(n){
          return n != undefined
        });
        
        if (results.length === 0) {
          window.myMap.infoWindow.clearFeatures();
        } else {
          window.myMap.infoWindow.setFeatures(results);
        }
        
        
        
        window.myMap.infoWindow.show(idPoint);
        
        if (typeof identifySelect != 'undefined') {
          identifySelect.on('change', function(evt) {
            var identIndex = identifySelect.get("value");
            console.log(identIndex);
            window.myMap.infoWindow.select(identIndex);
          });
        }
        
        
        return results;
      }
      
      function getIdentifiedList(options) {
        identifySelect = new Select({
          name: "identifySelect",
          id: "id_select",
          options: options
        }, domConstruct.create("select"));
        return identifySelect.domNode;
      }
      
      function createIdentifyParams(layers, evt) {
        var identifyParamsList = [];
        identifyParamsList.length = 0;
        dojo.forEach(layers, function (layer) {
          var idParams = new esri.tasks.IdentifyParameters();
          idParams.width = window.myMap.width;
          idParams.height = window.myMap.height;
          idParams.geometry = evt.mapPoint;
          idParams.mapExtent = window.myMap.extent;
          idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
          var visLayers = layer.visibleLayers;
          if (visLayers !== -1) {
            var subLayers = [];
            for (var i = 0; i < layer.layerInfos.length; i++) {
              if (layer.layerInfos[i].subLayerIds == null)
              subLayers.push(layer.layerInfos[i].id);
            }
            idParams.layerIds = subLayers;
          } else {
            idParams.layerIds = [];
          }
          idParams.tolerance = 7;
          idParams.returnGeometry = true;
          identifyParamsList.push(idParams);
        });
        return identifyParamsList;
      }
      
      function toggleButtonIcon(tool) {
        //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
        
        var domNodes = query('.dijitToggleButton', this.domNode);
        //var measureDivNodes = dojo.byId("measurementDiv");
        //var measureNodes = query('.dijitButtonNode', measureDivNodes);
        
        domNodes.forEach(function(domNode){
          var togbtn = registry.getEnclosingWidget(domNode);
          if (togbtn == tool) {
            togbtn.attr("checked", true);
            //console.log("Checked is true");
          }
          else {
            togbtn.attr("checked", false);
            //console.log("Checked is false");
          }
        });
        
        
        
       
      }
      
      
    });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Should I be looking for something in particular relative to the template for the feature?

**UPDATE** Still not working, but am now trying to use the mediaInfos property to see if it works. Here's how that looks:

var identifyTask, identifyParams, idPoint;
var identifyResults;
window.idHandler;
require([
 "esri/dijit/Popup",
 "esri/dijit/PopupTemplate",
 "esri/tasks/IdentifyTask",
 "esri/tasks/IdentifyParameters",
 "esri/layers/FeatureLayer",
 "dijit/form/CheckBox",
 "dijit/form/Select",
 "dijit/form/ToggleButton",
 "dijit/registry",
 "dojo/on",
 "dojo/query",
 "dojo/dom-construct",
 "dojo/promise/all",
 "dojo/domReady!"
], function (
 Popup, PopupTemplate, IdentifyTask, IdentifyParameters, FeatureLayer, CheckBox, Select, ToggleButton, registry, on, query, domConstruct, All)
 {
 var popup = new Popup({
 fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
 }, dojo.create("div"));
var idButton = new ToggleButton({
 label: "Identifier les entités",
 showLabel: false,
 iconClass: "identifyIcon",
 checked: false,
 onChange: function (val) {
 //alert("test button clicked")
 if (val) {
 window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
 toggleButtonIcon(this);
 console.log("Identify started");
 // measurementActiveButton = dojo.query(".esriMeasurement .esriButton.esriButtonChecked .dijitButtonNode")[0]
 // if(measurementActiveButton){
 // measurementActiveButton.click();
 // }
 }
 else {
 window.idHandler.pause();
 console.log("Identify paused");
 }
 //toggleButtonIcon(this);
 }
 }, "id_button");
 idButton.startup();
function mapReady(map) {
 //window.connect = dojo.connect(window.myMap, "onClick", runIdentifies);
 window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
 }
function runIdentifies(evt) {
 identifyResults = [];
 idPoint = evt.mapPoint;
 var layers = dojo.map(window.myMap.layerIds, function (layerId) {
 return window.myMap.getLayer(layerId);
 });
 layers = dojo.filter(layers, function (layer) {
 //console.log(layer.layerInfos[0].name);
 if (layer.visibleLayers[0] !== -1) {
 return layer.getImageUrl && layer.visible
 }
 }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
 var tasks = dojo.map(layers, function (layer) {
 return new IdentifyTask(layer.url);
 }); //map each visible dynamic layer to a new identify task, using the layer url
 var defTasks = dojo.map(tasks, function (task) {
 return new dojo.Deferred();
 }); //map each identify task to a new dojo.Deferred
 var params = createIdentifyParams(layers, evt);
var promises = [];
for (i = 0; i < tasks.length; i++) {
 promises.push(tasks[i].execute(params[i])); //Execute each task
 }
var allPromises = new All(promises);
 allPromises.then(function (r) { showIdentifyResults(r, tasks); });
 }
function showIdentifyResults(r, tasks) {
 var results = [];
 var taskUrls = [];
 var resultNames = [];
 var identifySelect;

 r = dojo.filter(r, function (result) {
 return r[0];
 });
 for (i = 0; i < r.length; i++) {
 results = results.concat(r[i]);
 for (j = 0; j < r[i].length; j++) {
 taskUrls = taskUrls.concat(tasks[i].url);
 }
 }
 var idx = 0;
 results = dojo.map(results, function (result, index) {
 if (!result.layerName == "CADRILLAGE") {
 var feature = result.feature;
 var layerName = result.layerName;
 var serviceUrl = taskUrls[index];
 //resultNames[index] = result.layerName;
 resultNames.push({
 value: idx,
 label: result.layerName
 });
 idx++;
 feature.attributes.layerName = result.layerName;


 identifySelect = dijit.byId("id_select");
identifySelect.removeOption(identifySelect.getOptions());
 identifySelect.addOption(resultNames);
 //var identifiedList = getIdentifiedList(resultNames);
 //console.log(identifiedList);

 if (layerName === 'E_HYDRAN') {

 // var template = new PopupTemplate({
 // title: "My Title",
 // fieldInfos: [
 // {fieldName: "Address", label: "<b>Address:</b>", visible: true},
 // {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
 // showAttachments:true,
 // });
var featureLayer = new FeatureLayer("http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3",{
 mode: FeatureLayer.MODE_ONDEMAND,
 infoTemplate: template,
 outFields: ["*"]
 });
var objectId, el;
 var pminfos = [];
 var popUpMediaInfo;
objectId = feature.attributes.objectid;
featureLayer.queryAttachmentInfos(objectId, function (infos) {
 var popUpInfo = {
 title: "Attachment images",
 description: "",
 showAttachments: false
 };
 arrayUtils.window.myMap(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 template = new PopupTemplate(popUpInfo);
//map.infoWindow.setTitle(objectId);
 // el = document.createElement('img');
 // if (infos[0].url) {
 // el.setAttribute('src', infos[0].url);
 // template.setContent(el);
 // //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
 // }
 });

 //var template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
 feature.setInfoTemplate(template);
 }
 else {
 // var template = new esri.InfoTemplate(layerName,
 // "${*}");
 //template.setTitle(identifiedList);
 var template = new PopupTemplate({
 title: "My Title",
 fieldInfos: [
 {fieldName: "Address", label: "<b>Address:</b>", visible: true},
 {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
 showAttachments:true,
 });
 feature.setInfoTemplate(template);
 }

var resultGeometry = feature.geometry;
 var resultType = resultGeometry.type;
 return feature;
 }
});
results = results.filter(function(n){
 return n != undefined
 });
if (results.length === 0) {
 window.myMap.infoWindow.clearFeatures();
 } else {
 window.myMap.infoWindow.setFeatures(results);
 }

window.myMap.infoWindow.show(idPoint);
if (typeof identifySelect != 'undefined') {
 identifySelect.on('change', function(evt) {
 var identIndex = identifySelect.get("value");
 console.log(identIndex);
 window.myMap.infoWindow.select(identIndex);
 });
 }

 return results;
 }
function getIdentifiedList(options) {
 identifySelect = new Select({
 name: "identifySelect",
 id: "id_select",
 options: options
 }, domConstruct.create("select"));
 return identifySelect.domNode;
 }
function createIdentifyParams(layers, evt) {
 var identifyParamsList = [];
 identifyParamsList.length = 0;
 dojo.forEach(layers, function (layer) {
 var idParams = new esri.tasks.IdentifyParameters();
 idParams.width = window.myMap.width;
 idParams.height = window.myMap.height;
 idParams.geometry = evt.mapPoint;
 idParams.mapExtent = window.myMap.extent;
 idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
 var visLayers = layer.visibleLayers;
 if (visLayers !== -1) {
 var subLayers = [];
 for (var i = 0; i < layer.layerInfos.length; i++) {
 if (layer.layerInfos[i].subLayerIds == null)
 subLayers.push(layer.layerInfos[i].id);
 }
 idParams.layerIds = subLayers;
 } else {
 idParams.layerIds = [];
 }
 idParams.tolerance = 7;
 idParams.returnGeometry = true;
 identifyParamsList.push(idParams);
 });
 return identifyParamsList;
 }
function toggleButtonIcon(tool) {
 //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
var domNodes = query('.dijitToggleButton', this.domNode);
 //var measureDivNodes = dojo.byId("measurementDiv");
 //var measureNodes = query('.dijitButtonNode', measureDivNodes);
domNodes.forEach(function(domNode){
 var togbtn = registry.getEnclosingWidget(domNode);
 if (togbtn == tool) {
 togbtn.attr("checked", true);
 //console.log("Checked is true");
 }
 else {
 togbtn.attr("checked", false);
 //console.log("Checked is false");
 }
 });


 }

 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
20 Replies
Quynh_NhuMai
New Contributor III

In the console, the url is not clickable...But, copy and pasting it into the browser, we receive a page with the attached image, and the url stays the same (e.g. http://ourserver/arcgis/rest/services/tests/servicetests/MapServer/3/222/attachments/755)

Strangely, navigating http://ourserver/arcgis/rest/services/tests/servicetests/MapServer/3/222/attachments/755.jpg brings me to the "Attachment Infos" page in the ArcGIS REST Services Directory for feature id 222.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Quynh,

   Here is another way to do this using media infos in the popup:

<!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: "gray",
        center: [-95, 40],
        zoom: 4,
        infoWindow: popup
      });
      on(map, 'load', function(_map_) {
        featureLayer = new FeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_attach/FeatureServ...', {
          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>
Quynh_NhuMai
New Contributor III

Robert,

I've attempted to integrate your suggestion regarding the mediaInfos property. I still, however, cannot get this to work. I wonder if it has to do with the fact that I have an identify task wired up for the feature, where as your example has set up a global popup for the map. Would you maybe be willing to take a look at the app in it's entirety?

In any case, I'll add an update to my post to demonstrate how I've attempted to use mediaInfos.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Quynh,

   It is hard to say what is going wrong based on the way you are doing this in your code. If you attach your whole App I can take a look.

0 Kudos
Quynh_NhuMai
New Contributor III

Robert,

I've attached the app. Thanks a lot!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

You don't have a publicly accessible map service do you? I am not finding your code issue and can not do much else without being able to actually run and debug your app.

0 Kudos
Quynh_NhuMai
New Contributor III

I do--would you be willing to let me email you the url?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Quynh,

  I am now following you on GeoNet so if you choose to follow me we can private message me the URL.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Quynh,  

   Attached you will find my fixes to your Identify.js and comments on some of my changes.

0 Kudos
Quynh_NhuMai
New Contributor III

Robert,

Thanks again for taking a look at that.

My take aways so far on this :

-popUpMediaInfos is the way to go (in what cases would one choose this?)

-infoTemplate was not set in the right place (should be inside the queryAttachments function)

-arrayUtils should be on map and not the window.myMap global variable (by why...?)

-should delay the display of the info window

0 Kudos