alexanno/index.html

## 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="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>
	<!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>