Custom popup: how to wait for all promises after changing selectedFeatureIndex?

783
0
11-17-2020 03:34 PM
Andy_Morgan
New Contributor III

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.

Popup_illustration.png 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);
        });

 

 

 

 

0 Replies