mirror of
https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git
synced 2024-12-26 12:31:22 +01:00
Delete index.html
This commit is contained in:
abe-
GitHub
parent
fad52c4d5d
commit
83d0fb4c58
1 changed files with 0 additions and 298 deletions
298
docs/index.html
298
docs/index.html
|
|
@ -1,298 +0,0 @@
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<title>Colonización Interior - Mapa</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
|
|
||||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
||||||
|
|
||||||
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
|
|
||||||
<script src="js/leaflet.ajax.min.js"></script>
|
|
||||||
<script src="js/jquery-3.2.1.min.js"></script>
|
|
||||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
||||||
<style>
|
|
||||||
#map {
|
|
||||||
width: 100%;
|
|
||||||
height: 90vh;
|
|
||||||
}
|
|
||||||
#slider{
|
|
||||||
width: 20%;
|
|
||||||
height: 14px;
|
|
||||||
text-align: center;
|
|
||||||
top: -34px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10000000;
|
|
||||||
left: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; }
|
|
||||||
.info h4 { margin: 0 0 5px; color: #777; }
|
|
||||||
.legend { text-align: left; line-height: 18px; color: #555; }
|
|
||||||
.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 1; }
|
|
||||||
.legend .circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id='map'></div>
|
|
||||||
<div id='slider' class="info"></div>
|
|
||||||
<script>
|
|
||||||
var mbAttr = 'Map data © <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>',
|
|
||||||
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
|
|
||||||
|
|
||||||
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
|
|
||||||
streets = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr});
|
|
||||||
|
|
||||||
var mymap = L.map('map', {
|
|
||||||
center:[40.4168, -3.7038],
|
|
||||||
zoom: 6,
|
|
||||||
scrollWheelZoom: false,
|
|
||||||
dragging: false,
|
|
||||||
layers: [grayscale]
|
|
||||||
});
|
|
||||||
|
|
||||||
var baseLayers = {
|
|
||||||
"Grayscale": grayscale,
|
|
||||||
"Satellite": streets
|
|
||||||
};
|
|
||||||
|
|
||||||
L.control.layers(baseLayers).addTo(mymap);
|
|
||||||
|
|
||||||
// slider
|
|
||||||
var handle = $( '#slider' );
|
|
||||||
handle.slider({
|
|
||||||
min: 1936,
|
|
||||||
max: 1975,
|
|
||||||
create: function() {
|
|
||||||
handle.text( $( this ).slider( "value" ) );
|
|
||||||
},
|
|
||||||
slide: function( event, ui ) {
|
|
||||||
handle.text( ui.value );
|
|
||||||
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.remove();
|
|
||||||
layer.addTo(mymap);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
layer.options.fillOpacity = 0;
|
|
||||||
layer.remove();
|
|
||||||
layer.addTo(mymap);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Poblados
|
|
||||||
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.remove();
|
|
||||||
layer.addTo(mymap);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
layer.options.fillOpacity = 0;
|
|
||||||
layer.remove();
|
|
||||||
layer.addTo(mymap);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Penales
|
|
||||||
if (layer.feature && layer.feature.properties && layer.feature.properties.FECHA_INI) {
|
|
||||||
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.remove();
|
|
||||||
layer.addTo(mymap);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
layer.options.fillOpacity = 0;
|
|
||||||
layer.remove();
|
|
||||||
layer.addTo(mymap);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mymap.createPane('zonas');
|
|
||||||
mymap.getPane('zonas').style.zIndex = 300;
|
|
||||||
|
|
||||||
mymap.createPane('puntos');
|
|
||||||
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 © <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);
|
|
||||||
*/
|
|
||||||
mymap.once('focus', function() { mymap.scrollWheelZoom.enable(); });
|
|
||||||
mymap.once('focus', function() { mymap.dragging.enable(); });
|
|
||||||
|
|
||||||
var emb_color = "#7bccc4";
|
|
||||||
var mpn_color = "#fdd49e";
|
|
||||||
var col_color = "#fdbb84";
|
|
||||||
var pob_color = "#fc8d59";
|
|
||||||
|
|
||||||
var radius_size = 4;
|
|
||||||
|
|
||||||
//municipios penales
|
|
||||||
var mpn_style = {
|
|
||||||
radius: radius_size,
|
|
||||||
fillColor: mpn_color, //naranja principal
|
|
||||||
color: "#FFFFFF",
|
|
||||||
weight: 1,
|
|
||||||
opacity: 1,
|
|
||||||
fillOpacity: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
//embalses
|
|
||||||
var emb_style = {
|
|
||||||
radius: radius_size,
|
|
||||||
fillColor: emb_color, //azul claro
|
|
||||||
color: "#FFFFFF",
|
|
||||||
weight: 1,
|
|
||||||
opacity: 1,
|
|
||||||
fillOpacity: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
//colonias penitenciarias
|
|
||||||
var col_style = {
|
|
||||||
radius: radius_size,
|
|
||||||
fillColor: col_color, //naranja obscuro
|
|
||||||
color: "#FFFFFF",
|
|
||||||
weight: 1,
|
|
||||||
opacity: 1,
|
|
||||||
fillOpacity: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
//poblados de colonización
|
|
||||||
var pob_style = {
|
|
||||||
radius: radius_size,
|
|
||||||
fillColor: pob_color, //rojo principal
|
|
||||||
color: "#FFFFFF",
|
|
||||||
weight: 1,
|
|
||||||
opacity: 1,
|
|
||||||
fillOpacity: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
mymap.on('zoomend',function(){
|
|
||||||
var currentZoom = mymap.getZoom();
|
|
||||||
radius_size = Math.pow(1.27,currentZoom);
|
|
||||||
console.log(radius_size);
|
|
||||||
});
|
|
||||||
|
|
||||||
//Zonas de Riego
|
|
||||||
$.getJSON("data/ZonasRiego.geojson", function(zon_data){
|
|
||||||
L.geoJson(zon_data,{
|
|
||||||
style: function(feature){
|
|
||||||
var fillColor,
|
|
||||||
type = feature.properties.Tipo;
|
|
||||||
if (type == "A") fillColor = "#006d2c";
|
|
||||||
else if (type == "B") fillColor = "#74c476";
|
|
||||||
else if (type == "C") fillColor = "#bae4b3";
|
|
||||||
else fillColor = "#f7f7f7"; //no data
|
|
||||||
return { color: "#999", weight: 0, fillColor: fillColor, fillOpacity: .6};
|
|
||||||
},
|
|
||||||
pane: 'zonas',
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
|
|
||||||
//Municipios Penales
|
|
||||||
$.getJSON("data/MunicipiosPenales.geojson", function(mpn_data){
|
|
||||||
L.geoJson(mpn_data, {
|
|
||||||
pointToLayer: function (feature, latlng) {
|
|
||||||
return L.circleMarker(latlng, mpn_style);
|
|
||||||
},
|
|
||||||
pane: 'puntos',
|
|
||||||
onEachFeature: function (feature, layer){
|
|
||||||
layer.bindPopup( "<strong>Municipio Penal</br> Nombre: </strong>" + feature.properties.NOMBRE + ", (" + feature.properties.PROVINCIA + ")<br/>" + "<strong> Tipo: </strong>" + feature.properties.TIPO_ENTID + "<br/>" + "<strong> Período: </strong>" + feature.properties.PENALES_10 )
|
|
||||||
}
|
|
||||||
}).addTo(mymap);
|
|
||||||
});
|
|
||||||
|
|
||||||
//Embalses
|
|
||||||
|
|
||||||
$.getJSON("data/EmbalsesGenV3.geojson", function(emb_data){
|
|
||||||
var embalses = L.geoJson(emb_data, {
|
|
||||||
pointToLayer: function (feature, latlng) {
|
|
||||||
return L.circleMarker(latlng, emb_style);
|
|
||||||
},
|
|
||||||
pane: 'puntos',
|
|
||||||
onEachFeature: function (feature, layer){
|
|
||||||
layer.bindPopup( "<strong>Embalse</br> Nombre: </strong>" + feature.properties.Nombre + "</br>" +"<strong> Ubicación: </strong>" + feature.properties.Nombre + " (" + feature.properties.Provincia + ")<br/>" + "<strong> Río: </strong>" + feature.properties.Rio + "<br/>" + "<strong> Cuenca: </strong>" + feature.properties.Cuenca + "<br/>" + "<strong> Año de construcción: </strong>" + feature.properties.Anyo );
|
|
||||||
}
|
|
||||||
}).addTo(mymap);
|
|
||||||
});
|
|
||||||
|
|
||||||
//Colonias Penitenciarias
|
|
||||||
$.getJSON("data/ColoniasPenitenciarias.geojson", function(col_data){
|
|
||||||
L.geoJson(col_data, {
|
|
||||||
pointToLayer: function (feature, latlng) {
|
|
||||||
return L.circleMarker(latlng, col_style);
|
|
||||||
},
|
|
||||||
pane: 'puntos',
|
|
||||||
onEachFeature: function (feature, layer){
|
|
||||||
console.log(feature.properties);
|
|
||||||
layer.bindPopup( "<strong>Colonia Penitenciaria</br> Agrupación: </strong>" + feature.properties.AGRUPACION + "</br>" +"<strong> Entidad: </strong>" + feature.properties.ENTIDAD + "<br/>" + "<strong> Municipio: </strong>" + feature.properties.MUNICIPIO + "<br/>")
|
|
||||||
}
|
|
||||||
}).addTo(mymap);
|
|
||||||
});
|
|
||||||
|
|
||||||
//Poblados de Colonización
|
|
||||||
$.getJSON("data/PobladosColonizacion.geojson", function(pob_data){
|
|
||||||
L.geoJson(pob_data, {
|
|
||||||
pointToLayer: function (feature, latlng) {
|
|
||||||
return L.circleMarker(latlng, pob_style);
|
|
||||||
},
|
|
||||||
pane: 'puntos',
|
|
||||||
onEachFeature: function (feature, layer){
|
|
||||||
layer.bindPopup( "<strong>Poblado de Colonización</br> Poblado: </strong>" + feature.properties.POBLADO + " (" + feature.properties.PROVINCIA+ ")</br>" + "<strong> Año: </strong>" + feature.properties.ANO + "<br/>")
|
|
||||||
}
|
|
||||||
}).addTo(mymap);
|
|
||||||
});
|
|
||||||
|
|
||||||
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';
|
|
||||||
return div;
|
|
||||||
};
|
|
||||||
|
|
||||||
legend.addTo(mymap);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in a new issue