Variables Javascript

RickeyFight · ‎04-23-2015

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

RickeyFight · ‎05-29-2015

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!

RobertScheitlin__GISP · ‎05-29-2015

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

RickeyFight · ‎06-04-2015

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

RobertScheitlin__GISP · ‎06-04-2015

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.

JakeSkinner · ‎04-24-2015

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>

RickeyFight · ‎05-28-2015

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

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