Skip to content

F
fordecyt_2019
Commit a4286f38 authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Add 'return period' image overlays

parent 5fd8543c
Show whitespace changes
Inline Side-by-side
Showing with 173 additions and 131 deletions
public/fordecyt_2019/js/riesgos_basemap.js
View file @ a4286f38
......@@ -404,7 +404,7 @@ const style_cuencas = feature => {
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: getCuencasColor(feature.properties['Subregion'])
fillColor: getCuencasColor(feature.properties["Subregion"])
}
}
let layer_cuencas = new L.geoJson(null, {
......@@ -485,7 +485,7 @@ const style_agebsbypop = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.7, //1,
fillColor: getPoblacionColor(feature.properties['POBTOT'])
fillColor: getPoblacionColor(feature.properties["POBTOT"])
}
}
......@@ -507,7 +507,7 @@ const style_agebsbydens = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.5, //1,
fillColor: getDensidadColor(feature.properties['DENPOB_KM2']) //"rgba(0,240,2,0.05)"
fillColor: getDensidadColor(feature.properties["DENPOB_KM2"]) //"rgba(0,240,2,0.05)"
}
}
......@@ -530,7 +530,7 @@ let layer_agricolapv = {
maxzoom: 19,
minzoom: 6
},
"source-layer": "agricola_pv", // source has to match postgi table name
"source-layer": "agricola_pv", // source has to match postgis table name
type: "fill",
paint: {
"fill-opacity": 0,
......@@ -557,7 +557,7 @@ let layer_agricolaoi = {
maxzoom: 19,
minzoom: 6
},
"source-layer": "agricola_oi", // source has to match postgi table name
"source-layer": "agricola_oi", // source has to match postgis table name
type: "fill",
paint: {
"fill-opacity": 0,
......@@ -575,6 +575,28 @@ let layer_agricolaoi = {
]
}
}
let layer_retorno2 = L.imageOverlay(
"data/inunda_002rt.png", [[18.8249, -94.4231], [15.0813, -91.5209]],
{opacity: 0.5}
),
layer_retorno5 = L.imageOverlay(
"data/inunda_005rt.png", [[18.8249, -94.4231], [15.0813, -91.5209]],
{opacity: 0.5}
),
layer_retorno10 = L.imageOverlay(
"data/inunda_010rt.png", [[18.8249, -94.4231], [15.0813, -91.5209]],
{opacity: 0.5}
),
layer_retorno50 = L.imageOverlay(
"data/inunda_050rt.png", [[18.8249, -94.4231], [15.0813, -91.5209]],
{opacity: 0.5}
),
layer_retorno100 = L.imageOverlay(
"data/inunda_100rt.png", [[18.8249, -94.4231], [15.0813, -91.5209]],
{opacity: 0.5}
);
const styleDrawnItems = () => {
let currentId = 0;
drawnItems.eachLayer(l => {
......@@ -657,12 +679,19 @@ const makeBaseMap = () => {
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\"/>");
// add agriculture tiles to map and add fake overlay to control their opacity
glmap.getMapboxMap().addLayer(layer_agricolaoi);
layerControl.addOverlay(layer_agricolaoi_fake, "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");
//map.addLayer(layer_agricolaoi_fake);
glmap.getMapboxMap().addLayer(layer_agricolapv);
//map.addLayer(layer_agricolapv_fake);
layerControl.addOverlay(layer_agricolapv_fake, "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_retorno2, "Periodo de retorno a 2 años");
layerControl.addOverlay(layer_retorno5, "Periodo de retorno a 5 años");
layerControl.addOverlay(layer_retorno10, "Periodo de retorno a 10 años");
layerControl.addOverlay(layer_retorno50, "Periodo de retorno a 50 años");
layerControl.addOverlay(layer_retorno100, "Periodo de retorno a 100 años");
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);
......@@ -678,6 +707,7 @@ const makeBaseMap = () => {
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\"/>");
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\"/>");
// set agriculture tiles' opacity to 0 or 1 depending on the case
map.on("overlayadd", event => {
if (event.name.includes("Primavera-Verano")) {
glmap.getMapboxMap().setPaintProperty("agricola_pv", "fill-opacity", 1);
......@@ -692,7 +722,19 @@ const makeBaseMap = () => {
if (event.name.includes("Otoño-Invierno")) {
glmap.getMapboxMap().setPaintProperty("agricola_oi", "fill-opacity", 0);
}
})
});
// show loader only first time PNG overlays are loaded
layer_retorno2.once("add", () => $(".loader").css("display", "block"))
.on("load", () => $(".loader").hide("fade", 750));
layer_retorno5.once("add", () => $(".loader").css("display", "block"))
.on("load", () => $(".loader").hide("fade", 750));
layer_retorno10.once("add", () => $(".loader").css("display", "block"))
.on("load", () => $(".loader").hide("fade", 750));
layer_retorno50.once("add", () => $(".loader").css("display", "block"))
.on("load", () => $(".loader").hide("fade", 750));
layer_retorno100.once("add", () => $(".loader").css("display", "block"))
.on("load", () => $(".loader").hide("fade", 750));
// Localize Leaflet.Draw texts
L.drawLocal = {
......
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