Interactive leaflet map not interactive on mobile

[scottyla19]

I am using a leaflet in a closeread document here and running live here

I used the advice from a previous discussion to get my leaflet map to show up. It looks great but I lose the interactivity when viewing on mobile in portrait mode. I am guessing it is due to not enough room on the screen to register the scroll of the page and the touches, pans, and pinches within the map. If the phone is rotated into landscape mode it works fine as it seems there is now enough room to register the interactivity for the map.

I'm wondering if there are other CSS or maybe JS tricks to get interactivity to work in portrait mode on mobile?

[andrewpbray]

Hi @scottyla19 I can reproduce the issue - when I view your example on my desktop browser and shrink the window to the minimum width, zoom and mouse hover both seem to be disabled.

I don't have a ready solution for you at the moment but @jimjam-slam might have an idea. Indeed, as mentioned in the previous discussion, seems like we could help users out by adding a more systematic treatment of html widgets!

[jimjam-slam]

Apologies for the late answer, @scottyla19! The problem here is that in overlay view, the narrative column sits on top of the sticky content, and it absorbs touch events (even the parts of it that are invisible).

You can stop the narrative column from accepting pointer events with some CSS. Add this raw HTML chunk to your Quarto doc:

```{=html}
<style>
  @media (max-width: 575.98px) {
    .narrative-col {
      point-events: none;
    }

    .trigger {
      pointer-events: all;
    }
  }
</style>
```

This chunk makes it so that the narrative column as a whole does not intercept pointer events, allowing those events to pass to layers behind.

The second part re-enables pointer events for the actual visible triggers, so that you can still do the pointer-based things you'd expect with the triggers, like selecting text.

Hopefully this helps you if you have a contest entry to submit!

[scottyla19]

Thanks @jimjam-slam. I tried your suggestion but it did not work as expected.
Here is the slightly modified code that includes the container sizing to make the map show and allow interactivity on mobile:

.sticky-col-stack {
      container-name: sticks;
      container-type: size;
}
  .sticky-col-stack .html-widget {
    width: 100cqw !important;
    height: 100cqh !important;
  }
  
@media (max-width: 575.98px) {

  .sticky-col-stack .html-widget {
    width: 90cqw !important;
    height: 75cqh !important;
  }
  
  .narrative-col {
      pointer-events: none;
    }
    
    #cr-school-map{
       pointer-events: all;
    }

    .trigger {
      pointer-events: none;
    }
}

This seems to work best for my situation as it gives some room on screen outside of the html-widget for the user to scroll when needed.

Also, this was a part of my submission to the contest so I appreciate your help!

[jimjam-slam]

No worries @scottyla19; I'm glad we were able to help you ahead of the submission deadline!