Monthly Archives: March 2015

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!