In Navagation toolbar, can you highlight what mode you are in?

JamesB

http://help.arcgis.com/EN/webapi/javascript/arcgis/demos/toolbar/toolbar_navigation.html

So you can be in one of 3 navigation modes, zoom in, zoom out and pan - you can see this in the API
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/navigation.htm

However, I think it's essential to highlight to the user which mode you are in. If your in "Zoom In" mode there is nothing to indicate that, and I would like something to indicate to the user what will happen when they click.

Is there any property like navToolbar.navType or function like navToolbar.getNavType() I can use to find this out?

I suppose could do something like:

    <div id="navToolbar" >
      <div id="zoomin" onClick="HIGHLIGHT ME; navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div id="zoomout" onClick="HIGHLIGHT ME;  navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
....
      <div id="deactivate" onClick="UNHIGHLIGHT OTHERS; navToolbar.deactivate()">Deactivate</div>
    </div>

But would be curious to know for completeness sake.

AxelSchaefer

Hi.

An example using Dojo ToggleButtons.

[HTML]<div id="navToolbar">
  <div dojotype="dijit.form.ToggleButton" id="zoomin" iconclass="dijitCheckBoxIcon"
                        onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);toggleButtonIcon(this);">
                        Zoom In</div>
  <br />
  <div dojotype="dijit.form.ToggleButton" id="zoomout" iconclass="dijitCheckBoxIcon"
                        onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);toggleButtonIcon(this);">
                        Zoom Out</div>
  <br />
  <div dojotype="dijit.form.Button" id="zoomfullext" iconclass="zoomfullextIcon" onclick="navToolbar.zoomToFullExtent();">
                        Full Extent</div>
  <br />
  <div dojotype="dijit.form.Button" id="zoomprev" iconclass="zoomprevIcon" onclick="navToolbar.zoomToPrevExtent();">
                        Previous Extent</div>
  <br />
  <div dojotype="dijit.form.Button" id="zoomnext" iconclass="zoomnextIcon" onclick="navToolbar.zoomToNextExtent();">
                        Next Extent</div>
  <br />
  <div dojotype="dijit.form.ToggleButton" id="pan" iconclass="dijitCheckBoxIcon" onclick="resetMapDisplay();toggleButtonIcon(this);">
                        Pan</div>
</div>[/HTML]

//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
function toggleButtonIcon(tool) {
    //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);
        }
    });
}

Any other ToggleButton (like Measure distance/area) calls the "tootleButtonIcon" method. Any commom Button (like Previous/Next Extend, Find, etc) doesn't change the state of the navigation toolbar.

HTH.