1

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);
}
3

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.

  • I get an error: ReferenceError: map is not defined map.setExtent(xmin, ymin, xmax, ymax); – HPWD Feb 28 '14 at 15:56
  • Can you post your entire code? The issue is with your map variable not being defined in the above code. You need your code contained in this function: – Jeremy Hamm Feb 28 '14 at 15:58
  • require(["esri/map"], function(Map) { /* code goes here */ }); – Jeremy Hamm Feb 28 '14 at 15:59
0

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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