CINXE.COM
<!DOCTYPE html> <html> <head> <title></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="fragment" content="!"> <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/tpl/viewer/icons/favicon.ico"> <link type="image/ico" rel="icon" href="resources/tpl/viewer/icons/favicon.ico"> <!-- To correctly reference your Map Series 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 - see https://developerscorner.storymaps.arcgis.com/grow-your-story-maps-audience-with-open-graph-tags-b7639cb65d5c --> <meta name="description" content="This story map was created with the Story Map Series application in ArcGIS Online."> <!-- Facebook sharing --> <meta property="og:type" content="article"/> <meta property="og:title" content="Story Map Series"/> <meta property="og:description" content="This story map was created with the Story Map Series application in ArcGIS Online."/> <meta property="og:image" content="https://www.arcgis.com/apps/MapSeries/resources/common/icons/esri-globe.png"/> <!-- This application is released under the Apache License V2.0 by Esri https://www.esri.com/ Checkout the project repository on GitHub to access source code, latest revision, developer documentation, FAQ and tips https://github.com/Esri/map-series-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 Map Series builder appid: "8432aac3a2e1469a99a2bfb8ca73bd7e", // Optionally to secure Series'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 use the appid URL parameter, configure authorizedOwners to reference // members whose stories can be viewed by this storytelling app. // To authorize stories owned by... // specific members: use ["member"] or ["member1", "member2", ...] // any ArcGIS member: use ["*"] // any member of one or more organizations: use ["[orgID]"] or ["[orgID1]", "[orgID2]", ...] (Note the use of brackets in this case, e.g., ["[nzS0F0zdNLvs7nc8]"]) // You can get your orgID by going to My Organization and clicking Find...The most viewed items in the organization. // Your orgID will be shown in the search box. 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/MapSeries/ or /apps/MapSeries/. // 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: '1.7.3', pathJSAPI: '//js.arcgis.com/3.20/' }; </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" style="height: 0px;"> <!-- Mobile header --> <div id="headerMobile" class="headerMobile mobileView"> <div class="header"> <div class="titleArea"> <span class="glyphicon glyphicon-th-list menu-btn"></span> <div class="title"></div> </div> <div class="rightArea"> <span class="glyphicon glyphicon-share share-btn share-all"></span> </div> </div> <div class="menu"></div> </div> <!-- Desktop header --> <div id="headerDesktop" aria-hidden="true"> <div class="rightArea"> <div class="linkSocialContainer"> <span class="error-status"> <button class="btn btn-xs btn-warning check-story"></button> <button class="btn btn-xs btn-warning share-story"></button> </span> <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"></i> <i class="shareIcon blackHover share_twitter icon-twitter"></i> <i class="shareIcon blackHover share_bitly icon-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"> <table class="containerPanelInner"> <tr> <!-- Side Accordion panel --> <td id="accordionPanel" class="accordionPanel"> <div class="content textEditorContent"></div> <div class="builder builder-content-panel"> <div class="builder-content-panel-group builder-add"> <div class="builder-btn"></div> <div class="builder-lbl"></div> </div> <div class="builder-content-panel-group builder-organize"> <div class="builder-btn"></div> <div class="builder-lbl"></div> </div> </div> <div class="builder-mask"></div> </td> <!-- Main Stage --> <td id="mainStagePanel"> <div id="mainStagePanelInner"> <!-- Maps and media are injected here --> <div class="medias"></div> <!-- Loading --> <div id="mainStageLoadingIndicator" class="loadingIndicator"> <img src="resources/tpl/viewer/icons/loading-light.gif" /> </div> <!-- Mobile info button --> <div id="mobileInfoBtn" class="mobileInfoBtn"></div> <!-- Builder --> <div id="builderQuotes"></div> <div id="builderLanding"></div> <div id="builderHelp" class="centerAlignOnFloat"></div> <!-- Autoplay --> <div id="autoplay" class="autoplay"></div> </div> <!-- Description and legend floating panel --> <div id="descLegendPanel" class="descLegendPanel" tabindex="0"> <div class="descLegendPanelInner"> <div class="backdrop"></div> <div class="descriptions textEditorContent"></div> <div class="legends" aria-hidden="true"></div> <div class="builder-mask"></div> </div> </div> </td> </tr> </table> </div> <!-- Mobile footer --> <div id="footerMobile" class="footerMobile mobileView mainViewBelowMap"> <!-- Mobile view footer is injected here --> </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; } </style> <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> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-102755470-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>