Query Features Sample Code

EllisHammond1 · ‎07-13-2021

Hello,

I am working on developing an application with the JS API and was using a sample code to teach myself.

The sample code was previously here: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/ But has since been replaced with a new example. The previous example involved querying earthquakes based on magnitude and proximity to well sites.

Does anyone know where this has gone, or alternatively does anyone have this previous sample code available to share?

I have copied my attempt to get this to work below - if anyone can help me I would be really grateful 🙂 I'm very new to HTML and JS so would welcome any hints and tips. I'm trying to create an app that allows client-side query, where users can query brownfield sites in Liverpool, based on their proximity to certain types of schools, and minimum net housing potential.

@BlakeTerhune @KenBuja I have seen that you guys have helped with this kind of thing before, hope you don't mind me tagging you.

<html>

<head>

<title>Query features from a FeatureLayer</title>

<style>

html,

body,

#viewDiv {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

#infoDiv {

background-color: white;

color: black;

padding: 6px;

width: 400px;

}

#results {

font-weight: bolder;

padding-top: 10px;

}

.slider{

width: 100%;

height: 60px;

}

#drop-downs{

padding-bottom: 15px;

}

</style>

require([

"esri/Map",

"esri/views/MapView",

"esri/layers/FeatureLayer",

"esri/layers/GraphicsLayer",

"esri/geometry/geometryEngine",

"esri/Graphic",

"esri/widgets/Slider"

], function(Map, MapView, FeatureLayer, GraphicsLayer, geometryEngine, Graphic, Slider) {

var BrownfieldsUrl =

"https://services3.arcgis.com/htbSquWCstgNlzeK/arcgis/rest/services/Brownfield_master_layer_v2_LivCli...";

var SchoolsBuffer, SchoolsGeometries, minnetdwel;

var schoolTypeSelect = document.getElementById("TypeOfEs_1");

var dwelSlider = new Slider({

container: "dwel",

min: 0,

max: 110,

steps: 10,

values: [ 2 ],

visibleElements: {

labels: true,

rangeLabels: true

}

});

var distanceSlider = new Slider({

container: "distance",

min: 100,

max: 10000,

steps: 100,

labelFormatFunction: function(value, type){

if (type === "value"){

return parseInt(value);

}

return value;

},

values: [ 5000 ],

visibleElements: {

labels: true,

rangeLabels: true

}

});

var queryBrownfields = document.getElementById("query-brownfields");

// schools

var SchoolsLayer = new FeatureLayer({

portalItem: {

// autocasts as new PortalItem()

id: "347ad1e5dd444aa2985f18f2a27eb6dd"

},

outFields: ["*"],

visible: false

});

//brownfieldsites

var BrownfieldsLayer = new FeatureLayer({

url: BrownfieldsUrl,

outFields: ["*"],

visible: false

});

// GraphicsLayer for displaying results

var resultsLayer = new GraphicsLayer();

var map = new Map({

basemap: "hybrid",

layers: [SchoolsLayer, BrownfieldsLayer, resultsLayer]

});

var view = new MapView({

container: "viewDiv",

map: map,

center: [53.404343, -2.986252],

zoom: 9

});

view.ui.add("infoDiv", "top-right");

// query all features from the schools layer

view

.when(function() {

return SchoolsLayer.when(function() {

var query = SchoolsLayer.createQuery();

return SchoolsLayer.queryFeatures(query);

});

})

.then(getValues)

.then(getUniqueValues)

.then(addToSelect)

.then(createBuffer);

// return an array of all the values in the

// TypeOfEs_1 field of the schools layer

function getValues(response) {

var features = response.features;

var values = features.map(function(feature) {

return feature.attributes.TypeOfEs_1;

});

return values;

}

// return an array of unique values in

// the TypeOfEs_1 field of the schools 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 schools type

// select element. This will allow the user

// to filter schools by type.

function addToSelect(values) {

values.sort();

values.forEach(function(value) {

var option = document.createElement("option");

option.text = value;

SchoolTypeSelect.add(option);

});

return setSchoolDefinitionExpression(SchoolTypeSelect.value);

}

// set the definition expression on the schools

// layer to reflect the selection of the user

function setSchoolDefinitionExpression(newValue) {

SchoolsLayer.definitionExpression = "TypeOfEs_1 = '" + newValue + "'";

if (!SchoolsLayer.visible) {

SchoolsLayer.visible = true;

}

return queryForSchoolsGeometries();

}

// Get all the geometries of the schools layer

// the createQuery() method creates a query

// object that respects the definitionExpression

// of the schools layer

function queryForSchoolsGeometries() {

var SchoolsQuery = SchoolsLayer.createQuery();

return SchoolsLayer.queryFeatures(SchoolsQuery).then(function(response) {

SchoolsGeometries = response.features.map(function(feature) {

return feature.geometry;

});

return SchoolsGeometries;

});

}

// creates a single buffer polygon around

// the schools geometries

var bufferGraphic = null;

function createBuffer(SchoolPoints) {

var bufferDistance = distanceSlider.values[0];

var SchoolsBuffers = geometryEngine.geodesicBuffer(SchoolsPoints, [bufferDistance], "meters", true);

SchoolsBuffer = SchoolsBuffers[0];

if(bufferGraphic){

bufferGraphic.geometry = SchoolsBuffer;

} else {

// add the buffer to the view as a graphic

bufferGraphic = new Graphic({

geometry: SchoolsBuffer,

symbol: {

type: "simple-fill", // autocasts as new SimpleFillSymbol()

outline: {

width: 1.5,

color: [255, 128, 0, 0.5]

},

style: "none"

}

});

view.graphics.add(bufferGraphic);

}

// Get the minnetdwel value set by the user

dwelSlider.on("thumb-drag", function(event) {

minnetdwel = event.value;

});

// create a buffer around the queried geometries

distanceSlider.on("thumb-drag", function(event) {

if(event.state === "stop"){

createBuffer(SchoolsGeometries);

}

});

// set a new definitionExpression on the schools layer

// and create a new buffer around the new schools

SchoolsTypeSelect.addEventListener("change", function() {

var type = event.target.value;

setSchoolsDefinitionExpression(type).then(createBuffer);

});

// query for brownfields with the specified min net dwell

// within the buffer geometry when the query button

// is clicked

queryBrownfields.addEventListener("click", function() {

queryBrownfields().then(displayResults);

});

function queryBrownfields() {

var query = BrownfieldsLayer.createQuery();

query.where = "MinNetDwel >= " + dwelSlider.values[0];

query.geometry = SchoolsBuffer;

query.spatialRelationship = "intersects";

return BrownfieldsLayer.queryFeatures(query);

}

// display the brownfields query results in the

// view and print the number of results to the DOM

function displayResults(results) {

resultsLayer.removeAll();

var features = results.features.map(function(graphic) {

graphic.symbol = {

type: "simple-marker", // autocasts as new SimpleMarkerSymbol()

style: "diamond",

size: 6.5,

color: "darkorange"

};

return graphic;

});

var numBrownfields = features.length;

document.getElementById("results").innerHTML = numBrownfields + " Brownfield Sites found";

resultsLayer.addMany(features);

}

});

</script>

</head>

<body>

Select school type:

</div>

School buffer distance (meters):

Minimum Net Dwellings:

<button id="query-brownfields" class="esri-widget">Query Brownfield Sites</button>

</div>

</body>

</html>

Noah-Sager · ‎07-13-2021

Hi @EllisHammond1, is this the version of the sample that you were referring to?

https://codepen.io/noash/pen/vYmgNqa?editors=1000

Older versions of the SDK, which contains the samples, are available to download by version if you have a developer's account: https://developers.arcgis.com/downloads/#javascript

View solution in original post

Noah-Sager · ‎07-13-2021

Hi @EllisHammond1, is this the version of the sample that you were referring to?

https://codepen.io/noash/pen/vYmgNqa?editors=1000

Older versions of the SDK, which contains the samples, are available to download by version if you have a developer's account: https://developers.arcgis.com/downloads/#javascript

EllisHammond1 · ‎07-13-2021

Hi @Noah-Sager

Yes, that's the sample - Thank you so much!

If possible, are you able to troubleshoot my code in the original post? I'm unsure as to why it's not working.

Thanks in advance for your help - really appreciate it.

BlakeTerhune · ‎07-13-2021

There's a lot going on here that needs to be addressed. From my first pass, here are some basic issues I noticed.

You reference a variable "SchoolsTypeSelect" that does not exist. Probably should be SchoolTypeSelect
var schoolTypeSelect = document.getElementById("TypeOfEs_1");
There is no element with an id = "TypeOfEs_1"
The URL defined for BrownfieldsUrl is incomplete. Maybe it should be

https://services3.arcgis.com/htbSquWCstgNlzeK/ArcGIS/rest/services/Brownfield_master_layer_v2_LivClip/FeatureServer/0

I'll take another look if you're able to resolve those issues.

EllisHammond1 · ‎07-14-2021

Hi @BlakeTerhune ,

Thank you so much for agreeing to help me with this - I think I've corrected some of the issues.

You can find a new version here or below:

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Query features from a FeatureLayer</title>

#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}

#results {
font-weight: bolder;
padding-top: 10px;
}
.slider{
width: 100%;
height: 60px;
}
#drop-downs{
padding-bottom: 15px;
}
</style>

//brownfieldsites
var BrownfieldsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/htbSquWCstgNlzeK/ArcGIS/rest/services/Brownfield_master_layer_v2_LivCli...",
outFields: ["*"],
visible: false
});

var SchoolsBuffer, SchoolsGeometries, minnetdwel;

var schoolTypeSelect = document.getElementById("school-type");

var dwelSlider = new Slider({
container: "dwel",
min: 0,
max: 110,
steps: 10,
values: [ 2 ],
visibleElements: {
labels: true,
rangeLabels: true
}
});

var queryBrownfields = document.getElementById("queryBrownfields");

// schools
var SchoolsLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "347ad1e5dd444aa2985f18f2a27eb6dd"
},
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();

var map = new Map({
basemap: "topo-vector",
layers: [SchoolsLayer, BrownfieldsLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-2.986252, 53.404343],
zoom: 9
});
view.ui.add("infoDiv", "top-right");

// query all features from the schools layer
view
.when(function() {
return SchoolsLayer.when(function() {
var query = SchoolsLayer.createQuery();
return SchoolsLayer.queryFeatures(query);
});

})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect)
.then(createBuffer);

// return an array of all the values in the
// TypeOfEs_1 field of the schools layer
function getValues(response) {
var features = response.features;
var values = features.map(function(feature) {
return feature.attributes.TypeOfEs_1;
});
return values;
}

// return an array of unique values in
// the TypeOfEs_1 field of the schools layer
function getUniqueValues(values) {
var uniqueValues = [];

values.forEach(function(item, i) {});
return uniqueValues;
}

// Add the unique values to the schools type
// select element. This will allow the user
// to filter schools by type.
function addToSelect(values) {
values.sort();
values.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
SchoolTypeSelect.add(option);
});

return setSchoolDefinitionExpression(SchoolTypeSelect.value);
}

// set the definition expression on the schools
// layer to reflect the selection of the user
function setSchoolDefinitionExpression(newValue) {
SchoolsLayer.definitionExpression = "TypeOfEs_1 = '" + newValue + "'";

if (!SchoolsLayer.visible) {
SchoolsLayer.visible = true;
}

return queryForSchoolsGeometries();
}

// Get all the geometries of the schools layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the schools layer
function queryForSchoolsGeometries() {
var SchoolsQuery = SchoolsLayer.createQuery();

return SchoolsLayer.queryFeatures(SchoolsQuery).then(function(response) {
SchoolsGeometries = response.features.map(function(feature) {
return feature.geometry;
});

return SchoolsGeometries;
});
}

// creates a single buffer polygon around
// the schools geometries

var bufferGraphic = null;
function createBuffer(SchoolsPoints) {
var bufferDistance = distanceSlider.values[0];
var SchoolsBuffers = geometryEngine.geodesicBuffer(SchoolsPoints, [bufferDistance], "meters", true);
SchoolsBuffer = SchoolsBuffers[0];

if(bufferGraphic){
bufferGraphic.geometry = SchoolsBuffer;
} else {
// add the buffer to the view as a graphic
bufferGraphic = new Graphic({
geometry: SchoolsBuffer,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: {
width: 1.5,
color: [255, 128, 0, 0.5]
},
style: "none"
}
});
view.graphics.add(bufferGraphic);
}
}

