Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>

Any suggestions of where I have gone wrong would be welcome.

share|improve this question
add comment

1 Answer 1

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]); });
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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