This sample shows how you can use the navigation toolbar included with the ArcGIS JavaScript API to create pan, zoom, and other navigation buttons.
The toolbar is not a user interface component that you add to the map. Instead, it's a helper class that saves you the work of drawing zoom boxes, capturing mouse click coordinates, and so on. As a result, this sample contains very little code.
The buttons that you see are Dojo dijits. Each activates a different method on the toolbar. You can use whatever text or icons you want for the buttons; the important thing is that you call the correct method on each button. Here's the code for the Zoom Out button:
<div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>Some logic is still required to determine if the Previous and Next extent buttons should be available. This is included in the function extentHistoryChangedHandler:
dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();These lines ensure the Previous button is disabled if no previous extent is available (isFirstExtent = true), and the Next button is disabled if no next extent is available (isLastExtent = true).
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Navigation toolbar</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> @import "https://js.arcgis.com/3.46/dijit/themes/claro/claro.css"; .zoominIcon { background-image: url(images/nav_zoomin.png); width: 16px; height: 16px; } .zoomoutIcon { background-image: url(images/nav_zoomout.png); width: 16px; height: 16px; } .zoomfullextIcon { background-image: url(images/nav_fullextent.png); width: 16px; height: 16px; } .zoomprevIcon { background-image: url(images/nav_previous.png); width: 16px; height: 16px; } .zoomnextIcon { background-image: url(images/nav_next.png); width: 16px; height: 16px; } .panIcon { background-image: url(images/nav_pan.png); width: 16px; height: 16px; } .deactivateIcon { background-image: url(images/nav_decline.png); width: 16px; height: 16px; } </style> <script src="https://js.arcgis.com/3.46/"></script> <script> var map; require([ "esri/map", "esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dojo/domReady!" ], function (Map, Navigation, on, parser, registry) { parser.parse(); var navToolbar; map = new Map("map", { basemap: "satellite", center: [-56.953, 57.472], zoom: 3 }); navToolbar = new Navigation(map); on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); registry.byId("zoomin").on("click", function () { navToolbar.activate(Navigation.ZOOM_IN); }); registry.byId("zoomout").on("click", function () { navToolbar.activate(Navigation.ZOOM_OUT); }); registry.byId("zoomfullext").on("click", function () { navToolbar.zoomToFullExtent(); }); registry.byId("zoomprev").on("click", function () { navToolbar.zoomToPrevExtent(); }); registry.byId("zoomnext").on("click", function () { navToolbar.zoomToNextExtent(); }); registry.byId("pan").on("click", function () { navToolbar.activate(Navigation.PAN); }); registry.byId("deactivate").on("click", function () { navToolbar.deactivate(); }); function extentHistoryChangeHandler () { registry.byId("zoomprev").disabled = navToolbar.isFirstExtent(); registry.byId("zoomnext").disabled = navToolbar.isLastExtent(); } }); </script> </head> <body class="claro"> <div id="navToolbar" data-dojo-type="dijit/Toolbar"> <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div> <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div> <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div> <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div> <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div> <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div> </div> <div id="map" style="width:100%; height:512px;"></div> </body> </html>