index.html
<!doctype><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odyssey.js Scroll</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/scroll.css">
<script src="//cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="layout">
<div class="inner-header">
<div id="header"></div>
</div>
<div id="map_pos">
<div id="map_container">
<div id="map"></div>
</div>
</div>
<div id="content"></div>
<div id="credits">
<span class="title" id="title">Title</span>
<span class="author"><b id="author">By Name using</b> <a href="#">Odyssey.js</a><span>
</span></span></div>
</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>
O.Template({
init: function() {
var baseurl = this.baseurl = '//{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
var map = this.map = L.map('map',{
center: [0, 0],
zoom: 4
});
this.map.scrollWheelZoom.disable();
var basemap = this.basemap = L.tileLayer(baseurl, {
attribution: 'data OSM - map CartoDB'
}).addTo(map);
var story = O.Story()
this.story = story;
this.miniprogressbar = O.MiniProgressBar();
this.edge = O.Edge(
O.Triggers.Scroll().less('map_pos').offset(0),
O.Triggers.Scroll().greater('map_pos').offset(0)
)
},
update: function(actions) {
var self = this;
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 TRIGGER_LINE = this.map.getSize().y + 50;
this.story.addEvent(
this.edge,
O.Parallel(
O.Actions.CSS($('#map_container')).toggleClass('attachTop'),
O.Actions.CSS($('#content')).toggleClass('attachMap'),
O.Actions.Debug().log('attach')
)
)
var content = '';
var slide_ = actions[0];
$('#header').html(slide_.html());
this.story
.addState(
O.Scroll().within($('#header')),
slide_(this)
);
for(var i = 1; i < actions.length; ++i) {
var slide = actions[i];
content += "<div id='s_" + i +"'>" + slide.html() + "</div>";
}
$('#content').html(content);
for(var i = 1; i < actions.length; ++i) {
var slide = actions[i];
this.story.addState(
O.Triggers.Scroll().within('s_' + i).offset(TRIGGER_LINE),
O.Parallel(
slide(this),
this.miniprogressbar.percent(100*i/(actions.length - 1))
)
)
}
if(window.scrollY === 0) {
this.story.go(0);
}
}
});
</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 id="md_template" type="text/template">```
-title: "Odyssey example FTW"
-author: "CartoDB"
```
#Your first odyssey.js story
```
- center: [37.7620, -122.4385]
- zoom: 9
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
```
Move the map around and save the position by clicking on "ADD > Move map to the current position". As you can see, now we are highlighting San Francisco.
Then add here the description for your slide so it's shown on the left side box.
#How to add more states
```
- center: [40.7348, -73.9970]
- zoom: 9
L.marker([40.7348, -73.9970]).actions.addRemove(S.map)
```
By adding new [Markdown] (//daringfireball.net/projects/markdown/]) h1 elements (#) you add new states to your story.
#Adding images to your story
```
- center: [40.7365, -73.9982]
- zoom: 13
```
By default, images are also supported.
#Exporting your story
```
- center: [40.4469, -28.5645]
- zoom: 3
```
You have different options for exporting your odyssey.js visualization. You can either embed this using an iframe, publishing with a click on bl.ocks or just share the URL of this visualization.
If you want to customize it further, you can download the generated source code by clicking on the button below.
#Advanced users
Check out our [documentation](//docs.url) to learn how to use odyssey to create more custom things. It's crazy the amount of cool things that can be done with the library.
Also if you are a developer, take a look at our contributing guideline so you can push code to the actual library.
Cheers!
</script></body></html>