Popup not displaying content from first feature in featureset

Anonymous User — Sun, 12 Dec 2021 05:14:27 GMT

Using JS 3.2x, I have an issue with the content from the first feature not displaying when the popup first appears. I can cycle to the next feature and then go back and it appears. I've tried the examples using the deferred method and this method of pushing the feature to an array and setting the array, both with similar results. I extracted the code that deals with the popup. I need the ability to either return one result or multiple results so the code goes down which ever path it needs to in order to return content. I could probably test the array for length and process there, but doing that it doesn't give me the option to go forward and back to see that content. Any ideas/ tips/ suggestions?

function initMap (domElement) {
    var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([76, 230, 0]), 3),
        new Color([209, 255, 115, 0.25])
        )

    var linesym = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([76, 230, 0]), 3)

    var circlne = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
        new Color([76, 230, 0]), 1)
    var pointsym = new SimpleMarkerSymbol()
    pointsym.setOutline(circlne)
    pointsym.setSize(12)
    pointsym.setColor(new Color([209, 255, 115, 0.25]))

    var popup = new Popup({
        highlight: true,
        anchor: 'auto',
        titleInBody: false,
        featureNavigationEnabled: true,
        markerSymbol: circlne,
        lineSymbol: linesym,
        fillSymbol: fill
    }, domConstruct.create('div'))

    return new Promise((resolve, reject) => {
        loadEsri('mapService.initMap').then(() => {
            // Base map with default extent
            this.map = new EsriMap(domElement, {
                center: [-107.673158, 43.191612],
                zoom: 7,
                minZoom: 6,
                slider: true,
                sliderPosition: 'bottom-right',
                infoWindow: popup
            })
            var template = new PopupTemplate()

            // Additional base layers that can be displayed using opacity sliders
            this.tiledStreet = new ArcGISTiledMapServiceLayer(process.env.Map_StreetMapEndpoint)
            this.map.addLayer(this.tiledStreet)
            this.tiledTopo = new ArcGISTiledMapServiceLayer(process.env.Map_TopoMapEndpoint)
            this.tiledTopo.setOpacity(0.0)
            this.map.addLayer(this.tiledTopo)
            this.tiledAerial = new ArcGISTiledMapServiceLayer(process.env.Map_AerialMapEndpoint)
            this.tiledAerial.setOpacity(0.0)
            this.map.addLayer(this.tiledAerial)
            this.tiledNatGeo = new ArcGISTiledMapServiceLayer(process.env.Map_NatGeoMapEndpoint)
            this.tiledNatGeo.setOpacity(0.0)
            this.map.addLayer(this.tiledNatGeo)

            this.getSServiceUrl().then((success) => {
                // console.log('found shpo service url: ' + url)
                this.Op = new ArcGISDynamicMapServiceLayer(mapURLs.Op, {
                    infoTemplates: {0: {infoTemplate: template}}
                })
                this.Static = new ArcGISDynamicMapServiceLayer(mapURLs.Static, {
                    infoTemplates: {0: {infoTemplate: template}}
                })
                this.map.addLayer(this.Op)
                this.map.addLayer(this.Static)
                resolve(this.map)
            })
        })
    })
}

function setDefaultSiteSearchClick ($http) {
    if (this.mapOnClick) {
        this.mapOnClick.remove()
        this.mapOnClick = null
    }
    this.mapOnClick = this.map.on('click', (evt) => {
        checkSites(evt, this, $http)
    })
}

function checkSites (evt, mapWrapper, $http) {
    //create query for sites/lines/polys
    var identifyTask = new IdentifyTask(process.env.URL)

    var identifyParams = new IdentifyParameters()
    identifyParams.tolerance = 3
    identifyParams.returnGeometry = true
    identifyParams.layerIds = [0, 1, 3]
    identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL
    identifyParams.width = mapWrapper.map.width
    identifyParams.height = mapWrapper.map.height
    identifyParams.geometry = evt.mapPoint
    identifyParams.mapExtent = mapWrapper.map.extent

    identifyTask.execute(identifyParams).then((results) => {
        if (results.length > 1) {
            multipleResults(results)
        } else if (results.length <= 1) {
            singleResult(results)
        }
        document.getElementsByClassName('titleButton close')[0].addEventListener('click', function () {
            gisGraphicsService.clearPrevSelected(graphicsID, mapWrapper.map)
        })
    })

    function multipleResults (results) {
        var popupFeatures = []
        console.table(results)
        arrayUtils.forEach(results, function (feature) {
            var sNo = feature.feature.attributes.Label
            cService.getGisSiteData($http, sNo).then(result => {
                sNo = [sNo.slice(0, 2), ' ', sNo.slice(2)].join('')
                if (sNo) {
                    popupContentBuilder(result).then(list => {
                        var siteTemplate = new InfoTemplate('Site Info', list)
                        feature.feature.setInfoTemplate(siteTemplate)
                    })
                } else {
                    var list = ''
                    list += 'Number: <b>No information was found.</b><br/>'
                    var undefTemplate = new InfoTemplate('Site Info', list)
                    feature.feature.setInfoTemplate(undefTemplate)
                }
            })
            popupFeatures.push(feature.feature)
        })
        if (popupFeatures.length > 0) {
            mapWrapper.map.infoWindow.setFeatures(popupFeatures)
            mapWrapper.map.infoWindow.show(evt.mapPoint)
        }
    }

    function singleResult (results) {
        console.table(results)
        var rendered = gisGraphicsService.renderselected(results[0])
        var sNo = results[0].feature.attributes.Label
        cService.getGisSiteData($http, sNo).then(result => {
            sNo = [sNo.slice(0, 2), ' ', sNo.slice(2)].join('')
            if (sNo) {
                popupContentBuilder(result).then(list => {
                    singleResultPopup(list, results, rendered)
                })
            } else {
                var list = ''
                list += 'Number: <b>No information was found.</b><br/>'
                singleResultPopup(list, results, rendered)
            }
        })
    }

    function popupContentBuilder (result) {
        return new Promise((resolve, reject) => {
            var list = ''
            var sNoLink = !result.data.canAccess ? result.data.sNumber
                : `<a target="_blank" href="/CResource/${result.data.RId}">` + result.data.sNumber + '</a>'
            list += 'Number: <b>' + sNoLink + '</b><br/>'
            list += 'Name: <b>' + (result.data.sName || 'N/A') + '</b><br/>'
            list += 'E: <b>' + (result.data.currentDescription || 'N/A') + '</b><br/>'
            list += 'T: <b>' + (result.data.timeDescription || 'N/A') + '</b><br/>'

            resolve(list)
        })
    }

    function singleResultPopup (list, results, rendered) {
        var siteTemplate = new InfoTemplate('Site Info', list)
        results[0].feature.setInfoTemplate(siteTemplate)
        mapWrapper.map.infoWindow.clearFeatures()
        mapWrapper.map.infoWindow.setTitle('Site Info')
        mapWrapper.map.infoWindow.setContent(list)
        mapWrapper.map.infoWindow.show(evt.mapPoint)
        mapWrapper.map.addLayer(rendered)
        graphicsID = rendered.graphics[0]._graphicsLayer.id
    }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic Popup not displaying content from first feature in featureset in ArcGIS JavaScript Maps SDK Questions

Popup not displaying content from first feature in featureset