topic Re: popup window - deactivate "zoom in" in Classic Esri Story Maps Questions

popup window - deactivate "zoom in"

FlorianHruby2 — Thu, 06 Feb 2014 17:47:25 GMT

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

Re: popup window - deactivate "zoom in"

DavidAsbury — Thu, 06 Feb 2014 19:05:26 GMT

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.

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Thu, 06 Feb 2014 19:53:26 GMT

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

Re: popup window - deactivate "zoom in"

StephenSylvia — Thu, 06 Feb 2014 19:59:50 GMT

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?

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Sat, 11 Dec 2021 08:26:37 GMT

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

Re: popup window - deactivate "zoom in"

StephenSylvia — Thu, 06 Feb 2014 20:09:02 GMT

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.

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Thu, 06 Feb 2014 20:22:14 GMT

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 ... ?

Re: popup window - deactivate "zoom in"

StephenSylvia — Thu, 06 Feb 2014 20:30:40 GMT

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]

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Thu, 06 Feb 2014 20:45:12 GMT

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?

Re: popup window - deactivate "zoom in"

StephenSylvia — Thu, 06 Feb 2014 20:47:42 GMT

Sorry, yes is should be:

if (map.getLevel() > 10){

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

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Thu, 06 Feb 2014 21:05:32 GMT

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!

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Thu, 06 Feb 2014 21:19:53 GMT

When I set the core.css

.zoomTo {
display: block;
}

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

Re: popup window - deactivate "zoom in"

FlorianHruby2 — Fri, 07 Feb 2014 16:11:42 GMT

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