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.

[Quynh_NhuMai]

Do you know why dijit.registry.byClass may cause a TypeError? I'm getting dijit.registry.byClass is not a function. dijit/registry is already a requirement..

[RobertScheitlin__GISP]

Note that for backwards compatibility, the dijit.registry global variable (as opposed to the dijit/registry module) includes array iterator methods (forEach, filter, byClass, map, every, and some). However, AMD code should not expect these functions to be available in the Object returned from require([“dijit/registry”]).

[Quynh_NhuMai]

Okay, yes...I just read that as well. I'm now confused by my options, but I'll probably open a new thread unless you have a quick tip.

[RobertScheitlin__GISP]

If you are searching for a dom element by class then you use "dojo/query"

[JamesB]

I got something along those lines working, thanks ...

But the answer to my question:
"Is there any property like navToolbar.navType or function like navToolbar.getNavType() I can use to find [what is currently active]?"
is no then?

[MarkHoover]

navToolbar._navType is what you're looking for.

The documentation should include either a list of accessible properties or getters and setters should be added to the API.  That is does not is often head-scratching.

[JamesB]

Thanks. Hmmm. Reckon it's cos they want to keep that as a private property? The underscore at the start can be a convention for that in some languages.

[DougCollins]

How about changing the cursor to help identify which mode you are in.  For example, change the cursor to a "crosshair" when in a Zoom mode.

Is this possible?  Has anyone tried to do this?

Thanks,
Charlie