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

[DavidAsbury]

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.