AnsweredAssumed Answered

Set infoWindow title with html element

Question asked by ingenue3911 on Dec 21, 2016
Latest reply on Dec 22, 2016 by rscheitlin

I am trying to add an combobox to the title of an infoWindow. The combobox is intended to be populated with the list of identified results. I'm trying two different ways:

 

1. Adding the combobox declaratively using html:

 

var template = new esri.InfoTemplate(layerName + "<br/><select id="id_select" data-dojo-type="dijit/form/Select"</select>,"<br/> FID : ${FID}");

 

The combobox is there, but I don't know how to access the combobox to add the options dynamically (via addOptions). I would normally do dijit.byId("id_select"), but considering it doesn't exist until it's created...I'm not sure how to go about this way.

 

2. Programmatically

With the code below, the title displays information regarding the dijit/form/select widget (It displays: [object HTML TableElement]), but not the widget itself. I tried using domConstruct like this example.

 

 

var identifyTask, identifyParams, idPoint;
var identifyResults;

require([
"esri/dijit/Popup",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"dijit/form/Select",
"dojo/dom-construct",
"dojo/promise/all",
"dojo/domReady!"
], function (
Popup, IdentifyTask, IdentifyParameters, Select, domConstruct, All
) {
var identifySelect;

//dojo.connect(window.myMap, "onLoad", mapReady);
mapReady(window.myMap);

function mapReady(map) {
dojo.connect(window.myMap, "onClick", 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) {
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 = [];


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);
}
}
results = dojo.map(results, function (result, index) {
var feature = result.feature;
var layerName = result.layerName;
var serviceUrl = taskUrls[index];

resultNames.push({
value: result.layerName,
label: result.layerName
});
feature.attributes.layerName = result.layerName;

var identifiedList = getIdentifiedList(resultNames);
console.log(identifiedList);

var template = new esri.InfoTemplate();
template.setTitle(identifiedList);
feature.setInfoTemplate(template);

var resultGeometry = feature.geometry;
var resultType = resultGeometry.type;
return feature;
});


if (results.length === 0) {
window.myMap.infoWindow.clearFeatures();
} else {
window.myMap.infoWindow.setFeatures(results);
}


window.myMap.infoWindow.show(idPoint);

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 = 5;
idParams.returnGeometry = true;
identifyParamsList.push(idParams);
});
return identifyParamsList;
}

});

Outcomes