I am using the ArcGIS API for JavaScript 4.
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.
Why might this be happening?
The complete code is below:
<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 {
/* Fill in later to style drop down 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";
//* Define the popup content for each result
var popupTemplate = {
title: "{MajBas}",
fieldInfos: [
{
fieldName: "MajBas",
label: "Major basin"
}
],
content:
"{MajBas} test"
};
// Layer - project footprints
const basinLayer = new FeatureLayer({
url: basinUrl,
outFields: ["*"],
visible: false
});
// Layer - dark nav basemap
const basemap = Basemap.fromId("streets-night-vector");
//** Point querytask to project boundary URL
var qTask = new QueryTask({
url: basinUrl
});
//** Set the query parameters to always return geometry and all fields.
//** Returning geometry allows us to display results on the map/view
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
//* GraphicsLayer for displaying results
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
});
// create home widget
var homeWidget = new Home({
view: mainView
});
// add widget with drop-down options
mainView.ui.add("optionsDiv", {
position: "bottom-left",
index: 0
});
// add home widget
mainView.ui.add(homeWidget, {
position: "top-left",
index: 0
});
//* for drop down
var basinTypeSelect = document.getElementById("valSelect");
//* query all features from the basin layer
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)
//* return an array of all the values in the
//* basin name field
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.MajBas;
});
return values;
}
//* return an array of unique values in
//* the MajBas field of the basin layer
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if (
(uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
item !== ""
) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
//* Add the unique values to the basin type
//* select element. This will allow the user
//* to filter basin by name.
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
basinTypeSelect.add(option);
});
}
//** Call doQuery() each time the button is clicked
mainView.when(function () {
mainView.ui.add("optionsDiv", "bottom-left");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
//**
var attributeName = document.getElementById("MajBas");
// Executes each time the button is clicked
function doQuery() {
// Clear the results from a previous query
resultsLayer.removeAll();
// Build new query
params.where =
"MajBas =" + "'" + basinTypeSelect.value + "'";
// executes query and calls getResults() once promise is resolved
// promiseRejected() is called if the promise is rejected
qTask.execute(params).then(getResults).catch(promiseRejected);
}
// Called each time the promise is resolved
function getResults(response) {
// Loop through each results and assign a symbol and PopupTemplate
var basinResults = response.features.map(function (feature) {
// Sets the symbol of each resulting feature
feature.symbol = {
type: "simple-fill",
color: [212, 161, 87, 0.25],
outline: { // autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 0.5],
width: "0.5px"
}
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(basinResults);
// animate to the results after they are added to the map
mainView
.goTo(basinResults)
.then(function () {
mainView.popup.open({
features: basinResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
})
.catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
// print the number of results returned to the user
document.getElementById("printResults").innerHTML =
basinResults.length + " result(s) found";
}
// Called each time the promise is rejected
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>
