Issues with Navigation.

[SanajyJadhav]

Hi all,

I am seeing strange and tough to sort issues with my Navigation toolbar.When I pan, map pans as well as Zoom in/out box is drawn on the map.Subsequently, map is zoomed in along with Pan tool. Or vice-versa, i.e. When I zoom in, I can zoom in but map is panned without any control.

To fix this, I hooked to following events .

    dojo.connect(map, "onMouseDragStart", DisableNav);
     dojo.connect(map, "onMouseDragEnd", EnableNav);

function DisableNav()
{     
    //navToolbar.deactivate();
    //map.disableMapNavigation();
    map.disableRubberBandZoom();
}

function EnableNav()
{
     //navToolbar.activate("esri.toolbars.Navigation.PAN");
     //map.enableMapNavigation()
     map.enableRubberBandZoom();
}

But nothing is helping me. If I call navToolbar.deactivate() in "DisableNav", toolbar remains deactivated forever.It cannot be activated.

I tried following in map's onload event.

//map.disableRubberBandZoom();
    //map.disablePan();
    map.disableMapNavigation();

But no use. Still, navigation is enabled on the map.

My html code for navigation toolbar is as below.
[HTML]
<div dojoType="dijit.Dialog" id="dFloatingPane" title="Navigation Tools">
                    <div style="overflow: auto;" id="navToolbar" data-dojo-type="dijit.Toolbar">
                        <table cellpadding="0" cellspacing="0" style="width:200px;height:30px">
                            <tr valign=top>
                                <td>
                                   <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}"  style="width:28px;height:28px">
                                       <img alt="" src="<%=request.getContextPath()%>/Images/Tools/Previous.png">
                                    </div>
                                </td>
                                <td>
                                       <div data-dojo-type="dijit.form.Button" id="zoomnext"  data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}"
                                           style="width: 33px; height: 24px; border:black solid 0px; background-image:url(<%=request.getContextPath()%>/Images/toolsBGmain.png); background-repeat:no-repeat;">
                                           <img alt="" src="<%=request.getContextPath()%>/Images/Tools/next.png">
                                    </div>
                                </td>
                                <td>
                                      <div data-dojo-type="dijit.form.Button" id="pan"  data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}" style="width:28px;height:28px">
                                          <img alt="" src="<%=request.getContextPath()%>/Images/Tools/pan.png">
                                    </div>
                                </td>
                                <td>
                                <div data-dojo-type="dijit.form.Button"   data-dojo-props="onClick:function(){navToolbar.zoomToFullExtent();}"  id="zoomfullext"  style="width:28px;height:28px">
                                    <img alt="" src="<%=request.getContextPath()%>/Images/Tools/FullExtent.png">
                                </div>
                                </td>
                                <td>
                                    <div data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}" id="zoomin" style="width:28px;height:28px">
                                        <img alt="" src="<%=request.getContextPath()%>/Images/Tools/zoomin.png">
                                    </div>
                                </td>
                                <td>
                                    <div data-dojo-type="dijit.form.Button"  data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}" id="zoomout"  style="width:28px;height:28px">
                                        <img alt="" src="<%=request.getContextPath()%>/Images/Tools/zoomout.png">
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
[/HTML]

I am really finding tough to fix this issue.So any help is appreciated.

Thanks in advance,
Sanjay.

[KenDoman]

Quick question. Are you also using the sample code for the loading icon/loading text? (Loading Icon, Loading Text)?
They disable map navigation when the loading icon runs, but then enable it right afterward. If you're using the zoom in/zoom out tool, which normally disables panning, this overrides the zoom in/zoom out disabling of pan, therefore you pan and zoom at the same time.

Look at what else runs map.enableMapNavigation(). See if removing the map.disableMapNavigation() and map.enableMapNavigation() in those other areas would help.

[SanajyJadhav]

Thanks for getting back to me.

Answer to your question is yes, I am using loading icon.However, I try to zoom/pan only after icons stops displaying.

I have checked my code ( of course I am gonna look at it again thoroughly) and have not found any place where navigation enabled, so what could be the issue?

Thanks once again for your time.
Sanjay.

[SanajyJadhav]

Thanks Raymond for putting me in right direction.

I could not fix the issue completely.But, now if I zoom in, then Pan does not interfere and so on.At least that part is fixed. However when I click on Pan, API's inbuilt keyboard navigation does not work.I have to click on Zoom in tool again.I would look into it later on.

To fix this, I commented 2 lines in ShowLoading and HideLoading that disable and enable map navigation.

Thanks for your help.I appreciate it.

Sanjay.