Skip to content

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

add riesgos_basemap for riesgos project

parent 1d121c11
Show whitespace changes
Inline Side-by-side
Showing with 934 additions and 0 deletions
public/js/riesgos_basemap.js 0 → 100644
View file @ 74969022
/*
* Copyright 2019 - All rights reserved.
* Rodrigo Tapia-McClung
*
* August 2019
*/
/* global baseFileSize, formatBytes, Promise, omnivore, JSZip, map, layerControl, updateCharts */
/* exported makeBaseMap, baseLayerPromises, drawnItems */
/* Lines related to displaying loading bar are commented */
let baseLayerPromises = [];
/* baseSize = 0,
baseDisplaySize,
baseLoadedSize = 0,
baseLoadedDisplaySize,
baseLayerCounter = 0,
currentBaseLayer = 1;*/
let drawnItems;
/*Object.keys(baseFileSize).forEach((name) => {
if (name.split(".")[1] == "zip") {
baseSize += parseFloat(baseFileSize[name].size); // file size to load for zipped base layers
baseDisplaySize = formatBytes(baseSize, 2); // size in pretty units
baseLayerCounter++;
}
});*/
// function to read compressed json and create a leaflet layer
const zip2Lyr = (zipFile, layerName, layerTemplate) => {
baseLayerPromises.push(
new Promise((resolve, reject) => {
fetch(zipFile) // 1) fetch the url
.then(response => { // 2) filter on 200 OK
if (response.status === 200 || response.status === 0) {
return Promise.resolve(response.blob());
} else {
return Promise.reject(new Error(response.statusText));
}
})
.then(JSZip.loadAsync) // 3) chain with the zip promise
.then(zip => {
let filename = Object.keys(zip.files)[0];
let filetype = filename.split(".").pop();
return [zip.file(filename), filetype]; // 4) chain with the text content promise
})
.then(([file, type]) => {
file.async("string").then(
function success(text) { // 5) display the result
/*let baseFile = zipFile.split("/")[3];
¬baseLoadedSize += parseFloat(baseFileSize[baseFile].size); // cumulative loaded size
baseLoadedDisplaySize = formatBytes(baseLoadedSize); // in pretty units
let baseBarWidth = (baseLoadedSize/baseSize*100);*/
/*currentBaseLayer++;
let baseFiles = currentBaseLayer <= baseLayerCounter ? currentBaseLayer : baseLayerCounter;
$("#basemap-fileLoad").html("Cargando capa " + baseFiles + " de " + baseLayerCounter + "<br>" +
"<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: " + baseBarWidth + "%;\" aria-valuenow=\"" + baseBarWidth + "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
"<span class=\"justify-content-center d-flex position-absolute w-100\">" + baseLoadedDisplaySize + "/" + baseDisplaySize + "</span></span>");
*/
if (type == "json") {
layerTemplate.addData(JSON.parse(text));
} else if (type == "topojson") {
layerName = omnivore.topojson.parse(text, null, layerTemplate);
}
resolve("done");
},
function error(e) {
console.log(e);
reject("error");
}
);
});
})
);
}
const createPane = (layerPane, zIndex) => {
map.createPane(layerPane);
map.getPane(layerPane).style.zIndex = zIndex;
map.getPane(layerPane).style["mix-blend-mode"] = "normal";
}
const getSchoolColor = s => {
return s == "Básico" ? "#409400" :
s == "Medio superior" ? "#df6400" :
"#c0d1e5";
}
let aeropuertos, autobuses, supermercados, bancos, escuelas, hospitales, hoteles, puentes, puntoFronterizo, descargas, presas, subcuencas, tuxtlaVH, zms, anps;
// *** WMS INEGI ***
// VIAS FERREAS
let layer_vferreas = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c202",
format: "image/svg+xml",
transparent: true,
pane: "pane_vferreas",
attribution: "INEGI 2019"
});
//Límite geoestadístico estatal
let layer_limiteEstatal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c100", //Límite geoestadístico estatal
format: "image/svg+xml",
transparent: true,
pane: "pane_estatal",
attribution: "INEGI 2019" //,
// minZoom: 9
});
// AGEBS RURAL
let agebrur = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c108",
format: "image/svg+xml",
transparent: true,
attribution: "INEGI 2019"
});
// AGEBS URBANO
let ageburb = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c109",
format: "image/svg+xml",
transparent: true,
attribution: "INEGI 2019"
});
let layer_agebswms = L.layerGroup([agebrur, ageburb], {
pane: "pane_agebs",
minZoom: 11,
maxZoom: 18
});
// NOMBRES DE CUERPOS DE AGUA
let layer_nombresWB = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "t311",
format: "image/svg+xml",
transparent: true,
attribution: "INEGI 2019",
minZoom: 9,
pane: "pane_wbnames"
});
//RED NACIONAL DE CAMINOS
let layer_RedNacionalCaminos = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "RNC", //Red nacional de caminos
format: "image/svg+xml",
transparent: true,
pane: "pane_carreteras",
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
});
//LOCALIDAD URBANA
let layer_locUrban = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c102",
format: "image/svg+xml",
transparent: true,
pane: "pane_locs",
attribution: "INEGI 2019"
});
//Límite geoestadístico municipal
let layer_limiteMunicipal = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
layers: "c101", //Límite geoestadístico municipal
format: "image/svg+xml",
transparent: true,
pane: "pane_munis",
attribution: "INEGI 2019",
minZoom: 9
});
// Area verde urbana -- camellones?
// let layer_areaVerdeUrbana = new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?", {
// layers: "c110", //Límite geoestadístico municipal
// format: "image/svg+xml",
// transparent: true,
// pane: "pane_camellones",
// attribution: "INEGI 2019",
// minZoom: 11,
// maxZoom: 18
// });
// *** FIN WMS INEGI ***
let layer_aeropuertos = new L.geoJson(null, {
attribution: "",
pane: "pane_aeropuertos",
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: getSchoolColor(feature.properties["Nivel"])
});
return new L.Marker(latlng, {
icon: escuelaMarker
});
}
});
let layer_autobuses = new L.geoJson(null, {
attribution: "",
pane: "pane_autobuses",
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: getSchoolColor(feature.properties["Nivel"])
});
return new L.Marker(latlng, {
icon: escuelaMarker
});
}
});
let layer_supermercados = new L.geoJson(null, {
attribution: "",
pane: "pane_supermercados",
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: getSchoolColor(feature.properties["Nivel"])
});
return new L.Marker(latlng, {
icon: escuelaMarker
});
}
});
let layer_bancos = new L.geoJson(null, {
attribution: "",
pane: "pane_bancos",
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent" //,
// textColor: getSchoolColor(feature.properties["Nivel"])
});
return new L.Marker(latlng, {
icon: escuelaMarker
});
}
});
let layer_escuelas = new L.geoJson(null, {
attribution: "",
pane: "pane_escuelas",
//onEachFeature: pop_escuelas,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 15px;",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent",
textColor: getSchoolColor(feature.properties["Nivel"])
});
return new L.Marker(latlng, {
icon: escuelaMarker
});
}
});
let layer_hospitales = new L.geoJson(null, {
attribution: "",
pane: "pane_hospitales",
//onEachFeature: pop_hospitales,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let hospitalMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 13px;",
html: "<span class=\"fa-stack\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:#ff0000;\"></i><i class =\"fas fa-plus-circle fa-stack-1x fa-inverse\"></i></span>",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent",
textColor: "#C0C0C0"
});
return new L.Marker(latlng, {
icon: hospitalMarker
});
}
});
let layer_hoteles = new L.geoJson(null, {
attribution: "",
pane: "pane_hoteles",
//onEachFeature: pop_hoteles,
pointToLayer: function(feature, latlng) {
// let context = {
// feature: feature,
// variables: {}
// };
let hotelMarker = L.BeautifyIcon.icon({
icon: "bed",
iconSize: [0, 0],
iconAnchor: [7, 10],
iconShape: "circle",
popupAnchor: [0, 0],
innerIconStyle: "font-size: 12px;",
borderWidth: 0,
borderColor: "transparent",
backgroundColor: "transparent",
textColor: "#808080"
});
return new L.Marker(latlng, {
icon: hotelMarker
});
}
});
// let layer_puentes = new L.geoJson(null, {
// attribution: "",
// pane: "pane_puentes",
// //onEachFeature: pop_puentes,
// pointToLayer: function(feature, latlng) {
// // var context = {
// // feature: feature,
// // variables: {}
// // };
// let puenteMarker = L.BeautifyIcon.icon({
// // icon: "grip-lines-vertical",
// icon: "puente",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 12px; transform: rotate(45deg);",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "#808080"
// });
// return new L.Marker(latlng, {
// icon: puenteMarker
// });
// }
// });
// let layer_puerto = new L.geoJson(null, {
// attribution: "",
// pane: "pane_puerto",
// //onEachFeature: pop_puerto,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let puertoMarker = L.BeautifyIcon.icon({
// icon: "puertoindustrial",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 20px;",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "grey"
// });
// return new L.Marker(latlng, {
// icon: puertoMarker
// });
// }
// });
// let layer_frontera = new L.geoJson(null, {
// attribution: "",
// pane: "pane_frontera",
// //onEachFeature: pop_frontera,
// styles: null,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let fronteraMarker = L.BeautifyIcon.icon({
// icon: "puntofronterizo",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 14px;",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "#808080"
// });
// return new L.Marker(latlng, {
// icon: fronteraMarker
// });
// }
// });
// let layer_descargas = new L.geoJson(null, {
// attribution: "",
// pane: "pane_descargas",
// //onEachFeature: pop_descargas,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let descargasMarker = L.BeautifyIcon.icon({
// icon: "desechos",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size: 8px; transform: rotate(45deg); opacity:0.75;",
// borderWidth: 0,
// borderColor: "black",
// backgroundColor: "transparent",
// textColor: "#808080"
// });
// return new L.Marker(latlng, {
// icon: descargasMarker
// });
// }
// });
// let layer_presas = new L.geoJson(null, {
// attribution: "",
// pane: "pane_presas",
// //onEachFeature: pop_presas,
// pointToLayer: function(feature, latlng) {
// // let context = {
// // feature: feature,
// // variables: {}
// // };
// let presasMarker = L.BeautifyIcon.icon({
// icon: "presa",
// iconSize: [0, 0],
// iconAnchor: [7, 10],
// iconShape: "circle",
// popupAnchor: [0, 0],
// innerIconStyle: "font-size:16px;",
// borderWidth: 0,
// borderColor: "transparent",
// backgroundColor: "transparent",
// textColor: "#808080" //"#123fb8"
// });
// return new L.Marker(latlng, {
// icon: presasMarker
// });
// }
// });
const style_cuencas = () => {
return {
pane: "pane_cuencas",
opacity: 1,
color: "rgba(0,0,0,0.25)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(213,190,245,0.25)"
}
}
let layer_cuencas = new L.geoJson(null, {
attribution: "",
pane: "pane_cuencas",
//onEachFeature: pop_cuencas,
style: style_cuencas
});
const style_limZMs = () => {
return {
pane: "pane_limZMs",
opacity: 1,
color: "rgba(101,43,0,0.6)",
dashArray: "",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fillOpacity: 0
}
}
let layer_limZMs = new L.geoJson(null, {
attribution: "",
pane: "pane_limZMs",
//onEachFeature: pop_limZMs,
style: style_limZMs
});
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;
}
}
let layer_ZMs = new L.geoJson(null, {
attribution: "",
pane: "pane_ZMs",
//onEachFeature: pop_ZMs,
style: style_ZMs
});
const style_ANPs = () => {
return {
pane: "pane_ANPs",
opacity: 1,
color: "#00ff00",
dashArray: "3 2",
lineCap: "butt",
lineJoin: "miter",
weight: 1.0,
fill: true,
fillOpacity: 1,
fillColor: "rgba(0,240,2,0.05)"
}
}
// let layer_ANPs = new L.geoJson(null, {
// attribution: "",
// pane: "pane_ANPs",
// //onEachFeature: pop_ANPs,
// style: style_ANPs
// });
const styleDrawnItems = () => {
let currentId = 0;
drawnItems.eachLayer(l => {
l.feature.properties.id = currentId;
l.feature.properties.color = d3.schemeCategory10[currentId];
l.setStyle({
fillColor: d3.schemeCategory10[currentId],
opacity: 0.5,
fillOpacity: 0.2,
color: d3.schemeCategory10[currentId],
weight: 4
});
currentId++;
});
}
const toggleButtons = () => {
let buttons = [];
buttons.push(document.getElementsByClassName("leaflet-draw-draw-polyline")[0]);
buttons.push(document.getElementsByClassName("leaflet-draw-draw-polygon")[0]);
buttons.push(document.getElementsByClassName("leaflet-draw-draw-rectangle")[0]);
buttons.forEach(b => {
// disable buttons if there are 10 drawn items
if (drawnItems.getLayers().length >= 10) {
b.onClick = "preventEventDefault(); return false";
b.classList.add("draw-control-disabled");
// enable buttons if there are less than 10 drawn items
} else if (drawnItems.getLayers().length < 10) {
b.onClick = null;
b.classList.remove("draw-control-disabled");
}
})
}
const makeBaseMap = () => {
// createPane("pane_ANPs", 400);
createPane("pane_munis", 402);
createPane("pane_ZMs", 403);
createPane("pane_limZMs", 404);
createPane("pane_locs", 405);
createPane("pane_cuencas", 406);
createPane("pane_buffer", 407);
createPane("pane_manzanas", 408);
createPane("pane_presas", 409);
// createPane("pane_descargas", 410);
createPane("pane_carreteras", 411);
// createPane("pane_frontera", 412);
// createPane("pane_puerto", 413);
// createPane("pane_puentes", 414);
// createPane("pane_casetas", 415);
// createPane("pane_camellones", 416);
createPane("pane_agebs", 417);
createPane("pane_hoteles", 418);
createPane("pane_hospitales", 419);
createPane("pane_escuelas", 420);
createPane("pane_wbnames", 421);
createPane("pane_vferreas", 422);
createPane("pane_estatal", 423);
createPane("pane_aeropuertos", 424);
createPane("pane_autobuses", 425);
createPane("pane_supermercados", 424);
createPane("pane_bancos", 425);
/*$("#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=\"justify-content-center d-flex position-absolute w-100\">0/" + baseDisplaySize + "</span></span>");*/
layerControl.addOverlay(layer_nombresWB, "Nombres cuerpos de agua");
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);
layerControl.addOverlay(layer_hospitales, "<span class=\"fa fa-stack\" style=\"padding-top: 6px;\"><i class=\"fas fa-desechos fa-stack-1x\" style=\"color:#ff0000;\"></i><i class=\"fas fa-plus-circle fa-stack-1x fa-inverse\"></i></span>Hospitales con 50 personas ocupadas o más");
zip2Lyr("../grijalva/data/hoteles.zip", hoteles, layer_hoteles);
layerControl.addOverlay(layer_hoteles, "&nbsp; <i class=\"fas fa-bed style=\"color:#808080;\"></i> Hoteles principales");
layerControl.addOverlay(layer_agebswms, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=none stroke=\"#d3d3d3\"></rect></svg><span style=\"font-size=xx-small\">&nbsp;AGEBs 2018</span>");
// layerControl.addOverlay(layer_areaVerdeUrbana, "<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=c110\" alt=\"Áreas verdes urbanas\" />");
// zip2Lyr("../grijalva/data/puentes.zip", puentes, layer_puentes);
// layerControl.addOverlay(layer_puentes, "&nbsp; <i class=\"fa fa-puente\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 10px;\"></i> &nbsp;Puentes");
// let puerto = omnivore.geojson("../grijalva/data/PuertoFrontera.json", null, layer_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);
// 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\"/>");
// 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");
// zip2Lyr("../grijalva/data/presas.zip", presas, layer_presas);
// layerControl.addOverlay(layer_presas, "&nbsp; <i class=\"fa fa-presa\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Presas principales");
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\"/>");
zip2Lyr("../grijalva/data/cuencas.zip", subcuencas, layer_cuencas);
layerControl.addOverlay(layer_cuencas, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(213,190,245,0.5)\" stroke=\"rgba(0,0,0,0.25)\" stroke-dasharray=\" \"></rect></svg> Cuenca y subcuencas del Grijalva, CONAGUA 2017");
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("../grijalva/data/limitesZM.zip", zms, layer_ZMs);
layerControl.addOverlay(layer_ZMs, "Zonas metropolitanas<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=\"rgba(139,60,0,0.8)\" stroke=\"rgba(139,47,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Tuxtla Gutiérrez<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=\"rgba(207,152,62,0.8)\" stroke=\"rgba(139,47,0,0.6)\" stroke-dasharray=\" \"></rect></svg> Villahermosa");
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\"/>");
// zip2Lyr("../grijalva/data/anps.zip", anps, layer_ANPs);
// map.addLayer(layer_ANPs);
// 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
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_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\"/>");
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;<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);
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");
zip2Lyr("../riesgos/data/supermercados.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");
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");
// 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"
},
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"
}
},
simpleshape: {
tooltip: {
end: "Suelta el ratón para terminar de dibujar"
}
}
}
},
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"
}
},
remove: {
tooltip: {
text: "Haz click en una figura para eliminarla"
}
}
}
}
}
// leaflet draw control
drawnItems = L.featureGroup().addTo(map);
let drawControl = new L.Control.Draw({
draw: {
polygon: {
showArea: true,
//allowIntersection: false, // Restricts shapes to simple polygons
//drawError: {
//color: "#f9a800",
//message: "<strong>you can't draw that!" // Message that will show when intersect
//},
shapeOptions: {
color: "#42ffc3"
}
},
// disable toolbar item by setting it to false
polyline: {
//allowIntersection:false,
shapeOptions: {
color: "#42ffc3"
}
},
rectangle: {
shapeOptions: {
color: "#42ffc3"
}
},
marker: false,
circlemarker: false,
circle: false // Turns off this drawing tool
},
edit: {
featureGroup: drawnItems,
//remove: false
}
});
map.addControl(drawControl);
// set z-index of panes so actions can be done on drawnItems when editing/deleting
map.on(L.Draw.Event.CREATED, event => {
$("#mexmap .leaflet-pane.leaflet-overlay-pane").css("z-index", "400");
let layer = event.layer,
feature = layer.feature = layer.feature || {}; // Initialize feature
feature.type = feature.type || "Feature"; // Initialize feature.type
feature.properties = feature.properties || {}; // Initialize feature.properties
drawnItems.addLayer(layer); // whatever you want to do with the created layer
// give each drawn item an id and color from an array
styleDrawnItems();
// disable buttons if there are 10 drawn items
toggleButtons();
// after drawing shape, update chart with data for polygons contained inside it
updateCharts();
});
map.on(L.Draw.Event.DELETESTART, () => {
// before deleting shape, bring pane up
$("#mexmap .leaflet-pane.leaflet-overlay-pane").css("z-index", "451");
});
map.on(L.Draw.Event.DELETED, () => {
// after deleting a drawn item, refresh the list of ids and colors
styleDrawnItems();
// enable buttons if there are less than 10 drawn items
toggleButtons();
// after deleting shape, send pane down
$("#mexmap .leaflet-pane.leaflet-overlay-pane").css("z-index", "400");
// and update chart with data:
// if there are drawnItems, use them. If not, use original data
updateCharts();
});
map.on(L.Draw.Event.EDITSTART, () => {
$("#mexmap .leaflet-pane.leaflet-overlay-pane").css("z-index", "451");
// before editing shape, bring pane up
});
map.on(L.Draw.Event.EDITSTOP, () => {
$("#mexmap .leaflet-pane.leaflet-overlay-pane").css("z-index", "400");
// before editing shape, bring pane up
});
map.on(L.Draw.Event.EDITED, () => {
// before editing shape, send pane down
$("#mexmap .leaflet-pane.leaflet-overlay-pane").css("z-index", "400");
// after editing shape, update chart with data for polygons contained inside it
updateCharts();
});
}
\ 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