Add 360 photo support in Story Maps

2756
10
04-28-2021 09:05 AM
Status: Open
Labels (3)
DeanaSchwarz
New Contributor II

I beg you to please allow users to easily insert a 360 degree photo into the media section of Story Maps (e.g., Side Car). I have 360 photos saved on Flickr and need them to show on my Story Map, but as of now this is not supported. At the very least, if you could make it possible for us to upload a 360 photo to our ESRI content page and link back from a Story Map media slot, that would suffice for now. 

Thank you!!

10 Comments
OwenGeo

@DeanaSchwarz -- ArcGIS StoryMaps use a 3rd party service to validate external embedded content, and it looks like 360 photos aren't currently supported by this service. We can try to request this as an enhancement from this service.

KrisKarki

I also would like to add 360 Images into ArcGIS Story maps.

SauloGustavo_de_Oliveira

Native support to 360 images into ArcGIS StorMaps is a request from Brazilian users too.  

PeterKnoop

@OwenGeo I too would like to see native StoryMap support for 360-degree images, if you can get the service to add it.

Meanwhile, in case anyone else is interested, I've found a relatively simple solution using three.js (open-source), which is an easy to use, lightweight, cross-browser, general purpose 3D library.

Using one of the example viewers included with three.js, examples/webgl_panorama_equirectangular-360.html, you can make a quick 360-degree image viewer. Host the viewer code on your web server,  swap in a reference to your own image file, and you are good to go.

For some examples and other experiments, see this StoryMap: 360º Images and 3D Models in StoryMaps.

 

BenParker

Peter, thanks for the very interesting and informative post!

I use the same technique for incorporating 360-degree images into a story map, namely hosting them on my own website and then doing an embed. While I find the technique works perfectly with “classic” story maps (for example, A Look Around Redlands and A Look Around Redlands Revisited), I have been unable to get it to work reliably using a new-style story map. I can create the embeds and they appear to work fine for a while but then, one-by-one and seemingly randomly, the embeds fail with a message that the external content isn’t supported. As a result, I have had to replace all the 360-degree embeds in a new story map I’m working on (A Look Around the San Gorgonio Wilderness) with simple links that open the 360-images in a new browser tab.

I wonder if you or any other readers of this post have encountered a similar problem with embeds working for a while and then failing? I use a commercial package called Pano2VR for hosting the panoramas rather than three.js directly, and the issue may be due to some idiosyncrasy that’s unique to that package.

PeterKnoop

@BenParker I have had similar disappearing content experiences. Two common causes I've found are when the link includes a security token or the link is to a Content Delivery Network (CDN) cache, rather than directly to the content itself. 

In the case of the token, some systems use them, even for publicly available content. They expect you to get to the content by going through their system, perhaps via their own "viewer app". In that case, the system can always generate an up-to-date token to append to the URL, and can support public access. In those systems, if you try to get to the content directly yourself, the URL you've copied into your story works fine, until that token times out, then things start failing.

Similarly some systems assume you will go through them first, and they can direct you to the current URL for an item on their CDN. (CDN's are great for caching content closer to end-users to improve performance.) Those CDN URLs, however, can change over time; if something isn't accessed for awhile, then it may get dropped from the cache, and when someone accesses it again, it will get assigned a new URL. So a URL you've copied into your story works fine for awhile, but then starts failing when the content is no longer in the cached location.

Your issue might not be Pano2VR itself, but rather how you are hosting the content it produces.

BenParker

Interesting! Thanks for the advice!

blairtinker

Another option is the Knight Lab Scene VR viewer.  It embeds well in a Story Map and is very easy to set up and use.  Their timeline will also embed well in a story map.

jbears89

@PeterKnoop Maybe I missed it but I cannot find the three.js webgl_panorama_equirectangular-360.html solution you mentioned.  I've tried the obj + mtl loader under examples but nothing seems to be working with the obj and mtl files i have from our drone data.  Can you upload that solution you mentioned by chance? thanks

PeterKnoop

@jbears89 looks like it was renamed or a new, similar example was created: webgl_panorama_equirectangular.html. It is an example for 360-degree images though.

For obj, I would suggest looking at webgl_loader_obj.html.  The example I included at the bottom of the StoryMap used a model in glb format. If you want to start from there, then you can view the page source, and in your version replace the glb-loader  related content with what's needed for loading an obj model.