Skip to content

Instantly share code, notes, and snippets.

@alexanno alexanno/index.html
Last active Oct 29, 2015

Embed
What would you like to do?
<!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="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/scroll.css">
<script src="http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="layout">
<!--<div class="progress-bar"></div>-->
<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" style="display:none;">Title</span>
<span class="author" style="display:none;"><b id="author">By Name using</b> <a href="#">Odyssey.js</a><span>
</span></span></div>
</div> <!-- layout -->
<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>
O.Template({
init: function() {
var baseurl = this.baseurl = 'http://{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();
// trigger when map_pos go out of the screen
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 || '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 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')
)
)
// create content
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);
// first slide is the header, skip it
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: "Nomadekart"
-author: "Nomaden"
-baseurl: "https://a.tiles.mapbox.com/v4/mapbox.pirates/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWxleGFubm8iLCJhIjoiNTE3MUZBUSJ9.AGF-fcPSymmgoI3knRPOlg"
-vizjson:"https://alexanno.cartodb.com/api/v2/viz/d7422a90-7e0c-11e5-aa22-0ea31932ec1d/viz.json"
```
#GRATULERER MED DAGEN!
```
- center: [55.6782, 12.5883]
- zoom: 12
```
Gaven er et oppdagelseskart - et Nomadekart med påfølgende lommepenger. Følg ruten og dra på oppdagelsesferd i hipsterstrøk og andre ferdselssteder i København. Tar du båt må du reise lenge.
Lommepenger finner du i pungen. Åpne den ved de stoppene du finner best. Bruk så alt på det du finner mest. Lykke til og ta med deg konen på det meste!
De bestes ønskeder med 30 årsdagen fra The Nossums (Peter, Marit og Alexander)
[Skal du ha et stort kart kan du trykke her]
(https://alexanno.cartodb.com/viz/d7422a90-7e0c-11e5-aa22-0ea31932ec1d/embed_map)
#Papirøen
```
-center: [55.679444, 12.597986]
-zoom: 18
```
Et dejlig sted for frokost. Tacotralle, vintage eller champagnebar. Alt er på plass!
#Kongelige palass
```
-center: [55.6763, 12.5805]
-zoom: 18
```
En hyggelig turistdestinasjon med massiv sikkerhet, café og skulpturer. Flott utsikt på toppen av tårnet!
#Ølbutikken
```
-center: [55.670319, 12.55668]
-zoom: 18
```
En ganske alminnelig liten butikk med et ganske ualminnelig utvalg øl og hyggelig betjening. Øllet kan ligesågodt drikkes på stedet.
#Manfreds
```
-center: [55.693272, 12.54342]
-zoom: 18
```
En uformel restaurant med 7-deleretter til en billig penge. Også vinbar for de tørste ganer.
#Assistentens Kirkegård
```
-center: [55.6888,12.5515]
-zoom: 18
```
Et grøntareal for romantiske piknik's og en sup sprudlende rosé. Ta en tit rundt og de finner H.C. Andersens hvileplass. Pas så på så i ikke havner i hans plass din hvite voksne svane!
#The Italian
```
-center: [55.677341, 12.56779]
-zoom: 18
```
En ganske alminnelig Italiensk restaurant når hipsterdraget har stilnet.
#Mikkeller
```
-center: [55.671983, 12.557691]
-zoom: 18
```
Trendy ølbar fra ølguruen Mikkeller. Fullt stort sett hele tiden. Forvent høy ølnerdefaktor.
#NBH
```
-center: [55.670631, 12.55841]
-zoom: 18
```
Pizza og prostituerte på NBH i Istedgade
#Halmtorvet
```
-center: [55.6697,12.5606]
```
Rik mengde med café, bar, kultur, ukultur, konserter, debatter, loppemarked
#Tante-T
```
-center: [55.667782, 12.55778]
-zoom: 18
```
Tesalong for menn. Dejlig teutvalg og kliss i kødbyen. Perfekt start på en lang dag og aften.
#NoHo
```
-center: [55.667648, 12.55797]
-zoom: 18
```
Cocktailbar med hipsterpreg. Bestill det vanskeligste og sett fyr på deg selv mens du drikker fra sugerør.
#Mesteren og Lærlingen
```
-center: [55.667728, 12.55894]
-zoom: 18
```
Bar med gooood vibes
#Fermentoren
```
-center: [55.667881, 12.55648]
-zoom: 18
```
Ølbar med fokus på surøl og andre fermenterte matvarer. Et rett hipt lite stället.
#Mother
```
-center: [55.668579, 12.5576]
-zoom: 18
```
Meget dejlig pizza og italiensk i kødbylokaler.
#Bollyfood
```
-center: [55.668861, 12.55851]
-zoom: 18
```
Stilig indisk sjappe. Raita og rause porsjoner. En massevis av sauser og dipper. Noen sterke, noen søte, noen eksplosive. Du aner aldri. Bestiller du feil lassi blir du sett rart på og får en riktig lassi.
#Nose2Tail
```
-center: [55.66864, 12.55945]
-zoom: 18
```
Stilig restaurantkonsept. Bruker **alle** delene av dyret - fra snute til hale. Bør introduseres med omhu for sarte sjeler. Maten er nok uansett smakelig. Er blitt hipt, dyrt og festlig - reserver bord først - eller ta en chancy.
#GRATULERER MED DAGEN!
```
- center: [55.6790, 12.5670]
- zoom: 10
```
![](https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/PS_Kr%C3%B8yer_-_Hip_hip_hurra%21_Kunstnerfest_p%C3%A5_Skagen_1888.jpg/294px-PS_Kr%C3%B8yer_-_Hip_hip_hurra%21_Kunstnerfest_p%C3%A5_Skagen_1888.jpg)
HIPP HIPP HURRA!
----------------</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.