AnsweredAssumed Answered

Hosted Shortlist Story Map Not Displaying

Question asked by ethanunzicker_ECGISAB on Oct 24, 2016
Latest reply on Oct 24, 2016 by MidnightYell2003

I'm self-hosting a Shortlist so I customize a few things. However the application won't fully load and just displays the broken image icon. 

Here's a link to where it should be displaying, but it's not.

Heres a link to the ArcGIS hosted version, which works just fine.

 

Here's my index.html `<!DOCTYPE html>

 

 

 

 

    <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="//resources.esri.com/favicon.ico">     <link type="image/ico" rel="icon"  href="//resources.esri.com/favicon.ico">      <!--         To correctly reference your Shortlist in search engine:          - create and fill out extensively an ArcGIS Online item that link to your final application          - edit the following four tags as well as the title tag above on line 4     -->     <meta name="description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online.">      <!-- 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 Story Map Shortlist application in ArcGIS Online."/>     <meta property="og:image" content="resources/common/icons/esri-globe.png"/>      <!--         This application is released under the Apache License V2.0 by Esri http://www.esri.com/         Checkout the project repository on GitHub to access source code, latest revision, developer documentation, FAQ and tips         https://github.com/Esri/shortlist-storytelling-template-js     -->      <script type="text/javascript">         //-------------------------------------------------------------------------------------------         //   Application configuration (ignored on ArcGIS Online, Portal and during development)         //-------------------------------------------------------------------------------------------         var configOptions = {             // Enter an application ID created through the Shortlist builder             appid: "b8d0e8bea0a24152bb472b3ab9540a59",             // Optionally to secure Shortlist's access, use an OAuth application ID (example: 6gyOg377fLUhUk6f)             // User will need to sign-in to access the viewer even if your application is public             oAuthAppId: "",             // Optionally to be able to use the appid URL parameter, configure here the list of application author             //  whose application are allowed to be viewed by this Shortlist deployment             // This is the Portal username of the Shortlist owner (e.g. ["user1"], ["user1", "user2"])             authorizedOwners: ["*"]         };         // Optionally sharing and proxy URLs can be configured in app/config.js. This is only required         //  when the webmap is not hosted on ArcGIS Online or a Portal for ArcGIS instance and the application isn't deployed as /home/Shortlist/ or /apps/Shortlist/.         // Optionally Bing Maps key, Geometry and Geocode service's URLs can be configured in app/config.js. This is only required         //  if the Organization or Portal for ArcGIS instance default configuration has to be overwritten.     </script>      <!--          Edit below at your own risk      -->      <script type="text/javascript">         var app = {             version: '2.0.1',             pathJSAPI: '//js.arcgis.com/3.18/'         };     </script>  </head> <body class="claro">     <style>         /* CUSTOM CSS RULES */     </style>      <!-- Builder top panel is injected here -->     <div id="builderPanel" class="hide mainViewAboveMap"></div>      <!-- Header -->     <div id="header" class="mainViewAboveMap">         <!-- Desktop header -->         <div id="headerDesktop" aria-hidden="true">             <div class="rightArea">                 <div class="linkSocialContainer">                     <button type="button" class="switchBuilder btn btn-xs btn-primary" tabindex="-1"></button>                     <span class="linkContainer"></span>                     <span class="shareBtns">                         <i class="shareIcon blackHover share_facebook icon-facebook-squared" title="Share on Facebook"></i>                         <i class="shareIcon blackHover share_twitter icon-twitter" title="Share on Twitter"></i>                         <i class="shareIcon blackHover share_bitly icon-link" title="Share a short link"></i>                     </span>                 </div>                 <div class="logoContainer">                     <table class="logoContainerInner">                         <tr>                             <td class="logoWrapper">                                 <a class="logoLink" target="_blank" tabindex="-1">                                     <img class="logoImg"/>                                 </a>                             </td>                         </tr>                     </table>                 </div>             </div>             <div class="textArea">                 <h1 class="title" tabindex="0"></h1>                 <h2 class="subtitle" tabindex="0"></h2>             </div>             <div class="builder-mask"></div>         </div>     </div>      <!-- Tab/bullet navigation bar -->     <div id="nav-bar" class="mainViewAboveMap"></div>      <!-- Content -->     <div id="contentPanel" class="mobileView">         <div id="mobileBookmarksCon">             <div id="mobileBookmarksToggle"><p id="mobileBookmarksTogText"></p></div>             <div id="mobileBookmarksDiv"></div>         </div>          <div id="mainStagePanel">              <div class="needsclick" id="map">                 <div id="search"></div>             </div>             <div id="builderLandingOverlay"></div>             <!--<div id="builderQuotes"></div>-->             <div id="builderLanding"></div>         </div>         <!--<div id="testPanel" class="testPanel"></div>-->          <!-- Mobile View -->         <div id="mobileThemeBar">             <div id="navThemeLeft">                 <div class="detail-btn ion-chevron-left" style="outline: none;"></div>             </div>             <div id="navThemeRight">                 <div class="detail-btn ion-chevron-right" style="outline: none;"></div>             </div>             <div id="mobileThemeSliderContainer"  class="swiper-container">                 <div id="mobileThemeBarSlider" class="swiper-wrapper"></div>             </div>         </div>         <div id="mobilePaneList">             <ul id="mobileList" class="mobileTileList" data-role="listview"></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="mobileSupportedLayersView"></div>          <div id="mobilePaneFader"></div>      </div>     </div>      <!-- Loading -->     <style>         #loadingOverlay {             position: absolute;             top: 0;             left: 0;             z-index: 1100;             width: 100%;             height: 100%;             overflow: hidden;             background-color: #E5E5E5;             -webkit-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);             -moz-box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);             box-shadow: inset 0px 0px 82px 19px rgba(0,0,0,0.3);         }          @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }         @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }         @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }         @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }         @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }          @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }         @-moz-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }         @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }         @-ms-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }         @-o-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }          #loadingOverlay.fadeOut {             -webkit-animation: fadeout 1.1s;             -moz-animation: fadeout 1.1s;             -ms-animation: fadeout 1.1s;             -o-animation: fadeout 1.1s;             animation: fadeout 1.1s;             -webkit-animation-fill-mode:forwards;             -moz-animation-fill-mode:forwards;             animation-fill-mode:forwards;         }          #loadingIndicator {             position: fixed;             top: 50%;             left: 50%;             z-index: 1101;         }          .loadingIndicator {             margin-left: -17px;             margin-top: -20px;         }          /*          * Inlining of resources/tpl/viewer/font/font/css/fontello.css and animation.css          */         @font-face{font-family:'fontello';src:url(resources/tpl/viewer/font/font/fontello.eot?22851922);src:url(resources/tpl/viewer/font/font/fontello.eot?22851922#iefix) format("embedded-opentype"),url(resources/tpl/viewer/font/font/fontello.woff?22851922) format("woff"),url(resources/tpl/viewer/font/font/fontello.ttf?22851922) format("truetype"),url(resources/tpl/viewer/font/font/fontello.svg?22851922#fontello) format("svg");font-weight:400;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.icon-spin1:before{content:'\e800'}.icon-link:before{content:'\e801'}.icon-facebook-squared:before{content:'\e802'}.icon-twitter:before{content:'\e803'}.animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}      </style>     <div id="mobileBuilderOverlay"></div>     <div id="loadingOverlay"></div>     <div id="loadingIndicator" class="loadingIndicator">         <img src="resources/tpl/viewer/icons/loading-light.gif" />     </div>     <div id="loadingMessage"></div>      <!-- Share dialog -->     <div class="modal fade shareDialog" id="shareDialog" role="dialog" data-backdrop="static" tabindex="-1"></div>      <!-- Builder views are injected here -->     <div id="builder-views"></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="app/main-config.js"></script>      <script type="text/javascript">         require(["dojo/topic"], function(topic) {             // The application is ready             topic.subscribe("tpl-ready", function(){                 /* */             });         });     </script> </body>

'

Outcomes