Created
April 27, 2016 11:36
-
-
Save Pabloska/bc091b360a0dc87ea2211ab07207c482 to your computer and use it in GitHub Desktop.
Migrant Legal Staus
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> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.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://cartodb.com/assets/favicon.ico" /> | |
| <style> | |
| html, body {width:100%; height:100%; padding: 0; margin: 0;} | |
| #map { width: 100%; height:600; background: black;} | |
| #menu { position: absolute; top: -5px; left: 90px; width: 500px; height:60px; background: transparent; z-index:10;} | |
| #menu a { | |
| opacity: 0.7; | |
| box-shadow: 5px 5px 5px #888888; | |
| margin: 15px 10px 0 0; | |
| float: right; | |
| vertical-align: baseline; | |
| width: 90px; | |
| padding: 5px; | |
| text-align: center; | |
| font: bold 10px "Helvetica",Arial; | |
| line-height: normal; | |
| color: black; | |
| border-radius: 4px; | |
| border: 1px solid #777777; | |
| background: #ffffff; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| #menu a.selected, | |
| #menu a:hover { | |
| color: #F84F40; | |
| } | |
| #dashboard { | |
| background: #E6E6E6; | |
| border-left: 0px solid #000; | |
| height: 580; | |
| font-family: 'Open Sans', sans-serif; | |
| color: black; | |
| overflow-y: scroll; | |
| padding: 10px; | |
| position: absolute; | |
| right: 0; | |
| text-align: left; | |
| top: 0; | |
| z-index: 2001; | |
| opacity: 1; | |
| width: 370px; | |
| } | |
| #chart_div { | |
| position:relative; | |
| left: 10; | |
| top: -350; | |
| height: 140px; | |
| width: 220px; | |
| } | |
| #piechart{ | |
| position:relative; | |
| left: 10; | |
| top: -660; | |
| height: 150px; | |
| width: 220px; | |
| } | |
| </style> | |
| <script> | |
| //GRAPH// | |
| //load visualization library from google | |
| google.load('visualization', '1', {'packages':['corechart','bar']}); | |
| function drawMultSeries(data, title) { | |
| var data = google.visualization.arrayToDataTable([ | |
| ['Quarter', '2014','2015'], | |
| ['Q1', data[0], data[1]], | |
| ['Q2', data[2],0], | |
| ['Q3', data[3],0], | |
| ['Q4', data[4],0] | |
| ]); | |
| var options = { | |
| bar: {groupWidth: "75%"}, | |
| legend: { position: 'bottom' }, | |
| width:220, | |
| height: 160, | |
| titleTextStyle: {fontSize: 10}, | |
| title: ''+ title + '', | |
| chartArea: {width: '61%'}, | |
| hAxis: {minValue: 0}, | |
| vAxis: {title: 'Crossings'} | |
| }; | |
| var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); | |
| chart.draw(data, options); | |
| } | |
| //FINISHED GRAPH// | |
| google.load("visualization", "1", {packages:["corechart"]}); | |
| google.setOnLoadCallback(drawChart); | |
| function drawChart() { | |
| var data = google.visualization.arrayToDataTable([ | |
| ['Coutry', '2015 Q1 Illegal Border-crossing'], | |
| ['Kosovo', 36], | |
| ['Syria', 22], | |
| ['Afghanistan', 11], | |
| ['Albania', 3.3], | |
| ['Gambia', 2.4], | |
| ['Nigeria', 1.7], | |
| ['Others', 23.6] | |
| ]); | |
| var options = { | |
| title: 'Q1 2015: Illegal Border-crossings into EU (Frontex)', | |
| chartArea: {width: '95%'}, | |
| titleTextStyle: {fontSize: 10}, | |
| pieHole: 0.3, | |
| }; | |
| var chart = new google.visualization.PieChart(document.getElementById('piechart')); | |
| chart.draw(data, options); | |
| } | |
| var map; | |
| function init(){ | |
| // initiate leaflet map | |
| map = new L.Map('map', { | |
| center: [40,50], | |
| width: 500, | |
| zoom: 3 | |
| }) | |
| L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', { | |
| attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>' | |
| }).addTo(map); | |
| //ROUTES// | |
| var layerUrl1 = 'https://migrantreport.cartodb.com/api/v2/viz/29c62b22-8934-11e5-8202-0ecfd53eb7d3/viz.json'; | |
| cartodb.createLayer(map, layerUrl1, { | |
| cartodb_logo: false, | |
| } | |
| ) | |
| .on('done', function(layer) { | |
| map.addLayer(layer); | |
| //layer.interaction.remove(); | |
| //layer.interaction = null; | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| //END ROUTES// | |
| var layerUrl = 'https://migrantreport.cartodb.com/api/v2/viz/567c6bc2-39f2-11e5-9621-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 geographies2 where name <> 'Western Balkan'", | |
| //cartocss: "#geographies2{ polygon-fill: red; polygon-opacity: 0.4; line-color: #FFF; line-width: 0.5; line-opacity: 1;}" | |
| } | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.set(subLayerOptions); | |
| sublayers.push(sublayer); | |
| sublayer.setInteraction(true); | |
| sublayer.setInteractivity("cartodb_id,name,background,legal_framework,type,author,url_link,title, q1_2014, q2_2014, q3_2014, q4_2014, q1_2015"); | |
| sublayer.on('featureOver',function(e, latlng, pos, data, subLayerIndex) { | |
| $("#header").html("<p><b>" + data.name + " </b>: "+ data.type + "</p> "); | |
| $("#author").html("<p><i>by " + data.author + "</i> </p> "); | |
| $("#image").html('<img src="' + data.url_link + '" height="120" width="230"/>'); | |
| $("#info").html("<h2><b>BACKGROUND</b></h2>" + data.background+ "<h2><b>LEGAL FRAMEWORK</b></h2>" + data.legal_framework+ ""); | |
| drawMultSeries([data.q1_2014, data.q1_2015, data.q2_2014, data.q3_2014, data.q4_2014],data.title); | |
| }); | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| //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 geographies2", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: green; }" | |
| }); | |
| return true; | |
| }, | |
| Destination: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM geographies2 WHERE type = 'Destination country'", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: blue; }" | |
| }); | |
| return true; | |
| }, | |
| Transit: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM geographies2 WHERE type = 'Transit coutry'", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| Origin: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM geographies2 WHERE type = 'Country of origin'", | |
| //cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }" | |
| }); | |
| return true; | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()"> | |
| <div id='map'></div> | |
| <div style="position:relative;top:-590px;left: -400px; background-color:#fff; opacity: 1; text-align: center"> | |
| <img src="http://migrantreport.org/wp-content/uploads/migrant-report-logo.jpg" alt="migrnats" style="float:right;width:35px;height:35px;font-size:20;opacity: 1"> | |
| </div> | |
| <div id="dashboard"> | |
| <p style="text-align:center;font-size:22;font-family: 'Open Sans', sans-serif;margin-top: -5px"><b>Migrant Legal Status</b><br>2015 Overview</p> | |
| <div id="image" style ="text-align:center;padding:0px;font-size:15;color:black;font-weight: bold;opacity: 0.8;margin-top: -8px"></div> | |
| <div id="header" style ="text-align:center;font-size:15;color:black;opacity:1;margin-top: -10px">Select the different buttons to dispay information regardig the legal status of migrants through the different stages. Starting from their coutry of origin, passing through transit coutries and finally arriving to the destination coutry (Europe)..</div> | |
| <div id="author" style ="height:50px, width:50px,text-align:center;font-size:15;color:black;font-weight: bold;opacity: 0.6;margin-top: 15px"></div> | |
| <div id="info" style="text-align: justify;font-size:12"></div> | |
| </div> | |
| <div id="chart_div" style ="padding:0px;opacity: 0.7;border: 1px solid #777777;box-shadow: 5px 5px 5px #888888;"></div> | |
| <div id="piechart" style ="padding:0px;opacity: 0.7;border: 1px solid #777777;box-shadow: 5px 5px 5px #888888;"></div> | |
| <div id='menu'> | |
| <a href="#Origin" id="Origin" class="button megacities"> COUNTRIES OF ORIGIN</a> | |
| <a href="#Transit" id="Transit" class="button megacities">COUNTRIES OF TRANSIT</a> | |
| <a href="#Destination" id="Destination" class="button capitals">COUNTRIES OF DESTINATION</a> | |
| <a href="#all" id="all" class="button all">ALL<br>COUNTRIES</a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment