Brief overview: I am wanting to show both georeferenced species occurrences and county-level species occurrences because not all of our records are georeferenced. For this purpose, I have two feature layers, a 5km2 hexagonal grid for the georeferenced locations and a county layer. Both have a column called sname for the species name.
I have created a query task for both based on the same query. However, I cannot seem to get both of the results to show simultaneously. I have tried reordering, addMany for the graphics, and a bunch of other stuff, but nothing seems to work right.
Any suggestions would be greatly appreciated.
Code snippet:
// Define sql expression eventually want to bind to record selected in OBIS explorer
var query = new Query();
query.where = "sname = 'Nicrophorus americanus'"
query.outFields = ["*"];
query.returnGeometry = true;
// Define the query task for hexagons
var hexquery = new QueryTask({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/OBIS_5km_Occurrences/MapServer/0/"
});
// Define the query task for county polygons
var coquery = new QueryTask({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/OBIS_County_Occurrences_Poly/MapServer/0/"
});
// Execute the Hexagon Query
hexquery.execute(query)
.then(function(result){
result.features.forEach(function(item){
var hexgraphic = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-fill",
color: [115, 178, 115],
style: "solid",
outline: null
},
popupTemplate: {
title: "<em>{sname}</em> ({vernacularname})",
content: "ONHI has {count} occurrence record(s) for <em>{sname}</em> ({vernacularname}) in this hexagon"
}
});
view.graphics.add(hexgraphic);
});
})
// Execute the County Query
coquery.execute(query)
.then(function(result){
result.features.forEach(function(item){
var cographic = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-fill",
color: [240, 253, 230],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "black",
width: 0.5
}
},
popupTemplate: {
title: "<em>{sname}</em> ({vernacularname})",
content: "ONHI has {count} occurrence record(s) for <em>{sname}</em> ({vernacularname}) in {county} County"
}
});
view.graphics.add(cographic);
});
})
.otherwise(function(e){
console.log(e);
});
Full code:
<html>
<head>
<meta name="description" content="DevLav: Query a feature layer">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>County Level Species Occurrences</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-view:fullscreen {
background-color: #fff;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
</head>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/geometry/Extent",
"esri/geometry/SpatialReference",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/Graphic",
"esri/widgets/Fullscreen"
],
function(
Map,
MapView,
FeatureLayer,
SimpleRenderer,
Extent,
SpatialReference,
Query,
QueryTask,
Graphic,
Fullscreen
) {
//map extent: Need this since no basemap; otherwise extent is pretty wonky
var bounds = new Extent({
"xmin":-103.5,
"ymin":33.0,
"xmax":-93.5,
"ymax":37.5,
"spatialReference":{"wkid":4326} //this is for the extent only; need to set map spatial reference in view.
});
// Oklahoma Counties Layer
var okcounties = new FeatureLayer({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/ArcGISServer_Counties/MapServer"
});
var map = new Map({
//basemap: "satellite",
layers: [okcounties]
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: bounds,
spatialReference: 3857 //spatial reference of map; different from the extent
});
// Define sql expression eventually want to bind to record selected in OBIS explorer
var query = new Query();
query.where = "sname = 'Nicrophorus americanus'"
query.outFields = ["*"];
query.returnGeometry = true;
// Define the query task for hexagons
var hexquery = new QueryTask({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/OBIS_5km_Occurrences/MapServer/0/"
});
// Define the query task for county polygons
var coquery = new QueryTask({
url: "https://obsgis.csa.ou.edu:6443/arcgis/rest/services/ONHI/OBIS_County_Occurrences_Poly/MapServer/0/"
});
// Execute the Hexagon Query
hexquery.execute(query)
.then(function(result){
result.features.forEach(function(item){
var hexgraphic = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-fill",
color: [115, 178, 115],
style: "solid",
outline: null
},
popupTemplate: {
title: "<em>{sname}</em> ({vernacularname})",
content: "ONHI has {count} occurrence record(s) for <em>{sname}</em> ({vernacularname}) in this hexagon"
}
});
view.graphics.add(hexgraphic);
});
})
// Execute the County Query
coquery.execute(query)
.then(function(result){
result.features.forEach(function(item){
var cographic = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-fill",
color: [240, 253, 230],
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "black",
width: 0.5
}
},
popupTemplate: {
title: "<em>{sname}</em> ({vernacularname})",
content: "ONHI has {count} occurrence record(s) for <em>{sname}</em> ({vernacularname}) in {county} County"
}
});
view.graphics.add(cographic);
});
})
.otherwise(function(e){
console.log(e);
});
fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-right");
view.when(disableZooming);
/**
* Disables all zoom gestures on the given view instance.
*
* @param {esri/views/MapView} view - The MapView instance on which to
* disable zooming gestures.
*/
function disableZooming(view) {
view.popup.dockEnabled = true;
// Removes the zoom action on the popup
view.popup.actions = [];
// stops propagation of default behavior when an event fires
function stopEvtPropagation(event) {
event.stopPropagation();
}
// exlude the zoom widget from the default UI
view.ui.components = ["attribution"];
// disable mouse wheel scroll zooming on the view
view.on("mouse-wheel", stopEvtPropagation);
// disable zooming via double-click on the view
view.on("double-click", stopEvtPropagation);
// disable zooming out via double-click + Control on the view
view.on("double-click", ["Control"], stopEvtPropagation);
// disables pinch-zoom and panning on the view
view.on("drag", stopEvtPropagation);
// disable the view's zoom box to prevent the Shift + drag
// and Shift + Control + drag zoom gestures.
view.on("drag", ["Shift"], stopEvtPropagation);
view.on("drag", ["Shift", "Control"], stopEvtPropagation);
// prevents zooming with the + and - keys
view.on("key-down", function(event) {
var prohibitedKeys = ["+", "-", "Shift", "_", "="];
var keyPressed = event.key;
if (prohibitedKeys.indexOf(keyPressed) !== -1) {
event.stopPropagation();
}
});
return view;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Todd,
Consider using dojo/promise/all. It will await all the promises to return (i.e. both of the queryTasks) before returning an array of the results from each.
As always, thank you for your prompt, insightful reply, Robert. I will look into this.
In the meantime, I realized I may be over-complicating this. I am pursuing using a simple definitionExpression with each of the FeatureLayers rather than using a query task. It seems to do what I want/need, so this may be the route I take.
Thanks again.