sanjayjadhav

Issues with Navigation.

Discussion created by sanjayjadhav on Oct 14, 2011
Latest reply on Oct 15, 2011 by sanjayjadhav
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.

Outcomes