Created
February 6, 2015 17:03
-
-
Save burritojustice/8605440d9399f4e54719 to your computer and use it in GitHub Desktop.
200 Years of Oakland History
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 PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
| <html> | |
| <head> | |
| <title>Historic Oakland, from 1820 to 2015</title> | |
| <!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> --> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <link rel="shortcut icon" href="http://0.gravatar.com/blavatar/638ca867de63809451d948e204e8a8f3?s=16"> | |
| <style type="text/css"> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #menu { position: absolute; bottom: 50px; left: 10px; width: 80px; height: 330px; background: transparent; z-index:10;} | |
| #menu a { | |
| margin: 5px 10px 0 0; | |
| float: left; | |
| vertical-align: baseline; | |
| width: 40px; | |
| padding: 6px; | |
| text-align: center; | |
| font: bold 14px "Helvetica",Arial; | |
| line-height: normal; | |
| color: #555; | |
| border-radius: 4px; | |
| border: 1px solid #777777; | |
| background: #ffffff; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| #menu a.selected, | |
| #menu a:hover { | |
| color: #F84F40; | |
| } | |
| .container .text-muted { | |
| margin: 15px 30px; | |
| } | |
| .header > .container { | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| .header { | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| /* Set the fixed height of the header here */ | |
| height: 60px; | |
| font: 12px "Helvetica",Arial; | |
| background-color: #f5f5f5; | |
| opacity: .9; | |
| text-align: center; | |
| vertical-align: middle; | |
| text-shadow: 1px 1px #FFF; | |
| display: table-cell; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" type="text/css"> | |
| </head> | |
| <body> | |
| <div id="map"></div><!-- include cartodb.js library --> | |
| <div id='menu'> | |
| <a href="#1820" id="1820" class="button 1820" onclick="select_year('1820', 11, 37.839, -122.281)">1820</a> | |
| <a href="#1842" id="1842" class="button 1842" onclick="select_year('1842', 11, 37.839, -122.281)">1842</a> | |
| <a href="#1853" id="1853" class="button 1853" onclick="select_year('1853', 13, 37.839, -122.281)">1853</a> | |
| <a href="#1869" id="1869" class="button 1869" onclick="select_year('1869', 16, 37.839, -122.281)">1869</a> | |
| <a href="#1877" id="1877" class="button 1877" onclick="select_year('1877', 18, 37.839, -122.281)">1877</a> | |
| <a href="#1889" id="1889" class="button 1889" onclick="select_year('1889', 18, 37.839, -122.281)">1889</a> | |
| <a href="#1903" id="1903" class="button 1903" onclick="select_year('1903', 18, 37.839, -122.281)">1903</a> | |
| <a href="#1911" id="1911" class="button 1911" onclick="select_year('1911', 18, 37.839, -122.281)">1911</a> | |
| <a href="#1951" id="1951" class="button 1951" onclick="select_year('1951', 18, 37.839, -122.281)">1951</a> | |
| </div> | |
| <header class="header"> | |
| <div class="container"> | |
| <p align=center width=500px class="text-muted">For many centuries, this place belonged to the Ohlone people—until the Spanish arrived and told them that it didn't.<br>These maps track what happened after: Hover or click on red items to learn the many ways this land was claimed, named, and divided over the last 200 years.</p> | |
| </div> | |
| </header> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js" type="text/javascript"> | |
| </script><script type="text/javascript"> | |
| var year = []; | |
| var namedLayers = {}; | |
| var layerNames = [ | |
| // this one is its own Luis layer | |
| '1820', | |
| // these four come from Ranchos | |
| '1842', '1853', '1869', '1877', | |
| // these four come from Sanborn | |
| '1951', '1911', '1903', '1889' | |
| ]; | |
| var map = new L.Map('map', { | |
| zoomControl: true, | |
| dragging: true, | |
| doubleClickZoom: true, | |
| touchZoom: true, | |
| scrollWheelZoom: true, | |
| center: [37.839087, -122.281295], | |
| zoom: 11 | |
| }); | |
| function hide_all_layers() | |
| { | |
| for (var i = 0; i < year.length; i++) { | |
| year[i].hide(); | |
| } | |
| } | |
| function select_year(year, zoom, lat, lon) | |
| { | |
| hide_all_layers(); | |
| namedLayers[year].show(); | |
| // map.setZoom(zoom); | |
| // map.panTo([lat, lon]); | |
| map.setView([lat, lon], zoom) | |
| return false; | |
| } | |
| function main() { | |
| // alert("Start"); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: '<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>: <a href="http://stamen.com">Stamen</a> map tiles & <a href="http://openstreetmap.org">OpenStreetMap</a> data | Map by <a href="http://burritojustice.com/Brockmap">Burrito Justice</a>, history by <a href="http://brockwinstead.com/house-history-project/">Brock Winstead</a>' | |
| }).addTo(map); | |
| var luisURL = 'http://burritojustice.cartodb.com/api/v2/viz/e6168f3c-9b47-11e4-b505-0e9d821ea90d/viz.json' | |
| var sanbornURL ='http://burritojustice.cartodb.com/api/v2/viz/a0d30b8c-913b-11e4-a519-0e4fddd5de28/viz.json' | |
| var ranchoURL = 'http://burritojustice.cartodb.com/api/v2/viz/49510e38-92d3-11e4-9873-0e0c41326911/viz.json' | |
| function on_error(err) | |
| { | |
| console.log("An error occurred: " + err); | |
| } | |
| cartodb.createLayer(map, luisURL) | |
| .done(function(layer) { | |
| var layerName = layerNames[0]; | |
| year.push(layer.getSubLayer(0)); | |
| namedLayers[layerName] = layer.getSubLayer(0); | |
| cartodb.createLayer(map, ranchoURL) | |
| .done(function(layer) { | |
| for (var i = 0; i < 4; i++) { | |
| var layerName = layerNames[year.length]; | |
| year.push(layer.getSubLayer(i)); | |
| layer.getSubLayer(i).hide(); | |
| namedLayers[layerName] = layer.getSubLayer(i); | |
| // here, year array grows by one item. | |
| } | |
| cartodb.createLayer(map, sanbornURL) | |
| .done(function(layer) { | |
| for (var i = 0; i < 4; i++) { | |
| var layerName = layerNames[year.length]; | |
| year.push(layer.getSubLayer(i)); | |
| layer.getSubLayer(i).hide(); | |
| namedLayers[layerName] = layer.getSubLayer(i); | |
| } | |
| }) | |
| .addTo(map) | |
| .error(on_error); | |
| }) | |
| .addTo(map) | |
| .error(on_error) | |
| }) | |
| .addTo(map) | |
| .error(on_error); | |
| //we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer | |
| $('.button').click(function() { | |
| $('.button').removeClass('selected'); | |
| $(this).addClass('selected'); | |
| /* | |
| //this gets the id of the different buttons and calls to LayerActions which responds according to the selected id | |
| LayerActions[$(this).attr('id')](); | |
| */ | |
| }); | |
| } | |
| // you could use $(window).load(main); | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment