dojox/mobile/switch turns layer on but not off

RachelAlbritton · ‎06-23-2016

I'm trying to use the dojox/mobile/switch module to turn layers on and off. The layers showing and hiding are tied to a "stateChanged." The switch is off to start with, and turns the layer on when its switched, but when I switch it back off the layer remains on and a console.log statement displays the layer still being turned on still. What am I missing?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Switch Test</title>

<!-- css references -->
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/themes/iphone/iphone.css" >
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">

 <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #sw {
            position: absolute;
            top: 17px;
            left: 60px;
            width: 5%;
            height: 10%;
            padding: 0 5px;
        }
        
 </style>

<!-- dojo/javascript links-->
<!--script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script-->
<script src="https://js.arcgis.com/3.16/"></script>

 <script>

  require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer","dojo/dom","dojo/ready", "dojox/mobile/Switch","dojo/domReady!"], 
 function(Map, ArcGISTiledMapServiceLayer, FeatureLayer,dom, ready, Switch){

 map = new Map("map", {
                basemap: "topo",
                center: [-111.841947,40.765530],
                zoom: 15
            });
            
    var basemap = new ArcGISTiledMapServiceLayer ("https://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer");
    map.addLayer(basemap);

    var foodFL = new FeatureLayer("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/1");
    map.addLayer(foodFL);
    foodFL.hide();

    var coffeeFL = new FeatureLayer ("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/0");
    map.addLayer(coffeeFL);
    coffeeFL.hide();
    
    var structuresFL = new FeatureLayer("https://fm-agstestdev.fm.utah.edu:6443/arcgis/rest/services/Rachel/CoffeFood/MapServer/2");
            map.addLayer(structuresFL); //layer has no symbology - no need to hide. There for search function
    
    ready(function(){
    var sw = new Switch({
    id:"sw", 
    value:"off",
    class:"mblSwSquareShape"
    });
    sw.placeAt(document.body); // e.g add the switch to body
    sw.startup();
    sw.on("stateChanged",function(newstate){
        if (newstate = "on"){
        foodFL.show();
        console.log("new state = "+newstate);}
        else 
        {
        foodFL.hide();
        alert("newState = "+newstate)}//reporting back as being "on"
    });
  });
});

</script>
<body>
<body class = "claro">
<div id="sw"></div>
<div id="map"></div>
    
</body>
</html>

RobertScheitlin__GISP · ‎06-23-2016

Rachel,

In JS when you are trying to evaluate if something is equal you use == or === for strict equal you are using a single = when is for variable assignment and not evaluation.

sw.on("stateChanged", function (newstate) {
            if (newstate === "on") {
              foodFL.show();
            } else {
              foodFL.hide();
            }  
          });

View solution in original post

RobertScheitlin__GISP · ‎06-23-2016

Rachel,

In JS when you are trying to evaluate if something is equal you use == or === for strict equal you are using a single = when is for variable assignment and not evaluation.

sw.on("stateChanged", function (newstate) {
            if (newstate === "on") {
              foodFL.show();
            } else {
              foodFL.hide();
            }  
          });

ReneRubalcava · ‎06-23-2016

On line 70, you have and assignment instead of a boolean check.

if (newstate = "on")

Should be

if (newstate === "on")

RobertWinterbottom · ‎06-23-2016

You have a problem with your if statement.

if (newstate = "on") { ...  } else { ... }

When you check if newstate="on", your actually assigning "on" to newstate and checking if the assignment was successful.

Just change it to if (newstate === "on") and you should be fine.