Downloaded Story Map Tour Won't Load

[KyleWikstrom]

It seems that others have posted here of similar issues: downloading the Story Map Tour template, updating the webmapid and experiencing the map tour getting stuck "loading" in the web browser. Unfortunately, none of the articles or answers I've found so far have been able to help.

I created a Story Map Tour in ArcGIS Online, and in the builder I created the point locations and uploaded images/thumbnails, added descriptions etc. This created the web map for me. I downloaded the Story Map Tour template and updated the webmapid in the index.html file with the web map's id but the Story Map Tour will not move beyond the loading screen. I checked for errors here (My Stories | Story Maps ) but there are no errors.

This is the web map: http://pwa.maps.arcgis.com/home/webmap/viewer.html?webmap=77a28174b7e047928f9f19f19da5fe52

This is the URL to the downloaded Story Map Tour we are hosting: http://ec2-52-7-234-52.compute-1.amazonaws.com/apps/MapTour/

I certainly appreciate any help that can be offered. It will be really nice to take our story even further! Thanks much, and Happy New Year!

[RickeyFight]

Kyle,

I had this same issue.

If you downloaded the template from github and it will not load for some reason. You have to download from another esri site.

I found a Geonet questions that addressed this issue but I cannot find it now. That question had the proper link.

If you still have not found it by Monday I will look harder to find it.

[RupertEssinger]

Your web map works OK for me in a map tour I just set up by downloading the Story Map Tour from Github.

Here's what I did:

1. Went to Story Map Tour | Story Maps​, scrolled down to the bottom of the page and clicked on 'Download configurable app' to download a zip file from Github containing the source code. You can also get the same zip file from the Releases page on Github: Releases · Esri/map-tour-storytelling-template-js · GitHub

2. Copied the contents of that zip file from my PC's Downloads folder into the wwwroot folder of my localhost private test web server (but could also copy it directly onto the public facing web server or website space I'll be using instead and not do a local test).

3. Edited Index.html to enter the ID of your web map in the webmap line of that file (line 45). Saved it.

4. Tested it in my web browser.

5. Copied the whole folder onto a public web server I have access to. I also renamed the folder from maptour to maptour6 because I have a couple of maptour tests in that location.

Here's the resulting Story Map Tour using your web map.

http://downloads.esri.com/blogs/places/test/maptour6/

[AravindStoryMaps]

Is there perhaps a need to also add a proxy.ashx page to their amazon instance?

[KyleWikstrom]

Thank you for going through this. These are the steps I have been following as well. This really helps though because it indicates that there is another issue to be resolved. I will attempt the proxy option Aravind listed below and repost on Monday.

[RupertEssinger]

One more thing: instead of specifying your web map ID in your downloaded map tour code, you can specify the AppID of the Story Map Tour web app you already authored in ArcGIS Online. It's a better approach because in this way your self-hosted download will pick up the settings you chose when you authored your tour in the Story Map Tour Builder.

For example I found your hosted map tour in ArcGIS Online:

http://pwa.maps.arcgis.com/apps/MapTour/index.html?appid=0b18a325919a413aa2d2723378405cb4

Looks good! Very nice work!!!

I then followed the same steps as I listed above to download the Story Map Tour source code, but instead of specifying your web map ID in my Index.html, I specified your app ID:

    webmap: "",

    appid: "0b18a325919a413aa2d2723378405cb4",

The resulting self-hosted tour is:

http://downloads.esri.com/blogs/places/test/maptour8/

which matches the header, logo etc of your hosted tour app because it gets those definitions from your app. So it is a much cleaner approach to set up a self-hosted tour app pointing at a tour app you already authored in ArcGIS Online.

(In my index.html I set firstRecordAsIntro (line 61) to be false to match your hosted app).

Also I should ask: the hosted Story Map Tour you already made looks really great and is a great idea to introduce the world to your team! Is there a specific reason you need to download the Story Map Tour code and self-host it? For example is there a customization you want to make to the code to change the appearance or functionality? I thought I'd ask to make sure because simply creating a Story Map Tour hosted in ArcGIS Online is easier.Some people reading may think they have to download the code to make a Story Map Tour. The only Esri Story Map apps you currently have to download in order to deploy are the Story Map Shortlist, Story Map Countdown and Story Map Playlist (and we are working on updating the Story Map Shortlist to make it hosted in ArcGIS Online in 2016).

If you are sure you want to self-host, another thing I'd ask is are you sure you need to set up an Amazon instance to host the code? You could just download the code into a folder on your website's web server/hosting service, and host it there so that the resulting self-hosted tour uses your company domain.

[KyleWikstrom]

Thank you for the compliment. It was fun getting to write in some colors and text styles!

The changes we would like to make are not major. The most significant change would be removing the numbers from the item thumbnails in the carousel at the bottom of the page. I have not found a place to change this when creating it in ArcGIS Online. It's a minor change, but it is one that we would like to make.

[KyleWikstrom]

Another change I forgot to mention was that we would like to use a different symbol on the map. I haven't found a place to change that yet without downloading and self-hosting.

[AravindStoryMaps]

Hey Kyle,

I just want to run a quick test by you to see if you might have a proxy on your LAN/Ethernet.

1. Open IE .

2. Choose tools -> Internet Options -> Connections -> LAN settings.

3. Do you see your Proxy Server checked as follows: "Use a proxy server for your LAN" followed by an address and a port number?

If that's the case then, we would have to configure a proxy.js page that gets shipped along with the story maps zip file.

Thanks,

Aravind

[KyleWikstrom]

This is something I have not explored yet. I will test this out on Monday. Thank you for your help!