nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Set zoomToFullExtent to be my Initial Extent

CarrieTropasso1

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

Vind meer berichten getagd met

Accepted answers

All comments

derekswingley1

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

Thanks! That's what I needed and I got it working successfully.

derekswingley1

Thanks for following up. Can you mark my post as an answer?

BillShockley

Thanks...it took me a little bit, but I got mine to work as well!!

JessicaKnight1

Thanks for this. Worked like a charm!

danbecker

awesome. Thanks Derek!

RobinAlexis_Olaya

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

Mr_Kirkwood

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!

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.