Query a FeatureLayer

Question

How do I query a feature layer? My feature layer is about 150 points with attributes. I'd like to be able to have the user query these points by "Type". I've had a look at this example: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html As far as I can see I should be able to use it. Based on the example, here's what I came up with using my own data. But it's not functioning. <!DOCTYPE html> <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 - 4.9</title> <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script> <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; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/geometry/geometryEngine", "esri/Graphic" ], function ( Map, MapView, FeatureLayer, GraphicsLayer, geometryEngine, Graphic ) { var attTypeSelect = document.getElementById("attractions"); //attractions var attractions = new FeatureLayer({ url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs", outFields: ["*"], id: "attractions", visible: false }); //GraphicsLayer for desplaying results var resultsLayer = new GraphicsLayer(); var map = new Map({ basemap: "dark-gray", layer: "attractions" }); var view = new MapView({ container: "viewDiv", map: map, center: [-87.75188, 41.23308], zoom: 10 }); view.ui.add("infoDiv", "top-right"); //query all features from the attractions layer view.when(function () { return attractions.when(function () { var query = attractions.createQuery(); return attractions.queryFeatures(query); }); }) .then(getValues) .then(getUniqueValues) .then(addToSelect); // return an array of all the values in the // Type field of the attractions layer function getValues(response) { var features = response.features; var values = features.map(function (feature) { return feature.attributes.Type; }); return values; } // return an array of unique values in // the Type field of the attractions 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 attractions type // select element. This will allow the user // to filter attractions by type. function addToSelect(values) { values.sort(); values.forEach(function (value) { var option = document.createElement("option"); option.text = value; attTypeSelect.add(option); }); return setattractionsDefinitionExpression(attTypeSelect.value); } // set the definition expression on the attractions // layer to reflect the selection of the user function setattractionsDefinitionExpression(newValue) { attractions.definitionExpression = "Type" + newValue + "'"; if (!attractions.visible) { attractions.visible = true; } return queryForAtractionGeometries(); } // Get all the geometries of the attractions layer // the createQuery() method creates a query // object that respects the definitionExpression // of the layer function queryForAttractionGeometries() { var attractionsQuery = attractions.createQuery(); return attractions.queryFeatures(attractionsQuery) .then(function (response) { attractionsGeometries = response.features.map(function (feature) { return feature.geometry; }); return attractionsGeometries; }); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="infoDiv"> Select attractions type: <select id="attractions"></select> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

rscheitlin · Accepted Answer

Jared, Here is your code fixed with comments on the changes needed: <!DOCTYPE html> <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 - 4.9</title> <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script> <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; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/geometry/geometryEngine", "esri/Graphic" ], function ( Map, MapView, FeatureLayer, GraphicsLayer, geometryEngine, Graphic ) { var attTypeSelect = document.getElementById("attractions"); //attractions var attractions = new FeatureLayer({ url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0", outFields: ["*"], visible: false }); //GraphicsLayer for desplaying results var resultsLayer = new GraphicsLayer(); var map = new Map({ basemap: "dark-gray", //You were passing a string "attractions" to a property called layer (which does not exist) layers: [attractions] }); var view = new MapView({ container: "viewDiv", map: map, center: [-87.75188, 41.23308], zoom: 10 }); view.ui.add("infoDiv", "top-right"); //query all features from the attractions layer view.when(function () { return attractions.when(function () { var query = attractions.createQuery(); return attractions.queryFeatures(query); }); }) .then(getValues) .then(getUniqueValues) .then(addToSelect); // return an array of all the values in the // Type field of the attractions layer function getValues(response) { var features = response.features; var values = features.map(function (feature) { return feature.attributes.Type; }); return values; } // return an array of unique values in // the Type field of the attractions 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 attractions type // select element. This will allow the user // to filter attractions by type. function addToSelect(values) { values.sort(); values.forEach(function (value) { var option = document.createElement("option"); option.text = value; attTypeSelect.add(option); }); return setattractionsDefinitionExpression(attTypeSelect.value); } // set the definition expression on the attractions // layer to reflect the selection of the user function setattractionsDefinitionExpression(newValue) { //You messed up the SQL syntax for the defenition query attractions.definitionExpression = "Type = '" + newValue + "'"; if (!attractions.visible) { attractions.visible = true; } //You misspelled the function name here return queryForAttractionGeometries(); } //You forgot to add the evenet listener for attTypeSelect change // set a new definitionExpression on the attractions layer attTypeSelect.addEventListener("change", function () { var type = event.target.value; setattractionsDefinitionExpression(type); }); // Get all the geometries of the attractions layer // the createQuery() method creates a query // object that respects the definitionExpression // of the layer function queryForAttractionGeometries() { var attractionsQuery = attractions.createQuery(); return attractions.queryFeatures(attractionsQuery) .then(function (response) { attractionsGeometries = response.features.map(function (feature) { return feature.geometry; }); return attractionsGeometries; }); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="infoDiv"> Select attractions type: <select id="attractions"></select> </div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