// Get the minnetdwel value set by the user
dwelSlider.on("thumb-drag", function(event) {
minnetdwel = event.value;
});
// create a buffer around the queried geometries
distanceSlider.on("thumb-drag", function(event) {
if(event.state === "stop"){
createBuffer(SchoolsGeometries);
}
});
// set a new definitionExpression on the schools layer
// and create a new buffer around the new schools
SchoolTypeSelect.addEventListener("change", function() {
var type = event.target.value;
setSchoolsDefinitionExpression(type).then(createBuffer);
});

// query for brownfields with the specified min net dwell
// within the buffer geometry when the query button
// is clicked
queryBrownfields.addEventListener("click", function() {
queryBrownfields().then(displayResults);
});

function queryBrownfields() {
var query = BrownfieldsLayer.createQuery();
query.where = "MinNetDwel >= " + dwelSlider.values[0];
query.geometry = SchoolsBuffer;
query.spatialRelationship = "intersects";

return BrownfieldsLayer.queryFeatures(query);
}

// display the brownfields query results in the
// view and print the number of results to the DOM
function displayResults(results) {
resultsLayer.removeAll();
var features = results.features.map(function(graphic) {
graphic.symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
size: 6.5,
color: "darkorange"
};
return graphic;
});
var numBrownfields = features.length;
document.getElementById("results").innerHTML = numBrownfields + " Brownfield Sites found";
resultsLayer.addMany(features);
}
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<div id="drop-downs">
Select school type:
<select id="school-type" class="esri-widget"></select>
</div>
School buffer distance (meters):
<div id="distance" class="slider"></div>
Minimum Net Dwellings:
<div id="dwel" class="slider"></div>
<button id="query-brownfields" class="esri-widget">Query Brownfield Sites</button>
<div id="results" class="esri-widget"></div>
</div>
</body>
</html>

EllisHammond1 · ‎07-14-2021

Hi @BlakeTerhune,

Thank you so much for agreeing to help me with this - I've been working on it this morning and have gotten closer, please disregard the previous reply.

New version below and here

<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Query features from a FeatureLayer
</title>

#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}

#results {
font-weight: bolder;
padding-top: 10px;
}

.slider {
width: 100%;
height: 60px;
}

#drop-downs {
padding-bottom: 15px;
}
</style>

<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<div id="drop-downs">
Select school type:
<select id="school-type" class="esri-widget"></select>
</div>
School buffer distance (meters):
<div id="distance" class="slider"></div>
Brownfield dwelling:
<div id="dwel" class="slider"></div>
<button id="query-brownfields" class="esri-widget">Query Brownfield Sites</button>
<div id="results" class="esri-widget"></div>
</div>
</body>

</html>

BlakeTerhune · ‎07-14-2021

Checking the console log, you are getting errors in the geometry engine, which would only be in your createBuffer() function. In there, you have a schoolPoints parameter that you need to use in geodesicBuffer(). However, there are a couple places you call createBuffer without any arguments; lines 142 and 245.