topic Re: In Navagation toolbar, can you highlight what mode you are in? in ArcGIS JavaScript Maps SDK Questions

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

JamesB — Sun, 12 Dec 2021 07:51:53 GMT

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.

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

AxelSchaefer — Sun, 12 Dec 2021 07:51:56 GMT

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.

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

JamesB — Wed, 24 Nov 2010 07:38:00 GMT

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?

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

MarkHoover — Wed, 24 Nov 2010 15:32:32 GMT

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.

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

JamesB — Thu, 25 Nov 2010 07:43:14 GMT

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.

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

DougCollins — Thu, 02 Dec 2010 13:31:30 GMT

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

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

timgogl — Thu, 02 Dec 2010 15:53:05 GMT

you can do it with css. you would need to look up how which ever javascript framework your using handles changing css, but here is a list of cursor options:
http://blogs.techrepublic.com.com/programming-and-development/?p=401

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

Quynh_NhuMai — Wed, 01 Feb 2017 21:05:51 GMT

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..

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

RobertScheitlin__GISP — Wed, 01 Feb 2017 21:22:32 GMT

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”]).

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

Quynh_NhuMai — Wed, 01 Feb 2017 21:41:47 GMT

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.

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

RobertScheitlin__GISP — Wed, 01 Feb 2017 22:05:31 GMT

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