topic Re: using a toggle button to turn a layer off and on in ArcGIS JavaScript Maps SDK Questions

using a toggle button to turn a layer off and on

AndrewRae — Fri, 27 Apr 2012 09:07:05 GMT

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.

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

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.

Thanks

Andy Rae

Re: using a toggle button to turn a layer off and on

JMcNeil — Sat, 11 Dec 2021 12:03:03 GMT

Andrew,

If you comment out this line, then your imagery will show up:

dojo.connect(dijit.byId('imagery'), 'onChange', layerVisibility(mapLayers[0]));

Your ToggleButton code is off:

<button id="imagery" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true">Imagery</button>

If you want a ToggleButton with a checkbox inside it would be this:

<button data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitCheckBoxIcon",
      label:"Jay Toggle Imagery", checked:"true",
      onChange:function(checked){ layerVisibility(mapLayers[0]); }'></button>

If you want just a check box it would be this

<input type="checkbox" checked="true" onchange="layerVisibility(mapLayers[0]);"/>Jay Imagery CheckBox

And if you just want a button it would be this:

 <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[0]);">Imagery</button>

So your complete code will be:

<!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");
      dojo.require("dijit.form.ToggleButton");

      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 data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitCheckBoxIcon",
      label:"Jay Toggle Imagery", checked:"true",
      onChange:function(checked){ layerVisibility(mapLayers[0]); }'></button>
      
        <input type="checkbox" checked="true" onchange="layerVisibility(mapLayers[0]);"/>Jay Imagery CheckBox
        <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[0]);">Jay Imagery</button>
       <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[1]);">Hydrology</button>
        </div>
      </div>
    </div>
  </body>
</html>

If I answered your question please hit the check button next to my response and it should mark it as answered. This will give me a point and let others know that your question was answered so maybe it will help them answer the same or similar question.

Thanks Jay

Re: using a toggle button to turn a layer off and on

TomJacoby — Mon, 30 Apr 2012 16:44:42 GMT

If I am understanding your problem correctly, this would be one way to do it. I am not all that familiar with dojo, but this is what you could try using JQuery:

$("#imagery").change(function (evt) { layerVisibility(mapLayers[0]); });

Otherwise, I think you need to put layerVisibility(mapLayers[0]) in a function, so:

dojo.connect(dijit.byId('imagery'), 'onChange', function(evt) { layerVisibility(mapLayers[0]); });

Re: using a toggle button to turn a layer off and on

AndrewRae — Sat, 11 Dec 2021 12:03:06 GMT

Hi thanks for the answers Jay and Tom they both appear to answer my question.
After reading some of the dojo documentation I came up exactly with what Jay had by declearing the function with the button in the html.

  <button data-dojo-type="dijit.form.ToggleButton" data-dojo-props='
    iconClass:"dijitCheckBoxIcon", 
    label:"Imagery",
    checked:"true",
    onChange:function(checked){ layerVisibility(mapLayers[0]);}'>
  </button>

Thanks for your code as well Tom, it looks as if it would do the trick by listening for the event with dojo.connect. I have yet to try it though and is along the lines of the following tutorial.

http://dojotoolkit.org/documentation/tutorials/1.6/checkboxes/

I guess one advantage with this approach is that it would seprate out the Javascript from the HTML a little more which I like. I think it was the annoymous functions that tripped me up I really need to do some more reading about dojo.

Thanks once again

Andy Rae

Now where is that checkbox