Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/index.html

Created December 3, 2014 16:59
Show Gist options
  • Save clhenrick/5efb058ff8db200dca54 to your computer and use it in GitHub Desktop.
Save clhenrick/5efb058ff8db200dca54 to your computer and use it in GitHub Desktop.
Download ZIP
odyssey.js & cartodb.js testing
Raw
index.html
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bushwick Community Map Intro</title>
<meta name="description" content="An introduction to the Bushwick Community Map">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
<link rel="stylesheet" href="http://cartodb.github.io/odyssey.js/sandbox/css/slides.css">
<script src="http://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="test" style="position:absolute; width:200px; height:200px; background:#FFF; top:0; right:0; z-index: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">Bushwick Community Map Introduction</span>
<span class="author"><strong id="author">By @clhenrick using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
</span></span></div>
<!-- JavaScript libraries -->
<!-- <script src="../js/cartodb.js"></script>
<script src="../js/odyssey.js"></script> -->
<!-- Javascripts -->
<script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="http://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);
}
});
});
var test = O.Action(function() {
$('#test').append('<p>bla bla bla</p>');
console.log('hey');
});
function click(el) {
var element = O.Core.getElement(el);
var t = O.Trigger();
// TODO: clean properly
function click() {
// console.log(el);
t.trigger();
}
if (element) element.onclick = click;
return t;
}
O.Template({
init: function() {
var seq = O.Triggers.Sequential();
// O.Story().addState(O.Triggers.Sequential().step(1), function(){
// console.log('yo!');
// });
var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
var map = this.map = L.map('map').setView([40.6941, -73.9162], 14);
var basemap = this.basemap = L.tileLayer(baseurl, {
attribution: 'data OSM - map CartoDB'
}).addTo(map);
// enanle keys to move
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;
// var hideDivAction = O.Action(function() {
// console.log('hey');
// });
// // this hides #element when right key is pressed
// this.story.addAction(O.Keys().right(), hideDivAction);
// console.log(O.Keys().right());
this.seq = seq;
this.slides = slides;
this.progress = O.UI.DotProgress('dots').count(0);
// this.story.addState(O.Keys().right(), test() );
},
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 || 'http://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
this.basemap.setUrl(this.baseurl);
}
if (this.cartoDBLayer && ("http://"+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) { // sendCode debounce < vis loader
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) {
// update footer title and author
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);
// create new story
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 test = function() {
// return O.Action({
// enter: function() {
// // console.log('enter');
// $('#test').html('<p>Hello</p>');
// },
// exit: function() {
// // console.log('exit')
// $('#test').html('<p>Goodbye</p>');
// }
// });
// };
var actions = O.Parallel(
this.slides.activate(i),
slide(this),
this.progress.activate(i),
test,
resizeAction
);
actions.on("finish.app", function() {
adjustSlides();
});
this.story.addState(
this.seq.step(i),
actions
);
} // end for loop
this.story.go(this.seq.current());
console.log(this.seq.current());
},
changeSlide: function(n) {
this.seq.current(n);
}
});
</script>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>
<script id="md_template" type="text/template">```
-title: "The Bushwick Community Map"
-author: "@clhenrick"
-vizjson: "http://chenrick.cartodb.com/api/v2/viz/f4cbc5ac-688d-11e4-957b-0e9d821ea90d/viz.json"
-baseurl: "http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg"
```
#The Bushwick Community Map
```
- center: [40.6941, -73.9162]
- zoom: 15
L.marker([40.6941, -73.9162]).actions.addRemove(S.map)
```
## Introduction
bla bla bla
#Here's another slide!
```
- center: [40.7348, -73.9970]
- zoom: 14
L.marker([40.7348, -73.9970]).actions.addRemove(S.map)
```
Lorem Ipsum something bla bla bla
<script>alert("hi!");</script>
#Bla Bla Bla
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment