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.
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>
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.
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.
Yes it is a feature layer with setDefinitionExpression.
Thank you
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.
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):
Inspect running JavaScript with the Debugger (Windows)
I tried that (that is what Robert has above)
My error is:
TypeError: Cannot read property 'on' of undefined
I removed yourFeatureLayer and that error goes away.
and i get this error:
Cannot read property 'graphics' of undefined
I did pull it from Robert's example - it should work. Did you replace "yourFeatureLayer" with the one you're using, and it's defined/in scope? You should pull it right from "evt", the graphics, that is - I see you're defining graphics to itself above, however - I would need to see more code to see what you're doing here.
The reason I am defining it to itself is because I was testing out options to define graphics.
My code:
lLayer.on("update-end", function (evt) { console.info(evt); dom.byId("featcount").innerHTML = " " + evt.target.graphics.length; });
I get this error
lLayer is the same as layer def as I use here:
lLayer.setDefinitionExpression(defArr.join(" AND "));
Ok, cool - so it looks like ILayer is good from what I can see... it just doesn't know what "on" is referring to. Can you share how you're constructing your main map page? Are you doing it in the main require, or in a module? I'm sorry - I haven't used the webapp builder... I'm not sure how it constructs this for you.
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
