common layers in centropais project

public/fordecyt_2019/centropais/index.html

@@ -150,7 +150,7 @@
     <script type="text/javascript" src="../js/Leaflet.Sync.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
     <script type="text/javascript" src="../js/jszip.min.js"></script>
-    <script src="../js/grijalva_functions.js"></script>
+    <script src="../js/centropais_functions.js"></script>
     <script src="../js/centropais_basemap.js"></script>
     <script src="../js/grijalva_charts.js"></script>
 

public/fordecyt_2019/js/centropais_basemap.js

@@ -130,7 +130,7 @@ const getCuencasColor = s => {
         "rgba(168,56,0,0.3)";
 }
 
-let munis_contexto, zms, pistasaereas, autobuses, supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, subcuencas, tuxtlaVH;
+let munis_contexto, lim_zms, zms, conurbaciones, pistasaereas, autobuses, supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, subcuencas, tuxtlaVH;
 
 //  *** WMS INEGI ***
 // // AEROPUERTOS
@@ -176,15 +176,15 @@ let layer_RedNacionalCaminos = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB
     attribution: "INEGI 2019"
 });
 //MANZANAS
-let layer_manzanaswms = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
-    layers: "c104",
-    format: "image/svg+xml",
-    transparent: true,
-    pane: "pane_manzanas",
-    attribution: "INEGI 2019",
-    minZoom: 13,
-    maxZoom: 18
-});
+// let layer_manzanaswms = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
+//     layers: "c104",
+//     format: "image/svg+xml",
+//     transparent: true,
+//     pane: "pane_manzanas",
+//     attribution: "INEGI 2019",
+//     minZoom: 13,
+//     maxZoom: 18
+// });
 //LOCALIDAD URBANA
 let layer_locUrban = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
     layers: "c102",
@@ -429,7 +429,7 @@ const style_limZMs = () => {
     return {
         pane: "pane_limZMs",
         opacity: 1,
-        color: "rgba(101,43,0,0.6)",
+        color: "rgba(168,0,0,1)",
         dashArray: "",
         lineCap: "butt",
         lineJoin: "miter",
@@ -447,45 +447,16 @@ let layer_limZMs = new L.geoJson(null, {
 
 const style_ZMs = () => {
     return {
-        pane: "pane_limZMs",
+        pane: "pane_ZMs",
         opacity: 1,
         color: "rgba(110,110,100,1)",
         dashArray: "",
         lineCap: "butt",
         lineJoin: "miter",
         weight: 1.0,
-        fillOpacity: "rgba(255,170,0,1)"
-    }
-    // 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;
-    // }
+        fillOpacity: 1,
+        fillColor: "rgba(255,170,0,1)"
+    }
 }
 
 let layer_ZMs = new L.geoJson(null, {
@@ -495,6 +466,27 @@ let layer_ZMs = new L.geoJson(null, {
     style: style_ZMs
 });
 
+const style_conurbaciones_rurbana = () => {
+    return {
+        pane: "pane_conurbaciones",
+        opacity: 1,
+        color: "rgba(35,35,35,0.1)",
+        dashArray: "",
+        lineCap: "butt",
+        lineJoin: "miter",
+        weight: 1.0,
+        fillOpacity: 1,
+        fillColor: "rgba(255,0,0,0.1)"
+    }
+}
+
+let layer_conurbaciones_rurbana = new L.geoJson(null, {
+    attribution: "",
+    pane: "pane_conurbaciones",
+    //onEachFeature: pop_ZMs,
+    style: style_conurbaciones_rurbana
+});
+
 const style_agebsbypop = feature => {
     return {
         pane: "pane_agebsbypop",
@@ -621,9 +613,10 @@ const toggleButtons = () => {
 
 const makeBaseMap = () => {
     createPane("pane_munis", 402);
-    createPane("pane_munis", 402);
+    createPane("pane_munis_contexto", 402);
     createPane("pane_ZMs", 403);
     createPane("pane_limZMs", 404);
+    createPane("pane_conurbaciones", 404);
     createPane("pane_locs", 405);
     createPane("pane_cuencas", 406);
     createPane("pane_buffer", 407);
@@ -654,8 +647,8 @@ const makeBaseMap = () => {
     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("../centropais/data/munis_contexto.zip", munis_contexto, layer_munis_contexto);
     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("../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");
+    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);
@@ -677,8 +670,8 @@ const makeBaseMap = () => {
     // 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\"/>");
     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("../centropais/data/limite_ZMs.zip", lim_zms, 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(168,0,0,1)\" stroke-dasharray=\" \"></rect></svg> Límites de zonas metropolitanas");
     zip2Lyr("../centropais/data/ZMs.zip", zms, layer_ZMs);
     layerControl.addOverlay(layer_ZMs, "&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,1)\" stroke=\"rgba(110,100,100,1)\" stroke-dasharray=\" \"></rect></svg>&nbsp;Zonas metropolitanas");
     // zip2Lyr("../grijalva/data/cuencas.zip", subcuencas, layer_cuencas);