Hello, I have a map that does everything I want except query successfully.. I am assuming that one of my functions are out of place because the query pane is showing 0 results in my query. My data source is a feature service from Fulcrum.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>QueryTask - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 10px;
width: 350px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function(esriConfig,Map, MapView, GraphicsLayer, QueryTask, Query) {
// URL to feature service containing points representing the 50
// most prominent peaks in the U.S.
esriConfig.apiKey = "AAPK70505a08690e47cdabb8cc6e755833746AwLs_vRPMwQYe0qDPJfzpaVuajxLoiLFsr-GV5ZQdlXM-bRNXIOjGOvXqDgYWr8";
var peaksUrl =
"https://fulcrumapp.io/share/5529251078a50e77a26b/geoservices/FeatureServer/0";
// Define the popup content for each result
var popupTemplate = {
// autocasts as new PopupTemplate()
title: "{si_sn_id}",
fieldInfos: [
{
fieldName: "_status",
label: "Inspection Status",
},
{
fieldName: "structure_type",
label: "Structure Type",
},
{
fieldName: "sn_user17cd",
label: "Component Type",
},
{
fieldName: "si_dt_insp",
label: "Inspection Date",
format: {
dateFormat: "long-month-day-year"
}
},
],
content:
"<br><b>Inspection Status:</b> {_status}" +
"<br><b>Struture Type:</b> {structure_type} | {sn_user17cd}" +
"<br><b>Inspection Date:</b> {si_dt_insp}"
};
const mtnSymbol = {
type: "SimpleMarkerSymbol",
symbolLayers: [
{
type: "object",
resource: {
primitive: "point"
}
}
]
};
// Create graphics layer and symbol to use for displaying the results of query
var resultsLayer = new GraphicsLayer();
/*****************************************************************
* Point QueryTask to URL of feature service
*****************************************************************/
var qTask = new QueryTask({
url: peaksUrl
});
/******************************************************************
* 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: false,
outFields: ["*"]
});
var map = new Map({
basemap: "hybrid",
layers: [resultsLayer] // add graphics layer to the map
});
var view = new MapView({
map: map,
container: "viewDiv",
center: [-100, 38],
zoom: 4,
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
// Call doQuery() each time the button is clicked
view.when(function() {
view.ui.add("optionsDiv", "bottom-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var attributeName = document.getElementById("attSelect");
var expressionSign = document.getElementById("signSelect");
var value = document.getElementById("valSelect");
var attributeName2 = document.getElementById("attSelect2");
var expressionSign2 = document.getElementById("signSelect2");
var value2 = document.getElementById("valSelect2");
// Executes each time the button is clicked
function doQuery() {
// Clear the results from a previous query
resultsLayer.removeAll();
/*********************************************
*
* Set the where clause for the query. This can be any valid SQL expression.
* In this case the inputs from the three drop down menus are used to build
* the query. For example, if "Elevation", "is greater than", and "10,000 ft"
* are selected, then the following SQL where clause is built here:
*
* params.where = "ELEV_ft > 10000";
*
* ELEV_ft is the field name for Elevation and is assigned to the value of the
* select option in the HTML below. Other operators such as AND, OR, LIKE, etc
* may also be used here.
*
**********************************************/
params.where = attributeName.value + expressionSign.value + value.value;
// executes the query and calls getResults() once the 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 of the results and assign a symbol and PopupTemplate
// to each so they may be visualized on the map
var peakResults = response.features.map(function(feature) {
// Sets the symbol of each resulting feature to a cone with a
// fixed color and width. The height is based on the mountain's elevation
feature.symbol = {
type: "simple-marker",
color: "blue",
};
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(peakResults);
// animate to the results after they are added to the map
view.goTo(peakResults).then(function() {
view.popup.open({
features: peakResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
// print the number of results returned to the user
document.getElementById("printResults").innerHTML =
peakResults.length + " results found!";
}
// Called each time the promise is rejected
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>Inspection Status by Structure</h2>
<select class="esri-widget" id="attSelect">
<option value="_status">Inspection Status</option>
</select>
<select class="esri-widget" id="signSelect">
<option value="=">is equal to</option>
</select>
<select class="esri-widget" id="valSelect">
<option value="Needs Inspection">Needs Inspection</option>
<option value="TREKK360 Scan Complete">TREKK360 Scan Complete</option>
<option value="2">Surface</option>
<option value="3">Not Inspected</option>
<option value="4">Buried</option>
</select>
<br />
<br />
<button class="esri-widget" id="doBtn">Do Query</button> <br />
<p><span id="printResults"></span></p>
</div>
</body>
</html>
