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.
// 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);
});
<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>