Skip to content

Instantly share code, notes, and snippets.

@tedrick

tedrick/StoryMapIndexWithDataDrivenText.html

Created May 16, 2016 13:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tedrick/5052e690f9a8a0088ab5ab8e229ad152 to your computer and use it in GitHub Desktop.
Save tedrick/5052e690f9a8a0088ab5ab8e229ad152 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
StoryMapIndexWithDataDrivenText.html
<!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 Journal 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 Journal application in ArcGIS Online.">
<!-- Facebook sharing -->
<meta property="og:type" content="article"/>
<meta property="og:title" content="Story Map Journal"/>
<meta property="og:description" content="This story map was created with the Story Map Journal application in ArcGIS Online."/>
<meta property="og:image" content="http://www.arcgis.com/apps/MapJournal/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/map-journal-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 Journal builder
appid: "<STORY MAP APP ID>",
// Optionally to secure Journal'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/MapJournal/ or /apps/MapJournal/.
// 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.1',
pathJSAPI: '//js.arcgis.com/3.16/'
};
</script>
</head>
<body class="claro">
<style>
/* CUSTOM CSS RULES */
</style>
<!-- Builder top panel is injected here -->
<div id="builderPanel" class="hide mainViewAboveMap"></div>
<!-- Content -->
<div id="contentPanel" class="mobileView">
<table class="containerPanelInner">
<tr>
<!-- Text panel of the Side Panel layout -->
<td id="sidePanel">
<div id="sidePanelInner" class="mainViewSideMap sidePanel sectionPanel">
<div class="navDots vertical">
<!-- navigation dots -->
</div>
<div class="header" aria-hidden="true">
<div class="linkSocialContainer">
<span class="linkContainer"></span>
<span class="shareBtns">
<i class="shareIcon blackHover share_facebook icon-facebook-squared" tabindex="-1"></i>
<i class="shareIcon blackHover share_twitter icon-twitter" tabindex="-1"></i>
<i class="shareIcon blackHover share_bitly icon-link" tabindex="-1"></i>
<button type="button" class="switchBuilder btn btn-xs btn-primary" tabindex="-1"></button>
</span>
</div>
<table class="logoContainer">
<tr>
<td class="logoWrapper">
<a class="logoLink" target="_blank" tabindex="-1">
<img class="logoImg"/>
</a>
</td>
</tr>
</table>
</div>
<div class="appTitle" tabindex="-1" aria-hidden="true"></div>
<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>
<div class="separator"></div>
<div class="sectionsWrapper">
<div class="panelEditBtn">
<div class="panelEditBtnInner"></div>
</div>
<div class="sections">
<!-- sections injected here -->
</div>
</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="resizer"></div> -->
<div class="scroll">
<div class="scrollInner" data-toggle="tooltip"></div>
</div>
<div class="builder-mask"></div>
<div class="firstAddExplain"></div>
</div>
</td>
<!-- Map -->
<td id="mainStagePanel">
<div id="mainStagePanelInner">
<div class="medias">
<!-- Maps and media injected here -->
</div>
<div id="mainStageLoadingIndicator" class="loadingIndicator">
<img src="resources/tpl/viewer/icons/loading-light.gif" />
</div>
<!-- Back button -->
<div class="mediaBackContainer">
<div class="backButton">
<div class="backArrow"></div>
<span class="backLbl"></span>
</div>
</div>
<!-- Builder -->
<div id="builderQuotes" class="centerAlignOnFloat"></div>
<div id="builderLanding" class="centerAlignOnFloat"></div>
<div id="builderHelp" class="centerAlignOnFloat"></div>
<div class="firstAddExplain"></div>
<!-- Autoplay -->
<div id="autoplay" class="autoplay"></div>
</div>
</td>
</tr>
</table>
</div>
<!-- /Content -->
<div id="floatingPanel" class="floatingPanel sectionPanel">
<div class="backdrop"></div>
<div class="header" aria-hidden="true">
<div class="linkSocialContainer">
<span class="linkContainer"></span>
<span class="shareBtns">
<i class="shareIcon blackHover share_facebook icon-facebook-squared" title="Share on Facebook" tabindex="-1"></i>
<i class="shareIcon blackHover share_twitter icon-twitter" title="Share on Twitter" tabindex="-1"></i>
<i class="shareIcon blackHover share_bitly icon-link" title="Share a short link" tabindex="-1"></i>
<button type="button" class="switchBuilder btn btn-xs btn-primary" tabindex="-1"></button>
</span>
</div>
<table class="logoContainer">
<tr>
<td class="logoWrapper">
<a class="logoLink" target="_blank" tabindex="-1">
<img class="logoImg"/>
</a>
</td>
</tr>
</table>
</div>
<div class="appTitle" tabindex="-1" aria-hidden="true"></div>
<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>
<div class="separator"></div>
<div class="panelEditBtn">
<div class="panelEditBtnInner"></div>
</div>
<div class="sections">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- sections injected here -->
</div>
</div>
</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="navDots vertical">
<!-- navigation dots -->
</div>
<div class="scroll">
<div class="scrollInner" data-toggle="tooltip"></div>
</div>
<div class="builder-mask"></div>
<div class="firstAddExplain"></div>
</div>
<!-- Mobile -->
<div id="mobileView" class="floatingSwiper">
<div class="swiper-container">
<div class="backdrop"></div>
<div class="embed-btn-container embed-btn-left">
<div class="embed-btn"></div>
</div>
<div class="swiper-wrapper">
<!-- sections injected here -->
</div>
<div class="embed-btn-container embed-btn-right">
<div class="embed-btn"></div>
</div>
</div>
<div class="header">
<div class="backdrop"></div>
<div class="linkSocialContainer">
<span class="linkContainer"></span>
<span class="shareBtns">
<i class="shareIcon share_facebook icon-facebook-squared"></i>
<i class="shareIcon share_twitter icon-twitter"></i>
<i class="shareIcon share_bitly icon-link"></i>
</span>
</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;
}
</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 type="text/javascript">
require(["dojo/topic"], function(topic) {
/*
* Custom Javascript to be executed while the application is initializing goes here
*/
// The application is ready
topic.subscribe("tpl-ready", function(){
/*
* Custom Javascript to be executed when the application is ready goes here
*/
//Dynamic text shim
require(
["esri/tasks/query", "esri/tasks/QueryTask", "dojo/query", "dojo/NodeList-html"],
function(Query, QTask, dQuery){
var config = {
url: <LAYER URL>,
query: "1=1",
fields: [<STAT FIELD(s)>],
dynTextMapping: {
statement: {
field: "datetext",
method:"FIRST",
target: ".dyntext"
}
},
};
var q = new Query();
q.where = config.query;
q.outFields = config.fields;
q.returnGeometry = false;
var qt = new QTask(config.url);
qt.execute(q, function(fSet){
var dataSet = fSet.features.map(function(obj){
return obj.attributes;
});
for (var key in config.dynTextMapping) {
if (!config.dynTextMapping.hasOwnProperty(key)) continue;
var thisAttrSpec = config.dynTextMapping[key];
var thisText = "";
switch (thisAttrSpec.method) {
case "FIRST":
thisText = dataSet[0][thisAttrSpec.field];
break;
case "SUM":
break;
case "AVERAGE":
break;
default:
break;
}
var tNode = dQuery(thisAttrSpec.target).html(thisText);
}
});
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment