Set zoomToFullExtent to be my Initial Extent

2345
8
01-23-2012 08:08 AM
CarrieTropasso1
New Contributor III
I am using the Navigation Toolbar from the API Samples.  However, the Zoom to Full Extent zooms to the full extent of the underlying base map and I want this to zoom to my Initial Extent.  I saw a previous post on here that states to save a copy of the extent and connect a button or link to a function that passes your extent to map.setExtent ().

I already have the button (from the Navigation Toolbar api sample) and the function for this right now is ???onClick:function(){navToolbar.zoomToFullExtent();}??? which works as described above (zooms to the extent of the base map).

I am fairly new to JavaScript but can usually get things to work if I have examples.  That being said, can someone provide me a code example showing me how to do this rather than just outlining the steps?

Thanks,
Carrie
0 Kudos
8 Replies
derekswingley1
Frequent Contributor
You can take a look at the code for zoomToFullExtent by typing this in firebug or chrome dev tools console:
navToolbar.zoomToFullExtent.toString()


That will print:
"function () { 
  var map = this.map; 
  map.setExtent(map.getLayer(map.layerIds[0]).initialExtent); 
}"


The easiest way to change this is to re-define zoomToFullExtent for your toolbar. After you create your toolbar, do something like this:
navToolar.zoomToFullExtent = function() {
  var map = this.map;
  map.setExtent(appFullExtent);
}

Where appFullExtent is a global that represents your app's full extent.
CarrieTropasso1
New Contributor III
Thanks! That's what I needed and I got it working successfully.
0 Kudos
derekswingley1
Frequent Contributor
Thanks for following up. Can you mark my post as an answer?
0 Kudos
BillShockley
Occasional Contributor
Thanks...it took me a little bit, but I got mine to work as well!!
0 Kudos
JessicaKnight1
New Contributor III
Thanks for this. Worked like a charm!
0 Kudos
danbecker
Occasional Contributor III
awesome. Thanks Derek!
0 Kudos
RobinAlexis_Olaya
New Contributor
You can take a look at the code for zoomToFullExtent by typing this in firebug or chrome dev tools console:
navToolbar.zoomToFullExtent.toString()


That will print:
"function () { 
  var map = this.map; 
  map.setExtent(map.getLayer(map.layerIds[0]).initialExtent); 
}"


The easiest way to change this is to re-define zoomToFullExtent for your toolbar. After you create your toolbar, do something like this:
navToolar.zoomToFullExtent = function() {
  var map = this.map;
  map.setExtent(appFullExtent);
}

Where appFullExtent is a global that represents your app's full extent.


Thank's it's very usefull.
Muchas gracias, me ayudó bastante. From Cali, Colombia
0 Kudos
RobertKirkwood
Occasional Contributor III
You can take a look at the code for zoomToFullExtent by typing this in firebug or chrome dev tools console:
navToolbar.zoomToFullExtent.toString()


That will print:
"function () { 
  var map = this.map; 
  map.setExtent(map.getLayer(map.layerIds[0]).initialExtent); 
}"


The easiest way to change this is to re-define zoomToFullExtent for your toolbar. After you create your toolbar, do something like this:
navToolar.zoomToFullExtent = function() {
  var map = this.map;
  map.setExtent(appFullExtent);
}

Where appFullExtent is a global that represents your app's full extent.


where do i modify the code with the above edit?

here is what i have:
 navToolbar = new Navigation(map);
    on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
    
    registry.byId("zoomin").on("click", function(){
        navToolbar.activate(Navigation.ZOOM_IN);
    });
    
    registry.byId("zoomout").on("click", function(){
        navToolbar.activate(Navigation.ZOOM_OUT);
    });
    
    registry.byId("zoomfullext").on("click", function(){
        navToolbar.zoomToFullExtent();
    });
    
    registry.byId("zoomprev").on("click", function(){
        navToolbar.zoomToPrevExtent();
    });
    
    registry.byId("zoomnext").on("click", function(){
        navToolbar.zoomToNextExtent();
    });
    
    registry.byId("pan").on("click", function(){
        navToolbar.activate(Navigation.PAN);
    });
    
    registry.byId("deactivate").on("click", function(){
        navToolbar.deactivate();
    });
    
    function extentHistoryChangeHandler(){
        registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
    }
});


Thanks in advance!
0 Kudos