+ Reply to Thread
Results 1 to 4 of 4

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

  1. #1
    Andrew Rae
    Join Date
    Oct 2010
    Posts
    11
    Points
    1
    Answers Provided
    0


    0

    Question using a toggle button to turn a layer off and on

    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.
    Code:
     <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.
    Code:
    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.

    Code:
    <!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.
    Code:
     <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
    Last edited by raean; 04-27-2012 at 02:21 AM.

  2. #2
    J McNeil
    Join Date
    Apr 2010
    Posts
    180
    Points
    53
    Answers Provided
    10


    4

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

    Andrew,

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

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

    Your ToggleButton code is off:
    Code:
    <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:
    Code:
    <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

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

    And if you just want a button it would be this:
    Code:
     <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[0]);">Imagery</button>


    So your complete code will be:

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

  3. #3
    Tom Jacoby
    Join Date
    Apr 2012
    Posts
    12
    Points
    9
    Answers Provided
    1


    1

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

    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:

    Code:
    $("#imagery").change(function (evt) { layerVisibility(mapLayers[0]); });
    Otherwise, I think you need to put layerVisibility(mapLayers[0]) in a function, so:

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

  4. #4
    Andrew Rae
    Join Date
    Oct 2010
    Posts
    11
    Points
    1
    Answers Provided
    0


    0

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

    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.

    Code:
    		<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....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
    Last edited by raean; 04-30-2012 at 06:54 PM.

+ Reply to Thread

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts