matallo · February 12, 2015 15:54
diff --git a/index.html b/index.html
 <!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/sandbox/favicon.png">
  <link rel="icon" type="image/png" href="http://cartodb.github.io/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 moscow_rayons_1 ");
                  sublayer.setCartoCSS("/** simple visualization */  #moscow_rayons_1{ building-fill: #084081; building-height: 5000; [ pop_2013 <= 200000] { building-fill: #0868AC; building-height: 2500; [ pop_2013 <= 150000] { building-fill: #136400; building-height: 1000; [ pop_2013 <= 125000] { building-fill: #7BCCC4; building-height: 500; [ pop_2013 <= 100000] { building-fill: #A8DDB5; building-height: 200; [ pop_2013 <= 75000] { building-fill: #CCEBC5; building-height: 100; [ pop_2013 <= 50000] { building-fill: #E0F3DB; building-height: 50; [ pop_2013 = 25000] { building-fill: #F7FCF0; building-fill-opacity: 0.6; } [ pop_2013 = 0] { building-fill: #EEE; building-fill-opacity: 0.6; } } } } } } [ pop_2013= null] { building-fill: #ccc; building-fill-opacity: 0.6; building-height: 0; } } }");

                  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: "https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24"
 -title: "Moscow Residential Market"
 -author: "RILOS"
 -cartodb_filter: "column='pop_2013'"
 -vizjson: "http://rilosmaps.cartodb.com/api/v2/viz/5be89466-ac74-11e4-8639-0e018d66dc29/viz.json"
 ```
 
 #Moscow City
 ## Micro-Analysis
 ```
 L.marker([55.7488, 37.6007]).actions.addRemove(S.map)
 - center: [55.7488, 37.6007]
 - zoom: 8
 ```
 
 ![Moscow](http://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_City_2013.jpg)
 
 >Moscow Residential Market in 2015
 >
 >1. First Info
 >2. Second Info
 
 #Focus on Baumansky
 
 ```
 L.marker([55.7663, 37.6650]).actions.addRemove(S.map)
 - center: [55.7663, 37.6650]
 - zoom: 14
 ```
 
 ![Baumansky](http://sugarproperty.ru//content/112/41033/95283.jpg.resized_bbb2.jpg)
 
 >Baumansky rayon data in 2015
 >
 >1. First Info
 >2. Second Info 

 #Focus on Sokolniki
 
 ```
 - center: [55.7897, 37.6795]
 - zoom: 14
 L.marker([55.7897, 37.6795]).actions.addRemove(S.map)
 ```
 
 ![Sokolniki](http://ad009cdnb.archdaily.net/wp-content/uploads/2014/07/53b57bb9c07a8005ce000120_ten-in-shortlist-to-redesign-moscow-s-sokolniki-park_13989827689_4f069623eb_b-530x351.jpg)
 
 >Sokolniki rayon data in 2015
 >
 >1. First Info
 >2. Second Info 
 
 #More data needed?
 ```
 - center: [55.7619, 37.6369]
 - zoom: 17
 L.marker([55.7619, 37.6369]).actions.addRemove(S.map)
 ```

 ## Additional geography required?
 
 ![Rilos](http://rilos.ru/templates/jv_visionvantage/images/logo.png)
 
 >Contact us for further enquiries at RILOS
 >
 >1. +7 499 638 24 14 
 >2. [email protected]
 >3. www.rilos.ru
 </script></body></html>
	<!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/sandbox/favicon.png">
	<link rel="icon" type="image/png" href="http://cartodb.github.io/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 moscow_rayons_1 ");
	sublayer.setCartoCSS("/** simple visualization */ #moscow_rayons_1{ building-fill: #084081; building-height: 5000; [ pop_2013 <= 200000] { building-fill: #0868AC; building-height: 2500; [ pop_2013 <= 150000] { building-fill: #136400; building-height: 1000; [ pop_2013 <= 125000] { building-fill: #7BCCC4; building-height: 500; [ pop_2013 <= 100000] { building-fill: #A8DDB5; building-height: 200; [ pop_2013 <= 75000] { building-fill: #CCEBC5; building-height: 100; [ pop_2013 <= 50000] { building-fill: #E0F3DB; building-height: 50; [ pop_2013 = 25000] { building-fill: #F7FCF0; building-fill-opacity: 0.6; } [ pop_2013 = 0] { building-fill: #EEE; building-fill-opacity: 0.6; } } } } } } [ pop_2013= null] { building-fill: #ccc; building-fill-opacity: 0.6; building-height: 0; } } }");

	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: "https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24"
	-title: "Moscow Residential Market"
	-author: "RILOS"
	-cartodb_filter: "column='pop_2013'"
	-vizjson: "http://rilosmaps.cartodb.com/api/v2/viz/5be89466-ac74-11e4-8639-0e018d66dc29/viz.json"
	```

	#Moscow City
	## Micro-Analysis
	```
	L.marker([55.7488, 37.6007]).actions.addRemove(S.map)
	- center: [55.7488, 37.6007]
	- zoom: 8
	```

	![Moscow](http://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_City_2013.jpg)

	>Moscow Residential Market in 2015
	>
	>1. First Info
	>2. Second Info

	#Focus on Baumansky

	```
	L.marker([55.7663, 37.6650]).actions.addRemove(S.map)
	- center: [55.7663, 37.6650]
	- zoom: 14
	```

	![Baumansky](http://sugarproperty.ru//content/112/41033/95283.jpg.resized_bbb2.jpg)

	>Baumansky rayon data in 2015
	>
	>1. First Info
	>2. Second Info

	#Focus on Sokolniki

	```
	- center: [55.7897, 37.6795]
	- zoom: 14
	L.marker([55.7897, 37.6795]).actions.addRemove(S.map)
	```

	![Sokolniki](http://ad009cdnb.archdaily.net/wp-content/uploads/2014/07/53b57bb9c07a8005ce000120_ten-in-shortlist-to-redesign-moscow-s-sokolniki-park_13989827689_4f069623eb_b-530x351.jpg)

	>Sokolniki rayon data in 2015
	>
	>1. First Info
	>2. Second Info

	#More data needed?
	```
	- center: [55.7619, 37.6369]
	- zoom: 17
	L.marker([55.7619, 37.6369]).actions.addRemove(S.map)
	```

	## Additional geography required?

	![Rilos](http://rilos.ru/templates/jv_visionvantage/images/logo.png)

	>Contact us for further enquiries at RILOS
	>
	>1. +7 499 638 24 14
	>2. [email protected]
	>3. www.rilos.ru
	</script></body></html>