Hi,
I am pretty new to javascript and web development but have been scripting in SQL and Python for a while.
I have been progressing pretty well and have been able to use, combine and modify many of the samples into a working application but I have been stuck for 2 days on using a query task. I was hoping all you guru's out there could point me in the right direction.
I have tried it on both my localhost and in the esri sandbox and I can't get anything to return.
I either get an error executeQueryTask is undefined or nothing happens.
The code is from Using QueryTask, Query, and FeatureSet | Guide | ArcGIS API for JavaScript
Thanks in advance for your assistance,
Matt
CODE |
---|
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title>
<style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <script src="https://js.arcgis.com/3.15/"></script> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color) { //create map and add layer map = new Map("mapDiv"); var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); map.addLayer(layer); //initialize query task queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); //initialize query query = new Query(); query.returnGeometry = true; query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"]; //initialize InfoTemplate infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}"); //create symbol for selected features symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setSize(10); symbol.setColor(new Color([255,255,0,0.5]));
function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP04 > " + population; //execute query queryTask.execute(query,showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i=0, il=resultFeatures.length; i<il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } }
function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP04 > " + population; //execute query queryTask.execute(query,showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i=0, il=resultFeatures.length; i<il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } }
}); </script>
</head>
<body> <br/> US city population greater than : <input type="text" id="population" value="500000" /> <input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" /> <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div> Click on a city once it's highlighted to get an InfoWindow. </body>
</html> |
Solved! Go to Solution.
Matthew,
Two issues in your code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <script src="https://js.arcgis.com/3.15/"></script> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/on", "dojo/domReady!" ], function (Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, on) { //create map and add layer map = new Map("mapDiv"); var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); map.addLayer(layer); //initialize query task queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); //initialize query query = new Query(); query.returnGeometry = true; query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"]; //initialize InfoTemplate infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}"); //create symbol for selected features symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setSize(10); symbol.setColor(new Color([255, 255, 0, 0.5])); function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP1990 > " + population; console.info(query.where); //execute query queryTask.execute(query, showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i = 0, il = resultFeatures.length; i < il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } } on(dojo.byId('btnExec'), 'click', function(){ executeQueryTask(dojo.byId('population').value); }); }); </script> </head> <body> <br/> US city population greater than : <input type="text" id="population" value="500000" /> <input type="button" value="Get Details" id="btnExec"/> <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div> Click on a city once it's highlighted to get an InfoWindow. </body> </html>
Matthew,
Two issues in your code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <script src="https://js.arcgis.com/3.15/"></script> <script> require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/on", "dojo/domReady!" ], function (Map, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, on) { //create map and add layer map = new Map("mapDiv"); var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); map.addLayer(layer); //initialize query task queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."); //initialize query query = new Query(); query.returnGeometry = true; query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"]; //initialize InfoTemplate infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}"); //create symbol for selected features symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setSize(10); symbol.setColor(new Color([255, 255, 0, 0.5])); function executeQueryTask(population) { //set query based on what user typed in for population; query.where = "POP1990 > " + population; console.info(query.where); //execute query queryTask.execute(query, showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //Performance enhancer - assign featureSet array to a single variable. var resultFeatures = featureSet.features; //Loop through each feature returned for (var i = 0, il = resultFeatures.length; i < il; i++) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = resultFeatures; graphic.setSymbol(symbol); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); } } on(dojo.byId('btnExec'), 'click', function(){ executeQueryTask(dojo.byId('population').value); }); }); </script> </head> <body> <br/> US city population greater than : <input type="text" id="population" value="500000" /> <input type="button" value="Get Details" id="btnExec"/> <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div> Click on a city once it's highlighted to get an InfoWindow. </body> </html>
Awesome that worked perfectly.
In a prior version of the code i did change the field but never thought of the scope issue.
Lost for a few hours for a 10 second fix. Good thing this is for my own education at the moment. LOL!
Thanks for your assistance!!
Matt
Matthew,
There are other ways to make the onClick in the html code has access (scope) to the code but I prefer to use dojo on in the code to handle events for html elements.
Thanks again for your help this morning I have one other question for you if you have a minute.
Do you have any recommended resources on javascript with esri development. I am really interested in learning how to organize an application. Everything i have done to this point has been one file applications.
I have been reading and I am experiencing that this is probably not going to be the best method.
I would like to learn how to have an html page that calls various javascript files. I believe this is done in require but I haven't been able to find a good resource that describes the best practices for setting up a web app.
Thanks for your time,
Matt
Matt,
Unfortunately I don't have any resources to recommend. All the multi-file JS stuff I learned, was from tearing apart the AGOL templates and large apps like Web AppBuilder.
No problem thought I would ask. That is how I have been trying to learn also but those large apps are really large.
I have only been working on web development for about week so I am pretty happy with where I am. I just prefer to figure out best practices before i go to far and learn bad habits.
Thanks again.
Hi, i am having similar issue where my attribute query is not returning any features. i tried direct query from the arcgis rest service and the where clause returns the object correctly.
When i log the results, it only shows information about the layer im querying, but no features. therefore the results.features returns no value.
Would like to understand where i made a mistake.
Thanks in advance
The query code is shown below: