Story Maps not loading on Apple Devices

[SelenaBarrett]

I have been working on a story map and it loads on computer browsers such as chrome and explorer, and on Android phones, but it isn't working on any Apple devices. When I try to load it on an Apple phone, it will load the title page, the first few pages, and then the sidecars with maps. After it starts to load those, it can't open the page, or it will jump back up to the title page. Another person that I had test the map said that the maps would load with an error, and then the data would appear.

Another forum said that having too many tabs in the sidecar would cause this issue, but I have since removed the extra tabs, and the problem is still persisting.

The link to the map is https://arcg.is/HjPq4

Thank you for any input or suggestions!

[OwenGeo]

Hi @SelenaBarrett,

I took a look and I can reproduce the issue you describe. It looks like this is caused by a combination of things. The story has a lot of maps! That in and of itself is not a problem, it is a storyMAP after all. However, there are two aspects that aren't ideal...

1) Most of the maps you're using have a lot of layers in them. I didn't look at every map in your story, but several I looked at have 5+ layers, with some having almost 10. We have information about best practices and guidance for how many map layers are advisable to use in a story listed in our FAQ here.

2) The second, and most important, factor at play is the way the maps are arranged in the story. Maps take a lot of browser resources to load, and the more layers in a map the more resources it takes. There is a lot of logic built into StoryMaps to control when maps are loaded and unloaded as readers scroll through the story to help manage memory and hardware resources while also trying to provide readers with a good experience so they don't have to wait for every map to load as it appears.

Unfortunately, the way the content is arranged in your story still triggers a situation where memory resources are maxxed out. The story has a long string of sequential sidecar sections, and almost every slide in all of these sidecars is a map. This is not a typical arrangement, and it doesn't give the story (or the reader) a chance to breathe. The story must continuously load map after map in a continuous stream.

What happens is the last couple of maps in one sidecar are still in memory when the first few maps in the next sidecar are loaded. This means well over a dozen layers can easily be loaded at one time, and when that happens the resources on most mobile devices are overloaded and the page crashes. 😞

A few things I can recommend:

• Remove any unused layers.
  • Even layers that aren't visible consume resources.
  • This is not likely to fix the overall issue on it's own, but is a best practice and may eliminate some places where the issue is triggered.
• Add some content (text and images, for example) between the sidecars.
  • This will prevent two sidecars from being on-screen and loading at the same time. It also gives your readers a bit of a mental break from the sidecar experience. Maybe consider moving some of the content in the sidecar narrative panels and use it as an introduction to each state's section?
• Start and end each sidecar with 1 or 2 slides that contain images to prevent so many maps from being loaded at the same time

Let me know if this makes sense and if you have any additional questions we can help with.