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>