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.

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

Outcomes