Popup not displaying content from first feature in featureset
536
0
05-17-2019 01:42 PM
by
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
}
}