Having trouble configuiring Shortlist Story Map: Error WebMapID is not defined

2634
3
Jump to solution
03-18-2016 12:50 PM
TravisGallo
New Contributor II

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:

webmapID is not defined.tiff

Thanks in advance for your help!

0 Kudos
1 Solution

Accepted Solutions
TravisGallo
New Contributor II

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

View solution in original post

0 Kudos
3 Replies
RupertEssinger
Frequent Contributor

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:

http://storymaps.esri.com/templates/shortlist/?webmap=13dd36f4661e4d388833f57f102a56a0&DETAILS_PANEL...

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

0 Kudos
TravisGallo
New Contributor II

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>

0 Kudos
TravisGallo
New Contributor II

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

0 Kudos