AnsweredAssumed Answered

using a toggle button to turn a layer off and on

Question asked by raean on Apr 27, 2012
Latest reply on Apr 30, 2012 by raean
Hi I am new to this dojo stuff and I have been trying to use a toggle button to switch a layer off and on.
but I am having great difficulty in getting the toggle button to trigger any event. I spent several days of getting not very far.

I have created a button and give it an id so I can hook into it using the dijit.byId method.
 <button id="imagery" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">Imagery</button>

I then put the dojo.connect listner in the init function.
dojo.connect(dijit.byId('imagery'), 'onChange', layerVisibility(mapLayers[0]));

Although when I do this the layer never loads and the button never works.

Here is an example of how I am using it within a web page it is using some esri sample map services.

    <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="">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    <script type="text/javascript">djConfig = { parseOnLoad:true };</script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">

      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,
        map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});
        dojo.connect(map, "onLoad", initOperationalLayer);

        var imagery = new esri.layers.ArcGISTiledMapServiceLayer("");
      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("",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        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() :;

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

I have also tried declearing a dojo/method when setting  up the toggle button as well but this did not work although I think this might be an old way of doing things.
As well as specifying a function with the toggle button delcaration in a fit of desperation. e.g.
 <button id="imagery" data-dojo-type="dijit.form.ToggleButton" onChange="layerVisibility(mapLayers[0]);" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">Imagery</button>

I susspect I need to maybe grab the map div first using dijit.byId('map') and then grab the toggle button by it's id since the toggle button is within the map div.


Andy Rae