kyroskoh · April 4, 2016 03:28
diff --git a/odyssey-storymap-abc-market.html b/odyssey-storymap-abc-market.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/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 type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>

 <script id="md_template" type="text/template">```
 -title: "Why it is called as ABC Market?"
 -author: "Kyros Koh"
 -baseurl: "http://{s}-tiles.sgmap.xyz/v2/hmap1966/{z}/{x}/{y}.png" 
 ```

 # Why it is called as ABC Market?
 ```
 - center: [1.3390, 103.8325]
 - zoom: 12
 ```

 In this StoryMap, I am going to tell you a short story on "Why it is called as ABC Market"

 - Illustrated By: Lewis Wu.
 - Modified By: Kyros Koh.

 # Let's Zoom In!
 ```
 - center: [1.2875, 103.8042]
 - zoom: 14
 ```

 Now you are viewing the area.

 Click " > " to continue.


 # Do you know?
 ```
 - center: [1.2875, 103.8042]
 - zoom: 17
 L.marker([1.2875, 103.8042]).actions.addRemove(S.map)
 ```

 Do you know why "Alexandra Fire Station" was located near the Round-About?  

 ![Alexandra Fire Station (1960s)](http://res.cloudinary.com/sla-historicalmap/image/upload/v1443149744/HistMap/lat:1.2883817048592685_lng:103.8028621673584_user:Joseph.jpg)

 This is because, Fire Engines can easy access to all roads when there's a fire outbreak.


 # Why ABC?
 ```
 - center: [1.2891, 103.8053]
 - zoom: 17
 L.marker([1.2891, 103.8053]).actions.addRemove(S.map)
 ```

 ![Archipelago Brewery Company (1960s)](http://res.cloudinary.com/sla-historicalmap/image/upload/v1442813285/HistMap/lat:1.2890842658643598_lng:103.8053297996521_user:lewiswulw.jpg)

 ABC stands for "Archipelago Brewery Company". The Archipelago Brewery was established in 1931 and became the first commercial brewery in Singapore, started by [Becks](https://en.wikipedia.org/wiki/Beck%27s_Brewery).

 During [World War II](https://en.wikipedia.org/wiki/World_War_II), the British deemed the brewery to be enemy territory due to its German ties and seized it in 1941.
 It was then bought by Malaysian Breweries (which later became part of [Asia Pacific Breweries](https://en.wikipedia.org/wiki/Asia_Pacific_Breweries)) in the same year.

 In 2013, Asia Pacific Breweries merged to become [Heineken Asia Pacific](https://en.wikipedia.org/wiki/Heineken_Asia_Pacific).

 *Source: Wikipedia.org

 # Archipelago Brewery Company
 ```
 - center: [1.2879, 103.8059]
 - zoom: 17
 L.marker([1.2879, 103.8059]).actions.addRemove(S.map)
 ```

 ![Archipelago Brewery Company (1960s)](
 https://thelongnwindingroad.files.wordpress.com/2010/02/tank-road-station.jpg?w=510&h=318)

 Their building is linked next to the Railway Station, [Singapore Railway System](http://remembersingapore.org/singapore-railway/) which allows them to export their Brewery Goods.

 # ABC Market
 ```
 - center: [1.2866, 103.8068]
 - zoom: 17
 L.marker([1.2866, 103.8068]).actions.addRemove(S.map)
 ```
 ![ABC Market (2010s)](
 http://www.sharekool.com/blog/wp-content/uploads/2014/04/ABC-Brickworks-Market-and-Food-Cente-Large.jpg)

 ABC Market is named after "Archipelago Brewery Company".

 Now, it is named as "ABC Brickworks Market & Food Centre".

 # StoryMap End

 </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/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 type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>

	<script id="md_template" type="text/template">```
	-title: "Why it is called as ABC Market?"
	-author: "Kyros Koh"
	-baseurl: "http://{s}-tiles.sgmap.xyz/v2/hmap1966/{z}/{x}/{y}.png"
	```

	# Why it is called as ABC Market?
	```
	- center: [1.3390, 103.8325]
	- zoom: 12
	```

	In this StoryMap, I am going to tell you a short story on "Why it is called as ABC Market"

	- Illustrated By: Lewis Wu.
	- Modified By: Kyros Koh.

	# Let's Zoom In!
	```
	- center: [1.2875, 103.8042]
	- zoom: 14
	```

	Now you are viewing the area.

	Click " > " to continue.


	# Do you know?
	```
	- center: [1.2875, 103.8042]
	- zoom: 17
	L.marker([1.2875, 103.8042]).actions.addRemove(S.map)
	```

	Do you know why "Alexandra Fire Station" was located near the Round-About?

	![Alexandra Fire Station (1960s)](http://res.cloudinary.com/sla-historicalmap/image/upload/v1443149744/HistMap/lat:1.2883817048592685_lng:103.8028621673584_user:Joseph.jpg)

	This is because, Fire Engines can easy access to all roads when there's a fire outbreak.


	# Why ABC?
	```
	- center: [1.2891, 103.8053]
	- zoom: 17
	L.marker([1.2891, 103.8053]).actions.addRemove(S.map)
	```

	![Archipelago Brewery Company (1960s)](http://res.cloudinary.com/sla-historicalmap/image/upload/v1442813285/HistMap/lat:1.2890842658643598_lng:103.8053297996521_user:lewiswulw.jpg)

	ABC stands for "Archipelago Brewery Company". The Archipelago Brewery was established in 1931 and became the first commercial brewery in Singapore, started by [Becks](https://en.wikipedia.org/wiki/Beck%27s_Brewery).

	During [World War II](https://en.wikipedia.org/wiki/World_War_II), the British deemed the brewery to be enemy territory due to its German ties and seized it in 1941.
	It was then bought by Malaysian Breweries (which later became part of [Asia Pacific Breweries](https://en.wikipedia.org/wiki/Asia_Pacific_Breweries)) in the same year.

	In 2013, Asia Pacific Breweries merged to become [Heineken Asia Pacific](https://en.wikipedia.org/wiki/Heineken_Asia_Pacific).

	*Source: Wikipedia.org

	# Archipelago Brewery Company
	```
	- center: [1.2879, 103.8059]
	- zoom: 17
	L.marker([1.2879, 103.8059]).actions.addRemove(S.map)
	```

	![Archipelago Brewery Company (1960s)](
	https://thelongnwindingroad.files.wordpress.com/2010/02/tank-road-station.jpg?w=510&h=318)

	Their building is linked next to the Railway Station, [Singapore Railway System](http://remembersingapore.org/singapore-railway/) which allows them to export their Brewery Goods.

	# ABC Market
	```
	- center: [1.2866, 103.8068]
	- zoom: 17
	L.marker([1.2866, 103.8068]).actions.addRemove(S.map)
	```
	![ABC Market (2010s)](
	http://www.sharekool.com/blog/wp-content/uploads/2014/04/ABC-Brickworks-Market-and-Food-Cente-Large.jpg)

	ABC Market is named after "Archipelago Brewery Company".

	Now, it is named as "ABC Brickworks Market & Food Centre".

	# StoryMap End

	</script></body></html>
No results found