Add 'return period' image overlays

public/fordecyt_2019/js/riesgos_basemap.js

@@ -214,7 +214,7 @@ let layer_pistasaereas = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-                // textColor: "#C0C0C0"
+            // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: avionMarker
@@ -247,7 +247,7 @@ let layer_autobuses = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-                // textColor: "#C0C0C0"
+            // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: busMarker
@@ -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, {
@@ -436,34 +436,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;
     }
 }
 
@@ -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,117 +722,129 @@ 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 = {
-            draw: {
-                toolbar: {
-                    actions: {
-                        title: "Cancelar dibujo",
-                        text: "Cancelar"
-                    },
-                    finish: {
-                        title: "Terminar dibujo",
-                        text: "Terminar"
-                    },
-                    undo: {
-                        title: "Eliminar último punto dibujado",
-                        text: "Eliminar último punto"
+        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"
                     },
-                    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"
+                    radius: "Radio"
+                },
+                circlemarker: {
+                    tooltip: {
+                        start: "Haz click en el mapa para ubicar el marcador circular"
                     }
                 },
-                handlers: {
-                    circle: {
-                        tooltip: {
-                            start: "Haz click y arrastra para dibujar un círculo"
-                        },
-                        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"
-                        }
+                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"
+                    }
+                },
+                simpleshape: {
+                    tooltip: {
+                        end: "Suelta el ratón para terminar de dibujar"
+                    }
+                }
+            }
+        },
+        edit: {
+            toolbar: {
+                actions: {
+                    save: {
+                        title: "Guardar los cambios",
+                        text: "Guardar"
                     },
-                    rectangle: {
-                        tooltip: {
-                            start: "Haz click y arrastra para dibujar un rectángulo"
-                        }
+                    cancel: {
+                        title: "Cancelar la edición, descarta todos los cambios",
+                        text: "Cancelar"
                     },
-                    simpleshape: {
-                        tooltip: {
-                            end: "Suelta el ratón para terminar de dibujar"
-                        }
+                    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"
                 }
             },
-            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"
+            handlers: {
+                edit: {
+                    tooltip: {
+                        text: "Arrastra el marcador para editar la figura",
+                        subtext: "Haz click en cancelar para deshacer los cambios"
                     }
                 },
-                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"
-                        }
+                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({