Kundensketch

.gitignore

@@ -1 +1,4 @@
 /target
+/leaflet
+
+.*.sw[po]

sketch/alt/app.js

@@ -0,0 +1,245 @@
+// 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>');
+//                 });
+// });  

sketch/alt/historiqueMarqueurs.json

@@ -0,0 +1 @@
+[{"latitude":"50.87309052784303","longitude":"6.544160842895509","icon":"baum","title":"Baum","date2":"test","date":"29\/08\/2012","desc":"opokooii"},{"latitude":"50.87309052784303","longitude":"6.544160842895509","icon":"boudoir","title":"Baum","date2":"test","date":"29\/07\/2012","desc":"opokooii"},{"latitude":"50.89896224098888","longitude":"6.559009552001954","icon":"boudoir","title":"Baum","date2":"test","date":"29\/07\/2012","desc":"niiiikeooii"},{"marqueurs":[]},null,null,null,null,null,null,{"lat":50.88614189051132,"lng":6.516437530517579,"category":"baum","title":"jjj","date":"jjj","date2":"jj","description":"jjj"},null,null,null,null,null,{"lat":50.86566965874546,"lng":6.57634735107422,"category":"baum","title":"okasokc\u0138","date":"kkk","date2":"pok","description":"kkpok\n"},null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,{"lat":50.88592530021674,"lng":6.583213806152345,"category":"boudoir","title":"e","date":"e","date2":"x","description":"x"},null,{"lat":50.8822431111397,"lng":6.467170715332032,"category":"boudoir","title":"a","date":"b","date2":"c","description":"d"}]

sketch/alt/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+<meta charset="UTF-8">
+<head>
+    <!-- Lien vers fiche Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+    <!-- Import bibliothèque Leaflet.js -->
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
+    <!-- Lien vers doc style CSS -->
+    <link rel="stylesheet" href="style.css" />
+
+
+
+    <!-- Lien vers librairie Cluster (fonctionne si et seulement si le serveur est online) -->
+    <link rel="stylesheet" href="Leaflet.markercluster-1.4.1\dist\MarkerCluster.css"/>
+    <link rel="stylesheet" href="Leaflet.markercluster-1.4.1\dist\MarkerCluster.Default.css"/>
+    <script src="Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js"  crossorigin=""></script> 
+
+</head>
+
+<body>
+    <div id="map"></div>
+
+    <select id="three-select">
+        <option value="default">Veuillez choisir une arbre</option>
+        <option value="baum">Baum</option>
+        <option value="boudoir">Boudoir</option>
+    </select>
+   
+    <!-- Lien vers doc JS -->
+    <script type="module"src="app.js"> </script>
+    
+</body>
+
+</html>

sketch/alt/style.css

@@ -0,0 +1,9 @@
+#map {
+    height: 750px;
+  }
+
+select{
+    position: relative;
+    top: 10px;
+}
+