I already asked how to toggle an identify button in a previous question, and was given the correct answer to the question, but when I tried to implement it into a toolbar that would disable the identify button when another button was pressed it didn't work. I guess I should have asked the question a little better. I am hoping that soneone will be able to help put the two pieces of code together. An example can be found at the following link and my code is below.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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>Identify with Popup</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css">

      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
        padding: 20px 20px;
    <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
    <script type="text/javascript">

      var map, navToolbar;
      var resizeTimer;
      var identifyTask, identifyParams, identifyListener;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-9270392,"ymin":5247043,"xmax":-9269914,"ymax":5247401,"spatialReference":{"wkid":102100}});

        //setup the popup window 
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));

        map = new esri.Map("map",{



        //Add the imagery layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");

        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer",{opacity:.55});

        navToolbar = new esri.toolbars.Navigation(map);
        //dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

      //Sets up the ability for the buttons to be toggled.
        function toggleButtonIcon(tool) {
        //this toggles the button highlight in the toolbar to show which tool is currently active
        //note - doesn't do the FullExtent since it's a button not a togglebutton

        //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
        dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
          if (togbtn == tool) {
            togbtn.attr("checked", true);
          else {
            togbtn.attr("checked", false);
      }  //end toggleButtonIcon

    //This section gives the ability for the identify button to be toggled.
      function activateIdentify(){
        if (dijit.byId("identify").checked) {
            identifyListener = dojo.connect(map, "onClick", executeIdentifyTask);
        else {

      function mapReady(map){

       //create identify tasks and setup parameters 
       identifyTask = new esri.tasks.IdentifyTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");

       identifyParams = new esri.tasks.IdentifyParameters();
       identifyParams.tolerance = 3;
       identifyParams.returnGeometry = true;
       identifyParams.layerIds = [2];
       identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
       identifyParams.width  = map.width;
       identifyParams.height = map.height;

      //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
      //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
        dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
          resizeTimer = setTimeout( function() {
          }, 500);

   function executeIdentifyTask(evt) {
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;

        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {    
          // response is an array of identify result objects    
          // Let's return an array of features.
          return dojo.map(response, function(result) {
            var feature = result.feature;
            feature.attributes.layerName = result.layerName;
            if(result.layerName === 'Tax Parcels'){
              var template = new esri.InfoTemplate("", "${Postal Address} <br/> Owner of record: ${First Owner Name}");
            else if (result.layerName === 'Building Footprints'){
              var template = new esri.InfoTemplate("", "Parcel ID: ${PARCELID}");
            return feature;

        // InfoWindow expects an array of features from each deferred
        // object that you pass. If the response from the task execution 
        // above is not an array of features, then you need to add a callback
        // like the one above to post-process the response and return an
        // array of features.
        map.infoWindow.setFeatures([ deferred ]);


  <body class="claro">

    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width: 100%; height: 100%; margin: 0;">
    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:58px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;">
      <div id="navToolbar" data-dojo-type="dijit.Toolbar">
        <div data-dojo-type="dijit.form.ToggleButton" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);toggleButtonIcon(this);}">Zoom In</div>
        <div data-dojo-type="dijit.form.ToggleButton" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);toggleButtonIcon(this);}">Zoom Out</div>
        <div dojoType="dijit.form.ToggleButton" id="identify" iconClass="dijitCheckBoxIcon" onClick="activateIdentify();toggleButtonIcon(this);" >Identify</div>
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;padding:0;">


Thanks to those that can help and thanks to those that helped with the previous question.



Ok, you are needing to add some additional logic to know what other buttons are activated and toggle on and off as needed. Something like this:

    function updateTool(theDijit) {
        var zoominDij, zoomoutDij, panDij, idDij, itemArray;
        zoominDij = dijit.byId("zoomin");
        zoomoutDij = dijit.byId("zoomout");
        panDij = dijit.byId("pan");
        idDij = dijit.byId("identify");
        itemArray = [zoominDij, zoomoutDij, panDij, idDij];
        if (theDijit.attr("id") != "identify")
        for (var i = 0; i < itemArray.length; i++) {
            if (theDijit.attr("id") == itemArray[i].attr("id")) {
                theDijit.attr("checked", true);
            } else {
                itemArray[i].attr("checked", false);

You will need a little work on your itemArray to have the right button IDs as well as inside where you set the trigger to disable the other functions.

Coupled with a call like this on your toolbar buttons:


Now this additional call will set a value of what button was clicked, will help you disconnect the function from one and allow you to set active to the other. This is what I use on my productions sites like here Washington State Sales Tax.

| improve this answer | |
  • Thank for your response D.E. I have tried your suggestions and I'm still having trouble getting this to work. I think this goal has reached my JavaScript knowledge threshold. I have two issues still, The Identify button doesn't "toggle" off when either of the other buttons are pushed, I receive an error (itemArray[i] is undefined) whenever a button is pushed. I have updated my sample at the link above to show what I have done. – Mike Long Jun 30 '11 at 15:30
  • 1
    Take a look at the code in the testpage here: http://webgis.dor.wa.gov/test.htm it is just a minor tweak to that UpdateTool method but it seems like it is working for what you are looking for. – D.E.Wright Jun 30 '11 at 18:11
  • Thanks D.E., I see that by not having the pan tool defined in the toolbar it must have been confusing the array. I appreciate your help. – Mike Long Jun 30 '11 at 18:22
  • If you add a new button and want it to switch just add it to the array and then it will just work. – D.E.Wright Jun 30 '11 at 18:37
  • D. E. Wright, Can you please re-activate this sample? webgis.dor.wa.gov/test.htm I would like to achieve the same goal of toggling the query and identify functions. Thank you! – phase Jan 19 '12 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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