-
-
Save namessanti/e7432a85159fca12978e to your computer and use it in GitHub Desktop.
Remembering the Berlin Wall with Odyssey.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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: "The Berlin Story" | |
| -author: "Santiago Giraldo" | |
| -vizjson: "https://team.cartodb.com/u/santiagoa/api/v2/viz/e62d925e-6456-11e4-be1c-0e9d821ea90d/viz.json" | |
| -baseurl: "http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png" | |
| ``` | |
| #Remembering The Berlin Wall: 25th Anniversary | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5254, 13.4171] | |
| - zoom: 9 | |
| ``` | |
|  | |
| Post World War II marked a time of stuggle for the City of Berlin and greater Germany. At the Potsdam Conference of 1945, The Allied powers divided a defeated and politically ambiguous Germany into four occupational zones. Each of these zones was controlled by one of the Allied nations - the United States, Great Britain, France, or the Soviet Union. | |
| Berlin, The capital city of Germany faced the same situation and was also divided into control zones by the allies. | |
|  | |
| #The Cold War: A Nation In Turmoil | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5685, 13.3872] | |
| - zoom: 13 | |
| ``` | |
| Due to political differences relationships between The Communist Soviet Union and the Democratic nations in Germany quickly intensified. In 1949 The western democratic powers in Germany clearly distinguished themselves from their Soviet counterpart and created the Federal Republic of Germany. The Soviet Union responds by establishing the communist German Democratic Republic (GDR). | |
|  | |
| On August 13, 1961 the communist nation in East Germany, began erecting the Berlin Wall as a way of controlling the mass emmigration of east Berlin citizens into the democratic west. The wall severed all transportation corridors through the center of the city and divided Berlin for 28 years. | |
| #A City Divided | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| L.marker([52.5083, 13.3899]).actions.addRemove(S.map) | |
| - center: [52.5102, 13.3757] | |
| - zoom: 13 | |
| ``` | |
|  | |
| Literally over-night, nearly all communications and roads were separated between the east and west. With the rapidly rising capitalistic economy of the west serving as a stark contrast to the poor and oppressed east, the wall become a symbol of tyranny in Germany; lined with minefileds and border police with shoot-to-kill orders. | |
| Pictured above and marked on the map is 'Checkpoint Charlie' one of the main border crossings between the east and west for politicians and allies. | |
| #West Berlin United | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| L.marker([52.5083, 13.3899]).actions.addRemove(S.map) | |
| - center: [52.4849, 13.3440] | |
| - zoom: 17 | |
| L.marker([52.4849, 13.3443]).actions.addRemove(S.map) | |
| ``` | |
|  | |
| John F Kennedy addresses West Berlin citizens at the Ratskeller Schöneberg in the Schoneberg Neighborhood, West Berlin. This June 26, 1963 speech,"I Am a Berliner!", symbolized the Allies commitment to a democratic Germany. Although this would not be achieved for another 22 years. | |
| #The Dividing Line | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5102, 13.3757] | |
| - zoom: 13 | |
| ``` | |
|  | |
| Although the Berlin Wall completely surrounded West Berlin and created what became reffered to as a "pocket of democracy" in a communist nation; the part of the wall that directly divided west and east Berlin was the most significant symbol of tyranny. | |
| #"The Death Strip" | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5193, 13.4016] | |
| - zoom: 12 | |
| ``` | |
|  | |
| This dividing wall become known as "The Death Strip" due to the violent and aggressive tactics of the communist GDR regime. | |
| It is still unknown how many citizens were murdered attempting to cross the border. | |
| #No Man's Land | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5102, 13.3757] | |
| - zoom: 13 | |
| ``` | |
|  | |
| The area between the western and eastern walls became known as "The No Man's Land" - An area inaccessible to any Berlin citizen except military. Paths, churches, monuments, and other buildings were absorbed into this no man's land and laid unused for over 2 decades. | |
| #The Church of Reconciliation | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5359, 13.3919] | |
| - zoom: 17 | |
| ``` | |
|  | |
| Before 1961, The Church of Reconciliation served as a meeting point and place of worship for citizens of both the west and the east. This historic site was a symbol of unity and hope before the wall was built. | |
| When the wall was erected, The chapel was absorebed into the space between the western and eastern wall. It became an unused fixture in the no man's land of the wall. | |
| #The Chapel of Reconciliation Rebuilt | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| L.marker([52.5358, 13.3919]).actions.addRemove(S.map) | |
| - center: [52.5359, 13.3919] | |
| - zoom: 15 | |
| ``` | |
|  | |
| In 1985, only 4 years before the fall of the wall, the church was demolished by the GDR. After the fall of the wall, in the 1990's, the chapel was rebuilt as a memorial to the fallen church and a people divided. | |
| #Many Phases of the Wall | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5196, 13.3899] | |
| - zoom: 13 | |
| ``` | |
|  | |
| Before the Berlin Wall was demolished in 1989, it went through a series of reconstructions. What started out in 1961 as barbed wire and armed guards, was fortified with bricks and stone and grew to incorporate more buildings and spaces into the no man's land. The final iteration of the wall, before it's collapse, used large stone bricks and concrete. | |
| #The Brandenburg Gate | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5161, 13.3770] | |
| - zoom: 17 | |
| ``` | |
|  | |
| This historic monument was another feature absorbed into the no man's land of the wall. Located in the heart of Berlin, the Brandenburg Gate was the starting point for construction of the wall by the communist regime in 1961; and became an identifying feature of a city divided until the late 1980's. | |
| Pictured above is a sign at Brandenburg Gate that reads "Attention! You are now leaving West Berlin" - August 1st, 1962. | |
| #The Brandenburg Gate: A City United Again | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5161, 13.3770] | |
| - zoom: 15 | |
| ``` | |
|  | |
| Close to the end of the wall, the Brandenburg Gate became a site for protest and demonstration that served as a fixture in the fight to tear down the wall and unify Berlin. This once oppressive symbol was used by participants of the Peaceful Revolution to galvanize a movement towards a unified future. | |
|  | |
| Today, The gate stands a symbol of a tumultuous past brought to an end by the power of people. | |
| #The Peaceful Revolution | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5216, 13.3904] | |
| - zoom: 13 | |
| ``` | |
|  | |
| With pressures rising in the nearly 3 decade struggle, the people of Berlin came together to fight for unity and democracy through a series of mounting demonstrations and events calling for political change. | |
| On October 30th, 1989, over 70,000 peaceful protesters marched to end tyranny and unite Berlin with cries and demonstrations pushing for an end to the political divide by bringing the wall down. | |
| Police do not interfere with the demonstrations. | |
| #The Wall Comes Down | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5049, 13.3731] | |
| - zoom: 10 | |
| ``` | |
|  | |
| On November 9th 1989, citizens of Berlin took to the streets in a collective effort to tear down the wall. This result of the Peaceful Revolution marks the end of communist regime rule in Germany, and a victory by a people looking towards a brighter future. | |
| #25 Years Later | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5051, 13.3333] | |
| - zoom: 11 | |
| ``` | |
|  | |
| Taking a look back at the history of the Berlin Wall it is important to understand not just the struggles and division of the city, but also how this symbol brought people together into a collective and powerful movement during the late 1980's. | |
| It is incredible to see the connectivity and unity that has resulted out of the past 25 years in Berlin's history, and the beautiful, bustling, and highly connected Berlin of today serves as a testament to a people willing to come together to overcome injustice. | |
| Pictured abolve is Berlin's memorializing project to mark the path of the Berlin Wall using double rowed cobble stone. | |
| #Sources for this Interactive Map by Slide: | |
| ``` | |
| L.marker([37.7620, -122.4385]).actions.addRemove(S.map) | |
| - center: [52.5135, 13.3182] | |
| - zoom: 10 | |
| ``` | |
| General Sources: | |
| berlin-germany.ca | |
| berlin.de | |
| Image Source by Slide: | |
| 1. | |
| Jennifer Rosenberg 2014, The Berlin Wall (Link below) | |
| [Image 1][http://history1900s.about.com/od/coldwa1/a/berlinwall.htm] | |
| [Image 2][http://commons.wikimedia.org/wiki/File:Bln11_divided.jpg] | |
| 2. | |
| [Image 1][http://cartespostalesmonde.blogspot.com/2013/02/cartes-postales-du-mur-de-berlin-2.html] | |
| 3. | |
| German Missons In The United States Timeline (Link below) | |
| [Image 1]["http://www.germany.info/Vertretung/usa/en/02__GIC/GIC/05/03__Without__Walls/Feature__1/Timeline_S.html"] | |
| 4. | |
| Photo by Robert Knudsen, 1963 | |
| The John F. Kennedy Presidential Library and Museum, Boston (Source link below) | |
| [Image 1][http://en.wikipedia.org/wiki/West_Berlin#mediaviewer/File:JFK_speech_lch_bin_ein_berliner_1.jpg] | |
| 5. | |
| US Army, 1961 | |
| [Image 1][http://upload.wikimedia.org/wikipedia/commons/7/79/Tensions_ran_high_at_Checkpoint_Charlie_in_1961_as_Easterners_fled_to_West%2C_Berlin_Wall_went_up.jpg] | |
| 6. | |
| Photo by: George Garrigues, August 1977 | |
| 7. | |
| Photo by: Thierry Noir, 1986 | |
| [Image 1][http://upload.wikimedia.org/wikipedia/commons/5/5d/Berlinermauer.jpg] | |
| 8. | |
| The Guardian: Berlin Wall Then and Now - Interactive (Link below) | |
| Photographs by Central Press/Getty and Sean Gallup/Getty | |
| [Image 1][http://www.theguardian.com/artanddesign/ng-interactive/2014/nov/03/the-berlin-wall-in-the-cold-war-and-now-interactive] | |
| 9. | |
| [Image 1][http://pixabay.com/get/96009e232cd41e90fb46/1415391184/bernauer-strae-113170_1280.jpg] | |
| 10. | |
| posttreatysettlements.org | |
| Photo by Paul Hamer (Link below) | |
| [Image 1][http://posttreatysettlements.org.nz/an-iwi-security-council-the-demise-of-the-maori-trustee-and-other-bold-predictions/] | |
| 11. | |
| The Guardian: Berlin Wall Then and Now - Interactive (Link below) | |
| Photographs by Central Press/Getty and Sean Gallup/Getty | |
| [Image 1][http://www.theguardian.com/artanddesign/ng-interactive/2014/nov/03/the-berlin-wall-in-the-cold-war-and-now-interactive] | |
| 12. | |
| [Image 1][http://upload.wikimedia.org/wikipedia/commons/5/52/Thefalloftheberlinwall1989.JPG] | |
| [Image 2][http://upload.wikimedia.org/wikipedia/commons/5/52/Brandenburger_Tor1.JPG] | |
| 13. | |
| Photo Credit: AFP/Getty Images (LInk below) | |
| [Image 1][http://i.dailymail.co.uk/i/pix/2013/03/18/article-2295049-18BCB971000005DC-662_634x430.jpg] | |
| 14. | |
| Photo Credit: Corbis (Link below) | |
| [Image 1][http://i.dailymail.co.uk/i/pix/2013/02/26/article-2284857-07064C0F000005DC-513_634x390.jpg] | |
| 15. | |
| [Image 1][http://pixabay.com/get/aff9d3314e01da91a8e9/1415390864/road-marking-250591_1280.jpg]</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment