Toolbars Made Easy with ArcGIS Server JavaScript API

Posted on August 27, 2009. Filed under: ArcGIS Server, ESRI, GeoSpatial Training Services |

As a GIS web application developer you want to focus on building functionality specific to the application you are constructing.  Spending valuable time and effort adding basic GIS functions such as zooming and panning to your application detract from what should be your primary focus.  Luckily, ESRI has made the addition of navigation and drawing toolbars to your application a snap with the ArcGIS Server JavaScript API.  In this post I’ll show you just how easy it is.

Let’s start by examining a navigation sample that ESRI has placed on their resource center website.  At first glance you’d think that the navigation toolbar is simply a user interface component that you drop into your application.  Not exactly.  The JavaScript API provides a toolbar helper class called esri.toolbars.Navigation to assist with accomplishing this task.  In addition, the API also provides a class to handle drawing tasks such as lines and polygons.  What these helper classes do is save you the work of drawing zoom boxes, capturing mouse clicks and other user initiated events.  This is no small feat as I’m sure any experienced GIS web developer can attest.

We’ll start with the construction of the user interface components of the toolbar and then we’ll move on to discussing how to hook the tools into your map.

Using Dijits To Create the Toolbar and Buttons
The toolbar you see in the example is created using the Toolbar and Button user interface controls provided by Dijit (a sub-project of Dojo). Each control is enclosed within a <div> tag inside the <body> of the web page with all buttons being enclosed by the surrounding <div> that contains the Toolbar dijit.

Each button can be assigned both an icon and text.  Notice in the figure above that the ‘Zoom Out’ Button assigns a value of ‘zoomoutIcon’ to the ‘iconClass’ attribute.  This simply points to a CSS style that has been defined at the top of the file.  Notice in the figure below that we have a style called ‘zoomoutIcon’ which defines an image to use for our button.

With a Button dijit you can also include text along with the icon.  For this button we include the text ‘Zoom Out’ inside the <div> tag that creates the button.

The resulting button with icon and text is seen below.

So, that about sums it up for the user interface portion of the toolbar.  Next we need to add in the code that creates an instance of esri.toolbars.Navigation and hook it into our map and toolbar.

Creating an instance of the Navigation class is as easy as calling the constructor and passing in a reference to as seen in the code example below.  However, you’ll first want to make sure that you add a reference to esri.toolbars.navigation.

Finally, we use dojo.connect to wire up an event to an event handler.  In this case we are connecting the ‘onExtentHistoryChange’ event to the ‘extentHistoryChangeHandler’ function will run when the extent history changes.

How it Works
Now I’ll draw your attention back to the <div> tags where we created our toolbar and buttons.  The Navigation class contains a number of constants and methods as seen below.

Each of the buttons that we defined within <div> tags has an ‘onClick’ attribute which refers to an event that fires when the button is clicked.  In the case of the ‘Zoom In’ button seen in the code example below, a click of the button calls the ‘activate’ method on Navigation.  A navigation type is passed into the ‘activate’ method.  The navigation type can be one of three constants: PAN, ZOOM_IN, ZOOM_OUT.  In each case these buttons are really tools that will require an additional map action by the user.  For example, in the case of ‘ZOOM_IN’ the user would then draw a rectangle on the map which would trigger the generation of a new map displayed to the user.

In addition to zooming in and out and panning the Navigation class also supports full extent, next extent, and previous extent functions as defined through their corresponding methods (zoomToFullExtent(), zoomToNextExtent(), zoomToPrevExtent()).  These methods are invoked through the ‘onClick’ event as seen below.

Hopefully this example has illustrated how easy it is to add a navigation toolbar to your ArcGIS Server application through the JavaScript API.  You no longer have to be concerned with adding in JavaScript code to draw and handle the extent rectangle or capture mouse coordinates for a pan operation.  In addition, the user interface components of the toolbar can be created easily through various user interface controls supplied by the Dijit library.  I didn’t cover the Drawing toolbar in this post, but the esri.toolbars.Draw class makes it equally easy to support the drawing of geometries such as points, lines, and polygons within a similar toolbar.

More Information
For more information on the ArcGIS Server JavaScript API you may wish to consider our “Mastering the ArcGIS Server JavaScript API” course which covers this topic among many others.  Our August 3rd – September 11th session is SOLD OUT.  However, our next session begins October 5th and ends November 13th.  Register before August 31st to save 15%.


Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: