Last active
October 12, 2016 13:22
-
-
Save auremoser/bcefbded913be2daccb8 to your computer and use it in GitHub Desktop.
Beirut Workshop: Blackout Map
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> | |
| <html> | |
| <title>Global Blackouts</title> | |
| <link rel="shortcut icon" href="https://raw.githubusercontent.com/auremoser/images/master/lightning-favicon.ico" type="image/x-icon"> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <!-- add cartoCSS stylesheet --> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css"/> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #header { | |
| background-color: #fff; | |
| color: #252525; | |
| font-size: 52px; | |
| font-family: 'Unica One', sans-serif; | |
| padding: 0; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| #map { | |
| bottom: 0%; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 70px; | |
| } | |
| .logo { | |
| display: inline-block; | |
| padding-top: 5px; | |
| padding-right: 15px; | |
| } | |
| </style> | |
| <body> | |
| <!-- setup your header title --> | |
| <div id="header"> | |
| <div class="logo"><img src="battery.png" alt="blackout" width="52" height="52"></a><br> | |
| </div> | |
| Global Blackouts | |
| </div> | |
| <div id="map"></div> | |
| <!-- include jquery --> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <!-- include google maps library _before_ load cartodb.js --> | |
| <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
| <!-- include your javascripts --> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
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
| function main() { | |
| var vis; | |
| var CLICKLAYER = 1; | |
| // add your url ID here between viz/ and /viz.json | |
| var layerUrl = 'https://team.cartodb.com/u/aureliamoser/api/v2/viz/67f88c2a-b77d-11e4-aae0-0e853d047bba/viz.json'; | |
| var options = { | |
| // zoom projection to adjust starting point zoom | |
| zoom: 2, | |
| // set lat/long to center on lebanon | |
| center_lat: 34.19817309627726, | |
| center_lon: 36.1065673828125, | |
| cartodb_logo: false, | |
| layer_selector: true, | |
| } | |
| var layerIds = { | |
| 'pop2000':0, | |
| 'epl2009':1, | |
| }; | |
| // create map with layers from cartodb editor | |
| cartodb.createVis('map', layerUrl, options) | |
| .done(function(vis, layers) { | |
| console.log(vis, 'layers', layers) | |
| window.vis = vis; | |
| window.overlay = vis.getLayers()[1]; | |
| window.layers = layers; | |
| }) | |
| .on('error', function() { | |
| cartodb.log.log("some error occurred"); | |
| }); | |
| } | |
| $(main); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello Aurelia, Great work.
Would it be possible, please, to share the source of your blackout data?
Thanks in advance.