96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
import { showNotification } from './99_functions.js';
|
|
|
|
const csvFileInputEl = document.getElementById('csv-file');
|
|
const loadingIndicator = document.getElementById('loading-indicator');
|
|
|
|
document.getElementById('csv-file').addEventListener('change', function (e) {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
// emular loading de carga de archivo csv
|
|
if (this.files.length > 0) {
|
|
loadingIndicator.style.display = 'block';
|
|
// Simular carga
|
|
setTimeout(() => {
|
|
loadingIndicator.style.display = 'none';
|
|
// showNotification('Archivo CSV cargado exitosamente', 'success');
|
|
}, 500);
|
|
}
|
|
|
|
// PapaParse convierte el texto del CSV a objetos JSON automáticamente
|
|
Papa.parse(file, {
|
|
header: true, // Importante: Usa tus encabezados (Etiqueta_pin, Latitud, etc.)
|
|
skipEmptyLines: true,
|
|
dynamicTyping: true, // Convierte lat/lng a números automáticamente
|
|
complete: function (results) {
|
|
const data = results.data;
|
|
if (data.length === 0) {
|
|
showNotification("El archivo CSV está vacío.");
|
|
return;
|
|
}
|
|
procesarYPintarPines(data);
|
|
},
|
|
error: function (err) {
|
|
console.error("Error al procesar CSV:", err);
|
|
showNotification("Hubo un error al leer el archivo.", "error");
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function procesarYPintarPines(puntos) {
|
|
// Usaremos esto para centrar el mapa en todos los puntos cargados
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
let puntosValidos = 0;
|
|
|
|
puntos.forEach(punto => {
|
|
// Extraer datos usando tus encabezados exactos
|
|
const lat = parseFloat(punto.Latitud);
|
|
const lng = parseFloat(punto.Longitud);
|
|
const nombre = punto.Etiqueta_pin || "Sin nombre";
|
|
|
|
if (!isNaN(lat) && !isNaN(lng)) {
|
|
// Crear el HTML del Popup con toda tu información
|
|
const contenido = `
|
|
<div style="font-family: Arial, sans-serif; min-width: 150px;">
|
|
<h4 style="margin: 0 0 5px 0; color: #d32f2f;">${nombre}</h4>
|
|
<p style="margin: 0; font-size: 11px;">
|
|
<b>Estado:</b> ${punto.Estado || 'N/A'}<br>
|
|
<b>Municipio:</b> ${punto.Municipio || 'N/A'}<br>
|
|
<b>Localidad:</b> ${punto.Localidad || 'N/A'}<br>
|
|
<b>Nota:</b> ${punto.Comentario || '...'}
|
|
</p>
|
|
</div>
|
|
`;
|
|
|
|
|
|
// Crear marcador y añadirlo al mapa
|
|
const marker = new maplibregl.Marker({ color: "#d32f2f" })
|
|
.setLngLat([lng, lat])
|
|
.setPopup(new maplibregl.Popup({ offset: 25 }).setHTML(contenido))
|
|
.addTo(map);
|
|
|
|
// Guardar en tu lista global (la que definimos en pasos anteriores)
|
|
if (typeof allMarkers !== 'undefined') {
|
|
allMarkers.push(marker);
|
|
}
|
|
|
|
// Extender los límites para que el mapa sepa qué área cubrir
|
|
bounds.extend([lng, lat]);
|
|
puntosValidos++;
|
|
}
|
|
});
|
|
|
|
if (puntosValidos > 0) {
|
|
// Mover la cámara para encuadrar todos los pines nuevos
|
|
map.fitBounds(bounds, { padding: 50, maxZoom: 15 });
|
|
showNotification(`Éxito: Se cargaron ${puntosValidos} pines.`, "success");
|
|
} else {
|
|
showNotification("Error: No se cargaron pines. Verifica el archivo CSV en los valores de 'latitud' y 'longitud' .", "error");
|
|
}
|
|
}
|
|
|