HambiMap/sketch/alt/app.js

// Déclaration de la map 
var map = L.map('map').setView([50.880301, 6.560531], 13,);

//Déclaration du calque
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, }).addTo(map);

// Création de la classe threeIcon
// TODO: Adjust all the values
var threeIcon = L.Icon.extend({
    options: {
        iconSize: [53, 75],
        iconAnchor: [53 / 2, 75],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
    }
});

// Création de l'icon BAUM
var baumIcon = new threeIcon({ iconUrl: 'baum.png' });
// Création de l'icon BOUDOIR
var boudoirIcon = new threeIcon({ iconUrl: 'boudoir.png' });

//Création d'un objet cluster
//var cluster1 = L.markerClusterGroup();
//
//Import des données JSON du fichier historiqueMarqueurs.json (fonctionne si et seulement si le serveur est online)
// (à l'avenir mettre en place une petite base de données type Firebase)
fetch('historiqueMarqueurs.json')
  .then(function(response) {
    return response.json();
  })
// Ajout des marqueurs du fichier JSON grâce à la fonction addMarkersFromJson
  .then(function(json) {
    addMarkersFromJson(json);
    console.log('Contenu du fichier JSON :', json);
    })
//Erreur
  .catch(function(error) {
    console.error('Les marqueurs ne peuvent être chargés', error);
});


// Fonction ajout des marqueurs depuis le fichier JSON
function addMarkersFromJson(json) {
    // Pour chaque marqueurs
    for (var i = 0; i < json.length; i++) {
        var markerData = json[i];
        var markerIcon = markerData.icon === 'baum' ? baumIcon : boudoirIcon;
        var marker = L.marker([markerData.latitude, markerData.longitude], {icon : markerIcon}).addTo(map);
        marker.bindPopup('<h2>' + markerData.title + '</h2>' + '<p><b>' + markerData.date + '</b></p>' + '<p>' + markerData.desc + '</p>');
        cluster1.addLayer(marker)
        map.addLayer(cluster1);
    }
}

