topic Re: Variables Javascript in ArcGIS JavaScript Maps SDK Questions

Variables Javascript

RickeyFight — Sat, 11 Dec 2021 08:08:47 GMT

I am looking for a way to add two variables together into a string.

My two variables are

var defExp = "SUB_REGION='East North Central'";
var defExp2 = "STATE_NAME IN( 'New York', 'New Jersey', 'Delaware')";

I need them to stay separate until they are in:

states.setDefinitionExpression(defExp OR defExp2);

I know this works:

var  defExp = "SUB_REGION='East North Central' OR STATE_NAME IN( 'New York', 'New Jersey', 'Delaware')";
states.setDefinitionExpression(defExp);

But I need two separate variables.

Thank you

Re: Variables Javascript

LarryStout — Thu, 23 Apr 2015 21:55:11 GMT

Maybe I'm missing something, but wouldn't this work?

states.setDefinitionExpression(defExp + " and " + defExp2);

Re: Variables Javascript

RickeyFight — Thu, 23 Apr 2015 22:17:21 GMT

I have tried that but then it says defExp2 is not defined.

Re: Variables Javascript

LarryStout — Thu, 23 Apr 2015 22:21:51 GMT

Have you tried this?

var where = defExp + " and " + defExp2

states.setDefinitionExpression(where);

If you get the same error, then you may have a scoping problem (defExpr2 is out of scope).

Re: Variables Javascript

RickeyFight — Sat, 11 Dec 2021 08:08:50 GMT

What I am really trying to do is change this JSFiddle so that this works:

on(node, "click", function (e) {
      
                         switch (e.srcElement.value) {
                        case "EastCoast":
                             this.defExp = " SUB_REGION='East North Central' AND STATE_NAME IN( 'New York', 'New Jersey', 'Delaware')";
                             break;
                         case "ENCentral":
                             defExp =  "SUB_REGION='East North Central'";
                    
                             break;
                                    case "Pacific":
                             this.defExp2 ="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;
                 
                         }
                         states.setDefinitionExpression(defExp + " and " + defExp2);


                     });

Re: Variables Javascript

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:08:53 GMT

Rickey,

Here is your fiddle code now working the best I can determine you are wanting it to work like:

<!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"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, query, on
      ) {



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

         //setup click event for buttons
        query("input").forEach(function(node){
          on(node, "click", function (e) {
            var defExp = states.getDefinitionExpression(),
                defExp2 = "";
            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;
            }
            var fDefExpr = (defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : "");
            states.setDefinitionExpression(fDefExpr);
            });
        });
      });
    </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"/>
      </div>
    </div>
  </body>
</html>

Re: Variables Javascript

JakeSkinner — Sat, 11 Dec 2021 08:08:56 GMT

Hi Rickey,

I would suggest using check boxes. It seems you want to set a definition expression based on two expression. Ex:

<!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;
      var defExp, defExp2;
      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: 4,
          slider: false
        });
        
        var states = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["STATE_NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
        });
        states.setDefinitionExpression("STATE_NAME = 'South Carolina'");

        var symbol = new SimpleFillSymbol();
        states.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(states);
        
        on(dom.byId("EastCoast"), "click", function(){
          dom.byId("ENCentral").checked = false;
        })
        
        on(dom.byId("ENCentral"), "click", function(){
          dom.byId("EastCoast").checked = false;
        })
        
        on(dom.byId("SQMI"), "click", function(){
          dom.byId("AVE_FAM_SZ").checked = false;
          dom.byId("PopMil").checked = false;
        })
        
        on(dom.byId("AVE_FAM_SZ"), "click", function(){
          dom.byId("SQMI").checked = false;
          dom.byId("PopMil").checked = false;
        })
        
        on(dom.byId("PopMil"), "click", function(){
          dom.byId("SQMI").checked = false;
          dom.byId("AVE_FAM_SZ").checked = false;
        })

        on(dom.byId("execute"), "click", function(){
          query("input").forEach(function(node){
            if(node.id == "EastCoast"){
               if (dom.byId(node.id).checked){
                 defExp = "SUB_REGION='Middle Atlantic' AND STATE_NAME IN( 'New York', 'New Jersey', 'Delaware')";
               }
            }
            else if(node.id == "ENCentral"){
               if (dom.byId(node.id).checked){
                 defExp = "SUB_REGION='East North Central'";
               }
            }
            else if(node.id == "SQMI" && dom.byId(node.id).checked){
                defExp2 = "SQMI>20000";                                           
            }  
            else if(node.id == "AVE_FAM_SZ" && dom.byId(node.id).checked){
                defExp2 = "AVE_FAM_SZ<3";                                           
            } 
            else if(node.id == "PopMil" && dom.byId(node.id).checked){
                defExp2 = "POP2007>1000000";                                           
            }          
          })
          console.log(defExp + " AND " + defExp2);
          states.setDefinitionExpression(defExp + " AND " + defExp2); 
        })

      });
    </script>
  </head>
  <body class="tundra">
    <div id="mapDiv">
      <div id="buttons">
        <input type="checkbox" id="EastCoast"/>East Coast 
        <input type="checkbox" id="ENCentral"/>EN Central<br>
        <input type="checkbox" id="SQMI"/>SQMI
        <input type="checkbox" id="AVE_FAM_SZ"/>Average Family Size
        <input type="checkbox" id="PopMil"/>Population<br>
        <input type="button" value="Execute" id="execute"/>
      </div>
    </div>
  </body>
</html>

Re: Variables Javascript

RickeyFight — Fri, 24 Apr 2015 16:41:31 GMT

Robert Scheitlin, GISP

I believe this will work. I am going to make the buttons drop lists that way two can be selected at once.

Re: Variables Javascript

RobertScheitlin__GISP — Fri, 24 Apr 2015 16:54:06 GMT

Rickey,

The way that I reworked your code you can select two as well. One from defExp and one from defExp2.

Re: Variables Javascript

RickeyFight — Thu, 28 May 2015 15:49:47 GMT

I cannot mark one as correct, they both were helpful!

How would I add to the script to show the number of states visible?

Re: Variables Javascript

RickeyFight — Thu, 28 May 2015 20:16:21 GMT

Robert,

How would I add a 3rd select-able option?

Re: Variables Javascript

RobertScheitlin__GISP — Fri, 29 May 2015 15:59:50 GMT

Rickey,

Can you give me some more information? Currently the sample uses two options that can be used together or independently.

Re: Variables Javascript

RickeyFight — Sat, 11 Dec 2021 08:08:59 GMT

Robert,

Right now my code:

   //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": 
                defExp2 = "Time_1 >= '1:00' AND Time_1 <= '5:00'";
                                
                break;
              case "Clear2": 
                defExp2 = ""; 
                break;
            } 
            var fDefExpr = (defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""); 
            lLayer.setDefinitionExpression(fDefExpr); 
                         console.log((defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""));
            });

I have two drop downs that can be chosen from. I am looking for three options that can be used together or independently. Basically adding a defExp3

Thank you!

Re: Variables Javascript

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:09:01 GMT

Rickey,

OK use this then:

            defArr = [];
            if(defExp !== ""){
              defArr.push(defExp);
            }
            if(defExp2 !== ""){
              defArr.push(defExp2);
            }
            if(defExp3 !== ""){
              defArr.push(defExp3);
            }
            states.setDefinitionExpression(defArr.join(" AND "));

Re: Variables Javascript

RickeyFight — Thu, 04 Jun 2015 19:18:19 GMT

Robert,

This is perfect because I can easily add more! I now have 4.

One issue I am having is that each drop down has to be "touched" for the filters to start working.

Here is a demo of my problem. demo3

Re: Variables Javascript

RobertScheitlin__GISP — Thu, 04 Jun 2015 20:03:20 GMT

Rickey,

Your code is only setting the layer definition using the on click of the selects. You need to setup the initial values of the defExp, defExp2, defExp3, defExp4 in your widget and then apply those in your startup.