Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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

Thanks for a problem and for the solution to greenlaw, it works fine. Does anybody know how to implement this code (toggle buttons) to app created with Web App Builder? There are a lot of linked js scripts and without knowledge of creating web apps I don't know where to implement this. It doesn't work in index.html. I'm up to create just a floor switcher buttons. Thanks in advance for any help!

share|improve this answer
    
this might be best to start a new question and link to this one if needed. – Midavalo Jan 25 at 17:26

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.