flow/poblados-colonizacion-colonias-penitenciarias
1
0
Fork 0
mirror of https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git synced 2024-12-26 12:31:22 +01:00
Code Issues Projects Releases Wiki Activity

fix span slider visibility

Browse source
This commit is contained in:
Luis 2017-06-18 11:05:01 +02:00
parent 3b9df7d868
commit 91f7dd3982
1 changed files with 127 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
docs/colonizacion-leaflet/index.html
View file

@ -20,14 +20,33 @@
width: 100%;
height: 90vh;
}
#slider{
.slider-contaienr {
bottom: 10px;
}
.value {
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 50px;
font-size: 2em;
color: rgb(120,120,120);
}
#slider-container {
bottom: 10px;
position: relative;
z-index: 10000000;
left: 15px;
bottom: 45px;
}
#slider {
z-index: 10000000;
width: 20%;
height: 14px;
text-align: center;
top: -34px;
position: relative;
z-index: 10000000;
left: 8px;
}
#slider span {
height: 2.2em;
}
</style>
@ -50,9 +69,12 @@
</head>
<body>
<div id='map'></div>
<div id='slider' class="info"></div>
<script>
<div id='map'></div>
<div id="slider-container">
<div class="value"></div>
<div id='slider' class="info"></div>
</div>
<script>
var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
@ -77,21 +99,27 @@
L.control.layers(baseLayers).addTo(mymap);
// slider
var handle = $( '#slider' );
var handle = $( '#slider' ),
span = $( '.value' );
handle.slider({
min: 1936,
max: 1975,
value:1975,
create: function() {
handle.text( $( this ).slider( "value" ) );
span.text( 1975 );
},
slide: function( event, ui ) {
handle.text( ui.value );
span.text( ui.value );
//handle.text(1975);
mymap.eachLayer( function(layer){
// Embalses
if (layer.feature && layer.feature.properties && layer.feature.properties.Anyo) {
var anyo = parseInt(layer.feature.properties.Anyo);
if (anyo < ui.value) {
layer.options.fillOpacity = 1;
layer.options.fillOpacity = .8;
layer.remove();
layer.addTo(mymap);
}
@ -105,7 +133,7 @@
if (layer.feature && layer.feature.properties && layer.feature.properties.ANO) {
var anyo = parseInt(layer.feature.properties.ANO);
if (anyo < ui.value) {
layer.options.fillOpacity = 1;
layer.options.fillOpacity = .8;
layer.remove();
layer.addTo(mymap);
}
@ -120,7 +148,7 @@
var ini = parseInt(layer.feature.properties.FECHA_INI);
var fin = parseInt(layer.feature.properties.FECHA_FIN);
if (ini < ui.value && fin > ui.value) {
layer.options.fillOpacity = 1;
layer.options.fillOpacity = .8;
layer.remove();
layer.addTo(mymap);
}
@ -134,6 +162,8 @@
}
});
handle.val(1975)
mymap.createPane('zonas');
@ -143,14 +173,14 @@
mymap.getPane('puntos').style.zIndex = 610;
/*
/*
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoidXJiYW5vdmlpaSIsImEiOiJjaWxmODU2ODIwMDJ5dmxsejRva3FyaWU0In0.xUle2zZJMfYkhXdZUsrlqQ', {
maxZoom: 10,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
}).addTo(mymap);
*/
mymap.once('focus', function() { mymap.scrollWheelZoom.enable(); });
mymap.once('focus', function() { mymap.dragging.enable(); });
@ -169,7 +199,7 @@ var mpn_style = {
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: 1
fillOpacity: .8
};
//embalses
@ -179,7 +209,7 @@ var emb_style = {
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: 1
fillOpacity: .8
};
//colonias penitenciarias
@ -189,7 +219,7 @@ var col_style = {
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: 1
fillOpacity: .8
};
//poblados de colonización
@ -199,7 +229,7 @@ var pob_style = {
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: 1
fillOpacity: .8
};
mymap.on('zoomend',function(){
@ -224,7 +254,7 @@ $.getJSON("data/ZonasRiego.geojson", function(zon_data){
onEachFeature: function (feature, layer){
layer.bindPopup( "<strong>Zona de Riego</br>Nombre: </strong>" + feature.properties.Nombre + "<br/>" + "<strong> Tipo: </strong>" + feature.properties.D_Tipo + "<br/>" + "<strong> Estado: </strong>" +feature.properties.D_Estado)
}
} ).addTo(mymap);
} ).addTo(mymap);
});
//Municipios Penales
@ -286,7 +316,7 @@ var legend = L.control({position: 'bottomright'});
legend.onAdd = function (mymap) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = '<i class="circle" style= "background:#7bccc4"> </i> Embalses<br> <i class="circle" style="background:#fc8d59"> </i> Poblados de Colonización<br> <i class="circle" style=background:#fdbb84> </i> Colonias Penitenciarias<br> <i class="circle" style=background:#fdd49e> </i> Municipios Penales<br><i style=background:#006d2c> </i> Zonas regables de colonizacion del P.N.O.H.<br><i style=background:#74c476> </i> Regados del I.N.C. con aguas superficiales<br><i style=background:#bae4b3> </i> Regados del I.N.C. con aguas subterraneas';
div.innerHTML = '<i class="circle" style= "background:#7bccc4"> </i> Embalses<br> <i class="circle" style="background:#fc8d59"> </i> Poblados de Colonización<br> <i class="circle" style=background:#fdbb84> </i> Colonias Penitenciarias<br> <i class="circle" style=background:#fdd49e> </i> Municipios Penales<br><i style=background:#006d2c> </i> Zonas regables de colonización del P.N.O.H.<br><i style=background:#74c476> </i> Regados del I.N.C. con aguas superficiales<br><i style=background:#bae4b3> </i> Regados del I.N.C. con aguas subterraneas';
return div;
};