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

popup window - deactivate "zoom in"

FlorianHruby2

Hi there,

when I use the �??zoom in�?� link in the popup window, the map zooms to the selected feature (a polygon for instance) �?? that's fine so far.

However, after you did the zoom, the �??zoom in�?� link still remains visible and active although you cannot use it any longer (or at least don�??t see a difference) as you already zoomed in to the feature as close as possible. This turns out to be a bit confusing for some of my users, and I guess it's indeed not necessary to provide a �??zoom in�?� link when no �??zoom in�?� is possible. Is there a way to deactivate this link when �??zoom in�?� no longer applies?

Thank you & kind regards,

Flo

Find more posts tagged with

Accepted answers

All comments

DavidAsbury1

Hi Flo,
The behavior you're seeing is a function of ArcGIS online. It is something that we work around in some of our templates in the CSS code. A great way to suggest enhancements is by posting to http://ideas.arcgis.com/

If you have a developer (or you are one) you can change this behavior in the CSS:
.zoomTo {
display: none;
}

Hope this helps.

FlorianHruby2

Thank you very much for this hint!

However, NEIGHTER:

.zoomTo {
display: none;
}

NOR

.esriPopup .actionsPane .zoomTo {
display: none;
}

added to the core.css deactivates the "zoom-to" link.

Where do I wrong?

best regards,

F

StephenSylvia

Are you putting it at the end of the core.css? Can you share a public link to your app that we can investigate further?

FlorianHruby2

Here is the map:
http://speck.conabio.gob.mx/manglarfotos/sitios_prioritarios/index.html

And this my core.css file:

#accordion-toggle{
 display: none;
 position: absolute;
 color: #fff;
 font-size: 28px;
 margin-top: 9px;
 left: 9px;
 cursor: pointer;
}

#side-pane{
 background-color: #bbb;
 height: 100%;
 width: 250px;
 overflow: auto;
}

.accordion-header, .accordion-content{
 position: relative;
 padding: 15px 25px;
}

.accordion-header{
 border-top: 1px solid #fff;
}

.accordion-header:first-child{
 border:none;
}

.accordion-header:hover{
 background-color: #dadada;
 cursor: pointer;
}

.accordion-header.active:hover{
 background-color: #bbb;
 cursor: default;
}

.accordion-header-arrow{
 position: absolute;
 top: 30px;
 left: 0;
 width: 0; 
 height: 0; 
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent; 
 border-left: 20px solid #fff;
}

.accordion-header-number, .accordion-header-title{
 vertical-align: middle;
}

.accordion-header-number{
 padding: 0 10px;
 color: #fff;
 font-size: 72px;
 font-family: 'Average-Regular';
}

.accordion-header-title{
 font-size: 16px;
 font-weight: bold;
}

.accordion-content{
 display: none;
 font-size: 14px;
 font-family: Georgia;
 line-height: 1.4em;
 overflow: auto;
}

.map{
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 z-index: 0
}

.map.active{
 z-index: 1;
}

.simpleGeocoder{
 position: absolute;
 top: 20px;
 left: 71px;
 z-index: 30;
}

b{
 font-weight: bold;
}

/* Custom Webkit Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
    background: #888;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

@media all and (min-width: 781px) {
 #accordion-toggle{
  display: none;
  cursor: pointer;
 }

 #map-toggle{
  cursor: pointer;
 }
}

@media all and (max-width: 780px) {
 #side-pane{
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
 }

 #accordion-toggle{
  display: block;
 }

 .accordion-header, .accordion-content{
  padding: 10px 25px;
 }

 .accordion-header-arrow{
  top: 20px;
 }

 .accordion-header-number{
  font-size: 50px;
 }

 .accordion-header-title{
  font-size: 15px;
 }

 #map-pane{
  position: absolute;
 }

 .esriPopup{
  display: none;
 }
 
 .zoomTo { 
 display: none; 
 }

 .contentPane{
  padding: 15px;
  max-height: 150px;
  overflow: auto;
 }
}

StephenSylvia

It looks like you placed the ".zoomTo{display:none;}" within a media query. All the styles in that media query will only be applied to screens sizes < 781px. If you move it to the very bottom of the file, outside the last bracket, it should work.

FlorianHruby2

Yes, it works!

Thank you again!

Would it be possible to put a conditional in the core.js in order to deactivate the "zoom-to" only at a certain zoom-level?

eg: if zoom < 10 ... ?

StephenSylvia

Yes, you should be able to add an event listener on the on "extent-change" the call a function similar to this:

[HTML]
map.on('extent-change',function(){
if (map.getLevel() < 10){
$(".zoomTo").css("display","none");
}
else{
$(".zoomTo").css("display","block");
}
});
[/HTML]

FlorianHruby2

Thank you!

I put your code to my core.css, but the result is the oppisite of what I expected:

As you zoom out the "zoom-link" dissappears, while it appears as you come closer as level 10?

StephenSylvia

Sorry, yes is should be:

if (map.getLevel() > 10){

The larger the number, the more zoomed in you are.

FlorianHruby2

I already tried this but there is a strange effect. When you open the map I linked above and click on any of the orange polygons: First, the "zoom-to" link is NOT available, you zoom in and it becomes visble and at level 10 it disappears, as it should. When you zoom out then, everything works as it should.

Any suggestion?

thank you again!

FlorianHruby2

When I set the core.css

.zoomTo {
display: block;
}

it seems to work - but only for the first of the five maps?

FlorianHruby2

When I delete the

.zoomTo {
display: block;
}

from the core.css, the map starts fine. However, it seems that the storymap doesn´t "reset" the zoom level when you switch between different maps.

Eg.: When I click on any of the polygons in each of the five maps, "zoom-to" is available (as it should). Doing a zoom in deactivates the link (as it should). I now switch to another map, which is still in the default small scale; when I now click a polygon the zoom-in is still desactivated (although it shoul be visible due to the current zoom level). So it seems the new map still considers the zoom level of the map opened before in regard of the zoom level.

Is it possible to "reset" the zoom level every time a switch to another map?

thank you & best regards,

Flo

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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