577 lines
16 KiB
JavaScript
577 lines
16 KiB
JavaScript
import { nompropio } from "./functions.js";
|
|
|
|
// punto central de donde se colocará el mapa, latitud, longitud y zoom
|
|
var map = L.map("map").setView([24.026078546314853, -102.65858297569135], 5);
|
|
|
|
let tableSitios = document.getElementById("dataSitiosInstalados");
|
|
|
|
let verde = "#10312B";
|
|
let morado = "#691c32";
|
|
let blanco = "#ffffff";
|
|
let negro = "#000000";
|
|
let url_icon_ai = window.location.origin + "/mapa/img_ai"
|
|
let sitios = window.location.origin + "/mapa/sitios_info"
|
|
let coordenadas = window.location.origin + "/mapa/coordenadas"
|
|
|
|
|
|
let sitioIcon = L.icon({
|
|
iconUrl: url_icon_ai,
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34]
|
|
});
|
|
|
|
|
|
|
|
// JSON estados, de inicio los establezco en cero (0) y se actualizara dependiendo el los registros en el archivo sitios.json
|
|
let estados = [{
|
|
IDEDO: 1,
|
|
ESTADO: "Aguascalientes",
|
|
ACRONIMO: "Ags.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 2,
|
|
ESTADO: "Baja California",
|
|
ACRONIMO: "B.C.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 3,
|
|
ESTADO: "Baja California Sur",
|
|
ACRONIMO: "B.C.S.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 4,
|
|
ESTADO: "Campeche",
|
|
ACRONIMO: "Camp.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 5,
|
|
ESTADO: "Coahuila",
|
|
ACRONIMO: "Coah.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 6,
|
|
ESTADO: "Colima",
|
|
ACRONIMO: "Col.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 7,
|
|
ESTADO: "Chiapas",
|
|
ACRONIMO: "Chis.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 8,
|
|
ESTADO: "Chihuahua",
|
|
ACRONIMO: "Chih.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 9,
|
|
ESTADO: "Ciudad de México",
|
|
ACRONIMO: "CDMX",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 10,
|
|
ESTADO: "Durango",
|
|
ACRONIMO: "Dgo.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 11,
|
|
ESTADO: "Guanajuato",
|
|
ACRONIMO: "Gto.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 12,
|
|
ESTADO: "Guerrero",
|
|
ACRONIMO: "Gro.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 13,
|
|
ESTADO: "Hidalgo",
|
|
ACRONIMO: "Hgo.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 14,
|
|
ESTADO: "Jalisco",
|
|
ACRONIMO: "Jal.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 15,
|
|
ESTADO: "México",
|
|
ACRONIMO: "Méx.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 16,
|
|
ESTADO: "Michoacán",
|
|
ACRONIMO: "Mich.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 17,
|
|
ESTADO: "Morelos",
|
|
ACRONIMO: "Mor.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 18,
|
|
ESTADO: "Nayarit",
|
|
ACRONIMO: "Nay.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 19,
|
|
ESTADO: "Nuevo León",
|
|
ACRONIMO: "N.L.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 20,
|
|
ESTADO: "Oaxaca",
|
|
ACRONIMO: "Oax.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 21,
|
|
ESTADO: "Puebla",
|
|
ACRONIMO: "Pue.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 22,
|
|
ESTADO: "Querétaro",
|
|
ACRONIMO: "Qro.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 23,
|
|
ESTADO: "Quintana Roo",
|
|
ACRONIMO: "Q.R.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 24,
|
|
ESTADO: "San Luis Potosí",
|
|
ACRONIMO: "S.L.P.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 25,
|
|
ESTADO: "Sinaloa",
|
|
ACRONIMO: "Sin.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 26,
|
|
ESTADO: "Sonora",
|
|
ACRONIMO: "Son.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 27,
|
|
ESTADO: "Tabasco",
|
|
ACRONIMO: "Tab.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 28,
|
|
ESTADO: "Tamaulipas",
|
|
ACRONIMO: "Tams.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 29,
|
|
ESTADO: "Tlaxcala",
|
|
ACRONIMO: "Tlax.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 30,
|
|
ESTADO: "Veracruz",
|
|
ACRONIMO: "Ver.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 31,
|
|
ESTADO: "Yucatán",
|
|
ACRONIMO: "Yuc.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
{
|
|
IDEDO: 32,
|
|
ESTADO: "Zacatecas",
|
|
ACRONIMO: "Zac.",
|
|
SITIOS_INSTALADOS: 0,
|
|
},
|
|
];
|
|
|
|
|
|
// función que al pasar el cursor encima de un th o tr de la tabla este se refleje en el mapa
|
|
function thMapStyle(idThName) {
|
|
let edoTh = document.getElementById(idThName);
|
|
let strTh = String(idThName).substring(3);
|
|
|
|
if (idThName) {
|
|
let th = `th_${strTh}`;
|
|
let td = `td_${strTh}`;
|
|
|
|
let thAffect = document.getElementById(th);
|
|
let tdAffect = document.getElementById(td);
|
|
|
|
edoTh.addEventListener("mouseenter", () => {
|
|
thAffect.style.background = verde;
|
|
tdAffect.style.background = verde;
|
|
tdAffect.style.color = blanco;
|
|
let estado = document.getElementById(strTh);
|
|
estado.style.fill = "#f3722c"
|
|
estado.style.fillOpacity = '0.8';
|
|
});
|
|
|
|
edoTh.addEventListener("mouseleave", () => {
|
|
thAffect.style.background = "#691c32";
|
|
tdAffect.style.background = blanco;
|
|
tdAffect.style.color = negro;
|
|
|
|
let estado = document.getElementById(strTh);
|
|
estado.style.fill = "#3388ff";
|
|
estado.style.fillOpacity = '0.2'
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function sitioData(objeto) {
|
|
let lenguasIndigenas = String(objeto["lenguasIndigenas"]).length == 0 ? "N/D" : nompropio(objeto["lenguasIndigenas"]);
|
|
let denominacion = String(objeto["Denominacion"]).length == 0 ? "N/D" : nompropio(objeto["Denominacion"]);
|
|
|
|
let marker = L.marker(
|
|
[objeto["ubicacion"]["latitud"], objeto["ubicacion"]["longitud"]], { title: "Más información", icon: sitioIcon }
|
|
).addTo(map).bindPopup(`<table id="${objeto["Estado"]}">
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Nombre Unidad:
|
|
</th>
|
|
<td>
|
|
${nompropio(objeto["NombreUnidad"])}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
GID:
|
|
</th>
|
|
<td>
|
|
${objeto["CodigoGid"]}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Denominación:
|
|
</th>
|
|
<td>
|
|
${denominacion}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Estado:
|
|
</th>
|
|
<td>
|
|
${nompropio(objeto["Estado"])}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Municipio:
|
|
</th>
|
|
<td>
|
|
${nompropio(objeto["Municipio"])}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Localidad:
|
|
</th>
|
|
<td>
|
|
${nompropio(objeto["Localidad"])}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Localización:
|
|
</th>
|
|
<td>
|
|
${objeto["ubicacion"]["latitud"]} ${
|
|
objeto["ubicacion"]["longitud"]
|
|
}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Lengua indígena:
|
|
</th>
|
|
<td>
|
|
${lenguasIndigenas}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Fecha instalación:
|
|
</th>
|
|
<td>
|
|
${objeto["fechaInstalacion"]}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="specialWidth">
|
|
Página sitio:
|
|
</th>
|
|
<td>
|
|
<a href="${objeto["infografiaSitio"]}" target="_blank">
|
|
Infografía Sitio
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>`);
|
|
}
|
|
|
|
// tabla conteo de sitios por estado
|
|
(() => {
|
|
// petición de sitios y actualización de json estados y sitios instalados
|
|
fetch(sitios)
|
|
.then((data) => data.json())
|
|
.then((resData) => {
|
|
resData.forEach((element) => {
|
|
|
|
if (element["ubicacion"]) {
|
|
sitioData(element);
|
|
|
|
// actualizar los sitios instalados
|
|
estados.forEach((ele) => {
|
|
if (nompropio(ele["ESTADO"]) == nompropio(element["Estado"])) {
|
|
ele["SITIOS_INSTALADOS"] += 1;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
let t = 0;
|
|
|
|
estados.forEach((ele) => {
|
|
|
|
if (ele["SITIOS_INSTALADOS"] > 0) {
|
|
let idEdoTh = `th_${ele["ESTADO"]}`;
|
|
let idEdoTd = `td_${ele["ESTADO"]}`;
|
|
|
|
t += ele["SITIOS_INSTALADOS"];
|
|
|
|
tableSitios.insertAdjacentHTML(
|
|
"beforeend",
|
|
`<tr id="tr_${ele["ESTADO"]}">
|
|
<th class="centerText" id="th_${ele["ESTADO"]}">
|
|
${nompropio(ele["ESTADO"])}
|
|
</th>
|
|
<td id="td_${ele["ESTADO"]}" >
|
|
${ele["SITIOS_INSTALADOS"]}
|
|
</td>
|
|
</tr>`
|
|
);
|
|
|
|
thMapStyle(idEdoTh);
|
|
thMapStyle(idEdoTd);
|
|
}
|
|
|
|
});
|
|
|
|
let btnDownload = document.getElementById("nsitios");
|
|
btnDownload.innerText = `${t} sitios instalados`;
|
|
|
|
});
|
|
})();
|
|
|
|
// importar las delimitaciones estatales de toda la república mexica
|
|
(() => {
|
|
// estado JSON 2
|
|
fetch(coordenadas)
|
|
.then((data) => data.json())
|
|
.then((resJson) => {
|
|
// let geoJsonLayer = L.geoJson(resJson).addTo(map);
|
|
|
|
resJson.forEach((ele) => {
|
|
let idDbEdo = ele["properties"]["sta_name"];
|
|
let idEdo = String(idDbEdo);
|
|
let geoJsonLayer = L.geoJson(ele["geometry"]).addTo(map);
|
|
// console.log(ele.properties.geo_point_2d)
|
|
geoJsonLayer.eachLayer(function(layer) {
|
|
// layer._path.id = ele['properties']['nombre_igg'];
|
|
layer._path.id = idEdo;
|
|
// console.log(layer._path.attributes)
|
|
layer.on('mouseover', function() {
|
|
// console.log(layer._path.attributes.id.nodeValue)
|
|
|
|
this.setStyle({
|
|
'fillColor': '#f3722c',
|
|
'fillOpacity': '0.3',
|
|
// "color": "red"
|
|
})
|
|
});
|
|
|
|
layer.on('mouseout', function() {
|
|
this.setStyle({
|
|
'fillColor': '#3388ff',
|
|
'fillOpacity': '0.2'
|
|
})
|
|
});
|
|
|
|
layer.on('click', function() {
|
|
// console.log(layer._path.attributes);
|
|
let texto = `<b>Estado: ${layer._path.attributes.id.nodeValue}</b>`;
|
|
layer.bindPopup(texto).openPopup();
|
|
// .setLatLng(latlng);
|
|
|
|
});
|
|
|
|
});
|
|
});
|
|
});
|
|
})();
|
|
|
|
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
|
|
maxZoom: 18,
|
|
}).addTo(map);
|
|
|
|
// btn de descarga base de datos
|
|
(() => {
|
|
let btnDescarga = document.getElementById("csvDescarga");
|
|
btnDescarga.addEventListener("click", () => {
|
|
let lstSitios = [];
|
|
let columns =
|
|
"Código GID|Nombre Unidad|Denominación|Lengua indígena|Estado|Municipio|Localidad|Fecha instalación|Latitud|Longitud\n";
|
|
|
|
fetch(sitios)
|
|
.then((data) => data.json())
|
|
.then((data) => {
|
|
data.forEach((ele) => {
|
|
if (ele["ubicacion"]) {
|
|
lstSitios.push([
|
|
ele["CodigoGid"],
|
|
ele["NombreUnidad"],
|
|
nompropio(ele["Denominacion"]),
|
|
nompropio(ele["lenguasIndigenas"]),
|
|
nompropio(ele["Estado"]),
|
|
nompropio(ele["Municipio"]),
|
|
nompropio(ele["Localidad"]),
|
|
ele["fechaInstalacion"],
|
|
ele["ubicacion"]["latitud"],
|
|
ele["ubicacion"]["longitud"],
|
|
]);
|
|
}
|
|
});
|
|
|
|
lstSitios.forEach((row) => {
|
|
columns += row.join("|");
|
|
columns += "\n";
|
|
});
|
|
|
|
var hiddenElement = document.createElement("a");
|
|
hiddenElement.href =
|
|
"data:text/csv;charset=utf-8," + encodeURI(columns);
|
|
|
|
hiddenElement.download = "sitios_instalados.csv";
|
|
hiddenElement.click();
|
|
});
|
|
});
|
|
})();
|
|
|
|
// descargar json
|
|
function downloadObjectAsJson(exportObj, exportName) {
|
|
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
|
|
var downloadAnchorNode = document.createElement('a');
|
|
downloadAnchorNode.setAttribute("href", dataStr);
|
|
downloadAnchorNode.setAttribute("download", exportName + ".json");
|
|
document.body.appendChild(downloadAnchorNode); // required for firefox
|
|
downloadAnchorNode.click();
|
|
downloadAnchorNode.remove();
|
|
}
|
|
|
|
(() => {
|
|
let lstSitios = [];
|
|
let jsonDownload = document.getElementById("jsonDescarga");
|
|
jsonDownload.addEventListener('click', () => {
|
|
fetch(sitios).then(data => data.json()).then(data => {
|
|
data.forEach(ele => {
|
|
lstSitios.push(ele)
|
|
})
|
|
downloadObjectAsJson(lstSitios, "sitios_instalados");
|
|
})
|
|
|
|
})
|
|
})();
|
|
|
|
// descargar txt
|
|
(() => {
|
|
let btnDescarga = document.getElementById("txtDescarga");
|
|
btnDescarga.addEventListener("click", () => {
|
|
let lstSitios = [];
|
|
let columns =
|
|
"Código GID|Nombre Unidad|Denominación|Lengua indígena|Estado|Municipio|Localidad|Fecha instalación|Latitud|Longitud\n";
|
|
|
|
fetch(sitios)
|
|
.then((data) => data.json())
|
|
.then((data) => {
|
|
data.forEach((ele) => {
|
|
if (ele["ubicacion"]) {
|
|
lstSitios.push([
|
|
ele["CodigoGid"],
|
|
ele["NombreUnidad"],
|
|
nompropio(ele["Denominacion"]),
|
|
nompropio(ele["lenguasIndigenas"]),
|
|
nompropio(ele["Estado"]),
|
|
nompropio(ele["Municipio"]),
|
|
nompropio(ele["Localidad"]),
|
|
ele["fechaInstalacion"],
|
|
ele["ubicacion"]["latitud"],
|
|
ele["ubicacion"]["longitud"],
|
|
]);
|
|
}
|
|
});
|
|
|
|
lstSitios.forEach((row) => {
|
|
columns += row.join("|");
|
|
columns += "\n";
|
|
});
|
|
|
|
var hiddenElement = document.createElement("a");
|
|
hiddenElement.href =
|
|
"data:text/txt;charset=utf-8," + encodeURI(columns);
|
|
|
|
hiddenElement.download = "sitios_instalados.txt";
|
|
hiddenElement.click();
|
|
});
|
|
});
|
|
})();
|
|
|
|
// var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
|
|
// var dlAnchorElem = document.getElementById('downloadAnchorElem');
|
|
|
|
// dlAnchorElem.setAttribute("href", dataStr );
|
|
// dlAnchorElem.setAttribute("download", "scene.json");
|
|
// dlAnchorElem.click();
|
|
|
|
|
|
// verificar info
|
|
// js download array as csv file
|
|
// https://www.javatpoint.com/javascript-create-and-download-csv-file
|