Librería: Leaflet

Descripción: El usuario agrega manualmente los archivos geojson que desee y el sistema lo muestra en el mapa junto con la leyenda donde el usuario puede activarlos o desactivarlos.

image.png

Archivo CSS

#map { 
    height: 800px; 
    width: 1580px;
}

#legend {
    position: absolute;
    top: 150px;
    right: 200px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    font-size: 14px;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

#legend div {
    margin-bottom: 10px; 
}

#file-input {
    background-color: #2596be;
    color: white; 
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 20px 0;
}

Archivo HMTL:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	 <link rel="stylesheet" href="<https://unpkg.com/leaflet@1.9.4/dist/leaflet.css>"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
     <link rel="stylesheet" type="text/css" href="mapa.css">

	<title>Mapa con capas geojson cargadas manualmente</title>
</head>
<body>

<input type="file" id="file-input" accept=".geojson,.json">

<div id="map"></div>

<div id="legend"></div>

<script src="<https://unpkg.com/leaflet@1.9.4/dist/leaflet.js>"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<script src="mapa.js"></script>
</body>
</html>

Archivo JavaScript:


// Inicializar el mapa en las coordenadas y zoom requeridos
var map = L.map("map").setView([4.60971, -74.08175], 12);

L.tileLayer("<https://tile.openstreetmap.org/{z}/{x}/{y}.png>", {
  maxZoom: 19,
  attribution:
    '&copy; <a href="<http://www.openstreetmap.org/copyright>">OpenStreetMap</a>',
}).addTo(map);

// Obtener el elemento de entrada de archivo
var fileInput = document.getElementById("file-input");

// Contenedor para las capas y leyenda
var geojsonLayers = {};  // Usamos un objeto para almacenar las capas por nombre
var legendItems = new Set();  // Usamos un Set para evitar duplicados en la leyenda

// Escuchar el evento de cambio de archivo
fileInput.addEventListener("change", function (event) {  
  // Obtener el archivo seleccionado
  var file = event.target.files[0];   

  var reader = new FileReader();

  if (file && (file.name.endsWith(".geojson") || file.name.endsWith(".json"))) {
    
    // Cuando el archivo es cargado, procesarlo
    reader.onload = function (e) {  
      try {
        // Convertir el contenido del archivo a JSON
        var geojsonData = JSON.parse(e.target.result);

        // Crear una capa para el GeoJSON
        var layerName = file.name.split(".")[0]; // Usamos el nombre del archivo como nombre de la capa
        var geojsonLayer = L.geoJSON(geojsonData).addTo(map);

        // Guardar la capa en el objeto geojsonLayers
        geojsonLayers[layerName] = geojsonLayer;

        // Actualizar la leyenda
        updateLegend(layerName);

        // Ajustar el mapa para mostrar todos los datos cargados
        map.fitBounds(L.geoJSON(geojsonData).getBounds());
      } catch (error) {
        alert("Error al procesar el archivo" + error.message);
      }
    };

    reader.readAsText(file);
  } else {
    alert("Por favor, sube un archivo válido .geojson o .json");
  }
});

// Función para actualizar la leyenda
function updateLegend(layerName) {
  var legend = document.getElementById("legend");

  // Añadir un elemento para cada capa con un checkbox para controlarla
  var item = document.createElement('div');
  item.innerHTML = `
    <input type="checkbox" id="${layerName}" checked>
    <label for="${layerName}">${layerName}</label>
  `;
  
  // Añadir el item de leyenda
  legend.appendChild(item);

  // Añadir un evento para activar/desactivar la capa según el checkbox
  document.getElementById(layerName).addEventListener('change', function () {
    if (this.checked) {
      geojsonLayers[layerName].addTo(map);
    } else {
      map.removeLayer(geojsonLayers[layerName]);
    }
  });

  // Guardar en la leyenda las categorías de las capas
  legendItems.add(layerName);
}

Ver el paso a paso:

https://youtu.be/R-sM9xD30lo