I'm creating a web map based on this example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query
Except I've modified it so that the drop-down list is dynamically populated based on the values available in an attribute column (MajBas in this instance). Everything works well EXCEPT that the pop-up content does not display properly after querying a feature. Specifically, only the pop-up title shows but not any of the content.
I'm having trouble figuring out why this would be. I'd appreciate any suggestions you may have for fixing this so that the pop-up content is visible after querying.
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Project viewer</title>
<style>
html,
body,
#mainViewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
h2 {
color: black;
font-family: "Noto Sans", sans-serif;
line-height: 1;
}
p {
color: black;
font-family: "Noto Sans", sans-serif;
}
div {
line-height: 0;
}
#optionsDiv {
background-color: white;
color: white;
padding: 10px;
width: 100%;
-webkit-box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67);
-moz-box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67);
box-shadow: 3px 2px 15px -2px rgba(0,0,0,0.67);
opacity: 0.90;
}
#drop-downs {
padding-bottom: 15px;
}
widget {
}
#printResults {
line-height: 1;
font-family: "Noto Sans", sans-serif;
font-style: italic;
font-size: 12px;
color: black;
}
#doBtn {
box-shadow:inset 0px 0px 0px 0px #9fb4f2;
background-color:#1a1b1f;
border: 0px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:6px 12px;
text-decoration:none;
border: 0px;
outline:none;
transition: all 0.3s ease 0s;
}
#doBtn:hover {
background-color:#494b51;
outline:none;
}
#doBtn:active {
position:relative;
top:1px;
border: 0px;
outline:none;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/widgets/LayerList",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/widgets/Home"
], function(
Map,
MapView,
Basemap,
LayerList,
FeatureLayer,
PopupTemplate,
GraphicsLayer,
QueryTask,
Query,
Home
){
var basinUrl = "https://services.arcgis.com/v01gqwM5QqNysAAi/arcgis/rest/services/Chesapeake_Bay_major_watersheds_feature/FeatureServer/0";
var popupTemplate = {
title: "{MajBas}",
fieldInfos: [
{
fieldName: "MajBas",
label: "Major basin"
}
],
content:
"{MajBas} test"
};
const basinLayer = new FeatureLayer({
url: basinUrl,
outFields: ["*"],
visible: false
});
const basemap = Basemap.fromId("streets-night-vector");
var qTask = new QueryTask({
url: basinUrl
});
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var resultsLayer = new GraphicsLayer();
var map = new Map({
basemap : basemap,
layers: [basinLayer, resultsLayer]
});
var mainView = new MapView({
container: "mainViewDiv",
map: map,
popup: {
highlightEnabled: false,
dockEnabled: true,
dockOptions: {
breakpoint: false,
position: "top-right"
}
},
center: [-75.325395, 40.306275],
zoom: 5
});
var homeWidget = new Home({
view: mainView
});
mainView.ui.add("optionsDiv", {
position: "bottom-left",
index: 0
});
mainView.ui.add(homeWidget, {
position: "top-left",
index: 0
});
var basinTypeSelect = document.getElementById("valSelect");
mainView
.when(function () {
return basinLayer.when(function () {
var query = basinLayer.createQuery();
return basinLayer.queryFeatures(query);
document.getElementById("doBtn").addEventListener("click", doQuery);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect)
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.MajBas;
});
return values;
}
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if (
(uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
item !== ""
) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
basinTypeSelect.add(option);
});
}
mainView.when(function () {
mainView.ui.add("optionsDiv", "bottom-left");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var attributeName = document.getElementById("MajBas");
function doQuery() {
resultsLayer.removeAll();
params.where =
"MajBas =" + "'" + basinTypeSelect.value + "'";
qTask.execute(params).then(getResults).catch(promiseRejected);
}
function getResults(response) {
var basinResults = response.features.map(function (feature) {
feature.symbol = {
type: "simple-fill",
color: [212, 161, 87, 0.25],
outline: {
color: [128, 128, 128, 0.5],
width: "0.5px"
}
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(basinResults);
mainView
.goTo(basinResults)
.then(function () {
mainView.popup.open({
features: basinResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
})
.catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
document.getElementById("printResults").innerHTML =
basinResults.length + " result(s) found";
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="mainViewDiv"></div>
<div id="optionsDiv">
<h2>Example</h2><br>
<div id="drop-downs">
<p><b>Basin</b></p>
<select id="valSelect" class="widget"></select>
</div>
<div align="center"><button id="doBtn">Search</button></div>
<p><div align="center"><span id="printResults"></span></div></p>
</div>
</body>
</html>