ruscomap/ruscoapp/public/index.js

let map = null;
let points = [];
//BOLOGNA
const x = 11.343095841047235;
const y = 44.49373478876318;
const piazzaMaggiore = [x, y];

var lat = 0;
var lng = 0;

// COORDS ESISTENTI
async function downloadRusco() {
    const resp = await window.fetch("/rusco.geojson");
    const rusco = await resp.json();
    return rusco.features;
}
// SET VIEW
async function initMap() {
    map = L.map("map").setView([44.49593478876318, 11.343095841047235], 13.5);

    // IMPOSTA MAPPA
    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© OpenStreetMap contributors | RuscoMap",
    }).addTo(map);

    loadMarkers();
    map.on("click", function (e) {
        lat = e.latlng.lat;
        lng = e.latlng.lng;
        document.getElementById("latitudeValue").textContent = lat;
        document.getElementById("longitudeValue").textContent = lng;
        // Bind a popup to the marker
        showModal("modalAddMarker");
    });
    setInterval(loadMarkers, 60000);
}

async function loadMarkers() {
    fetch("http://localhost:3000/getRuschi")
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
            data.forEach((rusco) => {
                map.addMarker(rusco);
            });

            //     L.geoJSON(data, {
            //         onEachFeature: function (feature, layer) {
            //             layer.bindPopup('<h2>' +
            //                 feature.properties.Nome + '</h2><p>' + feature.properties.Descrizione + '</p><img src="' + feature.properties.Foto + '" alt="Photo" style="width:200px;height:auto;">');
            //         }
            //     }).addTo(map);
            // });
        });
}

// SEGUENZA EXEC
async function load() {
    points = await downloadRusco();
    await initMap();
}

function showModal(modalName) {
    const selectedModal = document.getElementById(modalName);
    const modalOverlay = document.getElementById("modalOverlay");
    selectedModal.style.display = "block"; // Show the modal
    modalOverlay.style.display = "block"; // Show the overlay
}

function detectCurrentShownModal() {
    const modalAddMarker = document.getElementById("modalAddMarker");
    const modalSign = document.getElementById("modalSign");
    return modalAddMarker.style.display !== "none" ? modalAddMarker : modalSign;
}

function closeModal() {
    const currentShownModal = detectCurrentShownModal();
    const modalOverlay = document.getElementById("modalOverlay");
    currentShownModal.style.display = "none";
    modalOverlay.style.display = "none";
}

function addMarker() {
    const name = document.getElementById("name").value;
    const description = document.getElementById("description").value;
    const imageUrl = document.getElementById("photo").value;
    const latitude = document.getElementById("latitude").value;
    const longitude = document.getElementById("longitude").value;
    fetch("http://localhost:3000/addRuschi", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            name: name,
            description: description,
            imageUrl: imageUrl,
            latitude: latitude,
            longitude: longitude,
        }),
    })
        .then((response) => {
            if (response.ok) {
                // Authentication successful
                console.log("Added marker");
                // Redirect the user to the authenticated area or perform other actions
            } else {
                // Authentication failed
                console.error("Error adding marker");
            }
        })
        .catch((error) => {
            console.error("Error adding marker", error);
        });
    closeModalAddMarker();
}

window.addEventListener("load", load);

const showAddMarkerModal = document.getElementById("showAddMarkerModal");
showAddMarkerModal.addEventListener("click", () => showModal("modalAddMarker"));

const showModalSign = document.getElementById("showModalSign");
showModalSign.addEventListener("click", () => showModal("modalSign"));

const modalOverlay = document.getElementById("modalOverlay");
modalOverlay.addEventListener("click", closeModal);