<!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-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; } </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-container"> <div class="value"></div> <div id='slider' class="info"></div> </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' ), span = $( '.value' ); handle.slider({ 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 if (layer.feature && layer.feature.properties && layer.feature.properties.Anyo) { var anyo = parseInt(layer.feature.properties.Anyo); if (anyo < ui.value) { layer.options.fillOpacity = .8; 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 = .8; 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 = .8; layer.remove(); layer.addTo(mymap); } else { layer.options.fillOpacity = 0; layer.remove(); layer.addTo(mymap); } } }); } }); handle.val(1975) 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: .8 }; //embalses var emb_style = { radius: radius_size, fillColor: emb_color, //azul claro color: "#FFFFFF", weight: 1, opacity: 1, fillOpacity: .8 }; //colonias penitenciarias var col_style = { radius: radius_size, fillColor: col_color, //naranja obscuro color: "#FFFFFF", weight: 1, opacity: 1, fillOpacity: .8 }; //poblados de colonización var pob_style = { radius: radius_size, fillColor: pob_color, //rojo principal color: "#FFFFFF", weight: 1, opacity: 1, fillOpacity: .8 }; 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 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; }; legend.addTo(mymap); </script> </body> </html>