Number of Features

3591
14
Jump to solution
05-28-2015 10:02 AM
RickeyFight
MVP Regular Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

14 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Rickey,

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

0 Kudos
RickeyFight
MVP Regular Contributor

Robert,

Number that meet the current criteria.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

RickeyFight
MVP Regular Contributor

Robert,

Yes it is a feature layer with setDefinitionExpression.

Thank you

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
RickeyFight
MVP Regular Contributor

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

0 Kudos
ChrisSmith7
Frequent Contributor

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?

RickeyFight
MVP Regular Contributor

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


             });




         });
0 Kudos
ChrisSmith7
Frequent Contributor

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)