Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Last active September 9, 2016 13:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pabloska/03cc2a52736783c70fea1add7359b406 to your computer and use it in GitHub Desktop.
Save Pabloska/03cc2a52736783c70fea1add7359b406 to your computer and use it in GitHub Desktop.
Download ZIP
Illegal developments - Are Brava
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pablo Gallego Cadabon</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Migration Geo-Portal" />
<meta property="og:site_name" content="Pablo Gallego Cadabon" />
<meta name="author" content="Pablo Gallego Cadabon">
<meta name="keywords" content="migration,, geo-map, map, refugee,imagery,GIS">
<meta name="description" content="Pablo Gallego">
<meta charset=utf-8 />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!--<script src='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js'></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />-->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://migrantreport.org/map/js/ilegal.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ramani.ujuizi.com/api/v.0.1/ramani.css" />
<script src="https://ramani.ujuizi.com/api/v.0.1/ramani.min.js"></script>
<style>
body { margin:0; padding:0;font-family: "Lato",sans-serif; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.range {
position:absolute;
top:60%;
width:100%;
}
.leaflet-top .leaflet-control-zoom {
top:20px;
}
.cartodb-timeslider{ display: none!important; }
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0.5px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: transparent;
border-radius: 1px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url('http://migrantreport.org/map/img/slide_finger.png');
background-size:110px 90px;
opacity: 1;
width: 110px;
height: 90px;
position: relative;
top: 0px;
z-index: 99;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: t;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #2497E3;
border-radius: 1px;
border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #2497E3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #A1D0FF;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2497E3;
border: 0px solid #000000;
border-radius: 2px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #2497E3;
border: 0px solid #000000;
border-radius: 2px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #2497E3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #A1D0FF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #2497E3;
}
input[type=range]:focus::-ms-fill-upper {
background: #2497E3;
}
</style>
<div style="margin 3px black" id='map'></div>
<input id='range' class='range' type='range' min='0' max='1.0' step='any' />
<div style="position:absolute; top:20px;right:20px;border-radius: 100%; width: 150px;height: 150px; overflow: hidden; border: 2px solid white; box-shadow: 2px 2px 2px black;" >
<iframe src="http://migrantreport.org/map/MR_incident_spot_02.html" alt="migrnats" ></iframe>
</div>
<div style="position:absolute;width:50%; top:20px;left:30%;right:70%;color:white;font-weight:bold;font-size:20px" >
Areabrava Beach - Illegal Developments on the Coast
</div>
<!--<div style ="text-shadow: 2px 2px 5px grey;font-size:16px;color:white;position: absolute;left:60px;top:30px;border-bottom:-5px;background:transparent;padding-left:0px;text-align: left;width:35%;font-weight:bold">Aire Mbar, Mauritania : 2003 ( September ) <span style="">Vs</span> 2013 ( May )</span><p style="font-weight:normal;font-size:14px">Aire Mbar is located in the south of Mauritania, near the river Senegal. The river, which defines the border line between Mauritania and Senegal, overflows every summer when the rains start. At this time the water arrives up to 20 meters of the houses. This is time of joy and happiness for everybody at the village. The older can go fishing and the younger ones can go swimming and play in the water.</p></div> -->
<script>
/*
var map = L.map('map');
var HERE_hybridDay = L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/hybrid.day/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
attribution: '&copy; Developed by Pablo Gallego Cadabon - Using:QGIS/GDAL/Leaflet',
subdomains: '1234',
mapID: 'newest',
app_id: 'fsCaXBC9VTxiiEqpQsD6',
app_code: 'hIjAGua7KE3xjXNrOgMGww',
base: 'aerial',
maxZoom: 25,
type: 'maptile',
language: 'eng',
format: 'png8',
size: '256'
})
.addTo(map);
*/
var map = L.map('map',{scrollWheelZoom: false});
var HERE_hybridDay = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '&copy; Developed by Pablo Gallego Cadabon - Using:QGIS/Tilemill/GDAL/Leaflet',
})
.addTo(map);
L.control.scale().addTo(map);
/*/pan disable//
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';
*/
// pop ups json
var redIcon = L.icon({
iconUrl: 'http://www.clker.com/cliparts/Z/x/U/0/B/3/red-pin.svg',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
function onEachFeature(feature, layer) {
var popupContent = "<p><img style='height:50px,' src="+''+" ></img></P>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJson([bicycleRental], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng,{
radius: 4,
fillColor: "red",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
});
}
})
.addTo(map);
var myStyle = {
"color": "white",
"dashArray": '1,8',
"weight": 4,
"opacity": 0.65
};
L.geoJson(maritime, {
filter: function (feature, layer) {
if (feature.properties) {
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
}
return false;
},
style: myStyle,
onEachFeature: onEachFeature
}).addTo(map);
//labels//
cartodb.createLayer(map, {
type: "cartodb",
order: 2,
cartodb_logo: false,
options: {
query: "SELECT * FROM ilegal",
table_name: "ilegal",
user_name: "migrantreport",
tile_style: '#ilegal{ marker-fill-opacity: 0; marker-line-color: #FFF; marker-line-width: 1; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 0; marker-fill: #FF6600; marker-allow-overlap: true; } #ilegal::labels { text-name: [points]; text-face-name: "DejaVu Sans Book"; text-size: 9; text-label-position-tolerance: 0; text-fill: white; text-halo-fill: #FFF; text-halo-radius: 0.3; text-dy: 10; text-allow-overlap: true; text-placement: point; text-placement-type: dummy; }'
}
})
.done(function(layer) {
map.addLayer(layer);
});
//END torque//
///end labels//
//shoreline//
cartodb.createLayer(map, {
type: "cartodb",
order: 3,
cartodb_logo: false,
options: {
query: "SELECT * FROM maritime_border",
table_name: "maritime_border",
user_name: "migrantreport",
tile_style: '#maritime_border{ line-color: white; line-width: 10; line-opacity: 0.2; } #maritime_border::labels { text-name: [name]; text-face-name: "DejaVu Sans Book"; text-size: 10; text-label-position-tolerance: 0; text-fill: #FFFFFF; text-halo-fill: #FFF;text-placements:"W,E,N,12"; text-halo-radius: 0.3; text-dy: -22; text-dx: -10; text-allow-overlap: false; text-placement: line;text-avoid-edges: true; text-max-char-angle-delta: 250;text-opacity:0.4} '
}
})
.done(function(layer) {
map.addLayer(layer);
});
//END shoreline//
///end labels//
cartodb.createLayer(map, {
type: "torque",
order: 1,
cartodb_logo: false,
options: {
query: "SELECT * FROM ilegal",
table_name: "ilegal",
user_name: "migrantreport",
tile_style: 'Map {-torque-frame-count:256;-torque-animation-duration:1;-torque-time-attribute:"cartodb_id";-torque-aggregation-function:"count(cartodb_id)";-torque-resolution:4;-torque-data-aggregation:linear;}#ilegal{ comp-op: source-over; marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-type: ellipse; marker-width: 4; marker-fill: #F11810;}#ilegal[frame-offset=1] { marker-width:13; marker-fill-opacity:0.45; }#ilegal::labels { text-name: [description]; text-face-name: "DejaVu Sans Book"; text-size: 12; text-label-position-tolerance: 10; text-fill: #000; text-halo-fill: #FFF; text-halo-radius: 1; text-dy: -10; text-allow-overlap: true; text-placement: point;text-placement-type: simple;}'
}
})
.done(function(layer) {
map.addLayer(layer);
});
//END torque//
var overlay = L.tileLayer('http://migrantreport.org/map/tiles/mb_areabrava/{z}/{x}/{y}.png').addTo(map);
var range = document.getElementById('range');
function clip() {
var nw = map.containerPointToLayerPoint([0, 0]),
se = map.containerPointToLayerPoint(map.getSize()),
clipX = nw.x + (se.x - nw.x) * range.value;
overlay.getContainer().style.clip ='rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
}
range['oninput' in range ? 'oninput' : 'onchange'] = clip;
map.on('move', clip);
map.setView([42.290290, -8.841449], 19);
// map.setView([16.411033, -14.055398], 18); aire mbar
// map.setView([16.298135, -14.133520], 17);
//map.setView([34.723855, 36.714245], 17);
clip();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment