Skip to content

F
fordecyt_2019
Commit cd501a1f authored by Tania Gómez's avatar Tania Gómez
Browse files
Options

add layers for maps 12,14,15

parent 84a7371c
Show whitespace changes
Inline Side-by-side
Showing with 218 additions and 81 deletions
public/fordecyt_2019/centropais/index.html
View file @ cd501a1f
......@@ -3,7 +3,7 @@
<head>
<meta charset='utf-8' />
<title>Contenido de agua en la cuenca Grijalva</title>
<title>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
......@@ -49,7 +49,7 @@
<header class="page-header py-2">
<div class="container text-center">
<div class="row align-items-center text-center" id="title">
<h2>Contenido de agua en la cuenca del r&iacute;o Grijalva</h2>
<h2>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s</h2>
</div>
</div>
</header>
......
public/fordecyt_2019/js/centropais_basemap.js
View file @ cd501a1f
......@@ -130,7 +130,7 @@ const getCuencasColor = s => {
"rgba(168,56,0,0.3)";
}
let munis_contexto, lim_zms, zms, conurbaciones, pistasaereas, autobuses, supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, subcuencas, tuxtlaVH;
let munis_contexto, lim_zms, zms, conurbaciones, agebs2005, agebs2010, agebs2015, auto2010, auto2014, auto2018, tecnologia2010, tecnologia2014, tecnologia2018, supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, subcuencas, tuxtlaVH;
// *** WMS INEGI ***
// // AEROPUERTOS
......@@ -204,68 +204,186 @@ let layer_limiteMunicipal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tu
});
// *** FIN WMS INEGI ***
let layer_pistasaereas = new L.geoJson(null, {
let layer_auto2010 = new L.geoJson(null, {
attribution: "",
//pane: "pane_aeropuertosypistas",
minZoom: 9,
pane: "pane_auto2010",
// minZoom: 9,
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let avionMarker = L.BeautifyIcon.icon({
icon: "plane",
let autoMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-plane fa-stack-1x\" style=\"color:#fada5e;\"></i></span>",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:rgba(49,46,100,0.3);\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: avionMarker
icon: autoMarker
});
}
});
// let aeropuertosypistasaereas = new L.layerGroup([layer_aeropuertos, layer_pistasaereas], {
// pane: "pane_aeropuertosypistas",
// minZoom: 9
// });
let layer_auto2014 = new L.geoJson(null, {
attribution: "",
pane: "pane_auto2014",
// minZoom: 9,
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let autoMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:rgba(49,46,100,0.3);\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: autoMarker
});
}
});
let layer_autobuses = new L.geoJson(null, {
let layer_auto2018 = new L.geoJson(null, {
attribution: "",
pane: "pane_autobuses",
pane: "pane_auto2018",
// minZoom: 9,
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let busMarker = L.BeautifyIcon.icon({
icon: "bus1",
let autoMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 8px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-bus1 fa-stack-1x\" style=\"color:#fda50f;\"></i></span>",
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:rgba(49,46,100,0.3);\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: busMarker
icon: autoMarker
});
}
});
let layer_tecnologia2010 = new L.geoJson(null, {
attribution: "",
pane: "pane_tecnologia2010",
// minZoom: 9,
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let autoMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:rgba(129,78,170,0.3);\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: autoMarker
});
}
});
let layer_tecnologia2014 = new L.geoJson(null, {
attribution: "",
pane: "pane_tecnologia2014",
// minZoom: 9,
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let autoMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:rgba(129,78,170,0.3);\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: autoMarker
});
}
});
let layer_tecnologia2018 = new L.geoJson(null, {
attribution: "",
pane: "pane_tecnologia2018",
// minZoom: 9,
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let autoMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:rgba(129,78,170,0.3);\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: autoMarker
});
}
});
// let aeropuertosypistasaereas = new L.layerGroup([layer_aeropuertos, layer_pistasaereas], {
// pane: "pane_aeropuertosypistas",
// minZoom: 9
// });
let layer_supermercados = new L.geoJson(null, {
attribution: "",
pane: "pane_supermercados",
......@@ -487,94 +605,99 @@ let layer_conurbaciones_rurbana = new L.geoJson(null, {
style: style_conurbaciones_rurbana
});
const style_agebsbypop = feature => {
const style_agebs2005 = () => {
return {
pane: "pane_agebsbypop",
opacity: .6,
color: "#4d4d4d",
// pane: "pane_agebs2005",
opacity: .9,
color: "#d6c996",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.7, //1,
fillColor: getPoblacionColor(feature.properties['POBTOT'])
fillOpacity: 0.9, //1,
fillColor: "#ffffb3"
}
}
let layer_agebsbypop = new L.geoJson(null, {
let layer_agebs2005 = new L.geoJson(null, {
attribution: "",
pane: "pane_agebsbypop",
// pane: "pane_agebs2005",
//onEachFeature: pop_ANPs,
style: style_agebsbypop
style: style_agebs2005
});
const style_agebsbydens = feature => {
const style_agebs2010 = () => {
return {
pane: "pane_agebsbydens",
opacity: .6,
color: "#4d4d4d",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.5, //1,
fillColor: getDensidadColor(feature.properties['DENPOB_KM2']) //"rgba(0,240,2,0.05)"
}
}
let layer_agebsbydens = new L.geoJson(null, {
attribution: "",
pane: "pane_agebsbydens",
//onEachFeature: pop_ANPs,
style: style_agebsbydens
});
const style_agricolaoi = feature => {
return {
pane: "pane_agricolaoi",
// pane: "pane_agebs2010",
opacity: 1,
color: getCultivoBorder(feature.properties['CULTIVO']),
color: "#ffaa00",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 0.5, //1.0,
fill: true,
fillOpacity: 1,
fillColor: getCultivoColor(feature.properties['CULTIVO'])
fillColor: "#ffaa00"
}
}
let layer_agricolaoi = new L.geoJson(null, {
let layer_agebs2010 = new L.geoJson(null, {
attribution: "",
pane: "pane_agricolaoi",
// pane: "pane_agebs2010",
//onEachFeature: pop_ANPs,
style: style_agricolaoi
style: style_agebs2010
});
const style_agricolapv = feature => {
const style_agebs2015 = () => {
return {
pane: "pane_agricolapv",
// pane: "pane_agebs2015",
opacity: 1,
color: getCultivoBorder(feature.properties['CULTIVO']),
color: "#730000",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 0.5, //1.0,
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: getCultivoColor(feature.properties['CULTIVO'])
fillColor: "#730000"
}
}
let layer_agricolapv = new L.geoJson(null, {
let layer_agebs2015 = new L.geoJson(null, {
attribution: "",
pane: "pane_agricolapv",
// pane: "pane_agebs2015",
//onEachFeature: pop_ANPs,
style: style_agricolaoi
style: style_agebs2015
});
let crecimiento_urbano = new L.layerGroup([layer_agebs2005, layer_agebs2010, layer_agebs2015], {
pane: "pane_agebs",
// minZoom: 9
});
// const style_agricolapv = feature => {
// return {
// pane: "pane_agricolapv",
// opacity: 1,
// color: getCultivoBorder(feature.properties['CULTIVO']),
// //dashArray: "3 2",
// lineCap: "butt",
// lineJoin: "miter",
// weight: 0.5, //1.0,
// fill: true,
// fillOpacity: 1,
// fillColor: getCultivoColor(feature.properties['CULTIVO'])
// }
// }
// let layer_agricolapv = new L.geoJson(null, {
// attribution: "",
// pane: "pane_agricolapv",
// //onEachFeature: pop_ANPs,
// style: style_agricolaoi
// });
const styleDrawnItems = () => {
let currentId = 0;
drawnItems.eachLayer(l => {
......@@ -624,19 +747,21 @@ const makeBaseMap = () => {
createPane("pane_estatal", 409);
createPane("pane_carreteras", 410);
createPane("pane_wbnames", 421);
createPane("pane_aeropuertosypistas", 411);
createPane("pane_autobuses", 412);
createPane("pane_auto2010", 411);
createPane("pane_auto2014", 411);
createPane("pane_auto2018", 411);
createPane("pane_tecnologia2010", 412);
createPane("pane_tecnologia2014", 412);
createPane("pane_tecnologia2018", 412);
createPane("pane_escuelas", 413);
createPane("pane_hoteles", 414);
createPane("pane_hospitales", 415);
createPane("pane_supermercados", 416);
createPane("pane_bancos", 417);
createPane("pane_vferreas", 418);
createPane("pane_agricolaoi", 419);
createPane("pane_agricolapv", 420);
createPane("pane_agebsbypop", 421);
createPane("pane_agebsbydens", 422);
// createPane("pane_agricolaoi", 419);
// createPane("pane_agricolapv", 420);
createPane("pane_agebs", 421);
/*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" +
"<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
......@@ -649,13 +774,25 @@ const makeBaseMap = () => {
layerControl.addOverlay(layer_munis_contexto, "&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(255,255,212,0.4)\" stroke=\"rgba(110,100,100,0.4)\" stroke-dasharray=\" \"></rect></svg>&nbsp; Municipios para dar contexto a la región");
zip2Lyr("../centropais/data/munis_conurbaciones_rurbana.zip", conurbaciones, layer_conurbaciones_rurbana);
layerControl.addOverlay(layer_conurbaciones_rurbana, "&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(255,0,0,0.1)\" stroke=\"rgba(35,35,35,0.4)\" stroke-dasharray=\" \"></rect></svg>&nbsp; Municipios que albergan las conurbaciones de la región");
// zip2Lyr("../grijalva/data/escuelas.zip", escuelas, layer_escuelas);
// layerControl.addOverlay(layer_escuelas, "Escuelas con 50 personas ocupadas o más<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#409400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Básico<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#df6400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Medio superior<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#c0d1e5;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Otras escuelas");
// zip2Lyr("../grijalva/data/hospitales.zip", hospitales, layer_hospitales);
// layerControl.addOverlay(layer_hospitales, "<span class=\"fa fa-stack\" style=\"padding-top: 6px;\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:#ff0000;\"></i><i class=\"fas fa-plus-circle fa-stack-1x fa-inverse\"></i></span>Hospitales con 50 personas ocupadas o más");
// zip2Lyr("../grijalva/data/hoteles.zip", hoteles, layer_hoteles);
// layerControl.addOverlay(layer_hoteles, "&nbsp; <i class=\"fas fa-bed style=\"color:#808080;\"></i> Hoteles principales");
// zip2Lyr("../riesgos/data/Supermercados y tiendas departamentales.zip", supermercados, layer_supermercados);
zip2Lyr("../centropais/data/agebs_urbanos2005.zip", agebs2005, layer_agebs2005);
// layerControl.addOverlay(layer_agebs2005, "&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(255,255,179,0.9)\" stroke=\"rgba(213,201,150,0.9)\" stroke-dasharray=\" \"></rect></svg>&nbsp; ");
zip2Lyr("../centropais/data/expansion_agebs2010.zip", agebs2010, layer_agebs2010);
// layerControl.addOverlay(layer_agebs2010, "");
zip2Lyr("../centropais/data/expansion_agebs2015.zip", agebs2015, layer_agebs2015);
layerControl.addOverlay(crecimiento_urbano, "Crecimiento urbano 2005-2015<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#730000\" stroke=\"#730000\" stroke-dasharray=\" \"></rect></svg> Expansión del área de los AGEB's urbanos 2015<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ffaa00\" stroke = \"#ffaa00\" stroke-dasharray=\" \"></rect></svg> Expansión del área de los AGEB's urbanos 2010<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ffffd3\" stroke = \"#d6c996\" stroke-dasharray=\" \"></rect></svg> Área ocupada por los AGEBS's urbanos en 2005");
zip2Lyr("../centropais/data/industria_automotriz_2010.zip", auto2010, layer_auto2010);
layerControl.addOverlay(layer_auto2010, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#312e64;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria automotriz 2010 ");
zip2Lyr("../centropais/data/industria_automotriz_2014.zip", auto2014, layer_auto2014);
layerControl.addOverlay(layer_auto2014, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#312e64;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria automotriz 2014 ");
zip2Lyr("../centropais/data/industria_automotriz_2018.zip", auto2018, layer_auto2018);
layerControl.addOverlay(layer_auto2018, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#312e64;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria automotriz 2018 ");
zip2Lyr("../centropais/data/tecnologia_media_alta_2010.zip", tecnologia2010, layer_tecnologia2010);
layerControl.addOverlay(layer_tecnologia2010, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#814eaa;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria de tecnología media-alta 2010 ");
zip2Lyr("../centropais/data/tecnologia_media_alta_2014.zip", tecnologia2014, layer_tecnologia2014);
layerControl.addOverlay(layer_tecnologia2014, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#814eaa;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria de tecnología media-alta 2014 ");
zip2Lyr("../centropais/data/tecnologia_media_alta_2018.zip", tecnologia2018, layer_tecnologia2018);
layerControl.addOverlay(layer_tecnologia2018, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#814eaa;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria de tecnología media-alta 2018 ");
// layerControl.addOverlay(layer_supermercados, "Supermercados y tiendas departamentales<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-shopping-cart\" style=\"color:#9e4244 ;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Supermercados<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-shopping-cart\" style=\"color:#fc464e;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Tiendas Departamentales");
// zip2Lyr("../riesgos/data/Bancos.zip", bancos, layer_bancos);
// layerControl.addOverlay(layer_bancos, "<span class = \"fa fa-stack\" style=\"padding-top: 6px;\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:#c0ca33;\"></i><i class=\"fas fa-dollar fa-stack-1x fa-inverse\"></i></span>Bancos");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment