New StoryMaps in a locally hosted website/page/gallery

AdamCottrell · ‎04-14-2020

I have been running into issues with the new StoryMaps being accessible through our local server when it comes to the responsiveness design on a mobile device. Putting a single StoryMap in an iframe seems ok but I have several that are part of a series. The reasons why I'm choosing the new StoryMaps solution are:

1) Displaying/adding more than one image per location

2) ...well... out with the old

3) StoryMap Collections - grouping multiple StoryMaps in one location

The problem is that I want to host locally. The Collection looks ok with 1 or 2 storymaps but as soon as you have more than this then page is glitchy on an iPhone (I have not had a chance to test on other devices). I've added the meta tags in the HTML so the collection site looks ok but, when you tap into a specific storymap that is on the 2nd or 3rd row of the collection, the storymap is only using a 1/3rd or 2/3rd the iphone screen leaving the rest blank (white screen). I've tried using the code in the html to make the iframe responsive but to no avail. Will there be any downloadable content to host these storymaps locally like the "classic" versions?

The second, which probably should be a separate question, is related the minimal gallery option that can be hosted locally. StoryMaps item is still not supported/available. My workaround has been to add the storymap back into AGOL as another "Application" item and share this with a group. This works but I would rather not have 2 items representing one application. Will the Minimal Gallery, that is downloadable, eventually support StoryMap items?

Any ideas/suggestions/advice on efficiently representing this new StoryMap solution and Collection locally would be greatly appreciated. I'm really excited about the Collection functionality!

Thank you in advance.

OwenGeo · ‎04-15-2020

Hi Adam -- Thanks for reaching out with your questions.

Are you embedding the collection in a full-page iframe so you get to control the URL? (Is that what you mean by host locally?). We are looking at adding the ability to have a custom domain for your story maps in a future update, which would help here.

Can you provide more detail about what you are looking to do and what issues you are seeing so we can look into this?

At this time we don't have specific plans to provide a downloadable version, but we will continue to evaluate the need for this.

I'll check on the Minimal gallery issue as well.

Owen Evans
Lead Product Engineer | StoryMaps

AdamCottrell · ‎04-15-2020

Owen, thank you for your quick response. Yes, I'm trying to have full control of URL from our local web server. The majority of users will be mobile user so I was trying to get the iframe to be responsive. Below is the code that I'm using. I have also attached some screenshots from my iPhone of the "ArcGIS Collection" landing page and the a couple of screenshots after clicking on a specific StoryMap. The first screenshot is the Collection page using the below code. The second is the StoryMap that is selected from collection page. If I change the padding-top control to 156.25% (in red below) then the collection page shows up in full and then the StoryMap that gets selected is at roughly 2/3 of the screen (see 3rd screenshot). This collection has 4 StoryMaps. If I add another StoryMap to make 5 in this collection then this adds another row in the Collection page on a mobile device and I cannot scroll down any further.

Also, a side note for what it's worth- In this testing phase of this project, I have received more positive feedback with how the minimal gallery functions as the lading page for the individual StoryMaps rather than the Collection's page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">


<link rel="icon" href="mywebsite/favicon-city.ico" type="image/ico" sizes="16x16">
<title>Charleston Public Art Story Map</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe src="https://storymaps.arcgis.com/collections/myID" allowfullscreen>
</iframe>
</div>
</body>
</html>

OwenGeo · ‎04-16-2020

Adam -- I'm not sure I'd recommend embedding a collection in this way. Collections already have a responsive UI that works well on all screen sizes. Instead of embedding, could you set up a redirect from your domain or short link (with something like Bitly) that's easier to share instead?

The iframe height issue seems like it may be expected iframe behavior. See html - How do you give iframe 100% height - Stack Overflow

I was able to add published StoryMaps to a Minimal Gallery. Can you provide more details about what issue you were seeing with StoryMaps in the Minimal Gallery?

Owen Evans
Lead Product Engineer | StoryMaps

AdamCottrell · ‎04-16-2020

Owen, thank you for looking further into this for me. Embedding was/is not my first option. Not really an option at all but used for testing to confirm and report back to my supervisor. My first and really only option is to host StoryMaps (really any apps), like the Classic StoryMaps, on our own servers. I think the most obvious, and it is also mentioned here on the Storymaps Developer's Corner, that I can customize the URL on our organization’s domain (https://medium.com/story-maps-developers-corner/an-introduction-to-hosting-your-own-story-map-e24501... ). I can as well add additional CSS customization when hosting on our own server. It would be great if this capability was on the road map. I do not understand why it is not currently on the road map since the Classic versions are downloadable and there is an obvious justification for it. Esri even wrote a blog about it for the Classic versions.

This goes the same for the minimal gallery and I'm assuming you had no issues publishing it because it is being hosted on ArcGIS Online. Yes, I can do this too but I am required to host it on our own servers. The Minimal Gallery downloadable version has not been updated to recognize the new ArcGIS StoryMaps. Please update the downloadable version. If it is supported in the downloadable then can you please direct me to the downloadable version that supports the new ArcGIS StoryMaps?

Once again Owen, I cannot thank you enough for your quick responses and looking into my issues.