6

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?

Improve this question

1 Answer 1

Reset to default
5

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]); });
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.