I am trying to configure my Shortlist Story Map (http://arcg.is/1LUXwIY ) with our organizations website. I am just getting a spinning loading circle and the map never loads. I have configured the index.html page with my Webmap ID, copied the sample template for my .csv file and have removed any special characters in that file. I get the following errors:
Thanks in advance for your help!
Solved! Go to Solution.
I sort of figured this out. I downloaded a new template and put in my WebID and now it works. Maybe I tinkered with the original index file too much while trying to figure it out. Thanks for your help.
Travis
Hi Travis. that link you posted is a Story Map Series app not a Story Map Shortlist app.
I found your publicly shared web map in ArcGIS Onlline:
http://www.arcgis.com/home/webmap/viewer.html?webmap=13dd36f4661e4d388833f57f102a56a0
And it draws OK in our test Story Map Shortlist instance:
Have you put the Shortlist code onto a web server or folder in a public website or hosting service? It should work if you put the ID of the web map into the Index.html file.
I suspect you are perhaps putting the ID of that Story Map Series story map app into the Index.html file, not the ID of a web map.
Rupert
Hi Rupert, thank you for your response. Yes, we have it at a public site - Shortlist
Below is the index file where I believe i have the right ID.
Thanks again for your help!
Travis
<!DOCTYPE html>
<html>
<head>
<title>Shortlist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="image/ico" rel="shortcut icon" href="https://community.esri.com//resources.esri.com/favicon.ico">
<link type="image/ico" rel="icon" href="https://community.esri.com//resources.esri.com/favicon.ico">
<!--
To correctly reference your application in search engine:
- create and fill out extensively an ArcGIS.com item that link to your final application
- edit the following four tags as well as the upper title tag on line 4
-->
<meta name="description" content="This story map was created with the Esri Story Map Shortlist application.">
<!-- Facebook sharing -->
<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">
<script type="text/javascript">
var version = '1.4.7';
//-----------------------------------
// Application configuration
//-----------------------------------
var WEBMAP_ID = “13dd36f4661e4d388833f57f102a56a0";
var BOOKMARKS_ALIAS = "Zoom";
var COLOR_ORDER = "green,red,blue,purple,black"; // will only use as many colors as you have tabs
var DETAILS_PANEL = false; // 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 = [];
var TAB_NAMES = [];
//
// 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>
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.14/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="lib/colorbox/colorbox.css">
<link rel="stylesheet" type="text/css" href="lib/idangerous.swiper.css">
<link rel="stylesheet" type="text/css" href="app/css/style.css">
<link rel="stylesheet" type="text/css" href="app/css/responsive.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="app/css/ie8-and-down.css" />
<![endif]-->
</head>
<body class="claro">
<!-- Header Section-->
<div id="header">
<div id="headerText">
<h1 id="title" tabindex="0"></h1>
<h2 id="subtitle" ></h2>
</div>
<div id="logoArea">
<div id="social">
<span class="headerLink" tabindex="-1">
<a id="msLink" tabindex="-1" href="http://storymaps.arcgis.com" target="_blank">A story map</a>
</span>
<i tabindex="-1" class="shareIcon share_facebook socialIcon-facebook-squared-1"></i>
<i tabindex="-1" class="socialIcon-twitter-1 shareIcon share_twitter"></i>
<i tabindex="-1" class="socialIcon-link shareIcon share_bitly" id="bitlyIcon" title="Get a short link to the application"></i>
<div class="popover fade left in" style="display: none;">
<div class="arrow"></div>
<div class="popover-content" id="bitlyContent">
<div style="width:150px; height:30px">
<input id="bitlyInput" type="text" value="" style="width: 150px;">
</div>
</div>
</div>
</div>
<div tabindex="-1" id="logo">
<a tabindex="-1" id="logoLink" href="http://www.esri.com" target="_blank">
<img tabindex="-1" id="logoImg" src="resources/images/esri-logo-white.png" alt="Esri - Home">
</a>
</div>
</div>
</div>
<div id="mobileTitlePage"></div>
<div id="mainWindow">
<div id="divStrip">
<div id="tabs"></div>
<div id="bookmarksCon">
<div id="bookmarksToggle"> <!--tabindex="0"-->
<p id="bookmarksTogText"></p>
</div>
<div id="bookmarksDiv">
</div>
</div>
</div>
<div id="mobileBookmarksCon">
<div id="mobileBookmarksToggle"><p id="mobileBookmarksTogText"></p></div>
<div id="mobileBookmarksDiv"></div>
</div>
<div id="paneLeft">
<ul id="myList" class="tilelist"></ul>
<div class="noFeature">
<span class="noFeatureText">
</span>
</div>
</div>
<div id="map" tabindex="-1" aria-label="This is a nice map that shows cool things.">
<div id="zoomToggle">
<div id="zoomIn">+</div>
<div id="zoomExtent">
<img id="zoomExtentImg" src="resources/images/ZoomHome.png">
</div>
<div id="zoomOut">-</div>
<div id="locateButton">
<img id="locateImage" src="resources/images/locateButton.png">
</div>
</div><!--?zoomToggle-->
<div id="hoverInfo"></div>
</div>
<div id="mobileThemeBar">
<div id="navThemeLeft">
<span class='icon-arrow-left'></span>
</div>
<div id="navThemeRight">
<span class='icon-arrow-right'></span>
</div>
<div class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
<div id='returnIcon'>
<i class='icon-list'></i>
</div>
<div id="returnHiddenBar"></div>
<div id="centerMapIconContainer">
<div id='centerMapIcon'>
<i class='icon-contract'></i>
</div>
</div>
</div>
<div id="mobilePaneList">
<ul id="mobileList" class="mobileTileList"></ul>
<div class="noFeature">
<span class="noFeatureText">
<!--There are no features within the current map extent.
Click on the home button to return to the initial extent.-->
</span>
</div>
</div>
<div id="mobileFeature">
<div class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
</div>
<div id="mobileSupportedLayersView"></div>
<div id="mobilePaneFader"></div>
</div>
<div id="whiteOut">
<img id="loader" alt="loading" src="resources/images/loader/loader.gif"/>
</div>
<!-- Fatal error box -->
<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" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/IconSpecs.js"></script>
<script type="text/javascript" src="lib/common/helper_functions.js"></script>
<script type="text/javascript" src="lib/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="lib/idangerous.swiper.js"></script>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="//js.arcgis.com/3.14/"></script>
<script type="text/javascript" src="lib/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="app/js/main.js"></script>
<!--Google Analytics Start-->
<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>
<!--Google Analytics End-->
</body>
</html>
I sort of figured this out. I downloaded a new template and put in my WebID and now it works. Maybe I tinkered with the original index file too much while trying to figure it out. Thanks for your help.
Travis