// Fonction ajout marqueur
//function addMarker(e) {
////alert("coucou"); 
//
//    // Récupérer la valeur du select-icon pour ajouter la bonne icône
//    var select = document.getElementById('three-select').value;
//
//    // Récupérer latitude et longitude
//    var latitude = e.latlng.lat;
//    var longitude = e.latlng.lng;
//
//    // Création d'un formulaire lors de l'ajout d'un marqueur
//    var form = document.createElement('form');
//    form.id = "myForm"
//
//    // Format du formulaire
//    form.innerHTML =
//        '<b><label for="marker-title">Name of the tree :</label>' +
//        '<br><input style="bottom: 10px" type="text" id="marker-title" name="marker-title" required>' +
//        '<div></div>' +
//    
//   
//        '<br><b><label for="marker-date">Date of Beginning</label>' +
//        '<br><textarea id="marker-date" name="marker-date" required></textarea>' +
//        '<div></div>' +
//        '<br><b><label for="marker-date2">Date of End : (put xxx if none) </label>' +
//        '<br><textarea id="marker-date2" name="marker-date2" required></textarea>' +
//        '<div></div>' +
//
//        '<br><b><label for="marker-desc">Description :</label>' +
//        '<br><textarea id="marker-desc" name="marker-desc" required></textarea required>' +
//        '<div></div>' +
//        
//        '<br><button style="background: none" type="submit" required>Add on map</button>';
//
//
//
//    
//
//
//
//  
//    // Sélection de la bonne icône en fonction du select
//    switch (select) {
//        case 'boudoir':
//            //Ajout de l'icône à la carte
//            var marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: boudoirIcon }).addTo(map).bindPopup(form);
//            //Ajout de du marqueur au cluster
//            break;
//
//        case 'baum':
//            //Ajout de l'icône à la carte
//            var marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: baumIcon }).addTo(map).bindPopup(form);
//            //Ajout de du marqueur au cluster
//            break;
//        case 'default':
//            break;
//    } 
//
//     // Ajout de l'action pour le formulaire
//form.action = "ecrire_json.php";
//
//// Lors du submit
//form.addEventListener('submit', function (event) {
//    // Empêche le rechargement de la page
//    event.preventDefault();
//
//    //Récupérer les valeurs des champs précedémment remplis
//    var title = document.getElementById('marker-title').value;
//    var date = document.getElementById('marker-date').value;
//    var date2 = document.getElementById ('marker-date2').value;
//    var desc = document.getElementById('marker-desc').value;
// 
//    //Actualisation de la pop-up avec les informations
//    marker.setPopupContent('<h2>' + title + '</h2>' + '<p><b>' + date + '</b></p>' + '<p><b>' + date2 + '</b></p>' + '<p>' + desc + '</p>');   
//    
//    
//    
//    // Création d'un objet contenant les données à envoyer
//    var data = {
//        "lat": latitude,
//        "lng": longitude,
//        "category": select,
//        "title": title,
//        "date": date,
//        "date2": date2,
//        "description": desc
//    };
//
//    // Conversion des données en chaîne JSON
//    var jsonData = JSON.stringify(data);
//
//    // Envoi des données au serveur via une requête AJAX
//    var xhr = new XMLHttpRequest();
//    xhr.open("POST", "enregistrer_donnees.php", true);
//    xhr.setRequestHeader("Accept", "application/json");
//    xhr.send(jsonData);
//});
//
//map.addLayer(cluster1);
//
//     // Conversion des données en chaîne JSON
//     var jsonData = JSON.stringify(data);
//  
//     // Envoi des données au serveur via une requête AJAX
//     var xhr = new XMLHttpRequest();
//     xhr.open("POST", "enregistrer_donnees.php", true);
//     xhr.setRequestHeader("Accept", "application/json");
//     xhr.send(jsonData);
//   
//}
//
//map.on("click", addMarker);
//
//
//
//
//// Récupération des données entrées par l'utilisateur
//var data = {
//    "latitude": document.getElementById("latitude").value,
//    "longitude": document.getElementById("longitude").value,
//    "icon": document.getElementById("icon").value,
//    "title": document.getElementById("title").value,
//    "date2": document.getElementById("date2").value,
//    "date": document.getElementById("date").value,
//    "desc": document.getElementById("desc").value
//  };
//  
// 
//
//
//// Récupération des données du formulaire
//var title = document.getElementById('marker-title').value;
//var date = document.getElementById('marker-date').value;
//var date2 = document.getElementById('marker-date2').value;
//var desc = document.getElementById('marker-desc').value;
//
//
//
/////test openai
//
//document.getElementById("myForm").addEventListener("submit", function(event) {
//    event.preventDefault();
//    sendData();
//  });
//
//
//  function sendData() {
//    const form = document.getElementById("myForm");
//    const formData = new FormData(form);
//    
//    fetch("ecrire_json.php", {
//      method: "POST",
//      body: formData
//    })
//    .then(response => response.json())
//    .then(data => console.log(data))
//    .catch(error => console.error(error));
//  }



// Pour ajouter un commentaire, ne fonctionne pas
// document.getElementById('addComment').addEventListener('click', function (e){
//             // Empêche le rechargement de la page
//             event.preventDefault();

//             // Création d'un formulaire lors de l'ajout d'un commentaire
//             var form2 = document.createElement('form');
//             // Format du formulaire
//             form2.innerHTML =
//                 '<br><b><label for="marker-date2">Date :</label>' +
//                 '<br><textarea id="marker-date2" name="marker-desc"></textarea>' +
//                 '<div></div>' +
//                 '<br><b><label for="marker-desc2">Description :</label>' +
//                 '<br><textarea id="marker-desc2" name="marker-desc"></textarea>' +
//                 '<div></div>' +
//                 '<br><button style="background: none" type="submit">Ajouter le commentaire</button>';

//                 form2.addEventListener('submit', function (event) {
//                 // Empêche le rechargement de la page
//                 event.preventDefault();

//                 //Récupérer les valeurs des champs précedémment remplis
//                 var date2 = document.getElementById('marker-date2').value;
//                 var desc2 = document.getElementById('marker-desc2').value;

//                 marker.setPopupContent('<h2>' + title + '</h2>' + '<p><b>' + date + '</b></p>' + '<p>' + desc + '</p>' + '<p><b>' + date2 + '</b></p>' + '<p>' + desc2 + '</p>' + '<button id="addComment">Ajouter un témoignage</button>');
//                 });
// });