Esri GIS Bookmark but with out a dijit

Question

I need to create a "Bookmark" like drop down on my site.

Inspiration comes from samples:1) http://developers.arcgis.com/javascript/samples/widget_bookmarks_dropdownbutton/ and 2) https://developers.arcgis.com/javascript/jssamples/widget_bookmarks_dropdownbutton.html and 3) http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_bookmarks_editable (-minus the editing part).

I'm using bootstrap's drop down menu for the book marks so I can't use the bookmark digit directly BUT the sample I provide above does exactly what I need it to do. Basically I want to click my drop down menu, and select from a predetermined list (each entry contains a xmin,xmax,ymin and ymax) and have the map pan and zoom to fit the coords on the screen.

I cannot find any examples on how to do this without using a dijit. I can't really post code because I don't know where to start.

In my mind, I picture something along these lines:

function ZoomToRegion(RegionID){ // console.log('zoom to xy coords'); var wkid = 102100; if (RegionID == 1){ var xmin = '-8849573.386742238'; var ymin = '4366083.055648041'; var xmax = '-8448431.862301651'; var ymax = '4573380.276357428'; var regionname = 'Central '; } else if (RegionID == 2){ var xmin = '-9323482.962110244'; var ymin = '4350184.153764758'; var xmax = '-8922341.437669657'; var ymax = '4557481.374474147'; var regionname = 'Far Sourthwest'; } ... not not sure what to put here for the panning and zooming to fit }

and then my html code is:

<ul class='dropdown-menu'> <li onClick='ZoomToRegion(7);'><a href='#'>Default View</a></li> <li onClick='ZoomToRegion(1);'><a href='#'>Central</a></li> <li onClick='ZoomToRegion(6);'><a href='#'>Eastern</a></li> <li onClick='ZoomToRegion(2);'><a href='#'>Far Southwest</a></li> <li onClick='ZoomToRegion(3);'><a href='#'>Near Southwest</a></li> <li onClick='ZoomToRegion(4);'><a href='#'>Northern</a></li> <li onClick='ZoomToRegion(5);'><a href='#'>Northwest</a></li> </ul>

This seems like it should be pretty straight forward but wihtout a non-dijit example, I'm at a loss.

---

Here is what I ultimately went with:

<ul class='dropdown-menu'>
    <li onClick='ZoomToRegion(7);'><a href='#'>Default View</a></li>
    <li onClick='ZoomToRegion(1);'><a href='#'>Central</a></li>
    <li onClick='ZoomToRegion(6);'><a href='#'>Eastern</a></li>
    <li onClick='ZoomToRegion(2);'><a href='#'>Far Southwest</a></li>
    <li onClick='ZoomToRegion(3);'><a href='#'>Near Southwest</a></li>
    <li onClick='ZoomToRegion(4);'><a href='#'>Northern</a></li>
    <li onClick='ZoomToRegion(5);'><a href='#'>Northwest</a></li>
</ul>


function ZoomToRegion(RegionID){
//  console.log('zoom to xy coords');   
    var wkid = 102100;  
    if (RegionID == 1){
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -8849573.386742238,  
            "ymin": 4366083.055648041,
            "xmax": -8448431.862301651,
            "ymax": 4573380.276357428,
            "spatialReference": {
                "wkid": 102100
            }
        });
    }
    else if (RegionID == 2){
        //  Far Southwest
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -9323482.962110244,  
            "ymin": 4350184.153764758,
            "xmax": -8922341.437669657,
            "ymax": 4557481.374474147,
            "spatialReference": {
                "wkid": 102100
            }
        });     
    }
    else if (RegionID == 3){
        //  Near Sourthwest
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -8998166.969728548,  
            "ymin": 4356910.61225385,
            "xmax": -8597025.445287962,
            "ymax": 4564207.832963239,
            "spatialReference": {
                "wkid": 102100
            }
        });
    }
    else if (RegionID == 4){
        //  Northern
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -8803099.673544865,  
            "ymin": 4561150.351831801,
            "xmax": -8401958.149104279,
            "ymax": 4768447.572541188,
            "spatialReference": {
                "wkid": 102100
            }
        });     
    }
    else if (RegionID == 5){
        //  Northwestern
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -8988994.526334316,  
            "ymin": 4450163.786761777,
            "xmax": -8186711.4774533175,
            "ymax": 4864758.228180463,
            "spatialReference": {
                "wkid": 102100
            }
        });     
    }
    else if (RegionID == 6){
        //  Eastern
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -8700368.307529585,  
            "ymin": 4374644.002815981,
            "xmax": -8299226.783088999,
            "ymax": 4581941.223525369,
            "spatialReference": {
                "wkid": 102100
            }
        });     
    }
    else if (RegionID == 7) {
        var defaultExtent = new esri.geometry.Extent({
            "xmin": -9274930.161743507,  
            "ymin": 4318875.546979173,
            "xmax": -8303140.358937347,
            "ymax": 4793763.5163091915,
            "spatialReference": {
                "wkid": 102100
            }
        });
    }
    cppr.App.map.setExtent(defaultExtent.getExtent(),true);
}

Answer 1

The "map.setExtent()" method should work in this case. This method will take your coords and center the map over them.

else if (RegionID == 2){
    var xmin = '-9323482.962110244';
    var ymin = '4350184.153764758';
    var xmax = '-8922341.437669657';
    var ymax = '4557481.374474147';
    var regionname = 'Far Sourthwest';
    map.setExtent(xmin, ymin, xmax, ymax);
}

Here is a link to the API for the extent method.

Answer 2

If regions will change somewhat frequently, another alternative when using dropdown menus is to have an HREF link launch a Query. The example below is how I use query bookmarks:

dropdown bookmark link - <a href="javascript:queryCounty('6001')">Alameda</a>

When the user clicks on Alameda in the dropdown menu, it launches the following code, which selects Alameda County and zooms to the polygon:

//FUNCTIONS FOR COUNTY QUERY
function queryCounty(searchText) {
    //Create query task
    var countyQueryTask = new esri.tasks.QueryTask("http://ArcGIS map service location");

    //Build county query filter
    var coQuery = new esri.tasks.Query();
    coQuery.where = "county_fip = " + searchText;
    coQuery.outFields = ["name"];
    coQuery.returnGeometry = true;

    countyQueryTask.execute(coQuery, coShowResults);
}

function coShowResults(featureSet) {
    //Remove all graphics on the map's graphics layer
    map.graphics.clear();

    var countySymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONAL_CROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([223,1,215]), 4), new dojo.Color([0,0,255,0.25]));

    //Convert feature set to graphic
    var coFeature = featureSet.features;
    var coGraphic = coFeature[0];
    coGraphic.setSymbol(countySymbol);

    map.graphics.add(coGraphic);
    map.setExtent(coGraphic.geometry.getExtent().expand(1.5));  //expand(1.5) ensures entire polygon displays
}

If you don't want a polygon to draw, just don't build a symbol for it. You will still be able to zoom to its geometry by removing coGraphic.setSymbol(countySymbol).