¿Cómo puedo crear un menú desplegable del cuadro combinado o cuadro de marcadores de ArcGIS Online webmap?

Question

Sin usar el torpe de ArcGIS marcador dijit, ¿cómo puedo crear un cuadro de lista desplegable de marcadores de ArcGIS Online webmap (o JSON) que el zoom a la extensión cuando se hace clic?

//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"
    }
]

Answer 1

La parte difícil fue la necesidad de reiniciar el selectedIndex en cada evento de cambio del elemento html SELECT de modo que usted puede golpeó repetidas veces el mismo marcador y el mapa sigue yendo de vuelta a la medida. Disculpas por la mezcla de dojo y jquery.

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

dojo.require("esri.arcgis.utils");

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

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 = response.map;

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

        //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);
                map.setExtent(bookmarkExtent);
            }
            this.selectedIndex = 0;
        });
    });
}