Tag Archives: Javascript

Replace Zoom In and Out Buttons for ArcGIS Javascript

Last year we finished a new product that integrates ESRI’s ArcGIS maps to Maximo. But unlike our flagship product, MapEngine, this new product can be run from outside of Maximo using any browser. We developed this so non-Maximo users such as managers would have access to the GIS and GIS-related Maximo data (like asset and work order physical locations).

One of the main requirements for this new product was a simpler, more modern interface. In implementing this we had to hide many of ArcGIS’s canned visual components and replace them with our own. We chose Twitter’s Bootstrap CSS library for its cross-browser compatibility and current styles. One ArcGIS component that needed to be replaced were the Zoom In and Zoom Out buttons. Here I am going to step you through the process of hiding the default buttons and replacing them with Bootstrap buttons.

First, we need to hide the default ArcGIS for Javascript buttons. To do this you can either set the slider to false when the map object is created:

var esriMap = new esri.Map("map", {
slider: false
}

Or hide the slider after the map object after creation:

esriMap.hideZoomSlider();

Now that the default Zoom Slider is hidden from the map, we can add our own. We’re using Bootstrap’s Toolbar and Button components but you can use any CSS library or your own for that matter. Our HTML and CSS look something like this:

HTML
Zoom In and Out HTML

CSS
Capture3

As the CSS shows, we chose to place our Zoom buttons in the bottom right corner. Our buttons look like this:

Zoom In and Out Buttons

Zoom In and Out Buttons

Once the buttons are added we need to add the event handlers that the buttons will use to Zoom In and Out. This took me a bit of time to figure out how to tell the map to Zoom In and Out, because ESRI chose to call the different Zooms “levels.” So we use the API’s setLevel function to zoom the map in and out one level at a time. Be sure this code is added after the map is created.

Zoom In and Out Event Handler

Once the setLevel functions are set using jQuery’s click event and an anonymous function, clicking the plus and minus buttons will zoom the map in and out one level at a time.

Stay tuned for further front-end tips of using ESRI’s ArcGIS for Javascript API.