Created
December 5, 2016 11:02
-
-
Save Pabloska/5c92086e3c1ca8447f5077aa8a56c91a to your computer and use it in GitHub Desktop.
4mi_v2
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" /> | |
| <meta property="og:title" content="4mi - Mixed Migration Monitoring Mechanism Initiative" /> | |
| <!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters --> | |
| <meta property="og:description" content="The 4mi is an innovative, low-cost approach to collect and analyse data on mixed migration flows, initially out of the Horn of Africa. The challenge is considerable due to the clandestine nature of these smuggler-dominated movements and the disparate routes used and methods of movement. Phase One involved the establishment of thirty 4mi locally-recruited monitors in strategic migration hubs in Northern, Eastern, and Southern Africa, Southern and Eastern Europe, and the Middle East with the intention to track Eritrean, Ethiopian and Somali people on the move. " /> | |
| <meta property="og:url" content="http://migrantreport.org/map/4mi_filters_310116.html" /> | |
| <meta property="og:image" content="http://migrantreport.org/map/img/thumbnail_4mi_filters.png" /> | |
| <!--BOOTSTRAP SET--> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <style> | |
| html, body {width:100%; height:100%; padding: 0; margin: 0;font-family: 'Open Sans', sans-serif;background-color:#232227;} | |
| #map { width: 100%; height:70%; background: black;} | |
| #menu { position: absolute; bottom: 10; left: 10; width: 130px; height:460px; z-index:10;border: 0px solid #777777;} | |
| #menu a { | |
| opacity: 0.6; | |
| margin: 6px 0px 0 0; | |
| float: left; | |
| vertical-align: baseline; | |
| width: 115px; | |
| padding: 1px; | |
| text-align: center; | |
| font: bold 12px "Open Sans",sans-serif; | |
| line-height: normal; | |
| color: white; | |
| border-radius: 4px; | |
| border: 0.5px solid white; | |
| background: #339BEB; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| #menu a.selected{ | |
| color: black; | |
| background:white | |
| } | |
| .btn-default a:hover { | |
| color: #F84F40; | |
| } | |
| #map .cartodb-legend-stack { width: 250px; height:60px; z-index: 99;opacity:0.7} | |
| .btn-default:hover{ border: 2px solid grey;} | |
| .btn-default:after{ background-color:rgba(0, 102, 204, 0.6); border: 2px solid grey;} | |
| .leaflet-container .leaflet-control-attribution{ | |
| color: grey; -> change color of text | |
| background-color: transparent; | |
| } | |
| .leaflet-container .leaflet-control-attribution a{ | |
| color: grey; -> change the color of the hyperlinks | |
| } | |
| .btn { | |
| padding: 5px; | |
| margin:5px; | |
| min-width: 200px; | |
| } | |
| .dropdown-menu{ | |
| padding: 10px; | |
| min-width: 200px; | |
| } | |
| .row { | |
| text-align:center; | |
| margin-top:20px | |
| } | |
| #box{ | |
| position: absolute; | |
| top: 60px; | |
| left: 20px; | |
| width: 200px; | |
| height: 170px; | |
| opacity: 0.9; | |
| padding: 5px 10px 5px 10px; | |
| border-radius: 25px; | |
| background-color: #FFF; | |
| color: #fdb462; | |
| } | |
| </style> | |
| <script> | |
| var map; | |
| var incident = "'shelter','extortion','missing','death','lack of food/water','kidnapping','physical abuse','sexual abuse'"; | |
| var origin = "'Somalia','Eritrea','Ethiopia'"; | |
| var gender = "'Male','Female'"; | |
| function init(){ | |
| // initiate leaflet map | |
| map = new L.Map('map', { | |
| zoomControl: false, | |
| scrollWheelZoom: false, | |
| attributionControl: true, | |
| center: [15,20], | |
| width: 500, | |
| zoom: 4, | |
| minZoom: 4 | |
| }); | |
| L.control.zoom({ | |
| position:'topright' | |
| }).addTo(map); | |
| L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', { | |
| attribution: '<a href="http://migrantreport.org/">® Pablo Gallego/Migrant Report.' | |
| }).addTo(map); | |
| //http://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.png | |
| //http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png | |
| //http://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.png | |
| //HORN-OF-AFRICA BOUNDARIES// | |
| var layerUrl3 = 'https://migrantreport.cartodb.com/api/v2/viz/01a1fd86-a0ec-11e5-a9b0-0ea31932ec1d/viz.json'; | |
| cartodb.createLayer(map, layerUrl3, { | |
| cartodb_logo: false, | |
| } | |
| ) | |
| .on('done', function(layer) { | |
| map.addLayer(layer); | |
| //layer.interaction.remove(); | |
| //layer.interaction = null; | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| //END HORN-OF-AFRICA BOUNDARIES// | |
| //ROUTES LAYER// | |
| 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 LAYER// | |
| //INCIDENTS LAYER// | |
| var layerUrl2 = 'https://migrantreport.carto.com/api/v2/viz/ba3cdc5a-b228-11e6-bff0-0e05a8b3e3d7/viz.json'; | |
| var sublayers = []; | |
| cartodb.createLayer(map, layerUrl2, { | |
| cartodb_logo: false, | |
| } | |
| ) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| //***Create the sublayer to be toggled | |
| /* var incident = 'b_death'; | |
| var origin = 'd_somalia1'; | |
| var gender = 'c_male'; */ | |
| console.log(incident,origin) | |
| var subLayerOptions = { | |
| sql:"SELECT * FROM table_4mi_dataset_p5" | |
| } | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.set(subLayerOptions); | |
| sublayers.push(sublayer); | |
| //sublayer.setInteraction(true); | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| //END BUBLES LAYER// | |
| $('.button').click(function() { | |
| //$('.button').removeClass('selected'); | |
| //$(this).addClass('selected'); | |
| LayerActions[$(this).attr('id')](); | |
| //console.log(LayerActions[$(this).attr('id')]) | |
| }); | |
| //dropdown menu incudents | |
| $(".dropdown-menu li a").click(function(){ | |
| $(this).parents(".btn-group").find('.selection').text($(this).text()); | |
| $(this).parents(".btn-group").find('.selection').val($(this).text()); | |
| }); | |
| //layer actions | |
| var sum = 0 | |
| var sum2 = 0 | |
| var sql = new cartodb.SQL({ user: 'migrantreport'}); | |
| var LayerActions = { | |
| // FUNTION FOR INCIDENTS// | |
| extortion: function(){ | |
| incident = "'extortion'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| }); | |
| sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")") | |
| .done(function(data){ | |
| for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table | |
| sum = sum + 1 | |
| } | |
| console.log(sum) | |
| document.getElementById("num").innerHTML = sum; | |
| }); | |
| return true; | |
| }, | |
| missing: function(){ | |
| incident = "'missing'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")") | |
| .done(function(data){ | |
| for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table | |
| sum2 = sum2 + 1 | |
| } | |
| console.log(sum2) | |
| document.getElementById("num2").innerHTML = sum2; | |
| }); | |
| return true; | |
| }, | |
| shelter: function(){ | |
| incident = "'shelter'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| death: function(){ | |
| incident = "'death'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| food_water: function(){ | |
| incident = "'lack of food/water'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| kidnapping: function(){ | |
| incident = "'kidnapping'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| physical_abuse: function(){ | |
| incident = "'physical abuse'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| sexual_abuse: function(){ | |
| incident = "'sexual abuse'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| // FUNTION FOR ORIGINS// | |
| somalia: function(){ | |
| origin = "'Somalia'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ", | |
| //cartocss: "#table_4mi_1{ marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| eritrea: function(){ | |
| origin = "'Eritrea'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ", | |
| //cartocss: "#table_4mi_1{ marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| ethiopia: function(){ | |
| origin = "'Ethiopia'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")", | |
| //cartocss: "#table_4mi_1{ marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| djibouti: function(){ | |
| origin = "'Djibouti'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ", | |
| //cartocss: "#table_4mi_1{ marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| male: function(){ | |
| gender = "'Male'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ", | |
| //cartocss: "#table_4mi_1{ marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| female: function(){ | |
| gender = "'Female'"; | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ", | |
| //cartocss: "#table_4mi_1{ marker-fill: #5CA2D1; marker-width: 10; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest; }" | |
| }); | |
| return true; | |
| }, | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()"> | |
| <div id='map'></div> | |
| <!--incidents--> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="btn-group"> | |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> | |
| <span class="selection"> Select Incident </span><span class="caret"></span> | |
| </button> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#death" id="death" class="button">Deaths</a></li> | |
| <li><a href="#missing" id="missing" class="button">Missing People</a></li> | |
| <li><a href="#kidnapping" id="kidnapping" class="button" >Kidnapping</a></li> | |
| <li><a href="#sexual_abuse" id="sexual_abuse" class="button" >Sexual Abuse</a></li> | |
| <li><a href="#physical_abuse" id="physical_abuse" class="button" >Physical Abuse</a></li> | |
| <li><a href="#extortion" id="extortion" class="button" >Extortion</a></li> | |
| <li><a href="#food_water" id="food_water" class="button">Lack of Food/Water</a></li> | |
| <li><a href="#shelter" id="shelter" class="button">Shelter issues</a></li> | |
| </ul> | |
| </div> | |
| <!--origins--> | |
| <div class="btn-group"> | |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> | |
| <span class="selection">Select Origin </span><span class="caret"></span> | |
| </button> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#djibouti" id="djibouti" class="button">Djibouti</a></li> | |
| <li><a href="#eritrea" id="eritrea" class="button">Eritrea</a></li> | |
| <li><a href="#somalia" id="somalia" class="button">Somalia</a></li> | |
| <li><a style ="margin-bottom:10px" href="#ethiopia" id="ethiopia" class="button">Ethiopia</a></li> | |
| </ul> | |
| </div> | |
| <!--gender--> | |
| <div class="btn-group"> | |
| <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> | |
| <span class="selection">Select Gender </span><span class="caret"></span> | |
| </button> | |
| <ul class="dropdown-menu" role="menu"> | |
| <li><a href="#male" id="male" class="button">Male</a></li> | |
| <li><a href="#female" id="female" class="button">Female</a></li> | |
| </ul> | |
| </div> | |
| </div><br> | |
| <div style="color:white;opacity:0.7;"> | |
| The map shows the distribution of 9,000 incidents reported by migrants and refugees from The Horn of Africa. The Intensity analysis (coloured dots) displayed on the map uses darker tonnes to highlight the locations where incidents have repeatedly occurred, whereas the lighter tonnes (yellow) represent locations where incidents occurred with less frequency (1-2 times). Those host spots are usually matched by the main transportation network (roads) with the exception of the incidents that take place at the Sahara Desert where migrants travel on pickups across the sand. This typically happens between Khartoum (Sudan) and the Southern Libyan region of Al Kufra, in which case the locations are approximative. <br><br> | |
| Migrants leaving from the Horn of Africa follow two opposite routes. The most transited route heads north towards the Mediterranean coast, whereas the second one follows the Great Rift Valley towards South Africa. Check points and bordering areas are well known as black spots for migrants on the move, but what is the proportion of incidents that occur on those areas?. To answer this question the incidents falling within a buffer area of 10 km of the borderline have been selected. The results show that 24% of the accidents fall very close to the borderline between two countries ( 10 km buffer). For instance on the border between Ethiopia and Sudan there are 2 location (Metemma, Gallabat ) where a total of 757 incidents took place. Kassala , on the Eritrea-Sudan border has registered 200 incidents reported by Eritrean migrants on the move to the northern coast. The Sudan-Egypt border has registered a number of 218 incidents in Wadi Halfa (Sudan) and Abu Simbel (Egypt). The route from Abu Simbel (Sudan-Egypt border) to Cairo has registered so far 1,230 incidents in almost all its length excluding Cairo with 239 incidents. In Libya the map shows a less scattered scenario. This happens in part because many of the incidents usually take place in undefined locations of Al Kufra region (South East Libya) where the migrants travel across the desert and eventually passing by small Oasis towns. | |
| Describe the charts about types of incidents total. | |
| </div> | |
| </div> | |
| <div id ="box"><h4>Number of classes</h4><p id="num">None</p><p id="num2">None</p></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment