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

Loading a Story Map Shortlist in mobile mode?

HelenCooper

Hi,

I've put together a Story Map using the Shortlist Story builder beta (http://arcg.is/2orNdqc ) . The map looks great, but there are a lot of images, and it takes a while to load. Is there a way of forcing the map to load in mobile mode irrespective of the device used to view?

Here's the map embedded in a web page:

E17 Art Trail – 2017

Many thanks in advance for any help,

Helen

Find more posts tagged with

Accepted answers

DarrenWiens2

Actually, on second thought, the original line I referenced looks for any value passed in the url for 'forceMobile', so when you load the iframe, just add a url parameter:

https://mapitconsulting.maps.arcgis.com/apps/Shortlist/index.html?appid=5d8042b827c54cacb6805b44d11f301c&forceMobile=mob…

All comments

HelenCooper

Thanks Nancy.

HelenCooper

Perfect, that URL parameter does exactly what I was hoping for. Thank you.

Helen

NancyChurch

Check and make sure your photos are all sized under 400kb ... that definitely slows down the story map

DarrenWiens2

Actually, on second thought, the original line I referenced looks for any value passed in the url for 'forceMobile', so when you load the iframe, just add a url parameter:

https://mapitconsulting.maps.arcgis.com/apps/Shortlist/index.html?appid=5d8042b827c54cacb6805b44d11f301c&forceMobile=mob…

HelenCooper

Hi Darren,

Thanks for that, I'm hosting it on AGOL (and have used the builder) so I don't think I can change this. Thanks though.

Helen

DarrenWiens2

I don't know if there's a way to do this through the builder (I doubt it), but I believe you can kind of hack it by changing line 971 in src/app/storymaps/common/Core.js

from...

forceMobile <SPAN class="operator token">=</SPAN> _urlParams<SPAN class="punctuation token">.</SPAN>forceMobile <SPAN class="operator token">!==</SPAN> undefined <SPAN class="operator token">||</SPAN> app<SPAN class="punctuation token">.</SPAN>indexCfg<SPAN class="punctuation token">.</SPAN>forceMobile<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

to...

forceMobile <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

But if you're not building the web app from source, it's a pretty long way around to add this functionality.

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.