Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Without using the clunky ArcGIS bookmark dijit, how do I create a drop down box of bookmarks from an ArcGIS Online webmap (or JSON) that zoom to the extents when clicked?

//FYI, JSON format
"bookmarks": [
      "extent": {
        "spatialReference": {"wkid": 102100},
        "xmax": -1.2251063434141435E7,
        "xmin": -1.2561092020865962E7,
        "ymax": 4977986.7113767695,
        "ymin": 4811659.737828305
      "name": "Utah County"
      "extent": {
        "spatialReference": {"wkid": 102100},
        "xmax": -1.2615515185004937E7,
        "xmin": -1.3235572358454255E7,
        "ymax": 4310538.580390846,
        "ymin": 3977884.633293776
      "name": "San Bernardino County"
share|improve this question
awesomo, Is this a public website? I'd love to see how it works. – user17362 Apr 19 '13 at 22:37
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. – PolyGeo Apr 19 '13 at 23:32

The tricky part was needing to reset the selectedIndex on each change event of the html SELECT element so that you can repeatedly hit the same bookmark and the map keeps going back to the extent. Apologize for the mixed dojo and jquery.

<!-- html for bookmark combo box, drop down box -->
<select id="comboboxBookmarks">
    <option value="-1" selected="selected">Bookmarks...</option>


//getting the webmap from the query string of URL
var urlObject = esri.urlToObject(document.location.href);
if (urlObject.query.webmap) {
else {

function setAGOLWebMap(webMapID) {
    esri.arcgis.utils.createMap(webMapID, "map", {
        mapOptions: {
            slider: true,
            logo: false,
            "fadeOnZoom": true,
            "force3DTransforms": true,
            "navigationMode": "css-transforms"
    }).then(function (response) {
        map =;

        //Populate Bookmarks
        bookMarks = response.itemInfo.itemData.bookmarks;
        dojo.forEach(response.itemInfo.itemData.bookmarks, function (bookmark, i) {
            $("#comboboxBookmarks").append($("<option>", {
                value: i,

        //attach to change event - setting the selectedIndex back to 0 each time lets you repeatedly hit the bookmark
        //e.g. hit bookmark, pan, zoom etc, hit it again. If you don't reset, the change event doesn't fire.
        $("#comboboxBookmarks").change(function () {
            if ($("#comboboxBookmarks").attr("value") > -1) {
                var bookmarkExtent = new esri.geometry.Extent(bookMarks[$("#comboboxBookmarks").attr("value")].extent);
            this.selectedIndex = 0;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.