main.js

// Este script crea un mapa con una imagen satelital y un archivo GeoJSON superpuesto.
// Extraemos la información de la imagen satelital (sus metadatos, con GDAL) para definir los límites del mapa. 

function makeMap() {

    // Estos son los límites de la imagen satelital.

    // let upperLeft = [-24.87987, -57.82764];
    let lowerLeft = [-25.70095, -57.83323]; 
    let upperRight = [-24.88210, -57.14193];
    let center = [-25.291956, -57.486389];
    // console.log(upperLeft[0]); // -24.87987  (Latitud)
    // console.log(upperLeft[1]); // -57.82764  (Longitud)
    
    // Inicializamos el mapa y establecemos su vista en las coordenadas geográficas elegidas y un nivel de zoom
    // Las coordenadas geográficas son las del centro de la imagen satelital.
    // let map = L.map('map').setView(center, 12);

    // Definir los límites del mapa según la imagen satelital
    // let bounds = L.latLngBounds(lowerLeft, upperRight);
    let imageBounds = [lowerLeft, upperRight];

    let corner1 = L.latLng(lowerLeft[0], lowerLeft[1]);
    let corner2 = L.latLng(upperRight[0], upperRight[1]);
    let bounds = L.latLngBounds(corner1, corner2);

    let map = L.map('map', {
        center: center,
        zoom: 15,
        // maxZoom: 19, // Opcional: fuerza un zoom máximo en el área
        minZoom: 13, 
        maxBounds: bounds, // Restringe el área visible
        maxBoundsViscosity: 1.0 // Mantiene al usuario dentro de los límites
    });

    // Agregamos una capa de tiles al mapa, en este caso es la capa de teselas 'estándar' de OpenStreetMap
    
    //let tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    //L.tileLayer(tileUrl, {
    //    maxZoom: 19,
    //    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    //    bounds: bounds
    //}).addTo(map);

    let tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
    L.tileLayer(tileUrl, {
        attribution: '&copy; <a href="https://carto.com/attributions">CartoDB</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    maxZoom: 19,
    bounds: bounds
     }).addTo(map);

    // http://127.0.0.1:8080/imagenes/prueba1.png
    // Agregamos la imagen satelital
    
    //let imageBounds = [lowerLeft, upperRight];
    let imageUrl = 'https://raw.githubusercontent.com/Tania-Karo/leaflet-test-2/main/imagenes/prueba1.png';
    L.imageOverlay(imageUrl, imageBounds, { opacity: 0.4 }).addTo(map);

    // map.setMaxBounds(bounds); // Restringe la vista dentro de la imagen satelital
    // map.fitBounds(bounds);    // Ajusta el zoom para que la imagen se vea bien

    let greenIcon = L.icon({
        iconUrl: 'https://raw.githubusercontent.com/Tania-Karo/leaflet-test-2/main/imagenes/leaf-green.png',
        shadowUrl: 'https://raw.githubusercontent.com/Tania-Karo/leaflet-test-2/main/imagenes/leaf-shadow.png',
    
        iconSize:     [38, 95], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });

    // Cargar archivo GeoJSON
    let geojsonUrl = 'https://raw.githubusercontent.com/Tania-Karo/leaflet-test-2/main/reducido.geojson';
    fetch(geojsonUrl)  // Ajusta la ruta si es necesario
    .then(response => response.ok ? response.json() : Promise.reject(`Error fetching GeoJSON: ${response.status}`))
    .then(data => {
        L.geoJSON(data, {
            pointToLayer: function(feature, latlng) {
                // Crear marcador con ícono personalizado
                return L.marker(latlng, { icon: greenIcon });
            },
            onEachFeature: (feature, layer) => {
                let name = feature.properties?.nombre || "Sin nombre";
                layer.bindPopup(name);
            }
        }).addTo(map);
    })
    .catch(error => console.error('Error cargando GeoJSON:', error));

    }
    
    // Llama a la función después de que la página se haya cargado
    document.addEventListener("DOMContentLoaded", makeMap);