HandsOnDataViz/leaflet-storymaps-with-google-sheets

add option to make responsive storymap appear side-by-side vs. top-bottom?

Closed this issue · 2 comments

Hi @ilyankou -- While working on images for chapter 13, I wondered if we have an option to manually determine how the storymap appears, such as "always side-by-side" or "always top-and-bottom" or "responsive" (default). Not urgent, but let me know what you think, since I believe this is a case where side-by-side might be preferable, but I don't currently see an easy way to control it.

storymap-responsive-display

@JackDougherty

The default behavior is to display the scrollable container on the left, and the map on the right. When screen width is under 768px (this is a standard breakpoint for mobile devices), it switches to top/bottom view with the map on top and the scrollable container underneath. This is a simple and intuitive behavior, and I suggest we keep it this way.

I think your issue is that you don't want to see the "mobile view" in the embedded iframe. I recommend you use a static screenshot instead of the interactive version, just like we did with the searchable point map that doesn't look great when embedded.

Understood. My current thinking is to embed your animated GIF story map in the web edition, to highlight the scrolling narrative to tell a story, with the static image for the ORM editions.