Skip to content

F
fordecyt_2019
Commit 07899860 authored by Tania Gómez's avatar Tania Gómez
Browse files
Options

add POIC desde & hacia layers

parent 9ee01644
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 102 deletions
public/fordecyt_2019/js/centropais_basemap.js
View file @ 07899860
......@@ -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({
......
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