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 id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
<div id="mapDiv" >
<div id="navDiv">
<button id="btnZoomBack" data-dojo-type="dijit/form/Button" data-dojo-props="label:'Previous Map View', iconClass:'zoomprevIcon',showLabel:false" type="button"></button>
<button id="btnZoomForward" data-dojo-type="dijit/form/Button" data-dojo-props="label:'Next Map View', iconClass:'zoomnextIcon', showLabel:false" type="button"></button>
</div>
<img id="loadingImg" src="images/loading.gif" alt="Loading image" style="position:absolute; left:350px; top:250px; z-index:100;" />
<div id="HomeButton"></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 id="reportContainer" data-dojo-type="dijit/layout/ContentPane" > </div>
</div>
</div>
</div>
