Last active
October 20, 2015 13:00
-
-
Save Pabloska/cef1246415f2feb2315d to your computer and use it in GitHub Desktop.
4Mi - Mixed Migration Monitoring
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:500; background: black;} | |
| #menu { position: absolute; top: 0; left: 300; width: 800px; height:60px; z-index:10;} | |
| #menu a { | |
| box-shadow: 5px 5px 5px #888888; | |
| opacity: 0.8; | |
| margin: 15px 10px 0 0; | |
| float: right; | |
| vertical-align: baseline; | |
| width: 90px; | |
| padding: 5px; | |
| text-align: center; | |
| font: bold 12px "Helvetica",Arial; | |
| line-height: normal; | |
| color: white; | |
| border-radius: 4px; | |
| border: 0.5px solid white; | |
| background: #7A0000; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| #menu a.selected, | |
| #menu a:hover { | |
| color: #F84F40; | |
| } | |
| #dashboard { | |
| border: 1px solid #777777; | |
| box-shadow: 5px 5px 5px #888888; | |
| border-radius: 4px; | |
| background: white; | |
| //border-left: 0px solid #000; | |
| height: 400; | |
| font-family: 'Open Sans', sans-serif; | |
| color: white; | |
| //overflow-y: scroll; | |
| padding: 0px; | |
| position: absolute; | |
| left: 10; | |
| text-align: left; | |
| top: 10; | |
| z-index: 2001; | |
| opacity: 0.8; | |
| width: 290px; | |
| } | |
| #chart_div { | |
| height: 250px; | |
| width: 250px; | |
| padding: 0px; | |
| } | |
| </style> | |
| <script> | |
| //load visualization library from google | |
| google.load('visualization', '1', {'packages':['corechart','bar']}); | |
| function draw_chart(data, v_event) { | |
| var data = google.visualization.arrayToDataTable([ | |
| ['Month', 'Incidents since September-2014'], | |
| ['Sep-14', data[0]], | |
| ['Oct-14', data[1]], | |
| ['Nov-14', data[2]], | |
| ['Dic-14', data[3]], | |
| ['Jan-15', data[4]], | |
| ['Feb-15', data[5]], | |
| ['Mar-15', data[6]] | |
| ]); | |
| var options = { | |
| //title: data.villages + ' : Cases', | |
| legend: {position: 'top', maxLines: 1}, | |
| width:290, | |
| height: 190, | |
| backgroundColor:'white', | |
| colors:['#850200'], | |
| animation:{ duration: 1000, easing: 'out',}, | |
| hAxis: { | |
| //title: 'Months', | |
| textStyle:{fontSize: '10', paddingRight: '100',marginRight: '100'}, | |
| direction:1, | |
| slantedText:true, | |
| slantedTextAngle:45, | |
| animation: { | |
| duration: 1000}, | |
| }, | |
| vAxis: { | |
| minValue:0, | |
| maxValue:600, | |
| title: 'No. of Incidents', | |
| viewWindowMode: 'explicit', | |
| viewWindow:{ | |
| max:4, | |
| min:0, | |
| textStyle:{fontSize: '10', paddingRight: '100',marginRight: '100'} | |
| } | |
| } | |
| }; | |
| var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); | |
| chart.draw(data, options); | |
| } | |
| var map; | |
| function init(){ | |
| // initiate leaflet map | |
| map = new L.Map('map', { | |
| zoomControl: false, | |
| //attributionControl: false, | |
| center: [15,20], | |
| width: 500, | |
| zoom: 4 | |
| }); | |
| L.control.scale({ | |
| imperial: false, | |
| position: 'topright', | |
| }).addTo(map); | |
| L.control.zoom({ | |
| position:'topright' | |
| }).addTo(map); | |
| L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', { | |
| attribution: '<a href="http://migrantreport.org/category/maps/">Map creasted by Migrant Report.</a>' | |
| }).addTo(map); | |
| //http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png | |
| //*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/191e97ac-57c8-11e5-a13c-0e4fddd5de28/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 table_4mi ", | |
| } | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.set(subLayerOptions); | |
| sublayers.push(sublayer); | |
| sublayer.setInteraction(true); | |
| sublayer.setInteractivity("cartodb_id,sep_14,oct_14,nov_14,dec_14,jan_15,total_incidents,feb_15,mar_15,villages,v_event"); | |
| sublayer.on('featureOver',function(e, latlng, pos, data, subLayerIndex) { | |
| $("#header").html("<p>" + data.villages + "</p> "); | |
| $("#event").html("<p>" +'Incident type : '+ data.v_event + "</p> "); | |
| draw_chart([data.sep_14, data.oct_14,data.nov_14,data.dec_14,data.jan_15,data.feb_15,data.mar_15,], data.v_event); | |
| }); | |
| }).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 table_4mi where total_incidents <> 0", | |
| //cartocss: "#table_4mi{ marker-fill: green; }" | |
| }); | |
| return true; | |
| }, | |
| deaths: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi WHERE v_event ='Death' and total_incidents > 0 ", | |
| //cartocss: "#table_4mi{ marker-fill: #FF9900; }" | |
| }); | |
| return true; | |
| }, | |
| Missing: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi WHERE v_event ='Missing' and total_incidents > 0 ", | |
| //cartocss: "#table_4mi{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| extorsion: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi WHERE v_event ='Extortion' and total_incidents > 0 ", | |
| //cartocss: "#table_4mi{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| kidnap: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi WHERE v_event ='Kidnapping' and total_incidents > 0", | |
| //cartocss: "#table_4mi{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| Sexual: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi WHERE v_event ='Sexual abuse' and total_incidents > 0 ", | |
| //cartocss: "#table_4mi{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| physical: function(){ | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi WHERE v_event ='Physical abuse' and total_incidents > 0", | |
| //cartocss: "#table_4mi{ marker-fill: red; }" | |
| }); | |
| return true; | |
| }, | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()"> | |
| <div id='map'></div> | |
| <div id="dashboard"> | |
| <p> | |
| <img src="http://migrantreport.org/wp-content/uploads/rmms_logo.png" alt="migrnats" style="float:center;width:290px;height:50px;opacity: 1;padding: 0px 0px 0px;"> | |
| </p> | |
| <div style ="font-size:15;color:#54544F;opacity: 1;padding: 0px 13px 0px;margin: 0cm 0cm 0cm 0cm;text-align: center"> | |
| <p id="header" style ="font-size:20;color:#3B3B37; top: -20px;font-weight: bold">Hover over the dots to display the statistics for a given location.</p> | |
| <p id="event"></p> | |
| </div> | |
| <div id="chart_div" style ="padding:0px;"></div> | |
| </div> | |
| <div id='menu'> | |
| <a href="#physical" id="physical" class="button capitals">Physical Abuse</a> | |
| <a href="#Sexual" id="Sexual" class="button megacities">Sexual Abuse</a> | |
| <a href="#kidnap" id="kidnap" class="button capitals">Kidnapping</a> | |
| <a href="#extorsion" id="extorsion" class="button megacities">Extortion</a> | |
| <a href="#Missing" id="Missing" class="button megacities">Missing People</a> | |
| <a href="#deaths" id="deaths" class="button megacities">Deaths</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