Display attachments in popup

2577
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
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Quynh,

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

arrayUtils is a Dojo class that has a function called map.

map: iterates all the elements in an array, passing them to the callback function and then returning a new array with any of the modified results.

It seems you assumed that this "map" was the JS API Map Class an replaced it with the global var window.myMap.

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

View solution in original post

0 Kudos
20 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Quynh,

Are you sure this line is correct?

if (!!infos[0].url) {

I would think it should be:

if (infos[0].url) {

Since you are looking to see if there is a url.

0 Kudos
Quynh_NhuMai
New Contributor III

Hi Robert,

I made the change you suggested, and the info window still does not display an attachment nor hyperlink. I pasted the json pertaining to the image template for the feature. I'm unsure if we can tell from here whether or not the url of the image made it on there or not...

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Quynh,

  Your code is not formatted and thus is hard to read. What code you have posted will not run as it is so I assume that you are leaving out some code that would get you the feature object (from line 2).

var objectId, el;
objectId = feature.attributes.objectid;
featureLayer.queryAttachmentInfos(objectId, function (infos) {
  //map.infoWindow.setTitle(objectId);
  console.log(infos);
  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));
  }
});

feature.setInfoTemplate(template);
console.log(feature);

Without seeing more of the code I can not tell where your mistakes are and what you are just leaving out from what you are posting.

/blogs/sergent/2015/02/18/formatting-your-code-in-geonet-for-the-visual-learner 

Quynh_NhuMai
New Contributor III

Oh great, thank you. The interface seems a bit different now, but the code should be better formatted and I have added the code related to the identify task. The map is initialized in another file...would this code help too?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

What about setting a height and width fro your img html element?

0 Kudos
Quynh_NhuMai
New Contributor III

Thanks for the suggestion, I just tried it. Printing the template info to the console indicates the height and width properties were successfully added. The img url is equally accessible. However, the info window does not display the image nor hyperlink.

Console output when printing popup template (sorry again for the format, haven't figured out how to do so for json) :

{info: {…}, _fieldLabels: {…}, _fieldsMap: {…}, title: ƒ, content: ƒ, …}

content: imgaccessKey: ""align: ""alt: ""assignedSlot: nullattributes: NamedNodeMap0: src1: heightbaseURI: "http://srv-tit-testbd/SPE_SIG_SGBD/"childNodes: []firstChild: nullisConnected: falselastChild: nulllocalName: "height"name: "height"namespaceURI: nullnextSibling: nullnodeName: "height"nodeType: 2nodeValue: "150px"ownerDocument: documentownerElement: imgparentElement: nullparentNode: nullprefix: nullpreviousSibling: nullspecified: truetextContent: "150px"value: "150px"__proto__: Attr2: widthbaseURI: "http://srv-tit-testbd/SPE_SIG_SGBD/"childNodes: []firstChild: nullisConnected: falselastChild: nulllocalName: "width"name: "width"namespaceURI: nullnextSibling: nullnodeName: "width"nodeType: 2nodeValue: "150px"ownerDocument: documentownerElement: imgparentElement: nullparentNode: nullprefix: nullpreviousSibling: nullspecified: truetextContent: "150px"value: "150px"__proto__: Attrlength: 3__proto__: NamedNodeMapbaseURI: "http://srv-tit-testbd/SPE_SIG_SGBD/"border: ""childElementCount: 0childNodes: []children: []classList: [value: ""]className: ""clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0complete: truecontentEditable: "inherit"crossOrigin: nullcurrentSrc: "http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138"dataset: DOMStringMap__proto__: DOMStringMapdir: ""draggable: truefirstChild: nullfirstElementChild: nullheight: 150hidden: falsehspace: 0id: ""innerHTML: ""innerText: ""isConnected: falseisContentEditable: falseisMap: falselang: ""lastChild: nulllastElementChild: nulllocalName: "img"longDesc: ""lowsrc: ""name: ""namespaceURI: "http://www.w3.org/1999/xhtml"naturalHeight: 1275naturalWidth: 1755nextElementSibling: nullnextSibling: nullnodeName: "IMG"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<img src="http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138" height="150px" width="150px">"outerText: ""ownerDocument: documentparentElement: nullparentNode: nullprefix: nullpreviousElementSibling: nullpreviousSibling: nullreferrerPolicy: ""scrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullsizes: ""slot: ""spellcheck: truesrc: "http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138"srcset: ""style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}tabIndex: -1tagName: "IMG"textContent: ""title: ""translate: trueuseMap: ""vspace: 0width: 150x: 0y: 0__proto__: HTMLImageElementinfo: fieldInfos: (2) [{…}, {…}]showAttachments: truetitle: "E_HYDRAN"__proto__: Objecttitle: ƒ (a)titleHasRelatedFields: false_fieldLabels: {address: "<b>Address:</b>", city_1: "<b>City:</b>"}_fieldsMap: {address: {…}, city_1: {…}}_relatedFieldPrefix: "relationships/"__proto__: Object
Identify.js:253 {geometry: {…}, symbol: null, attributes: {…}, infoTemplate: {…}}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Quynh,

   Well the problem I see with that is that the url you are adding as the img src does not seem to be an image file (at least there is not a image file suffix).

I would expect to see something like this:

<img src="http ://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138.jpg" height="150px" width="150px">

Quynh_NhuMai
New Contributor III

Robert,

 

Ok--I wonder if this is due to the way attachments were added to the feature service then. Does knowing that accessing the url identified in the console allows us to visualise the image make a difference to your previous comment?

 

I have tried to concatenate .jpg to the end arbitrarily (fortunately we only have jpgs), which succeeds in creating a template with this img src (including prefix). However, this url does not succeed in accessing the image when browsed to using the navigator.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

What does the browsers address look like after you just click the url you had earlier?

0 Kudos