Skip to content

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

improve style and layers control order on riesgos project

parent 6a1f5cee
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 447 deletions
public/fordecyt_2019/js/riesgos_basemap.js
View file @ dc3981d1
......@@ -90,21 +90,21 @@ const getSchoolColor = s => {
}
const getCommerceColor = s => {
return s == "Comercio al por menor en supermercados" ? "#409400" :
s == "Comercio al por menor en tiendas departamentales" ? "#df6400" :
return s == "Comercio al por menor en supermercados" ? "#9e4244" :
s == "Comercio al por menor en tiendas departamentales" ? "#fc464e" :
"#c0d1e5";
}
const getCultivoColor = s => {
return s == "Maíz grano" ? "#d1ff73" :
return s == "Sorgo grano" ? "#ff5500" :
s == "Frijol" ? "#8e1973" :
"#ff5500";
"#d1ff73";
}
const getCultivoBorder = s => {
return s == "Maíz grano" ? "#aaff00" :
return s == "Sorgo grano" ? "#e60000" : // :
s == "Frijol" ? "#a80084" :
"#e60000";
"#aaff00"; //;
}
const getPoblacionColor = s => {
return s > 6000 ? "#6b0601" :
......@@ -124,7 +124,13 @@ const getDensidadColor = s => {
"#ffffff";
}
let pistasaereas, autobuses, supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, puentes, puntoFronterizo, descargas, presas, subcuencas, tuxtlaVH, zms, anps;
const getCuencasColor = s => {
return s == "Bajo Grijalva o Grijalva-Villahermosa" ? "rgba(255,255,190,0.3)" :
s == "Medio Grijalva o Grijalva-Tuxtla Gutiérrez" ? "rgba(255,170,0,0.3)" :
"rgba(168,56,0,0.3)";
}
let pistasaereas, autobuses, supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, subcuencas, tuxtlaVH, zms;
// *** WMS INEGI ***
// AEROPUERTOS
......@@ -150,28 +156,8 @@ let layer_limiteEstatal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunn
format: "image/svg+xml",
transparent: true,
pane: "pane_estatal",
attribution: "INEGI 2019" //,
// minZoom: 9
attribution: "INEGI 2019"
});
// // AGEBS RURAL
// let agebrur = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
// layers: "c108",
// format: "image/svg+xml",
// transparent: true,
// attribution: "INEGI 2019"
// });
// // AGEBS URBANO
// let ageburb = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
// layers: "c109",
// format: "image/svg+xml",
// transparent: true,
// attribution: "INEGI 2019"
// });
// let layer_agebswms = L.layerGroup([agebrur, ageburb], {
// pane: "pane_agebs",
// minZoom: 11,
// maxZoom: 18
// });
// NOMBRES DE CUERPOS DE AGUA
let layer_nombresWB = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "t311",
......@@ -216,19 +202,8 @@ let layer_limiteMunicipal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tu
attribution: "INEGI 2019",
minZoom: 9
});
// Area verde urbana -- camellones?
// let layer_areaVerdeUrbana = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
// layers: "c110", //Límite geoestadístico municipal
// format: "image/svg+xml",
// transparent: true,
// pane: "pane_camellones",
// attribution: "INEGI 2019",
// minZoom: 11,
// maxZoom: 18
// });
// *** FIN WMS INEGI ***
// *** FIN WMS INEGI ***
let layer_pistasaereas = new L.geoJson(null, {
attribution: "",
//pane: "pane_aeropuertosypistas",
......@@ -245,12 +220,12 @@ let layer_pistasaereas = new L.geoJson(null, {
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 13px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-plane fa-stack-1x\" style=\"color:#808080;\"></i></span>",
innerIconStyle: "font-size: 15px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-plane fa-stack-1x\" style=\"color:#fada5e;\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: avionMarker
......@@ -278,12 +253,12 @@ let layer_autobuses = new L.geoJson(null, {
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 10px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-bus1 fa-stack-1x\" style=\"color:#ff7400;\"></i></span>",
innerIconStyle: "font-size: 8px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-bus1 fa-stack-1x\" style=\"color:#fda50f;\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: "#C0C0C0"
// textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: busMarker
......@@ -329,13 +304,13 @@ let layer_bancos = new L.geoJson(null, {
// variables: {}
// };
let bancosMarker = L.BeautifyIcon.icon({
icon: "dollar",
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "", //"circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 12px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-dollar fa-stack-1x\" style=\"color:#7fbd7e;\"></i>", //,<i class =\"fas fa-dollar fa-stack-1x fa-inverse\"></i></span>",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:#05ac72;\"></i><i class =\"fas fa-dollar fa-stack-1x fa-inverse\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent",
......@@ -429,190 +404,20 @@ let layer_hoteles = new L.geoJson(null, {
}
});
// let layer_puentes = new L.geoJson(null, {
// attribution: "",
// pane: "pane_puentes",
// //onEachFeature: pop_puentes,
// pointToLayer: function(feature, latlng) {
// // var context = {
// // feature: feature,
// // variables: {}
// // };
// let puenteMarker = L.BeautifyIcon.icon({
// // icon: "grip-lines-vertical",
// icon: "puente",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 12px; transform: rotate(45deg);",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "#808080"
// });
// return new L.Marker(latlng, {
// icon: puenteMarker
// });
// }
// });
// let layer_puerto = new L.geoJson(null, {
// attribution: "",
// pane: "pane_puerto",
// //onEachFeature: pop_puerto,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let puertoMarker = L.BeautifyIcon.icon({
// icon: "puertoindustrial",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 20px;",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "grey"
// });
// return new L.Marker(latlng, {
// icon: puertoMarker
// });
// }
// });
// let layer_frontera = new L.geoJson(null, {
// attribution: "",
// pane: "pane_frontera",
// //onEachFeature: pop_frontera,
// styles: null,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let fronteraMarker = L.BeautifyIcon.icon({
// icon: "puntofronterizo",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 14px;",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "#808080"
// });
// return new L.Marker(latlng, {
// icon: fronteraMarker
// });
// }
// });
// let layer_descargas = new L.geoJson(null, {
// attribution: "",
// pane: "pane_descargas",
// //onEachFeature: pop_descargas,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let descargasMarker = L.BeautifyIcon.icon({
// icon: "desechos",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 8px; transform: rotate(45deg); opacity:0.75;",
// borderWidth: 0,
// borderColor: "black",
// backgroundColor: "transparent",
// textColor: "#808080"
// });
// return new L.Marker(latlng, {
// icon: descargasMarker
// });
// }
// });
// let layer_presas = new L.geoJson(null, {
// attribution: "",
// pane: "pane_presas",
// //onEachFeature: pop_presas,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let presasMarker = L.BeautifyIcon.icon({
// icon: "presa",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size:16px;",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "#808080" //"#123fb8"
// });
// return new L.Marker(latlng, {
// icon: presasMarker
// });
// }
// });
// const style_cuencas = () => {
const style_cuencas = feature => {
switch (String(feature.properties["Subregion"])) {
case "Bajo Grijalva o Grijalva-Villahermosa":
return {
pane: "pane_cuencas",
opacity: 1,
color: "rgba(168,0,0,0.2)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(255,255,190,0.2)"
}
case "Medio Grijalva o Grijalva-Tuxtla Gutiérrez":
return {
pane: "pane_cuencas",
opacity: 1,
color: "rgba(168,0,0,0.2)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(255,170,0,0.2)"
}
case "Alto Grijalva o Grijalva-La Concordia":
return {
pane: "pane_cuencas",
opacity: 1,
color: "rgba(168,0,0,0.2)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(168,56,0,0.2)"
}
return {
pane: "pane_agebsbydens",
opacity: 1,
color: "rgba(168,0,0,0.3)",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: getCuencasColor(feature.properties['Subregion'])
}
}
let layer_cuencas = new L.geoJson(null, {
attribution: "",
pane: "pane_cuencas",
......@@ -642,34 +447,34 @@ let layer_limZMs = new L.geoJson(null, {
const style_ZMs = feature => {
switch (String(feature.properties["ZM_NOMBRE"])) {
case "Tuxtla Gutiérrez":
return {
pane: "pane_ZMs",
opacity: 1,
color: "rgba(139,47,0,0.6)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(139,60,0,0.6)"
}
//break;
case "Villahermosa":
return {
pane: "pane_ZMs",
opacity: 1,
color: "rgba(139,47,0,0.6)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(207,152,62,0.6)"
}
//break;
case "Tuxtla Gutiérrez":
return {
pane: "pane_ZMs",
opacity: 1,
color: "rgba(139,47,0,0.6)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(139,60,0,0.6)"
}
//break;
case "Villahermosa":
return {
pane: "pane_ZMs",
opacity: 1,
color: "rgba(139,47,0,0.6)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(207,152,62,0.6)"
}
//break;
}
}
......@@ -680,40 +485,18 @@ let layer_ZMs = new L.geoJson(null, {
style: style_ZMs
});
// const style_ANPs = () => {
// return {
// pane: "pane_ANPs",
// opacity: 1,
// color: "#00ff00",
// dashArray: "3 2",
// lineCap: "butt",
// lineJoin: "miter",
// weight: 1.0,
// fill: true,
// fillOpacity: 1,
// fillColor: "rgba(0,240,2,0.05)"
// }
// }
// let layer_ANPs = new L.geoJson(null, {
// attribution: "",
// pane: "pane_ANPs",
// //onEachFeature: pop_ANPs,
// style: style_ANPs
// });
const style_agebsbypop = feature => {
return {
pane: "pane_agebsbypop",
opacity: 1,
color: "rgba(0,0,0,0.6)",
opacity: .6,
color: "#4d4d4d",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 0.5, //1.0,
fill: true,
fillOpacity: 1,
fillColor: getPoblacionColor(feature.properties['POBTOT']) //"rgba(0,240,2,0.05)"
fillOpacity: 0.7, //1,
fillColor: getPoblacionColor(feature.properties['POBTOT'])
}
}
......@@ -727,14 +510,14 @@ let layer_agebsbypop = new L.geoJson(null, {
const style_agebsbydens = feature => {
return {
pane: "pane_agebsbydens",
opacity: 1,
color: "rgba(0,0,0,0.6)",
opacity: .6,
color: "#4d4d4d",
//dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 0.5, //1.0,
fill: true,
fillOpacity: 1,
fillOpacity: 0.5, //1,
fillColor: getDensidadColor(feature.properties['DENPOB_KM2']) //"rgba(0,240,2,0.05)"
}
}
......@@ -750,14 +533,14 @@ const style_agricolaoi = feature => {
return {
pane: "pane_agricolaoi",
opacity: 1,
color: getCultivoBorder(feature.properties['CULTIVO']), //"rgba(0,0,0,0.6)",
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']) //"rgba(0,240,2,0.05)"
fillColor: getCultivoColor(feature.properties['CULTIVO'])
}
}
......@@ -772,14 +555,14 @@ const style_agricolapv = feature => {
return {
pane: "pane_agricolapv",
opacity: 1,
color: getCultivoBorder(feature.properties['CULTIVO']), //"rgba(0,0,0,0.6)",
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']) //"rgba(0,240,2,0.05)"
fillColor: getCultivoColor(feature.properties['CULTIVO'])
}
}
......@@ -827,7 +610,6 @@ const toggleButtons = () => {
}
const makeBaseMap = () => {
// createPane("pane_ANPs", 400);
createPane("pane_munis", 402);
createPane("pane_ZMs", 403);
createPane("pane_limZMs", 404);
......@@ -835,29 +617,22 @@ const makeBaseMap = () => {
createPane("pane_cuencas", 406);
createPane("pane_buffer", 407);
createPane("pane_manzanas", 408);
createPane("pane_presas", 409);
// createPane("pane_descargas", 410);
createPane("pane_carreteras", 411);
// createPane("pane_frontera", 412);
// createPane("pane_puerto", 413);
// createPane("pane_puentes", 414);
// createPane("pane_casetas", 415);
// createPane("pane_camellones", 416);
// createPane("pane_agebs", 417);
createPane("pane_hoteles", 418);
createPane("pane_hospitales", 419);
createPane("pane_escuelas", 420);
createPane("pane_estatal", 409);
createPane("pane_carreteras", 410);
createPane("pane_wbnames", 421);
createPane("pane_vferreas", 422);
createPane("pane_estatal", 423);
createPane("pane_aeropuertosypistas", 424);
createPane("pane_autobuses", 425);
createPane("pane_supermercados", 426);
createPane("pane_bancos", 427);
createPane("pane_agebsbypop", 428);
createPane("pane_agebsbydens", 429);
createPane("pane_agricolaoi", 430);
createPane("pane_agricolapv", 431);
createPane("pane_aeropuertosypistas", 411);
createPane("pane_autobuses", 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);
/*$("#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>" +
......@@ -865,168 +640,150 @@ const makeBaseMap = () => {
layerControl.addOverlay(layer_nombresWB, "Nombres cuerpos de agua");
zip2Lyr("../grijalva/data/escuelas.zip", escuelas, layer_escuelas);
layerControl.addOverlay(layer_RedNacionalCaminos, "Red Nacional de Caminos <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c200\" alt=\"Red Nacional de Caminos\"/>");
zip2Lyr("../riesgos/data/Aeropuertos y pistas aereas.zip", pistasaereas, layer_pistasaereas);
layerControl.addOverlay(aeropuertosypistasaereas, "Aeropuertos y pistas<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c201&format=image/png&STYLE=default\" alt=\"Aeropuertos\"/></i> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-plane\" style=\"color:#fada5e;margin-top:3px; margin-left:0px;font-size: 15px;\"></i> &nbsp;&nbsp; &nbsp;&nbsp;Pistas aéreas");
zip2Lyr("../riesgos/data/Central de autobuses.zip", autobuses, layer_autobuses);
layerControl.addOverlay(layer_autobuses, "<i class=\"fa fa-bus1\" style=\"color:#fda50f;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Central de autobuses");
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");
// layerControl.addOverlay(layer_agebswms, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=none stroke=\"#d3d3d3\"></rect></svg><span style=\"font-size=xx-small\">&nbsp;AGEBs 2018</span>");
// layerControl.addOverlay(layer_areaVerdeUrbana, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c110\" alt=\"Áreas verdes urbanas\" />");
// zip2Lyr("../grijalva/data/puentes.zip", puentes, layer_puentes);
// layerControl.addOverlay(layer_puentes, "&nbsp; <i class=\"fa fa-puente\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 10px;\"></i> &nbsp;Puentes");
// let puerto = omnivore.geojson("../grijalva/data/PuertoFrontera.json", null, layer_puerto);
// layerControl.addOverlay(puerto, "&nbsp; <i class=\"fa fa-puertoindustrial\" style=\"margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Puerto");
// zip2Lyr("../grijalva/data/PuntosFrontera.zip", puntoFronterizo, layer_frontera);
// layerControl.addOverlay(layer_frontera, "&nbsp;<i class=\"fa fa-puntofronterizo\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 16px;\"></i> Punto fronterizo");
layerControl.addOverlay(layer_RedNacionalCaminos, "Red Nacional de Caminos <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c200\" alt=\"Red Nacional de Caminos\"/>");
// zip2Lyr("../grijalva/data/descargas.zip", descargas, layer_descargas);
// layerControl.addOverlay(layer_descargas, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#808080;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Descargas residuales municipales e industriales");
// zip2Lyr("../grijalva/data/presas.zip", presas, layer_presas);
// layerControl.addOverlay(layer_presas, "&nbsp; <i class=\"fa fa-presa\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Presas principales");
zip2Lyr("../riesgos/data/Supermercados y tiendas departamentales.zip", supermercados, layer_supermercados);
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:#05ac72;\"></i><i class=\"fas fa-dollar fa-stack-1x fa-inverse\"></i></span>Bancos");
layerControl.addOverlay(layer_vferreas, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c202\" alt=\"Vías Férreas\"/>");
zip2Lyr("../riesgos/data/agricola_oi.zip", agricolaoi, layer_agricolaoi);
layerControl.addOverlay(layer_agricolaoi, "Ciclo agrícola (Otoño-Invierno), SIAP-SADER 2017-2018 <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=\"#d1ff73\" stroke=\"#aaff00\" stroke-dasharray=\" \"></rect></svg> Maíz grano<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=\"#8e1973\" stroke = \"#a80084\" stroke-dasharray=\" \"></rect></svg> Frijol<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=\"#ff5500\" stroke = \"#e60000\" stroke-dasharray=\" \"></rect></svg> Sorgo grano");
// zip2Lyr("../riesgos/data/agricola_pv.zip", agricolapv, layer_agricolapv);
// layerControl.addOverlay(layer_agricolapv, "Ciclo agrícola (Primavera-Verano), SIAP-SADER 2017 <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=\"#d1ff73\" stroke=\"#aaff00\" stroke-dasharray=\" \"></rect></svg> Maíz grano<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=\"#8e1973\" stroke = \"#a80084\" stroke-dasharray=\" \"></rect></svg> Frijol<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=\"#ff5500\" stroke = \"#e60000\" stroke-dasharray=\" \"></rect></svg> Sorgo grano");
zip2Lyr("../riesgos/data/poblacionAGEB.zip", agebsbydens, layer_agebsbydens);
layerControl.addOverlay(layer_agebsbydens, "Densidad de población total por AGEB <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=\"#ffffff\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Sin Población<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=\"#f1f0fc\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 1 - 2400 <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=\"#d2d3fa\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 2401 - 7000 <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=\"#a6a2eb\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 7001 - 11500 <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=\"#8c6fbd\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 11501 - 16000 <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=\"#633096\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 16001 - 67000");
zip2Lyr("../riesgos/data/poblacionAGEB.zip", agebsbypop, layer_agebsbypop);
layerControl.addOverlay(layer_agebsbypop, "Población total por AGEB <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=\"#ffffff\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Sin Población<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=\"#fcdd5d\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 0 - 1000 <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=\"#f7ba3e\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 1001 - 2500 <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=\"#d68522\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 2501 - 4000 <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=\"#9e4410\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 4001 - 6000 <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=\"#6b0601\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 6001 - 18600");
layerControl.addOverlay(layer_manzanaswms, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c102m\" alt=\"Manzanas\"/>");
zip2Lyr("../grijalva/data/cuencas.zip", subcuencas, layer_cuencas);
// layerControl.addOverlay(layer_cuencas, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(213,190,245,0.5)\" stroke=\"rgba(0,0,0,0.25)\" stroke-dasharray=\" \"></rect></svg> Cuenca y subcuencas del Grijalva, CONAGUA 2017");
layerControl.addOverlay(layer_cuencas, "Cuenca y subcuencas del Grijalva, CONAGUA 2017<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=\"rgba(255,255,190,0.2)\" stroke=\"rgba(168, 0,00,0.2)\" stroke-dasharray=\" \"></rect></svg> Bajo Grijalva o Grijalva-Villahermosa<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=\"rgba(255,170,0,0.2)\" stroke=\"rgba(168,0,0,0.2)\" stroke-dasharray=\" \"></rect></svg> Medio Grijalva o Grijalva-Tuxtla-Gutiérrez<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=\"rgba(168,56,0,0.2)\" stroke=\"rgba(168,0,0,0.2)\" stroke-dasharray=\" \"></rect></svg> Alto Grijalva o Grijalva-La Concordia");
layerControl.addOverlay(layer_locUrban, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c102\" alt=\"Localidades urbanas\"/>");
zip2Lyr("../grijalva/data/limites_TG_V.zip", tuxtlaVH, layer_limZMs);
layerControl.addOverlay(layer_limZMs, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"none\" stroke=\"rgba(101,43,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Límites de zonas metropolitanas");
zip2Lyr("../grijalva/data/limitesZM.zip", zms, layer_ZMs);
layerControl.addOverlay(layer_ZMs, "Zonas metropolitanas<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=\"rgba(139,60,0,0.8)\" stroke=\"rgba(139,47,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Tuxtla Gutiérrez<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=\"rgba(207,152,62,0.8)\" stroke=\"rgba(139,47,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Villahermosa");
zip2Lyr("../grijalva/data/cuencas.zip", subcuencas, layer_cuencas);
layerControl.addOverlay(layer_cuencas, "Cuenca y subcuencas del Grijalva, CONAGUA 2017<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=\"rgba(255,255,190,0.3)\" stroke=\"rgba(168, 0,00,0.3)\" stroke-dasharray=\" \"></rect></svg> Bajo Grijalva o Grijalva-Villahermosa<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=\"rgba(255,170,0,0.3)\" stroke=\"rgba(168,0,0,0.3)\" stroke-dasharray=\" \"></rect></svg> Medio Grijalva o Grijalva-Tuxtla-Gutiérrez<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=\"rgba(168,56,0,0.3)\" stroke=\"rgba(168,0,0,0.3)\" stroke-dasharray=\" \"></rect></svg> Alto Grijalva o Grijalva-La Concordia");
layerControl.addOverlay(layer_limiteMunicipal, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c101&format=image/png&STYLE=default\" alt=\"Límite municipal\"/>");
// zip2Lyr("../grijalva/data/anps.zip", anps, layer_ANPs);
// map.addLayer(layer_ANPs);
// layerControl.addOverlay(layer_ANPs, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,255,0,.3)\" stroke=\"rgba(128,152,72,1.0)\" stroke-dasharray=\"0.5,1\" stroke-dashoffset=\"0.5\"></rect></svg> Áreas Naturales Protegidas 2018");
//revisar las leyendas de estos layers
layerControl.addOverlay(layer_vferreas, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c202\" alt=\"Vías Férreas\"/>");
layerControl.addOverlay(layer_limiteEstatal, "Estados <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c100&format=image/png&STYLE=default\" alt=\"Límite Estatal\"/>");
zip2Lyr("../riesgos/data/Supermercados y tiendas departamentales.zip", supermercados, layer_supermercados);
layerControl.addOverlay(layer_supermercados, "Supermercados y tiendas departamentales<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-shopping-cart\" style=\"color:#409400;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:#df6400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Tiendas Departamentales");
zip2Lyr("../riesgos/data/Bancos.zip", bancos, layer_bancos);
layerControl.addOverlay(layer_bancos, "<i class=\"fa fa-dollar\" style=\"color:#7fbd7e;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Bancos");
zip2Lyr("../riesgos/data/Aeropuertos y pistas aereas.zip", pistasaereas, layer_pistasaereas);
layerControl.addOverlay(aeropuertosypistasaereas, "Aeropuertos y pistas<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c201&format=image/png&STYLE=default\" alt=\"Aeropuertos\"/></i> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-plane\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 15px;\"></i> &nbsp;&nbsp; &nbsp;&nbsp;Pistas aéreas");
zip2Lyr("../riesgos/data/Central de autobuses.zip", autobuses, layer_autobuses);
layerControl.addOverlay(layer_autobuses, "<i class=\"fa fa-bus1\" style=\"color:#ff7400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Central de Autobuses");
zip2Lyr("../riesgos/data/poblacionAGEB.zip", agebsbypop, layer_agebsbypop);
layerControl.addOverlay(layer_agebsbypop, "Población total por AGEB <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=\"#ffffff\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Sin Población<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=\"#fcdd5d\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 0 - 1000 <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=\"#f7ba3e\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 1001 - 2500 <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=\"#d68522\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 2501 - 4000 <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=\"#9e4410\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 4001 - 6000 <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=\"#6b0601\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 6001 - 18600");
zip2Lyr("../riesgos/data/poblacionAGEB.zip", agebsbydens, layer_agebsbydens);
layerControl.addOverlay(layer_agebsbydens, "Densidad de población total por AGEB <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=\"#ffffff\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Sin Población<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=\"#f1f0fc\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 1 - 2400 <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=\"#d2d3fa\" stroke = \"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 2401 - 7000 <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=\"#a6a2eb\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 7001 - 11500 <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=\"#8c6fbd\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 11501 - 16000 <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=\"#633096\" stroke=\"rgba(0,0,0,0.6)\" stroke-dasharray=\" \"></rect></svg> 16001 - 67000");
zip2Lyr("../riesgos/data/agricola_oi.zip", agricolaoi, layer_agricolaoi);
layerControl.addOverlay(layer_agricolaoi, "Ciclo agrícola (Otoño-Invierno), SIAP-SADER 2017-2018 <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=\"#d1ff73\" stroke=\"#aaff00\" stroke-dasharray=\" \"></rect></svg> Maíz grano<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=\"#8e1973\" stroke = \"#a80084\" stroke-dasharray=\" \"></rect></svg> Frijol<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=\"#ff5500\" stroke = \"#e60000\" stroke-dasharray=\" \"></rect></svg> Sorgo grano");
zip2Lyr("../riesgos/data/agricola_pv.zip", agricolapv, layer_agricolapv);
layerControl.addOverlay(layer_agricolapv, "Ciclo agrícola (Primavera-Verano), SIAP-SADER 2017 <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=\"#d1ff73\" stroke=\"#aaff00\" stroke-dasharray=\" \"></rect></svg> Maíz grano<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=\"#8e1973\" stroke = \"#a80084\" stroke-dasharray=\" \"></rect></svg> Frijol<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=\"#ff5500\" stroke = \"#e60000\" stroke-dasharray=\" \"></rect></svg> Sorgo grano");
layerControl.addOverlay(layer_limiteEstatal, "Límite estatal <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c100&format=image/png&STYLE=default\" alt=\"Límite Estatal\"/>");
// Localize Leaflet.Draw texts
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: "Cancelar dibujo",
text: "Cancelar"
},
finish: {
title: "Terminar dibujo",
text: "Terminar"
},
undo: {
title: "Eliminar último punto dibujado",
text: "Eliminar último punto"
},
buttons: {
polyline: "Dibujar una polilínea",
polygon: "Dibujar un polígono",
rectangle: "Dibujar un rectángulo",
circle: "Dibujar un círculo",
marker: "Dibujar un marcador",
circlemarker: "Dibujar un marcador circular"
}
},
handlers: {
circle: {
tooltip: {
start: "Haz click y arrastra para dibujar un círculo"
draw: {
toolbar: {
actions: {
title: "Cancelar dibujo",
text: "Cancelar"
},
radius: "Radio"
},
circlemarker: {
tooltip: {
start: "Haz click en el mapa para ubicar el marcador circular"
}
},
marker: {
tooltip: {
start: "Haz click en el mapa para ubicar el marcador"
}
},
polygon: {
error: "<strong>Error:</strong>",
tooltip: {
start: "Haz click para empezar a dibujar la figura",
cont: "Haz click para continuar dibujando la figura",
end: "Haz click en el primer punto para cerrar la figura"
}
},
polyline: {
error: "<strong>Error:</strong> las líneas no deben cruzarse",
tooltip: {
start: "Haz click para empezar a dibujar la línea",
cont: "Haz click para continuar dibujando la línea",
end: "Haz click en el último punto para terminar la línea"
}
},
rectangle: {
tooltip: {
start: "Haz click y arrastra para dibujar un rectángulo"
finish: {
title: "Terminar dibujo",
text: "Terminar"
},
undo: {
title: "Eliminar último punto dibujado",
text: "Eliminar último punto"
},
buttons: {
polyline: "Dibujar una polilínea",
polygon: "Dibujar un polígono",
rectangle: "Dibujar un rectángulo",
circle: "Dibujar un círculo",
marker: "Dibujar un marcador",
circlemarker: "Dibujar un marcador circular"
}
},
simpleshape: {
tooltip: {
end: "Suelta el ratón para terminar de dibujar"
}
}
}
},
edit: {
toolbar: {
actions: {
save: {
title: "Guardar los cambios",
text: "Guardar"
handlers: {
circle: {
tooltip: {
start: "Haz click y arrastra para dibujar un círculo"
},
radius: "Radio"
},
cancel: {
title: "Cancelar la edición, descarta todos los cambios",
text: "Cancelar"
circlemarker: {
tooltip: {
start: "Haz click en el mapa para ubicar el marcador circular"
}
},
marker: {
tooltip: {
start: "Haz click en el mapa para ubicar el marcador"
}
},
clearAll: {
title: "Limpiar todas las capas",
text: "Limpiar todo"
polygon: {
error: "<strong>Error:</strong>",
tooltip: {
start: "Haz click para empezar a dibujar la figura",
cont: "Haz click para continuar dibujando la figura",
end: "Haz click en el primer punto para cerrar la figura"
}
},
polyline: {
error: "<strong>Error:</strong> las líneas no deben cruzarse",
tooltip: {
start: "Haz click para empezar a dibujar la línea",
cont: "Haz click para continuar dibujando la línea",
end: "Haz click en el último punto para terminar la línea"
}
},
rectangle: {
tooltip: {
start: "Haz click y arrastra para dibujar un rectángulo"
}
},
simpleshape: {
tooltip: {
end: "Suelta el ratón para terminar de dibujar"
}
}
},
buttons: {
edit: "Editar capas",
editDisabled: "No hay capas que editar",
remove: "Eliminar capas",
removeDisabled: "No hay capas que eliminar"
}
},
handlers: {
edit: {
tooltip: {
text: "Arrastra el marcador para editar la figura",
subtext: "Haz click en cancelar para deshacer los cambios"
edit: {
toolbar: {
actions: {
save: {
title: "Guardar los cambios",
text: "Guardar"
},
cancel: {
title: "Cancelar la edición, descarta todos los cambios",
text: "Cancelar"
},
clearAll: {
title: "Limpiar todas las capas",
text: "Limpiar todo"
}
},
buttons: {
edit: "Editar capas",
editDisabled: "No hay capas que editar",
remove: "Eliminar capas",
removeDisabled: "No hay capas que eliminar"
}
},
remove: {
tooltip: {
text: "Haz click en una figura para eliminarla"
handlers: {
edit: {
tooltip: {
text: "Arrastra el marcador para editar la figura",
subtext: "Haz click en cancelar para deshacer los cambios"
}
},
remove: {
tooltip: {
text: "Haz click en una figura para eliminarla"
}
}
}
}
}
}
// leaflet draw control
// leaflet draw control
drawnItems = L.featureGroup().addTo(map);
let drawControl = new L.Control.Draw({
......
public/fordecyt_2019/riesgos/index.html
View file @ dc3981d1
......@@ -27,8 +27,8 @@
</div>
<div class="container" id="startHeader">
<div class="jumbotron mt-5" style="background-color: rgba(233,236,239,0.75); opacity: 0.99;">
<h1 class="display-4">Afectaciones por inundaci&oacute;n en la cuenca del r&iacute;o Grijalva</h1>
<p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo por medio de la visualizaci&oacute;n de cuerpos de agua y algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
<h1 class="display-4">Riesgo por inundaci&oacute;n en la cuenca del r&iacute;o Grijalva</h1>
<p class="lead">Examina posibles escenarios de riesgo por inundación y sus afectaciones a la infraestructura.</p>
<hr class="my-4">
<p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p>
<div class="container">
......@@ -57,6 +57,7 @@
<div class="container-fluid d-flex flex-fill">
<div class="row d-flex flex-fill">
<div class="col-md-6" id="mexmap">
<!-- <div class="col-md-10" id="mexmap"> -->
<div id="datePickers"></div>
<div class="picker">
<select id="indicatorSelect"></select>
......@@ -153,4 +154,5 @@
<script src="../js/grijalva_charts.js"></script>
</body>
</html>
\ No newline at end of file
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