Why don't my navigation tools work once I place them directly on my map?

TracySchloss — Fri, 03 Oct 2014 19:38:23 GMT

I just want to use a few of the Navigation tools, Zoom Previous and Zoom Next. I had this originally placed in my right side pane. Where I really want them in tucked up into the upper right corner of my map. I added a div to my map, placed the buttons there and changed my entries in CSS to an absolute position to stay where I want them.

Every thing looks fine, until I add the click listener to the buttons. Then not only does the display go wonky (side panel disappearing is the most obvious) but I'm also getting a registry.byId error on the id of my buttons.

Here's the relevant code:

	map = new Map("mapDiv", {
	basemap: "topo",
	center: [-92.1, 38.5],
	infoWindow:popup,
	zoom: 7
	});

	navToolBar = new Navigation(map);
	navToolBar.on("extent-history-change",extentHistoryChangeHandler);

//FUNCTIONS FOR NEXT, PREVIOUS AND HOME EXTENT BUTTONS

function extentHistoryChangeHandler() {

registry.byId("btnZoomBack").disabled = navToolBar.isFirstExtent();

registry.byId("btnZoomForward").disabled = navToolBar.isLastExtent();

}

//event listeners

registry.byId("btnZoomBack").on("click", function(){

navToolBar.zoomToPrevExtent();

});

registry.byId("btnZoomForward").on("click",function(){

navToolBar.zoomToNextExtent();

});

CSS:

#navDiv {

display:block;

position: absolute;

top: 12px;

right: 12px;

z-index: 999;

opacity: 0.4;

}

#navDiv:hover {

opacity:1.0;

}

.navButton {

height:12px;

font-size:3px;

font-family: Arial, Helvetica, sans-serif;

}

.zoomprevIcon {

background-image:url(../images/nav_back.png);

width:32px;

height:32px;

font-size:8px;

}

.zoomnextIcon {

background-image:url(../images/nav_next.png);

width:32px;

height:32px;

font-size:8px;

}

HTML

</div>

<div id="floater_report" data-dojo-type="dojox/layout/FloatingPane"

data-dojo-props= "title:'Search Results', dockTo:'dock_report', closable:false, resizable:true, dockable:true"

style="visibility:hidden;" >

</div>

Re: Why don't my navigation tools work once I place them directly on my map?

HungTruong — Fri, 03 Oct 2014 21:00:03 GMT

Tracy,

I think FloatingPane causes the issue. You add "dojox/layout/FloatingPane" in your require statement, it will work fine, as shown below:

require([..., "dojox/layout/FloatingPane"], function(...){

});

Hope this help.

Re: Why don't my navigation tools work once I place them directly on my map?

TracySchloss — Fri, 03 Oct 2014 21:05:48 GMT

Since everything else worked, it didn't occur to me to add this. It's fine now. Thanks so much!

topic Re: Why don't my navigation tools work once I place them directly on my map? in ArcGIS JavaScript Maps SDK Questions

Why don't my navigation tools work once I place them directly on my map?

Re: Why don't my navigation tools work once I place them directly on my map?

Re: Why don't my navigation tools work once I place them directly on my map?