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

Encontre mais publicações marcadas com

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!

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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