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>