Created
October 13, 2015 11:14
-
-
Save Pabloska/dfe2f25562c801a587fc to your computer and use it in GitHub Desktop.
MOAS Rescues 2015
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
| <html> | |
| <head> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" /> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script> | |
| <script type="text/javascript" src="https://www.google.com/jsapi"></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://cartodb.com/assets/favicon.ico" /> | |
| <style> | |
| html, body {width:100%; height:100%; padding: 0; margin: 0;} | |
| #map { width: 100%; height:650; background: black;} | |
| #menu { position: absolute; top: 5px; left: 90px; width: 500px; height:60px; background: transparent; z-index:10;} | |
| #menu a { | |
| margin: 15px 10px 0 0; | |
| float: right; | |
| vertical-align: baseline; | |
| width: 70px; | |
| padding: 10px; | |
| text-align: center; | |
| font: bold 11px "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; | |
| } | |
| #dashboard { | |
| background: grey; | |
| border-left: 0px solid #000; | |
| height: 630; | |
| font-family: 'Open Sans', sans-serif; | |
| color: white; | |
| overflow-y: scroll; | |
| padding: 10px; | |
| position: absolute; | |
| right: 0; | |
| text-align: left; | |
| top: 0; | |
| z-index: 2001; | |
| opacity: 0.90; | |
| width: 370px; | |
| } | |
| #chart_div { | |
| height: 130px; | |
| width: 270px; | |
| padding: 0px; | |
| } | |
| </style> | |
| <script> | |
| //load visualization library from google | |
| google.load('visualization', '1', {'packages':['corechart','bar']}); | |
| function draw_chart(data, operation) { | |
| var data = google.visualization.arrayToDataTable([ | |
| ['Gender', 'Score'], | |
| ['female', data[0]], | |
| ['female minor', data[1]], | |
| ['male', data[2]], | |
| ['male minor', data[3]] | |
| ]); | |
| var options = { | |
| title: operation + ' : Integration Score', | |
| //title: operation + 'event', | |
| chartArea:{left:10,top:0,width:'100%',height:'100%'}, | |
| legend: { position: "true"}, | |
| legend: { alignment: "center"}, | |
| //font color: 'white', | |
| backgroundColor:'grey', | |
| //backgroundColor:'white', | |
| pieHole: 0.2, | |
| is3D: true, | |
| }; | |
| var chart = new google.visualization.PieChart(document.getElementById('chart_div')); | |
| chart.draw(data, options); | |
| } | |
| function draw_chart2(data, operation) { | |
| var data = google.visualization.arrayToDataTable([ | |
| ['Gender', 'Score'], | |
| ['female', data[0]], | |
| ['female minor', data[1]], | |
| ['male', data[2]], | |
| ['male minor', data[3]] | |
| ]); | |
| var options = { | |
| title: operation + ' : Integration Score', | |
| //title: operation + 'event', | |
| chartArea:{left:10,top:0,width:'100%',height:'100%'}, | |
| legend: { position: "true"}, | |
| legend: { alignment: "center"}, | |
| //font color: 'white', | |
| backgroundColor:'grey', | |
| //backgroundColor:'white', | |
| pieHole: 0.2, | |
| is3D: true, | |
| }; | |
| var chart = new google.visualization.BarChart(document.getElementById('chart_div2')); | |
| chart.draw(data, options); | |
| } | |
| var map; | |
| function init(){ | |
| // initiate leaflet map | |
| map = new L.Map('map', { | |
| center: [35.7,18], | |
| width: 500, | |
| zoom: 7 | |
| }) | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { | |
| attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>' | |
| }).addTo(map); | |
| //*adding first layer (removing interactivity)* | |
| /*var layer2Url = 'https://migrantreport.cartodb.com/api/v2/viz/e6ff9b24-473f-11e5-b696-0e9d821ea90d/viz.json'; | |
| cartodb.createLayer(map, layer2Url) | |
| .on('done', function(layer) { | |
| map.addLayer(layer); | |
| //layer.interaction.remove(); | |
| //layer.interaction = null; | |
| }).on('error', function() { | |
| //log the error | |
| });*/ | |
| //*adding second layer** | |
| var layerUrl = 'https://migrantreport.cartodb.com/api/v2/viz/46ea38f6-4a73-11e5-8958-0e0c41326911/viz.json'; | |
| var sublayers = []; | |
| cartodb.createLayer(map, layerUrl) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| //***Create the sublayer to be toggled | |
| var subLayerOptions = { | |
| sql: "SELECT * FROM delete_trial_2_copy", | |
| } | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.set(subLayerOptions); | |
| sublayers.push(sublayer); | |
| sublayer.setInteraction(true); | |
| sublayer.setInteractivity("cartodb_id,date,operation,female_adu,female_min,male_adult,male_minor,image,remarks,month,event"); | |
| sublayer.on('featureOver',function(e, latlng, pos, data, subLayerIndex) { | |
| $("#header").html("<p>" + data.date + "</p> "); | |
| $("#event").html("<p>" + data.event + "</p> "); | |
| draw_chart([data.female_adu, data.female_min,data.male_adult,data.male_minor], data.operation); | |
| draw_chart2([data.female_adu, data.female_min,data.male_adult,data.male_minor], data.operation); | |
| $("#image").html('<img src="' + data.image + '" height="250" width="350"/>'); | |
| $("#info").html("<h2><b></b></h2>" + data.remarks+ ""); | |
| }); | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| function addCursorInteraction(layer) { | |
| var hovers = []; | |
| layer.bind('featureOver', function(e, latlon, pxPos, data, layer) { | |
| hovers[layer] = 1; | |
| if(_.any(hovers)) { | |
| $('#map').css('cursor', 'pointer'); | |
| } | |
| }); | |
| layer.bind('featureOut', function(m, layer) { | |
| hovers[layer] = 0; | |
| if(!_.any(hovers)) { | |
| $('#map').css('cursor', 'auto'); | |
| } | |
| }); | |
| } | |
| //higlight selected buttom | |
| $('.button').click(function() { | |
| $('.button').removeClass('selected'); | |
| $(this).addClass('selected'); | |
| LayerActions[$(this).attr('id')](); | |
| }); | |
| //layer actions | |
| var LayerActions = { | |
| all: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM delete_trial_2_copy", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: green; }" | |
| }); | |
| return true; | |
| }, | |
| May: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM delete_trial_2_copy WHERE month = 'May'", | |
| //cartocss: "#FROM recues_2015{ marker-fill: green; }" | |
| }); | |
| return true; | |
| }, | |
| June: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM delete_trial_2_copy WHERE month = 'June'", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| July: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM delete_trial_2_copy WHERE type = '1'", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }" | |
| }); | |
| return true; | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()"> | |
| <div id='map'></div> | |
| <div style="padding:-2px;position:relative;top:-580;left: 180; width:400px; text-align: center;"> | |
| <p style="padding:-10;margin:-10;font-weight: bold;font-size:20;font-family: 'Open Sans', sans-serif;color:white;">~Moas Opeations 2015~</p> | |
| <p style="font-size:13;text-align: center; font-family: 'Open Sans', sans-serif;font-style: italic; color:white; ">Select the different buttons to dispay monthly information about MOAS operation at the sea.</p> | |
| </div> | |
| <div id="dashboard"> | |
| <p> | |
| <img src="http://migrantreport.org/wp-content/uploads/moas-logo.png" alt="migrnats" style="float:right;width:80px;height:45px;font-size:20;opacity: 1;margin-top: -20px,"> | |
| </p> | |
| <div id="header" style ="height:50px, width:50px,text-align:center;font-size:20;color:orange;font-weight: bold;opacity: 1;margin-top: -5px">Click on a region to display the related information.</div> | |
| <div id="event" style ="font-size:18;color:orange;opacity: 1"></div> | |
| <div id="image" style ="height:50px, width:50px,text-align:center;font-size:15;color:black;font-weight: bold;margin-top: 45px;opacity: 1"></div> | |
| <div id="info" style="text-align: justify;font-size:12"></div> | |
| <div id="chart_div" style ="padding:20px"></div> | |
| <div id="chart_div2" style ="padding:20px"></div> | |
| </div> | |
| <div id='menu'> | |
| <a href="#July" id="July" class="button capitals">July</a> | |
| <a href="#June" id="June" class="button megacities">June</a> | |
| <a href="#May" id="May" class="button megacities">May</a> | |
| <a href="#all" id="all" class="button all">all</a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment