Variables Javascript

4443
15
Jump to solution
04-23-2015 02:45 PM
RickeyFight
MVP Regular Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

15 Replies
LarryStout
Occasional Contributor III

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

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

RickeyFight
MVP Regular Contributor

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

0 Kudos
LarryStout
Occasional Contributor III

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

0 Kudos
RickeyFight
MVP Regular Contributor

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


                     });
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rickey,

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

0 Kudos
RickeyFight
MVP Regular Contributor

Robert,

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rickey,

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

0 Kudos