add POIC desde & hacia layers

public/fordecyt_2019/js/centropais_basemap.js

@@ -139,7 +139,21 @@ const getDesdeColor = s => {
         "#ffebbf";
 }
 
-const getTiempoColor = s => {
+const getHaciaPOICColor = s => {
+    return s > 4000 ? "#00451c" :
+        s > 2000 ? "#218542" :
+        s > 1000 ? "#4bc44f" :
+        s > 500 ? "#b4d787" :
+        "#e3fcd9";
+}
+
+const getDesdePOICColor = s => {
+    return s > 1000 ? "#fc7f44" :
+        s > 500 ? "#ffaa00" :
+        "#ffebbf";
+}
+
+const getEntreColor = s => {
     return s > 3500 ? "#a80000" :
         s > 2000 ? "#e64c00" :
         s > 1000 ? "#ffaa00" :
@@ -152,7 +166,7 @@ const getCuencasColor = s => {
         "rgba(168,56,0,0.3)";
 }
 
-let munis_contexto, lim_zms, zms, conurbaciones, agebs2005, agebs2010, agebs2015, auto2010, auto2014, auto2018, tecnologia2010, tecnologia2014, tecnologia2018, centros, hacia, desde;
+let munis_contexto, lim_zms, zms, conurbaciones, agebs2005, agebs2010, agebs2015, auto2010, auto2014, auto2018, tecnologia2010, tecnologia2014, tecnologia2018, centros, hacia, desde, centrosPOIC, haciaPOIC, desdePOIC;
 //supermercados, bancos, agebsbypop, agebsbydens, agricolaoi, agricolapv, escuelas, hospitales, hoteles, subcuencas, tuxtlaVH;
 
 //  *** WMS INEGI ***
@@ -248,7 +262,7 @@ let layer_auto2010 = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-            // textColor: "#C0C0C0"
+                // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: autoMarker
@@ -277,7 +291,7 @@ let layer_auto2014 = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-            // textColor: "#C0C0C0"
+                // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: autoMarker
@@ -306,7 +320,7 @@ let layer_auto2018 = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-            // textColor: "#C0C0C0"
+                // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: autoMarker
@@ -335,7 +349,7 @@ let layer_tecnologia2010 = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-            // textColor: "#C0C0C0"
+                // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: autoMarker
@@ -364,7 +378,7 @@ let layer_tecnologia2014 = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-        // textColor: "#C0C0C0"
+                // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: autoMarker
@@ -393,7 +407,7 @@ let layer_tecnologia2018 = new L.geoJson(null, {
             borderWidth: 0,
             borderColor: "transparent",
             backgroundColor: "transparent" //,
-            // textColor: "#C0C0C0"
+                // textColor: "#C0C0C0"
         });
         return new L.Marker(latlng, {
             icon: autoMarker
@@ -766,6 +780,73 @@ let layer_desde = new L.geoJson(null, {
     style: style_desde
 });
 
+const style_centrosPOIC = feature => {
+    return {
+        pane: "pane_centrosPOIC",
+        opacity: 1,
+        color: "rgba(110,100,110,0.7)",
+        //dashArray: "3 2",
+        lineCap: "butt",
+        lineJoin: "miter",
+        weight: 0.5, //1.0,
+        fill: true,
+        fillOpacity: .4,
+        fillColor: getCentrosColor(feature.properties['OCUPADOS']),
+        //fillPattern: "stripes"
+    }
+}
+
+let layer_centrosPOIC = new L.geoJson(null, {
+    attribution: "",
+    pane: "pane_centrosPOIC",
+    //onEachFeature: pop_ANPs,
+    style: style_centrosPOIC
+});
+
+const style_haciaPOIC = feature => {
+    return {
+        pane: "pane_haciaPOIC",
+        opacity: 1,
+        color: "rgba(110,110,110,0.7)",
+        //dashArray: "3 2",
+        lineCap: "butt",
+        lineJoin: "miter",
+        weight: 0.5, //1.0,
+        fill: true,
+        fillOpacity: 1,
+        fillColor: getHaciaPOICColor(feature.properties['PERSONAS'])
+    }
+}
+
+let layer_haciaPOIC = new L.geoJson(null, {
+    attribution: "",
+    pane: "pane_haciaPOIC",
+    //onEachFeature: pop_ANPs,
+    style: style_haciaPOIC
+});
+
+const style_desdePOIC = feature => {
+    return {
+        pane: "pane_desdePOIC",
+        opacity: 1,
+        color: "rgba(110,110,110,0.7)",
+        //dashArray: "3 2",
+        lineCap: "butt",
+        lineJoin: "miter",
+        weight: 0.5, //1.0,
+        fill: true,
+        fillOpacity: 1,
+        fillColor: getDesdePOICColor(feature.properties['PERSONAS'])
+    }
+}
+
+let layer_desdePOIC = new L.geoJson(null, {
+    attribution: "",
+    pane: "pane_desdePOIC",
+    //onEachFeature: pop_ANPs,
+    style: style_desdePOIC
+});
+
 const styleDrawnItems = () => {
     let currentId = 0;
     drawnItems.eachLayer(l => {
@@ -821,12 +902,16 @@ const makeBaseMap = () => {
     createPane("pane_tecnologia2010", 412);
     createPane("pane_tecnologia2014", 412);
     createPane("pane_tecnologia2018", 412);
-    createPane("pane_centros", 420);
+
     createPane("pane_escuelas", 413);
     createPane("pane_hospitales", 415);
     createPane("pane_supermercados", 416);
+    createPane("pane_centros", 420);
     createPane("pane_desde", 414);
     createPane("pane_hacia", 415);
+    createPane("pane_centrosPOIC", 420);
+    createPane("pane_desdePOIC", 414);
+    createPane("pane_haciaPOIC", 415);
     // createPane("pane_agricolaoi", 419);
     // createPane("pane_agricolapv", 420);
     createPane("pane_agebs", 421);
@@ -869,6 +954,13 @@ const makeBaseMap = () => {
     layerControl.addOverlay(layer_hacia, "Número de ocupados <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=\"#e3fcd9\"   stroke=\"#6e6e6e\" 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=\"#b4d787\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 1001 - 2000<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=\"#4bc44f\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 2001 - 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=\"#218542\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 6001 - 32000 <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=\"#00451c\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 32001 - 53300");
     zip2Lyr("../centropais/data/desde.zip", desde, layer_desde);
     layerControl.addOverlay(layer_desde, "Número de ocupados <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=\"#ffebbf\"   stroke=\"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> Menos de 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=\"#ffaa00\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 1001 - 2000<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=\"#fc7f44\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 2001- 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=\"#b30000\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 6001 - 7200");
+    zip2Lyr("../centropais/data/centros_de_mercado_POIC.zip", centrosPOIC, layer_centrosPOIC);
+    layerControl.addOverlay(layer_centrosPOIC, "Centros de mercado <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> Terciario<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> Secundario<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> Primario");
+    // 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("../centropais/data/hacia_POIC.zip", haciaPOIC, layer_haciaPOIC);
+    layerControl.addOverlay(layer_haciaPOIC, "Número de viajes <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=\"#e3fcd9\"   stroke=\"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> Menos de 500<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=\"#b4d787\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 501 - 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=\"#4bc44f\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 1001 - 2000 <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=\"#218542\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 2001 - 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=\"#00451c\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 4001 - 10612");
+    zip2Lyr("../centropais/data/desde_POIC.zip", desdePOIC, layer_desdePOIC);
+    layerControl.addOverlay(layer_desdePOIC, "Número de viajes <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=\"#ffebbf\"   stroke=\"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> Menos de 500<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=\"#ffaa00\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 501 - 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=\"#fc7f44\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 1001- 2000");
     // 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);
@@ -889,113 +981,113 @@ const makeBaseMap = () => {
 
     // 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"
+                        }
+                    },
+                    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"
+                        }
                     },
-                    clearAll: {
-                        title: "Limpiar todas las capas",
-                        text: "Limpiar todo"
+                    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({