Story map shortlist configuration problem. Help?

ajrobinson3 · ‎11-03-2015

Having trouble configuring a short list story map to open via URL. I know the folder is live; I can open the Readme included with the app by typing in the URL. Shows up as just the app template with a spinning "circle of death" that never leads to final error messaging. Points to ponder: Hosting via GoDaddy. Configured webmap id, color order, etc. in HTML index as per the tutorial. Images are hosted on flickr, with complete urls (including album) in the table attached to the (publicly shared) web map.

Any help would be realty appreciated.

MarkCooney · ‎11-03-2015

The css and js folders/files need to be in a folder named app in that root. If you open the developer tools of the browser you are using, you will see it is failing to find and load these files.

View solution in original post

RupertEssinger · ‎11-03-2015

How about providing the URL of the Shortlist and of the web map you are using so we can have a look?

Rupert

ajrobinson3 · ‎11-03-2015

Sure! It's still very much a draft with some incomplete pieces... I want to make sure I can get it live before I sink too much effort into it.

web map: http://www.arcgis.com/home/webmap/viewer.html?webmap=ed1a40e804f748fb85dba975be0ee224

short list: Shortlist

current index.html file:

<!DOCTYPE html>
<html>
<head>
<title>Shortlist</title>

<meta name="description" content="This story map was created with the Esri Story Map Shortlist application.">

<meta property="og:type" content="article"/>
<meta property="og:title" content="Story Map Shortlist"/>
<meta property="og:description" content="This story map was created with the Esri Story Map Shortlist application."/>
<meta property="og:image" content="resources/images/esri-globe.png">

   //-----------------------------------
   // Application configuration
   //-----------------------------------

   var WEBMAP_ID = "ed1a40e804f748fb85dba975be0ee224";
   var BOOKMARKS_ALIAS = "Zoom";
   var COLOR_ORDER = "green,blue,red,purple,black"; // will only use as many colors as you have tabs
   var DETAILS_PANEL = true; // specifies whether or not popups have a link to a separate Details panel
   //
   // Specify point feature layers on your map that do NOT define a tab in the Shortlist.
   // These point layers will be displayed as supporting layers.
   // If there's more than one layer, use the "|" character as delimiter
   var POINT_LAYERS_NOT_TO_BE_SHOWN_AS_TABS = "";
   //
   // Specify supporting feature layers in your map that will be clickable in the Shortlist.
   // These layers must use the Shortlist attribute schema for their popups to appear.
   // If there's more than one layer, use the "|" character as delimiter
   var SUPPORTING_LAYERS_THAT_ARE_CLICKABLE = "";
   //
   // Location button that locates user (on supported browsers)
   var GEOLOCATOR = false;
   //
   // If the tabs are defined using a single layer, you can optionally use these parameters to
   // override the tab order and names defined in that layer without editing the layer.
   // If you specify TAB_NAMES: a) all tabs must be included in TAB_NAMES, whether or not
   // you want to rename them, b) TAB_ORDER must be specified too,
   // c) TAB_NAMES order must correspond with TAB_ORDER. For example:
   // var TAB_ORDER = ['Design', 'Fun', 'Food'];
   // var TAB_NAMES = [
    // {'Design': 'Design'},
    // {'Fun': 'Activities'},
    // {'Food': 'Snacks'}
   // ];
   var TAB_ORDER = ['Current'];
   var TAB_NAMES = [{'Current': 'Current Projects'}];
   //
   // Optionally to be able to use the webmap URL parameter, configure here the list of webmap authors
   // whose webmaps are allowed to be viewed by this Shortlist deployment
   // This is the ArcGIS Online username of the webmap owner (e.g. ["user1"], ["user1", "user2"])
   var AUTHORIZED_OWNERS = [];
   //
   // Edit to use Portal for ArcGIS
   var DEFAULT_SHARING_URL = "";
   //"http://www.example.com/arcgis/sharing/content/items";
   //
   // Note: If using a proxy server (required for remote CSV access),
   //        you'll need to provide a valid proxy server url.
   var DEFAULT_PROXY_URL = "";
   //"http://www.example.com/arcgis/sharing/proxy";

</script>

</div>

</div>

</div>

<div id="fatalError">
   <table border="0">
    <tr>
     <td width="70px" align="center" id="fatalError-icon"></td>
     <td id="fatalError-msg">
      <b class="error-title"></b>
      <p class="error-msg"></p>
     </td>
    </tr>
   </table>
</div>

<script type="text/javascript">
    if (window.location.href.toLowerCase().indexOf("storymaps.esri.com") >= 0) {
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-26529417-1']);
     _gaq.push(['_trackPageview']);

(function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
    }
</script>

</body>
</html>

MarkCooney · ‎11-03-2015

You will need to include the css and js files in your folder (which in the download, are stored in the app folder). Add these back in, and your Shortlist should load just fine.

-Mark

ajrobinson3 · ‎11-03-2015

screenshot of the folder contents:

ajrobinson3 · ‎11-03-2015

The css and js files are stored in the same folder on GoDaddy's File Manager with the index and the Readme pdf, titled ArcGIS-shortlist. The Readme loads, the app does not.

MarkCooney · ‎11-03-2015

The css and js folders/files need to be in a folder named app in that root. If you open the developer tools of the browser you are using, you will see it is failing to find and load these files.

ajrobinson3 · ‎11-03-2015

Thank you! Progress. It now loads, but none of the images do. Should I open a new question about integrating Flickr-hosted images with shortlists?

MarkCooney · ‎11-03-2015

Flickr-hosted images will work with a Shortlist, and like any other image url for Shortlist, you will need to include the image type extension. For example, for one of the features, the image url is presently: xtown-logo_22360111330_o_2015.10.30 | Flickr - Photo Sharing!.

It needs to be this:

https://c1.staticflickr.com/1/588/22586889436_a09b432ba2.jpg

Notice the .jpg extension in the url.

ajrobinson3 · ‎11-03-2015

You're right, it works... how do I extract/find the static flickr url from the photostream or album view?

Thanks!