Skip to content

Instantly share code, notes, and snippets.

Created June 29, 2014 13:40
Show Gist options
  • Save anonymous/33490542ddc9a0b9f52f to your computer and use it in GitHub Desktop.
Save anonymous/33490542ddc9a0b9f52f to your computer and use it in GitHub Desktop.
Odyssey.js template
<!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="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<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="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="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
</span></span></div>
<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);
}
});
});
function click(el) {
var element = O.Core.getElement(el);
var t = O.Trigger();
// TODO: clean properly
function click() {
t.trigger();
}
if (element) element.onclick = click;
return t;
}
O.Template({
init: function() {
var seq = O.Triggers.Sequential();
var baseurl = this.baseurl = 'http://{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);
// 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;
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 || '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 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 id="md_template" type="text/template">```
-baseurl: "http://api.tiles.mapbox.com/v3/rusty.ik1d19o4/{z}/{x}/{y}.png"
-title: "Odyssey example FTW"
-author: "CartoDB"
-vizjson: "http://rustyb.cartodb.com/api/v2/viz/45f91a24-fa48-11e3-bfbb-0e73339ffa50/viz.json"
```
#OSM Mapathon for Lesotho
```
- center: [-29.5806, 28.2362]
- zoom: 7
```
An [OpenStreetMap](http://www.openstreetmap.org/relation/2093234) **'mapathon'** on the **25th July 2014**, aim's to completely map Lesotho.
The main aim of this project is to aid the physical planners of Lesotho to gain control of their data and do their job more effectively.
We are calling on everyone who can help to help.
#Where is Lesotho?
```
- center: [-29.5806, 28.2362]
- zoom: 9
```
Lesotho is small country completely surrounded by it's neighbor South Africa.
![](http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Flag_of_Lesotho.svg/1200px-Flag_of_Lesotho.svg.png)
#The Capital - Maseru
```
- center: [-29.3139, 27.4773]
- zoom: 14
```
The Capital is located in the west of the country on the border with South Africa and is Lesotho's most populous city.
Maseru is also the most mapped part of the country on OSM. That all changed recently.
#HotOSM to the Rescue - Mafatang
```
- center: [-29.8168, 27.2396]
- zoom: 13
```
Mafatang was the first task to be added to the Hot tasking manager and it has been 80% mapped in just under a month.
One of the main concerns for the planners in Lesotho is half built housing stock.
![](http://i.imgur.com/aW8gBC9.jpg)
#HotOSM Tasks - Mafateng
```
- center: [-29.8168, 27.2396]
- zoom: 14
```
We've been busy mapping for the last few weeks. Our focus has been adding the roads and buildings. Any buildings which appeared as under construction on satellite imagery has been identified by a hotspot on this map .
[HOT Task - Get Mapping](http://tasks.hotosm.org/job/491)
[![Mafateng](http://upload.wikimedia.org/wikipedia/commons/8/8b/Likhoele.jpg)](http://commons.wikimedia.org/wiki/File:Likhoele.jpg#mediaviewer/File:Likhoele.jpg)
*A view of Likhoele Mountain (elevation 6,915 feet)*
#HotOSM Tasks - Hlotse
```
- center: [-28.8665, 28.0510]
- zoom: 14
```
Hlotse is located to the north east of Maseru near the South African border.
[HOT Task - Get Mapping](http://tasks.hotosm.org/job/494)
[![Hlotse](http://upload.wikimedia.org/wikipedia/commons/0/09/Hlotse_central_part.jpg)](http://en.wikipedia.org/wiki/Hlotse#mediaviewer/File:Hlotse_central_part.jpg)
*Central Hlotse*
#HotOSM Tasks - Mohlakeng
```
- center: [-29.5145,27.6445]
- zoom: 14
```
Mohlakeng is located to the south of Maseru.
[HOT Task - Get Mapping](http://tasks.hotosm.org/job/496)
**The mapping task is complete here**.
#HotOSM Tasks - Ha-Foso
```
- center: [-29.26901,27.57480]
- zoom: 14
```
Ha-Foso is located to the north east of Maseru. The first part of mapping Ha-Foso was completed by a team of planners from the Physical planning department and planners from [Fingal County Council](http://www.fingal.ie). This is the area which spawned the OSM work that is ongoing in Lesotho
[HOT Task - Get Mapping](http://tasks.hotosm.org/job/464)
![](https://pbs.twimg.com/media/BgangWHIIAALv_D.jpg)
*Previous Mapping Progress*
#HotOSM Tasks - Qacha's Nek
```
- center: [-30.1116,28.6829]
- zoom: 14
```
Qacha's Nek is located in the east of the country. The current mapping task on HotOSM is now completed. Please keep an eye for our new tasks.
[HOT Task - Get Mapping](http://tasks.hotosm.org/job/492)
[![](http://upload.wikimedia.org/wikipedia/commons/0/09/Qacha%27s_Nek01.jpg)](http://en.wikipedia.org/wiki/Qacha's_Nek#mediaviewer/File:Qacha%27s_Nek01.jpg)
*Previous Mapping Progress*
#Mafateng - Construction Hotspots
```
- center: [-29.8093, 27.2276]
- zoom: 15
```
For a more detailed look at some of the construction hot spots where planners, will focus their efforts in upcoming layout plans. The first example here shows clusters of buildings under construction near the main road.
#Mafateng - Construction Hotspots
```
- center: [-29.8016, 27.2099]
- zoom: 17
```
In our secon example it is clear that the town is developing around it's fringes, as can be seen there is asome some construction activity on the edge of town.
#Lesotho Mapathon 25.7.14 - Help Us!
```
- center: [-29.5806, 28.2362]
- zoom: 9
```
If you would like to keep up to date on preperations please do not hesitate to contact me [@rusty105](https://twitter.com/rusty1052) or follow the [Lesohto Osm Wiki Page](http://wiki.openstreetmap.org/wiki/WikiProject_Lesotho)
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment