I am looking for some script that will count the number of features on the map and display it.
I am thinking something like this: Crime Mapper
I need this to change every time the filter changes.
Solved! Go to Solution.
Rickey,
So here is your other threads example code with the feature count added to the end of the buttons div:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Feature Layer - display results as an InfoWindow onHover</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } #mapDiv { position: relative; } #buttons { background: #fff; box-shadow: 0 0 5px #888; left: 1em; padding: 0.5em; position: absolute; top: 1em; z-index: 40; } </style> <script src="http://js.arcgis.com/3.6/"></script> <script> var map, dialog; require([ "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "dojo/query", "dojo/on", "dojo/dom" ], function( Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, query, on, dom ) { map = new Map("mapDiv", { basemap: "streets", center: [-80.94, 33.646], zoom: 6, slider: false }); var states = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "AVE_FAM_SZ","SQMI","SUB_REGION", "STATE_NAME"] }); states.setDefinitionExpression("STATE_NAME = 'South Carolina'"); var symbol = new SimpleFillSymbol(); states.setRenderer(new SimpleRenderer(symbol)); map.addLayer(states); states.on("update-end", function(evt){ console.info(evt); dom.byId("featcount").innerHTML = " " + evt.target.graphics.length; }); //setup click event for buttons query("input").forEach(function(node){ on(node, "click", function (e) { var defExp = states.getDefinitionExpression(), defExp2 = "", defExp3 = ""; switch (e.srcElement.value) { case "East Coast": defExp = "SUB_REGION LIKE '% Atlantic' AND STATE_NAME IN( 'New York', 'New Jersey', 'Delaware')"; break; case "East North Central": defExp = "SUB_REGION='East North Central'"; break; case "Pacific": defExp ="SUB_REGION='Pacific'"; break; case "Clear": defExp = ""; break; case "SQMI": defExp2 = "SQMI>20000"; break; case "AVE_FAM_SZ": defExp2 = "AVE_FAM_SZ<3"; break; case "PopMil": defExp2 = "POP2007>1000000"; break; case "All": defExp3 = "1=1"; break; } //var fDefExpr = (defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""); defArr = []; if(defExp !== ""){ defArr.push(defExp); } if(defExp2 !== ""){ defArr.push(defExp2); } if(defExp3 !== ""){ defArr.push(defExp3); } states.setDefinitionExpression(defArr.join(" AND ")); }); }); }); </script> </head> <body class="tundra"> <div id="mapDiv"> <div id="buttons"> <input type="button" value="East Coast"/> <input type="button" value = "East North Central"/> <input type="button" value = "Pacific"/> <input type="button" value="SQMI"/> <input type="button" value="AVE_FAM_SZ"/> <input type="button" value="PopMil"/> <input type="button" value="Clear"/> <span id="featcount"> ???</span> </div> </div> </body> </html>
Rickey,
Would it be the number in the current map extent or the number that meet the current criteria?
Robert,
Number that meet the current criteria.
Rickey,
OK, I will need a little more info though. Is it a feature layer with a definition query applied, or a QueryTask or what? If it is a FeatureLayer w/ Definition Query than all you need to do is get the length of the graphics array.
Robert,
Yes it is a feature layer with setDefinitionExpression.
Thank you
Rickey,
So here is your other threads example code with the feature count added to the end of the buttons div:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Feature Layer - display results as an InfoWindow onHover</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } #mapDiv { position: relative; } #buttons { background: #fff; box-shadow: 0 0 5px #888; left: 1em; padding: 0.5em; position: absolute; top: 1em; z-index: 40; } </style> <script src="http://js.arcgis.com/3.6/"></script> <script> var map, dialog; require([ "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/renderers/SimpleRenderer", "dojo/query", "dojo/on", "dojo/dom" ], function( Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer, query, on, dom ) { map = new Map("mapDiv", { basemap: "streets", center: [-80.94, 33.646], zoom: 6, slider: false }); var states = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", { mode: FeatureLayer.MODE_SNAPSHOT, outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "AVE_FAM_SZ","SQMI","SUB_REGION", "STATE_NAME"] }); states.setDefinitionExpression("STATE_NAME = 'South Carolina'"); var symbol = new SimpleFillSymbol(); states.setRenderer(new SimpleRenderer(symbol)); map.addLayer(states); states.on("update-end", function(evt){ console.info(evt); dom.byId("featcount").innerHTML = " " + evt.target.graphics.length; }); //setup click event for buttons query("input").forEach(function(node){ on(node, "click", function (e) { var defExp = states.getDefinitionExpression(), defExp2 = "", defExp3 = ""; switch (e.srcElement.value) { case "East Coast": defExp = "SUB_REGION LIKE '% Atlantic' AND STATE_NAME IN( 'New York', 'New Jersey', 'Delaware')"; break; case "East North Central": defExp = "SUB_REGION='East North Central'"; break; case "Pacific": defExp ="SUB_REGION='Pacific'"; break; case "Clear": defExp = ""; break; case "SQMI": defExp2 = "SQMI>20000"; break; case "AVE_FAM_SZ": defExp2 = "AVE_FAM_SZ<3"; break; case "PopMil": defExp2 = "POP2007>1000000"; break; case "All": defExp3 = "1=1"; break; } //var fDefExpr = (defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""); defArr = []; if(defExp !== ""){ defArr.push(defExp); } if(defExp2 !== ""){ defArr.push(defExp2); } if(defExp3 !== ""){ defArr.push(defExp3); } states.setDefinitionExpression(defArr.join(" AND ")); }); }); }); </script> </head> <body class="tundra"> <div id="mapDiv"> <div id="buttons"> <input type="button" value="East Coast"/> <input type="button" value = "East North Central"/> <input type="button" value = "Pacific"/> <input type="button" value="SQMI"/> <input type="button" value="AVE_FAM_SZ"/> <input type="button" value="PopMil"/> <input type="button" value="Clear"/> <span id="featcount"> ???</span> </div> </div> </body> </html>
Robert,
I almost have this working. I am using this code in a WAB widget.
I cannot get .evt.target.graphics.length to work. I cannot find a way to define evt target and length
Can you provide any insight on this.
Thank you
If I may give a stab at it, are you trying to key off of evt after attaching to the "update-end" event on your feature layer? evt should defined from the event at the end of the layer update - can you post your code?
Chris,
var graphics = graphics; on("update-end", function (evt) { //console.info(evt); dom.byId("featcount").innerHTML = " " + graphics.length; }); //setup click event for buttons query("select").forEach(function (node) { on(node, "click", function (e) { var target = e.target || e.srcElement; switch (target.value) { case "0": defExp = "crime ='Larceny/Theft'"; break; case "1": defExp = "crime ='Vehicle Theft'"; break; case "2": defExp = "crime ='Assult'"; break; case "6": defExp = "crime ='Other'"; break; case "7": defExp = "crime ='DUII'"; break; case "8": defExp = "crime ='Fraud'"; break; case "9": defExp = "crime ='Burglary'"; break; case "Clear": defExp = ""; break; case "3": defExp2 = "Month='August'"; break; case "4": defExp2 = "Month='July'"; break; case "5":g defExp2 = "Month='December'"; break; case "Clear2": defExp2 = ""; break; case "10": defExp3 = "Time_1 >= '18:00' AND Time_1 <= '06:00'"; break; case "11": defExp3 = "Time_1 >= '07:00' AND Time_1 <= '09:00' OR Time_1 >= '17:00' AND Time_1 <= '19:00'"; break; case "12": defExp3 = "Time_1 >= '06:00' AND Time_1 <= '20:00'"; break; case "13": defExp3 = "Time_1 >= '21:00' AND Time_1 <= '02:00'"; break; case "Clear3": defExp3 = ""; break; } var defArr = []; if (defExp !== "") { defArr.push(defExp); } if (defExp2 !== "") { defArr.push(defExp2); } if (defExp3 !== "") { defArr.push(defExp3); } lLayer.setDefinitionExpression(defArr.join(" AND ")); }); });
Does it work if you try it like this?
yourFeatureLayer.on("update-end", function (evt) { console.info(evt); dom.byId("featcount").innerHTML = " " + evt.target.graphics.length; });
Make sure you're keying off of your feature layer. If it's still not working, I would double-check your feature layer is in scope, and you're using the right layer. If you get inside the event function, you can inspect evt by using dev tools to look at the properties and methods (in case you haven't done this before):