index.html
<!doctype><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odyssey.js Slides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="//cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="icon" type="image/png" href="//cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="stylesheet" href="//cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
<link rel="stylesheet" href="//cartodb.github.io/odyssey.js/sandbox/css/slides.css">
<script src="//cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<div id="slides_container" style="display:block;">
<div id="dots"></div>
<div id="slides"></div>
<ul id="navButtons">
<li><a class="prev"></a></li>
<li><a class="next"></a></li>
</ul>
</div>
<div id="credits">
<span class="title" id="title">Title</span>
<span class="author"><strong id="author">By Name using</strong> <a href="//cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
</span></span></div>
<script src="//cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="//cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script>
<script>
var resizePID;
function clearResize() {
clearTimeout(resizePID);
resizePID = setTimeout(function() { adjustSlides(); }, 100);
}
if (!window.addEventListener) {
window.attachEvent("resize", function load(event) {
clearResize();
});
} else {
window.addEventListener("resize", function load(event) {
clearResize();
});
}
function adjustSlides() {
var container = document.getElementById("slides_container"),
slide = document.querySelectorAll('.selected_slide')[0];
if (slide) {
if (slide.offsetHeight+169+40+80 >= window.innerHeight) {
container.style.bottom = "80px";
var h = container.offsetHeight;
slide.style.height = h-169+"px";
slide.classList.add("scrolled");
} else {
container.style.bottom = "auto";
container.style.minHeight = "0";
slide.style.height = "auto";
slide.classList.remove("scrolled");
}
}
}
var resizeAction = O.Action(function() {
function imageLoaded() {
counter--;
if (counter === 0) {
adjustSlides();
}
}
var images = $('img');
var counter = images.length;
images.each(function() {
if (this.complete) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});
function click(el) {
var element = O.Core.getElement(el);
var t = O.Trigger();
function click() {
t.trigger();
}
if (element) element.onclick = click;
return t;
}
O.Template({
init: function() {
var seq = O.Triggers.Sequential();
var baseurl = this.baseurl = '//{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
var map = this.map = L.map('map').setView([0, 0.0], 4);
var basemap = this.basemap = L.tileLayer(baseurl, {
attribution: 'data OSM - map CartoDB'
}).addTo(map);
O.Keys().on('map').left().then(seq.prev, seq)
O.Keys().on('map').right().then(seq.next, seq)
click(document.querySelectorAll('.next')).then(seq.next, seq)
click(document.querySelectorAll('.prev')).then(seq.prev, seq)
var slides = O.Actions.Slides('slides');
var story = O.Story()
this.story = story;
this.seq = seq;
this.slides = slides;
this.progress = O.UI.DotProgress('dots').count(0);
},
update: function(actions) {
var self = this;
if (!actions.length) return;
this.story.clear();
if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
this.baseurl = actions.global.baseurl || '//0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
this.basemap.setUrl(this.baseurl);
}
if (this.cartoDBLayer && ("//"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) {
this.map.removeLayer(this.cartoDBLayer);
this.cartoDBLayer = null;
this.created = false;
}
if (actions.global.vizjson && !this.cartoDBLayer) {
if (!this.created) {
cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
self.map.fitBounds(vizjson.bounds);
cartodb.createLayer(self.map, vizjson)
.done(function(layer) {
self.cartoDBLayer = layer;
var sublayer = layer.getSubLayer(0),
layer_name = layer.layers[0].options.layer_name,
filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";
sublayer.setSQL("SELECT * FROM "+layer_name+filter)
self.map.addLayer(layer);
self._resetActions(actions);
}).on('error', function(err) {
console.log("some error occurred: " + err);
});
});
this.created = true;
}
return;
}
this._resetActions(actions);
},
_resetActions: function(actions) {
var title_ = actions.global.title === undefined ? '' : actions.global.title,
author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';
document.getElementById('title').innerHTML = title_;
document.getElementById('author').innerHTML = author_;
document.title = title_ + " | " + author_ +' Odyssey.js';
var sl = actions;
document.getElementById('slides').innerHTML = ''
this.progress.count(sl.length);
for(var i = 0; i < sl.length; ++i) {
var slide = sl[i];
var tmpl = "<div class='slide' style='diplay:none'>";
tmpl += slide.html();
tmpl += "</div>";
document.getElementById('slides').innerHTML += tmpl;
this.progress.step(i).then(this.seq.step(i), this.seq)
var actions = O.Parallel(
this.slides.activate(i),
slide(this),
this.progress.activate(i),
resizeAction
);
actions.on("finish.app", function() {
adjustSlides();
});
this.story.addState(
this.seq.step(i),
actions
)
}
this.story.go(this.seq.current());
},
changeSlide: function(n) {
this.seq.current(n);
}
});
</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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-20934186-21', 'cartodb.github.io');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="//fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>
<script id="md_template" type="text/template">```
-baseurl: "//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
-title: "Because Snow"
-author: "Michelle Chandra"
```
#Because Snow
```
- center: [40.696355,-74.016609]
- zoom:14
L.marker([40.696355,-74.016609]).actions.addRemove(S.map)
```
One of the most disastrous snow storms in New York City's history struck March 11 - 12, 1888. The city's 6,900 telephone lines went dead, the New York Stock Exchange shut it's doors, and many New Yorkers were stranded in cold train cars above ground. With transportation at a halt, many people walked from Manhattan to Brooklyn via a large floe in the frozen East River which formed a natural ice bridge.
Spurred by the disaster, New York City moved it's subway and communication systems below ground.
Image Credit: New York Public Library
#Merry Snow Day
```
- center: [40.783333,-73.966667]
- zoom:14
L.marker([40.783333,-73.966667]).actions.addRemove(S.map)
```
The second largest snow storm in New York City's history arrived without warning post-Christmas on December 26, 1947. The city was blanketed by 20.9 inches of snow over 18 hours, bringing skiers and horse back riders to Central Park.
It is estimated that 106 million tons of snow were removed, and 9,800 autos dug out from the snow.
Image Credit: New York Public Library
#The Biggest One of them All
```
- center: [40.75773,-73.985708]
- zoom:15
L.marker([40.75773,-73.985708]).actions.addRemove(S.map)
```
Although technically not a blizzard, New York City's largest snow storm is a recent one dumping 26.9 inches February 11 - 12, 2006. Despite the severity of the storm, Broadway shows remained as scheduled while thousands of city workers took to the streets to keep them clear.
</script></body></html>