Add 'return period' image overlays

public/fordecyt_2019/js/riesgos_basemap.js

@@ -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 = {