Author Archives: Breck LeSueur

Managing Bookmarks and Setting Extents with ArcGIS for Javascript

One of the primary features we developed into ActiveG Jayu was the ability to bookmark specific extents on the map. For those new to GIS terminology, an extent is a bounding rectangle defined by coordinate pairs, or in the case of Jayu, what you see in the browser’s viewport. With this feature, the user can bookmark an unlimited number of locations (extents) and select them whenever they’d like to return to that place on the map.

In Jayu we use Bootstrap’s btn-toolbar, btn-group, and dropdown-menu classes to create a menu with a “New Bookmark” menu item.

Jayu menu

When the user clicks “New Bookmark” we run a Javascript function that shows a Bootstrap modal window we have setup for adding the new bookmark’s name.

Capture

See Bootstrap Modals for further documentation.

After the user enters the Bookmark name (we’ll call it “Downtown”) and clicks Save, we use the ArcGIS map object’s extent property and xmin, xman, ymin, ymax to save each of the coordinates to an array.

var extent = new Array();
extent['xmin'] = esriMap.extent.xmin;
extent['xmax'] = esriMap.extent.xmax;
extent['ymin'] = esriMap.extent.ymin;
extent['ymax'] = esriMap.extent.ymax;

Next this extent array and the Bookmark name are then stored in our back end database for later retrieval. In the Javascript Save function we also add the Bookmark to the Bootstrap drop-down menu using a <ul> tag, so the user can navigate to it later.

Untitled

Once the Bookmark is saved to the database and added to the menu, the user can open the menu and click the Bookmark. Clicking the Bookmark triggers a Javascript function which retrieves the Bookmark’s data (xMin, xMax, yMin, yMax) from the database and uses ArcGIS’s geometry.Extent class to set the new extent.

var spatialReference = esriMap.spatialReference;
var extent = new esri.geometry.Extent(xMin, yMin, xMax, yMax, sr);

esriMap.setExtent(extent, true);

This code will set a new extent for the map, and viola, move the user to the saved location!

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.