Without posting a lengthy amount of code, I hope this will be sufficient for my question. I'm creating a custom popup that allows for multiple sublayers from a MapImageLayer to be identified.
There is a <select> element that contains the layer names, and then some forward/backward navigation buttons if there are multiple features for any given sublayer.
My problem is that once I have the array of identified features, I need to be able to click on the layer dropdown and then choose the first feature belonging to that layer's array. After changing the selectedFeatureIndex, I cannot find a way to wait until it's finished with everything, because the dropdown gets reset when my popup gets reset. I need to detect when the popup update has completely finished.
No matter what I watch – whether it's watchUtils.when(app.mapView.popup, "selectedFeature" or watchUtils.whenNot(app.mapView.popup.viewModel, "pendingPromisesCount" or anything else – the watch property methods are all too early. The only way it works is if I add a minimal timer delay (even 100 milliseconds is enough). So while it is a solution, it's not really a proper or ideal solution. Is there a certain promise or property to watch? How can I can know exactly when the popup has finished updating?
The "multi_feature_content" function simply builds the custom html for the popup:
app.mapImgLyrUtilMap.allSublayers.map(function (sublayer) {
sublayer.popupTemplate = new PopupTemplate({
content: multi_feature_content,
...
Setting the feature index:
app.mapView.popup.selectedFeatureIndex = app.curAbsoluteFeatIdx;
I'm trying to update my Select element (named with variable idSelectListId) to the currently selected layer name, but watchUtils.when (popup, "selectedFeature") runs too soon for my need.
watchUtils.when(app.mapView.popup, "selectedFeature", function (selectedFeatureIndex) {
console.log("app.mapView.popup selectedFeatureIndex: ", selectedFeatureIndex);
setTimeout(function () {
console.log("setSelectToCurrentLayer()...");
// - Set to the already selected layer
app.idSelectedLayer = document.getElementById(app.idSelectListId);
console.log("app.idSelectedLayerCurSel: ", app.idSelectedLayerCurSel);
console.log("app.idSelectedLayer: ", app.idSelectedLayer);
if (app.idSelectedLayer && app.idSelectedLayer.options) {
if (app.arrIdentifyAllSelectedLayers.indexOf(app.idSelectedLayerCurSel) > -1) {
for (var i = 0, j = app.idSelectedLayer.options.length; i < j; ++i) {
if (app.idSelectedLayer.options[i].innerHTML === app.idSelectedLayerCurSel) {
app.idSelectedLayer.selectedIndex = i;
break;
}
}
}
}
}, 100);
});