Skip to content

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

styling riesgos

parent 913f1c24
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 96 deletions
public/css/riesgos/fonts/icomoon.svg 0 → 100644
View file @ 59c5b256
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe901;" glyph-name="bus" horiz-adv-x="1056" d="M704 31.616c0-17.696 14.304-32 32-32h32c17.664 0 32 14.304 32 32v65.984h-96v-65.984zM256 31.616c0-17.696 14.304-32 32-32h32c17.696 0 32 14.304 32 32v65.984h-96v-65.984zM159.52 136.672c0-21.44 17.408-38.88 38.88-38.88h659.072c21.472 0 38.88 17.44 38.88 38.88 0 21.504 0 22.88 0 22.88h-736.832c0 0 0-1.376 0-22.88zM1024 639.616v64h-127.68l0.032 34.816c0 77.792-79.648 157.984-383.168 157.984-266.816 0-353.664-80.192-353.664-157.984v-34.816h-127.52v-64h-32v-128h32v-64h127.52v-255.168h736l0.704 479.168h95.776v-32h-32v-128h32v-32h-96v-32h128v64h32v128h-32zM159.52 479.616h-95.52v32h32v128h-32v32h95.52v-192zM400 801.6h256c8.832 0 16-7.168 16-16s-7.168-16-16-16h-256c-8.832 0-16 7.168-16 16s7.168 16 16 16zM225.312 664.672c0 21.472 17.408 38.88 38.88 38.88h208.448c21.472 0 38.88-17.408 38.88-38.88v-114.656c0-21.504-17.408-38.912-38.88-38.912h-208.448c-21.472 0-38.88 17.408-38.88 38.912v114.656zM287.616 264.384c-32.224 0-58.304 26.112-58.304 58.304 0 32.256 26.080 58.304 58.304 58.304s58.336-26.048 58.336-58.304c0.032-32.192-26.112-58.304-58.336-58.304zM384 415.616h288v-32h-288v32zM673.024 257.824h-288.192v30.88h288.192v-30.88zM673.024 321.568h-288.192v30.88h288.192v-30.88zM768.256 262.368c-32.224 0-58.304 26.112-58.304 58.304s26.080 58.304 58.304 58.304 58.336-26.112 58.336-58.304-26.112-58.304-58.336-58.304zM832.16 550.016c0-21.504-17.408-38.912-38.912-38.912h-209.984c-21.504 0-38.912 17.408-38.912 38.912v114.656c0 21.472 17.408 38.88 38.912 38.88h209.984c21.504 0 38.912-17.408 38.912-38.88v-114.656z" />
<glyph unicode="&#xe903;" glyph-name="plane" d="M496.672 834.88c26.496 0 48-21.504 48-48v-248l320-200v-86.016l-320 108v-168l65.248-64.928-0.032-66.688-113.216 37.632-111.584-37.76 0.48 70.048 61.12 59.68 0.544 169.984-319.904-109.952 0.672 88 320.224 202.016 0.512 246.016c-0.064 26.464 21.44 47.968 47.936 47.968z" />
<glyph unicode="&#xf07a;" glyph-name="shopping-cart" horiz-adv-x="951" d="M365.714 73.143c0-40-33.143-73.143-73.143-73.143s-73.143 33.143-73.143 73.143 33.143 73.143 73.143 73.143 73.143-33.143 73.143-73.143zM877.714 73.143c0-40-33.143-73.143-73.143-73.143s-73.143 33.143-73.143 73.143 33.143 73.143 73.143 73.143 73.143-33.143 73.143-73.143zM950.857 694.857v-292.571c0-18.286-14.286-34.286-32.571-36.571l-596.571-69.714c2.857-13.143 7.429-26.286 7.429-40 0-13.143-8-25.143-13.714-36.571h525.714c20 0 36.571-16.571 36.571-36.571s-16.571-36.571-36.571-36.571h-585.143c-20 0-36.571 16.571-36.571 36.571 0 17.714 25.714 60.571 34.857 78.286l-101.143 470.286h-116.571c-20 0-36.571 16.571-36.571 36.571s16.571 36.571 36.571 36.571h146.286c38.286 0 39.429-45.714 45.143-73.143h686.286c20 0 36.571-16.571 36.571-36.571z" />
<glyph unicode="&#xf111;" glyph-name="circle" horiz-adv-x="878" d="M877.714 438.857c0-242.286-196.571-438.857-438.857-438.857s-438.857 196.571-438.857 438.857 196.571 438.857 438.857 438.857 438.857-196.571 438.857-438.857z" />
<glyph unicode="&#xf155;" glyph-name="dollar, usd" horiz-adv-x="583" d="M558.857 273.714c0-116.571-83.429-208.571-204.571-228.571v-100c0-10.286-8-18.286-18.286-18.286h-77.143c-9.714 0-18.286 8-18.286 18.286v100c-133.714 18.857-206.857 98.857-209.714 102.286-5.714 6.857-6.286 16.571-1.143 23.429l58.857 77.143c2.857 4 8 6.286 13.143 6.857s10.286-1.143 13.714-5.143c1.143-0.571 81.143-77.143 182.286-77.143 56 0 116.571 29.714 116.571 94.286 0 54.857-67.429 81.714-144.571 112.571-102.857 40.571-230.857 92-230.857 235.429 0 105.143 82.286 192 201.714 214.857v102.857c0 10.286 8.571 18.286 18.286 18.286h77.143c10.286 0 18.286-8 18.286-18.286v-100.571c116-13.143 177.714-76 180-78.286 5.714-6.286 6.857-14.857 2.857-21.714l-46.286-83.429c-2.857-5.143-7.429-8.571-13.143-9.143-5.714-1.143-10.857 0.571-15.429 4-0.571 0.571-69.714 61.714-155.429 61.714-72.571 0-122.857-36-122.857-88 0-60.571 69.714-87.429 150.857-118.857 105.143-40.571 224-86.857 224-224.571z" />
</font></defs></svg>
\ No newline at end of file
public/css/riesgos/style.css 0 → 100644
View file @ 59c5b256
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hxelke');
src: url('fonts/icomoon.eot?hxelke#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hxelke') format('truetype'),
url('fonts/icomoon.woff?hxelke') format('woff'),
url('fonts/icomoon.svg?hxelke#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="fa-"], [class*=" fa-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-bus:before {
content: "\e901";
}
.fa-plane:before {
content: "\e903";
}
.fa-shopping-cart:before {
content: "\f07a";
}
.fa-circle:before {
content: "\f111";
}
.fa-dollar:before {
content: "\f155";
}
.fa-usd:before {
content: "\f155";
}
public/js/riesgos_basemap.js
View file @ 59c5b256
...@@ -89,9 +89,18 @@ const getSchoolColor = s => { ...@@ -89,9 +89,18 @@ const getSchoolColor = s => {
"#c0d1e5"; "#c0d1e5";
} }
let aeropuertos, autobuses, supermercados, bancos, escuelas, hospitales, hoteles, puentes, puntoFronterizo, descargas, presas, subcuencas, tuxtlaVH, zms, anps;
let pistasaereas, autobuses, supermercados, bancos, escuelas, hospitales, hoteles, puentes, puntoFronterizo, descargas, presas, subcuencas, tuxtlaVH, zms, anps;
// *** WMS INEGI *** // *** WMS INEGI ***
// AEROPUERTOS
let layer_aeropuertos = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c201",
format: "image/svg+xml",
transparent: true,
pane: "pane_aeropuertosypistas",
attribution: "INEGI 2019"
});
// VIAS FERREAS // VIAS FERREAS
let layer_vferreas = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", { let layer_vferreas = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c202", layers: "c202",
...@@ -184,32 +193,34 @@ let layer_limiteMunicipal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tu ...@@ -184,32 +193,34 @@ let layer_limiteMunicipal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tu
// }); // });
// *** FIN WMS INEGI *** // *** FIN WMS INEGI ***
let layer_aeropuertos = new L.geoJson(null, { // let layer_pistasaereas = new L.geoJson(null, {
attribution: "", // attribution: "",
pane: "pane_aeropuertos", // pane: "pane_aeropuertosypistas",
//onEachFeature: pop_escuelas, // //onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) { // pointToLayer: function(feature, latlng) {
// let context = { // // let context = {
// feature: feature, // // feature: feature,
// variables: {} // // variables: {}
// }; // // };
let escuelaMarker = L.BeautifyIcon.icon({ // let avionMarker = L.BeautifyIcon.icon({
icon: "escuela", // icon: "plane",
iconSize: [0, 0], // iconSize: [0, 0],
iconAnchor: [7, 10], // iconAnchor: [7, 10],
iconShape: "circle", // iconShape: "", //"circle",
popupAnchor: [0, 0], // popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;", // innerIconStyle: "font-size: 15px;",
borderWidth: 0, // borderWidth: 0,
borderColor: "transparent", // borderColor: "transparent",
backgroundColor: "transparent" //, // backgroundColor: "transparent" //,
// textColor: getSchoolColor(feature.properties["Nivel"]) // // textColor: getSchoolColor(feature.properties["Nivel"])
}); // });
return new L.Marker(latlng, { // return new L.Marker(latlng, {
icon: escuelaMarker // icon: avionMarker
}); // });
} // }
}); // });
// let aeropuertosypistasaereas = L.layerGroup([layer_aeropuertos, layer_pistasaereas]);
let layer_autobuses = new L.geoJson(null, { let layer_autobuses = new L.geoJson(null, {
attribution: "", attribution: "",
...@@ -220,20 +231,21 @@ let layer_autobuses = new L.geoJson(null, { ...@@ -220,20 +231,21 @@ let layer_autobuses = new L.geoJson(null, {
// feature: feature, // feature: feature,
// variables: {} // variables: {}
// }; // };
let escuelaMarker = L.BeautifyIcon.icon({ let busMarker = L.BeautifyIcon.icon({
icon: "escuela", icon: "bus1",
iconSize: [0, 0], iconSize: [0, 0],
iconAnchor: [7, 10], iconAnchor: [7, 10],
iconShape: "circle", iconShape: "", //"circle",
popupAnchor: [0, 0], popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;", innerIconStyle: "font-size: 13px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-bus1 fa-stack-1x\" style=\"color:#ff0000;\"></i></span>",
borderWidth: 0, borderWidth: 0,
borderColor: "transparent", borderColor: "transparent",
backgroundColor: "transparent" //, backgroundColor: "transparent" //,
// textColor: getSchoolColor(feature.properties["Nivel"]) // textColor: "#C0C0C0"
}); });
return new L.Marker(latlng, { return new L.Marker(latlng, {
icon: escuelaMarker icon: busMarker
}); });
} }
}); });
...@@ -247,20 +259,21 @@ let layer_supermercados = new L.geoJson(null, { ...@@ -247,20 +259,21 @@ let layer_supermercados = new L.geoJson(null, {
// feature: feature, // feature: feature,
// variables: {} // variables: {}
// }; // };
let escuelaMarker = L.BeautifyIcon.icon({ let shoppingMarker = L.BeautifyIcon.icon({
icon: "escuela", icon: "shopping-cart",
iconSize: [0, 0], iconSize: [0, 0],
iconAnchor: [7, 10], iconAnchor: [7, 10],
iconShape: "circle", iconShape: "circle",
popupAnchor: [0, 0], popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;", innerIconStyle: "font-size: 13px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-shopping-cart fa-stack-1x\" style=\"color:#ff0000;\"></i></span>",
borderWidth: 0, borderWidth: 0,
borderColor: "transparent", borderColor: "transparent",
backgroundColor: "transparent" //, backgroundColor: "transparent",
// textColor: getSchoolColor(feature.properties["Nivel"]) textColor: "#C0C0C0"
}); });
return new L.Marker(latlng, { return new L.Marker(latlng, {
icon: escuelaMarker icon: shoppingMarker
}); });
} }
}); });
...@@ -274,20 +287,21 @@ let layer_bancos = new L.geoJson(null, { ...@@ -274,20 +287,21 @@ let layer_bancos = new L.geoJson(null, {
// feature: feature, // feature: feature,
// variables: {} // variables: {}
// }; // };
let escuelaMarker = L.BeautifyIcon.icon({ let bancosMarker = L.BeautifyIcon.icon({
icon: "escuela", icon: "circle",
iconSize: [0, 0], iconSize: [0, 0],
iconAnchor: [7, 10], iconAnchor: [7, 10],
iconShape: "circle", iconShape: "circle",
popupAnchor: [0, 0], popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;", innerIconStyle: "font-size: 13px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-circle fa-stack-1x\" style=\"color:#ff0000;\"></i><i class =\"fas fa-dollar fa-stack-1x fa-inverse\"></i></span>",
borderWidth: 0, borderWidth: 0,
borderColor: "transparent", borderColor: "transparent",
backgroundColor: "transparent" //, backgroundColor: "transparent",
// textColor: getSchoolColor(feature.properties["Nivel"]) textColor: "#C0C0C0"
}); });
return new L.Marker(latlng, { return new L.Marker(latlng, {
icon: escuelaMarker icon: bancosMarker
}); });
} }
}); });
...@@ -675,10 +689,10 @@ const makeBaseMap = () => { ...@@ -675,10 +689,10 @@ const makeBaseMap = () => {
createPane("pane_wbnames", 421); createPane("pane_wbnames", 421);
createPane("pane_vferreas", 422); createPane("pane_vferreas", 422);
createPane("pane_estatal", 423); createPane("pane_estatal", 423);
createPane("pane_aeropuertos", 424); createPane("pane_aeropuertosypistas", 424);
createPane("pane_autobuses", 425); createPane("pane_autobuses", 425);
createPane("pane_supermercados", 424); createPane("pane_supermercados", 426);
createPane("pane_bancos", 425); createPane("pane_bancos", 427);
/*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" + /*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" +
"<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" + "<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
...@@ -699,7 +713,7 @@ const makeBaseMap = () => { ...@@ -699,7 +713,7 @@ const makeBaseMap = () => {
// layerControl.addOverlay(puerto, "&nbsp; <i class=\"fa fa-puertoindustrial\" style=\"margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Puerto"); // layerControl.addOverlay(puerto, "&nbsp; <i class=\"fa fa-puertoindustrial\" style=\"margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Puerto");
// zip2Lyr("../grijalva/data/PuntosFrontera.zip", puntoFronterizo, layer_frontera); // zip2Lyr("../grijalva/data/PuntosFrontera.zip", puntoFronterizo, layer_frontera);
// layerControl.addOverlay(layer_frontera, "&nbsp;<i class=\"fa fa-puntofronterizo\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 16px;\"></i> Punto fronterizo"); // layerControl.addOverlay(layer_frontera, "&nbsp;<i class=\"fa fa-puntofronterizo\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 16px;\"></i> Punto fronterizo");
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\"/>"); 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("../grijalva/data/descargas.zip", descargas, layer_descargas); // zip2Lyr("../grijalva/data/descargas.zip", descargas, layer_descargas);
// layerControl.addOverlay(layer_descargas, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#808080;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Descargas residuales municipales e industriales"); // layerControl.addOverlay(layer_descargas, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#808080;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Descargas residuales municipales e industriales");
// zip2Lyr("../grijalva/data/presas.zip", presas, layer_presas); // zip2Lyr("../grijalva/data/presas.zip", presas, layer_presas);
...@@ -718,16 +732,17 @@ const makeBaseMap = () => { ...@@ -718,16 +732,17 @@ const makeBaseMap = () => {
// layerControl.addOverlay(layer_ANPs, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,255,0,.3)\" stroke=\"rgba(128,152,72,1.0)\" stroke-dasharray=\"0.5,1\" stroke-dashoffset=\"0.5\"></rect></svg> Áreas Naturales Protegidas 2018"); // layerControl.addOverlay(layer_ANPs, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,255,0,.3)\" stroke=\"rgba(128,152,72,1.0)\" stroke-dasharray=\"0.5,1\" stroke-dashoffset=\"0.5\"></rect></svg> Áreas Naturales Protegidas 2018");
//revisar las leyendas de estos layers //revisar las leyendas de estos layers
layerControl.addOverlay(layer_vferreas, "Vías Férreas <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=\"Vías Férreas\"/>"); 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\"/>");
layerControl.addOverlay(layer_limiteEstatal, "<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\"/>"); layerControl.addOverlay(layer_limiteEstatal, "Estados <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\"/>");
zip2Lyr("../riesgos/data/aeropuertosypistasaereas.zip", aeropuertos, layer_aeropuertos); layerControl.addOverlay(layer_aeropuertos, "Aeropuertos y pistas aéreas<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=c201&format=image/png&STYLE=default\" alt=\"Aeropuertos\"/>");
layerControl.addOverlay(layer_aeropuertos, "Aeropuertos y pistas aéreas<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("../riesgos/data/aeropuertosypistasaereas.zip", pistasaereas, layer_pistasaereas);
// layerControl.addOverlay(layer_aeropuertosypistasaereas, "Aeropuertos y pistas aéreas<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("../riesgos/data/centraldeautobuses.zip", autobuses, layer_autobuses); zip2Lyr("../riesgos/data/centraldeautobuses.zip", autobuses, layer_autobuses);
layerControl.addOverlay(layer_autobuses, "Central de Autobuses <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"); layerControl.addOverlay(layer_autobuses, "Central de Autobuses <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-bus\" style=\"color:#fbbf4c;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Básico;");
zip2Lyr("../riesgos/data/supermercados.zip", supermercados, layer_supermercados); zip2Lyr("../riesgos/data/supermercadosytiendasdepartamentales.zip", supermercados, layer_supermercados);
layerControl.addOverlay(layer_supermercados, "Supermercados y tiendas departamentales<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"); layerControl.addOverlay(layer_supermercados, "Supermercados y tiendas departamentales<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-shopping-cart\" style=\"color:#409400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Básico;");
zip2Lyr("../riesgos/data/bancos.zip", bancos, layer_bancos); zip2Lyr("../riesgos/data/bancos.zip", bancos, layer_bancos);
layerControl.addOverlay(layer_bancos, "Bancos <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"); layerControl.addOverlay(layer_bancos, "<i class=\"fa fa-dollar\" style=\"color:#409400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Bancos;");
// Localize Leaflet.Draw texts // Localize Leaflet.Draw texts
......
public/riesgos/index.html
View file @ 59c5b256
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8' /> <meta charset='utf-8' />
<title>Contenido de agua en la cuenca Grijalva</title> <title>Contenido de agua en la cuenca Grijalva</title>
...@@ -10,39 +11,35 @@ ...@@ -10,39 +11,35 @@
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' /> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css"> <link rel="stylesheet" type="text/css" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../js/L.VisualClick/L.VisualClick.css"> <link rel="stylesheet" type="text/css" href="../js/L.VisualClick/L.VisualClick.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<link rel="stylesheet" type="text/css" href="../css/riesgos/style.css">
<link rel="stylesheet" type="text/css" href="../css/style.css"> <link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="icon" href="../img/grijalva.png" sizes="16x16"> <link rel="icon" href="../img/grijalva.png" sizes="16x16">
<!--<link rel="stylesheet" href="./css/map.css" type="text/css">--> <!--<link rel="stylesheet" href="./css/map.css" type="text/css">-->
</head> </head>
<body> <body>
<div id="initial-backdrop"> <div id="initial-backdrop">
<img class="img_bg" src="../img/sumidero2.jpg" alt="Ca&ntilde;&oacute;n del Sumidero"> <img class="img_bg" src="../img/inundacion.jpg" alt="Afectaci&oacute;n por inundaci&oacute;n">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span> <span class="photo-credit">Foto: Felinto C&oacute;rdoda </span>
</div> </div>
<div class="container" id="startHeader"> <div class="container" id="startHeader">
<div class="jumbotron mt-5" style="background-color: rgba(233,236,239,0.75); opacity: 0.99;"> <div class="jumbotron mt-5" style="background-color: rgba(233,236,239,0.75); opacity: 0.99;">
<h1 class="display-4">Contenido de agua en la cuenca del r&iacute;o Grijalva</h1> <h1 class="display-4">Afectaciones por inundaci&oacute;n en la cuenca del r&iacute;o Grijalva</h1>
<p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo <p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo por medio de la visualizaci&oacute;n de cuerpos de agua y algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
por medio de la visualizaci&oacute;n de cuerpos de agua y
algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
<hr class="my-4"> <hr class="my-4">
<p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p> <p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p>
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-4 text-center"> <div class="col-4 text-center">
<input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" placeholder="Fecha inicial" data-calendar="false" />
placeholder="Fecha inicial" data-calendar="false" />
</div> </div>
<div class="col-4 text-center"> <div class="col-4 text-center">
<input type="text" name="date-final" id="date-final" readonly="readonly" size="12" <input type="text" name="date-final" id="date-final" readonly="readonly" size="12" placeholder="Fecha final" data-calendar="true" />
placeholder="Fecha final" data-calendar="true" />
</div> </div>
</div> </div>
</div> </div>
...@@ -70,7 +67,7 @@ ...@@ -70,7 +67,7 @@
<i class="fa fa-spinner2 fa-spin fa-5x loadSpinner"></i><br> <i class="fa fa-spinner2 fa-spin fa-5x loadSpinner"></i><br>
<span class="loadText">Cargando datos...<br> <span class="loadText">Cargando datos...<br>
<span id="wb-fileLoad"></span> <span id="wb-fileLoad"></span>
<span id="basemap-fileLoad"></span> <span id="basemap-fileLoad"></span>
</span> </span>
</div> </div>
</div> </div>
...@@ -119,8 +116,7 @@ ...@@ -119,8 +116,7 @@
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog" <div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog" aria-labelledby="explainIndicatorModal" aria-hidden="true">
aria-labelledby="explainIndicatorModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
...@@ -138,28 +134,27 @@ ...@@ -138,28 +134,27 @@
</div> </div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script>
</script> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> <script src="../js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js"></script>
<script src="../js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js"></script> <script src="../js/L.VisualClick/L.VisualClick.js"></script>
<script src="../js/L.VisualClick/L.VisualClick.js"></script> <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script> <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script> <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script> <script type="text/javascript" src="../js/Leaflet.Sync.js"></script>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script> <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script> <script type="text/javascript" src="../js/jszip.min.js"></script>
<script type="text/javascript" src="../js/jszip.min.js"></script> <script src="../js/grijalva_functions.js"></script>
<script src="../js/grijalva_functions.js"></script> <script src="../js/riesgos_basemap.js"></script>
<script src="../js/grijalva_basemap.js"></script> <script src="../js/grijalva_charts.js"></script>
<script src="../js/grijalva_charts.js"></script>
<!--<script> <!--<script>
...@@ -228,4 +223,5 @@ ...@@ -228,4 +223,5 @@
</script>--> </script>-->
</body> </body>
</html> </html>
\ No newline at end of file
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