I am trying to use two toggle buttons which have been added to a map to toggle layers on and off in my simple web application. I am having problems getting the toggle button to respond when clicked or checked.
This is what I have done so far. Added my button to the map and given it an id so I can grad it using dijit.byId
<body class="claro">
<div style="position:relative;width:100%;height:100%;">
<div id="map" style="border:1px solid #000;width:100%;height:100%;">
<div style="position:absolute; left:100px; top:10px; z-Index:999;">
<button id="imagery" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">Imagery</button>
<button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[1]);">Hydrology</button>
</div>
</div>
I then try listen for the onChange event with dojo.connect I put this in the init function that is called with dojo.addOnLoad(init);.
dojo.connect(dijit.byId('imagery'), 'onChange', layerVisibility(mapLayers[0]));
For some reason this does not run my function. I have tried replacing my function with an alert box to test it with no luck.
Here is an example of how I am using the code within a web application.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--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>FeatureLayer On Demand</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">djConfig = { parseOnLoad:true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
var mapLayers = []; //array of layers in client map
var map;
function init() {
var extent = new esri.geometry.Extent({"xmin":-96.6063,"ymin":38.3106,"xmax":-96.4764,
"ymax":38.3689,"spatialReference":{"wkid":4269}});
map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});
dojo.connect(map, "onLoad", initOperationalLayer);
var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(imagery);
mapLayers.push(imagery);
}
function initOperationalLayer(map) {
var content = "<b>Type</b>: ${ftype}" +
"<br /><b>Code</b>: ${fcode}";
var infoTemplate = new esri.InfoTemplate("Rivers", content);
var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.addLayer(featureLayer);
map.infoWindow.resize(150,105);
mapLayers.push(featureLayer); //this client side map layer is the maps graphics layer
dojo.connect(dijit.byId('imagery'), 'onChange', layerVisibility(mapLayers[0]));
}
function layerVisibility(layer) {
(layer.visible) ? layer.hide() : layer.show();
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div style="position:relative;width:100%;height:100%;">
<div id="map" style="border:1px solid #000;width:100%;height:100%;">
<div style="position:absolute; left:100px; top:10px; z-Index:999;">
<button id="imagery" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">Imagery</button>
<button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[1]);">Hydrology</button>
</div>
</div>
</div>
</body>
</html>
Where could I have gone wrong?
1 Answer 1
You're pretty close. The only reason it's not working is because you need to wrap your layerVisibility function call in an anonymous function.
When you type this:
dojo.connect(dijit.byId('imagery'), 'onChange', layerVisibility(mapLayers[0]));
..you're actually calling layerVisibility function immediately rather than having the function call triggered by the onChange event. Since layerVisibility doesn't return anything explicitly, it returns 'undefined', so your dojo.connect line is actually doing the same as this:
dojo.connect(dijit.byId('imagery'), 'onChange', undefined);
To defer your layerVisibility function call until the onChange event occurs, just change that line to:
dojo.connect(dijit.byId('imagery'), 'onChange', function() { layerVisibility(mapLayers[0]); });
Explore related questions
See similar questions with these tags.