2017-06-18 04:28:50 +02:00
<!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" >
2017-06-18 11:05:01 +02:00
< 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" >
2017-06-18 04:28:50 +02:00
2017-06-18 11:05:01 +02:00
< 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 >
2017-06-18 04:28:50 +02:00
< style >
2017-06-18 11:05:01 +02:00
#map {
width: 100%;
height: 90vh;
}
.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;
}
#slider span {
height: 2.2em;
}
2017-06-18 11:35:14 +02:00
@media (max-width: 590px){
#slider-container,
#slider,
.value {
display: block;
}
#slider-container {
position: static;
left: 0;
bottom: 0;
width: 100%;
}
.value {
padding: 6px 8px;
bottom: auto;
position: static;
}
#slider {
width: 90%;
}
}
2017-06-18 04:28:50 +02:00
< / style >
< style >
2017-06-18 04:33:09 +02:00
.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 >
2017-06-18 04:28:50 +02:00
< / head >
< body >
2017-06-18 11:05:01 +02:00
< div id = 'map' > < / div >
< div id = "slider-container" >
< div class = "value" > < / div >
< div id = 'slider' class = "info" > < / div >
< / div >
< script >
2017-06-18 04:33:09 +02:00
var mbAttr = 'Map data © < a href = "http://openstreetmap.org" > OpenStreetMap< / a > contributors, ' +
2017-06-18 11:05:01 +02:00
'< 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';
2017-06-18 04:33:09 +02:00
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
2017-06-18 11:05:01 +02:00
streets = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr});
2017-06-18 11:35:14 +02:00
var desktop = window.innerWidth > 768;
2017-06-18 04:33:09 +02:00
var mymap = L.map('map', {
center:[40.4168, -3.7038],
2017-06-18 11:35:14 +02:00
zoom: desktop ? 6 : 5,
2017-06-18 04:33:09 +02:00
scrollWheelZoom: false,
dragging: false,
layers: [grayscale]
});
var baseLayers = {
"Grayscale": grayscale,
"Satellite": streets
};
L.control.layers(baseLayers).addTo(mymap);
// slider
2017-06-18 11:05:01 +02:00
var handle = $( '#slider' ),
span = $( '.value' );
2017-06-18 04:33:09 +02:00
handle.slider({
2017-06-18 11:05:01 +02:00
min: 1936,
max: 1975,
value:1975,
create: function() {
span.text( 1975 );
},
slide: function( event, ui ) {
span.text( ui.value );
//handle.text(1975);
mymap.eachLayer( function(layer){
// Embalses
2017-06-18 04:33:09 +02:00
if (layer.feature & & layer.feature.properties & & layer.feature.properties.Anyo) {
var anyo = parseInt(layer.feature.properties.Anyo);
if (anyo < ui.value ) {
2017-06-18 11:05:01 +02:00
layer.options.fillOpacity = .8;
2017-06-18 04:33:09 +02:00
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 ) {
2017-06-18 11:05:01 +02:00
layer.options.fillOpacity = .8;
2017-06-18 04:33:09 +02:00
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) {
2017-06-18 11:05:01 +02:00
layer.options.fillOpacity = .8;
2017-06-18 04:33:09 +02:00
layer.remove();
layer.addTo(mymap);
}
else {
layer.options.fillOpacity = 0;
layer.remove();
layer.addTo(mymap);
}
}
});
2017-06-18 11:05:01 +02:00
}
2017-06-18 04:33:09 +02:00
});
2017-06-18 11:05:01 +02:00
handle.val(1975)
2017-06-18 04:33:09 +02:00
mymap.createPane('zonas');
mymap.getPane('zonas').style.zIndex = 300;
2017-06-18 04:28:50 +02:00
2017-06-18 04:33:09 +02:00
mymap.createPane('puntos');
mymap.getPane('puntos').style.zIndex = 610;
2017-06-18 04:28:50 +02:00
2017-06-18 04:33:09 +02:00
2017-06-18 11:05:01 +02:00
/*
2017-06-18 04:33:09 +02:00
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoidXJiYW5vdmlpaSIsImEiOiJjaWxmODU2ODIwMDJ5dmxsejRva3FyaWU0In0.xUle2zZJMfYkhXdZUsrlqQ', {
2017-06-18 11:05:01 +02:00
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);
2017-06-18 04:33:09 +02:00
*/
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;
2017-06-18 04:28:50 +02:00
2017-06-18 04:33:09 +02:00
//municipios penales
var mpn_style = {
2017-06-18 11:05:01 +02:00
radius: radius_size,
fillColor: mpn_color, //naranja principal
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: .8
2017-06-18 04:33:09 +02:00
};
//embalses
2017-06-18 04:28:50 +02:00
var emb_style = {
2017-06-18 11:05:01 +02:00
radius: radius_size,
fillColor: emb_color, //azul claro
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: .8
2017-06-18 04:28:50 +02:00
};
2017-06-18 04:33:09 +02:00
//colonias penitenciarias
2017-06-18 04:28:50 +02:00
var col_style = {
2017-06-18 11:05:01 +02:00
radius: radius_size,
fillColor: col_color, //naranja obscuro
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: .8
2017-06-18 04:28:50 +02:00
};
2017-06-18 04:33:09 +02:00
//poblados de colonización
2017-06-18 04:28:50 +02:00
var pob_style = {
2017-06-18 11:05:01 +02:00
radius: radius_size,
fillColor: pob_color, //rojo principal
color: "#FFFFFF",
weight: 1,
opacity: 1,
fillOpacity: .8
2017-06-18 04:28:50 +02:00
};
2017-06-18 04:33:09 +02:00
mymap.on('zoomend',function(){
2017-06-18 11:05:01 +02:00
var currentZoom = mymap.getZoom();
radius_size = Math.pow(1.27,currentZoom);
console.log(radius_size);
2017-06-18 04:33:09 +02:00
});
//Zonas de Riego
$.getJSON("data/ZonasRiego.geojson", function(zon_data){
L.geoJson(zon_data,{
style: function(feature){
2017-06-18 11:05:01 +02:00
var fillColor,
2017-06-18 04:33:09 +02:00
type = feature.properties.Tipo;
2017-06-18 11:05:01 +02:00
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);
2017-06-18 04:33:09 +02:00
});
//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){
2017-06-18 11:05:01 +02:00
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 )
}
2017-06-18 04:33:09 +02:00
}).addTo(mymap);
});
//Embalses
$.getJSON("data/EmbalsesGenV3.geojson", function(emb_data){
var embalses = L.geoJson(emb_data, {
2017-06-18 04:28:50 +02:00
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, emb_style);
2017-06-18 04:33:09 +02:00
},
pane: 'puntos',
onEachFeature: function (feature, layer){
2017-06-18 11:05:01 +02:00
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 );
}
2017-06-18 04:28:50 +02:00
}).addTo(mymap);
});
2017-06-18 04:33:09 +02:00
//Colonias Penitenciarias
$.getJSON("data/ColoniasPenitenciarias.geojson", function(col_data){
2017-06-18 04:28:50 +02:00
L.geoJson(col_data, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, col_style);
2017-06-18 04:33:09 +02:00
},
pane: 'puntos',
onEachFeature: function (feature, layer){
console.log(feature.properties);
2017-06-18 11:05:01 +02:00
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 / > ")
}
2017-06-18 04:28:50 +02:00
}).addTo(mymap);
});
2017-06-18 04:33:09 +02:00
//Poblados de Colonización
$.getJSON("data/PobladosColonizacion.geojson", function(pob_data){
2017-06-18 04:28:50 +02:00
L.geoJson(pob_data, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, pob_style);
2017-06-18 04:33:09 +02:00
},
pane: 'puntos',
onEachFeature: function (feature, layer){
2017-06-18 11:05:01 +02:00
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 / > ")
}
2017-06-18 04:28:50 +02:00
}).addTo(mymap);
});
2017-06-18 04:33:09 +02:00
var legend = L.control({position: 'bottomright'});
2017-06-18 04:28:50 +02:00
2017-06-18 04:33:09 +02:00
legend.onAdd = function (mymap) {
2017-06-18 04:28:50 +02:00
2017-06-18 11:05:01 +02:00
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 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;
2017-06-18 04:33:09 +02:00
};
legend.addTo(mymap);
2017-06-18 04:28:50 +02:00
< / script >
< / body >
< / html >
