AnsweredAssumed Answered

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

Question asked by schlot on Oct 3, 2014
Latest reply on Oct 3, 2014 by schlot

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>

Outcomes