topic Re: Number of Features in ArcGIS JavaScript Maps SDK Questions

Number of Features

RickeyFight — Thu, 28 May 2015 17:02:28 GMT

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.

Re: Number of Features

RobertScheitlin__GISP — Fri, 29 May 2015 16:10:38 GMT

Rickey,

Would it be the number in the current map extent or the number that meet the current criteria?

Re: Number of Features

RickeyFight — Fri, 29 May 2015 16:19:49 GMT

Robert,

Number that meet the current criteria.

Re: Number of Features

RobertScheitlin__GISP — Fri, 29 May 2015 16:44:19 GMT

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.

Re: Number of Features

RickeyFight — Fri, 29 May 2015 16:47:30 GMT

Robert,

Yes it is a feature layer with setDefinitionExpression.

Thank you

Re: Number of Features

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:03:03 GMT

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>

Re: Number of Features

RickeyFight — Mon, 01 Jun 2015 18:37:40 GMT

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

Re: Number of Features

ChrisSmith7 — Mon, 01 Jun 2015 19:02:21 GMT

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?

Re: Number of Features

RickeyFight — Sun, 12 Dec 2021 07:03:06 GMT

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 "));


             });




         });

Re: Number of Features

ChrisSmith7 — Sun, 12 Dec 2021 07:03:09 GMT

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)

Re: Number of Features

RickeyFight — Mon, 01 Jun 2015 19:22:08 GMT

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

Re: Number of Features

ChrisSmith7 — Mon, 01 Jun 2015 19:24:01 GMT

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.

Re: Number of Features

RickeyFight — Sun, 12 Dec 2021 07:03:12 GMT

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 "));

Re: Number of Features

ChrisSmith7 — Mon, 01 Jun 2015 19:33:54 GMT

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.

Re: Number of Features

RickeyFight — Sun, 12 Dec 2021 07:03:15 GMT

Okay I got it!

I moved:

   var target = e.target || e.srcElement;
              lLayer.on("update-end", function (evt) {  
          console.info(evt);   
          dom.byId("featcount").innerHTML = " " + evt.target.graphics.length;

inside :

on(node, "click", function (e) {

Thank you Robert and Chris for your help!