I'd like to query a hosted layer and add the output to my map using ArcGIS API for JS 4.11. I'm creating a Park Finder application, and the goal is for different parks to appear on the map according to amenities that are checked. I've been following the documentation for the Query and QueryTask modules and looking at the sample code in the QueryTask example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query.
However, I can't seem to get the results to add to my map. At the moment, my test application is supposed to return one park named Rouge Park when I check the "Basketball" checkbox, but nothing appears on the map when I check the checkbox. Printing to the console, I can tell that the queried object is successfully making it to the final function where I ultimately add the result (lines 346-365). Am I adding the result incorrectly? Apologies for copying my entire code... lines 61-210 essentially create dummy content.
Any help would be very appreciated.
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="initial-scale=1.0">
<link href="https://www.waynecounty.com/ui/css/jquery.mmenu.all.css" rel="stylesheet" type="text/css">
<link href='https://www.waynecounty.com/ui/css/semantic.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src='https://www.waynecounty.com/ui/lib/semantic.min.js'></script>
<!--JS Scripts to print map-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<!--<link rel="manifest" href="/manifest.json"/>-->
<!--ArcGIS API for JavaScript-->
<script src="https://js.arcgis.com/4.11/"></script>
<title>The Wayne County ParkFinder</title>
<style>
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#map_canvas {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #F5FFFA;
}
#overviewDiv {
position: absolute;
bottom: 55px;
left: 30px;
width: 300px;
height: 200px;
border: 2px solid black;
z-index: 997;
overflow: hidden;
}
#extentDiv {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 998;
}
</style>
</head>
<body>
<div class="ui small top fixed teal inverted menu">
<a class="browse item" style="color: white; font-size: 14px; font-weight: bold;">
Park Features
<i class="large dropdown icon"></i>
</a>
<div class="ui fluid popup" style="top: 553px; left: 1px; bottom: auto; right: auto; width: 960px;">
<div class="ui six column relaxed equal height divided grid">
<div class=column>
<h4 class="ui header">Trails & Fitness</h4>
<div class="ui checkbox">
<input type="checkbox" name="ccSki">
<label>Cross Country Skiing</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 1</label>
</div>
</div>
<div class=column>
<h4 class="ui header">Sports & Games</h4>
<div class="ui checkbox featureCheck" data-rel="bball">
<input type="checkbox" name="bball">
<label>Basketball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="rackball">
<label>Racketball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="vball">
<label>Volleyball</label>
</div>
</div>
<div class=column>
<h4 class="ui header">Water Recreation</h4>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 2</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 3</label>
</div>
</div>
<div class=column>
<h4 class="ui header">Outdoor Recreation</h4>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 4</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 5</label>
</div>
</div>
<div class=column>
<h4 class="ui header">Winter Recreation</h4>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 6</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 7</label>
</div>
</div>
<div class=column>
<h4 class="ui header">Amenities & Fitness</h4>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 8</label>
</div>
<br>
<br>
<div class="ui checkbox">
<input type="checkbox" name="filler">
<label>Filler Amenity 9</label>
</div>
</div>
</div>
</div>
</div>
<!--Map div-->
<div id="map_canvas"></div>
<script>
var map;
var myView;
require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
"esri/widgets/ScaleBar",
"esri/layers/MapImageLayer",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/symbols/SimpleFillSymbol"
], function(Map, MapView, Basemap, VectorTileLayer, ScaleBar, MapImageLayer, GraphicsLayer, QueryTask, Query, SimpleFillSymbol) {
//The URL of the Parks Map Service that will queried
var parksMapServiceURL = "https://devarcgisent.waynecounty.lan/serverdev/rest/services/ParkFinder/Wayne_County_Parks/MapServer/0";
//The popup template and symbology for the search results
var resultsPopupTemplate = {
title: "{Parks_NAME}",
content: "<b>Owner:</b> {Parks_OWNE}<br><b>Park Location:</b> {Park_Attri}<br><b>Basketball:</b> {Park_Att_4}"
};
var parkSymbol = {
type: "simple-fill",
color: [51,51, 204, 0.9],
style: "solid",
outline: {
color: "white",
width: 1
}
};
//Graphics layer for displaying the query results
var resultsLayer = new GraphicsLayer();
//Point the QueryTask to the Map Service URL
var qTask = new QueryTask({
url: parksMapServiceURL
});
//Set the query parameters to always return geometry and all fields
var params = new Query({
returnGeometry: true,
outFields: ["*"],
where: "Parks_NAME = 'Rouge Park'" //This will be changed to be more dynamic. For now keep this here.
});
//Create the main map, starting with a custom basemap loaded from ArcGIS Online
var basemap = new Basemap({
baseLayers: [
new VectorTileLayer({
portalItem: {
id: "ddef64bb74174dd6adf7cff46dd24da7"
}
})
]
});
map = new Map({
basemap: basemap,
layers: [resultsLayer], //Add graphics layer to the map
sliderPosition: "bottom-right"
});
//Add Wayne County boundary - number in the map.add function indicates the z-index.
wayneCoBoundary = new MapImageLayer({
url: "https://devarcgisent.waynecounty.lan/serverdev/rest/services/WayneCoBaseMapApp/WayneCoBoundary/MapServer"
});
map.add(wayneCoBoundary, 20);
//Add Parks layer - number in the map.add function indicates the z-index
wayneCoParks = new MapImageLayer({
url: "https://devarcgisent.waynecounty.lan/serverdev/rest/services/ParkFinder/Wayne_County_Parks/MapServer",
sublayers: [{
id: 0,
popupTemplate: {
title: "{Parks_NAME}",
content: "<b>Owner:</b> {Parks_OWNE}<br><b>Park Location:</b> {Park_Attri}<br><b>Basketball:</b> {Park_Att_4}"
}
}]
});
map.add(wayneCoParks, 19);
//Create the MapView for the main map
myView = new MapView({
container: "map_canvas",
map: map,
center: [-83.22511,42.24697],
zoom: 10,
//Exclude the zoom widget from the UI
ui: {
components: ["attribution"]
}
});
//Add scale bar to the bottom right corner of the view
var scaleBar = new ScaleBar({
view: myView
});
myView.ui.add(scaleBar, {
position: "bottom-trailing"
});
//Constrain the max and min zoom levels
myView.constraints = {
minZoom: 10,
maxZoom: 19
};
//Add and remove parks according to features
$(".featureCheck").checkbox();
$(document).on("click", ".featureCheck", function(){
var trgt = $(this).attr("data-rel");
//This 'if' statement will execute the query and get the query results
if(trgt == "bball"){
if ($(this).is(".checked")){
console.log("checked");
map.remove(wayneCoParks);
qTask.execute(params).then(getResults);
} else{
console.log("unchecked");
}
}
});
//Called once promise is resolved
function getResults(response){
console.log("in getResults");
console.log(response);
var parkResults = response.features.map(function(feature){
//feature.symbol = parkSymbol
feature.symbol = {
type: "simple-fill",
color: [51,51, 204, 0.9],
style: "solid",
outline: {
color: "white",
width: 1
}
};
feature.popupTemplate = resultsPopupTemplate;
return feature;
});
//Add results to the map
resultsLayer.add(parkResults);
};
});
</script>
<script>
//Configure popup for Park Features
$(document).ready(function(){
$(".menu .browse").popup({
inline: true,
hoverable: true,
position: "bottom left",
delay: {
show: 300,
hide: 500
}
});
});
</script>
</body>
</html>
Solved! Go to Solution.
Try changing line 365 from
resultsLayer.add(parkResults);
to
resultsLayer.addMany(parkResults);
Try changing line 365 from
resultsLayer.add(parkResults);
to
resultsLayer.addMany(parkResults);
That was it! Thank you Ben!