Einzelne vereinfachungen und verstehen
parent
88c7a49235
commit
e815686509
|
|
@ -26,151 +26,143 @@ var boudoirIcon = new threeIcon({ iconUrl: 'boudoir.png' });
|
||||||
//Import des données JSON du fichier historiqueMarqueurs.json (fonctionne si et seulement si le serveur est online)
|
//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)
|
// (à l'avenir mettre en place une petite base de données type Firebase)
|
||||||
fetch('historiqueMarqueurs.json')
|
fetch('historiqueMarqueurs.json')
|
||||||
.then(function(response) {
|
.then(response => response.json())
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
// Ajout des marqueurs du fichier JSON grâce à la fonction addMarkersFromJson
|
// Ajout des marqueurs du fichier JSON grâce à la fonction addMarkersFromJson
|
||||||
.then(function(json) {
|
.then(json => addMarkersFromJson(json))
|
||||||
addMarkersFromJson(json);
|
|
||||||
console.log('Contenu du fichier JSON :', json);
|
|
||||||
})
|
|
||||||
//Erreur
|
//Erreur
|
||||||
.catch(function(error) {
|
.catch(error => console.error('Could not load markers', error));
|
||||||
console.error('Les marqueurs ne peuvent être chargés', error);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Fonction ajout des marqueurs depuis le fichier JSON
|
// Fonction ajout des marqueurs depuis le fichier JSON
|
||||||
function addMarkersFromJson(json) {
|
function addMarkersFromJson(json) {
|
||||||
// Pour chaque marqueurs
|
|
||||||
for (var i = 0; i < json.length; i++) {
|
for (var i = 0; i < json.length; i++) {
|
||||||
var markerData = json[i];
|
var markerData = json[i];
|
||||||
var markerIcon = markerData.icon === 'baum' ? baumIcon : boudoirIcon;
|
var markerIcon = markerData.icon === 'baum' ? baumIcon : boudoirIcon;
|
||||||
var marker = L.marker([markerData.latitude, markerData.longitude], {icon : markerIcon}).addTo(map);
|
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>');
|
marker.bindPopup('<h2>' + markerData.title + '</h2>' + '<p><b>' + markerData.date + '</b></p>' + '<p>' + markerData.desc + '</p>');
|
||||||
cluster1.addLayer(marker)
|
//cluster1.addLayer(marker)
|
||||||
map.addLayer(cluster1);
|
//map.addLayer(cluster1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fonction ajout marqueur
|
// Fonction ajout marqueur
|
||||||
//function addMarker(e) {
|
function addMarker(e) {
|
||||||
////alert("coucou");
|
alert("coucou");
|
||||||
//
|
|
||||||
// // Récupérer la valeur du select-icon pour ajouter la bonne icône
|
// Récupérer la valeur du select-icon pour ajouter la bonne icône
|
||||||
// var select = document.getElementById('three-select').value;
|
var select = document.getElementById('three-select').value;
|
||||||
//
|
|
||||||
// // Récupérer latitude et longitude
|
// Récupérer latitude et longitude
|
||||||
// var latitude = e.latlng.lat;
|
var latitude = e.latlng.lat;
|
||||||
// var longitude = e.latlng.lng;
|
var longitude = e.latlng.lng;
|
||||||
//
|
|
||||||
// // Création d'un formulaire lors de l'ajout d'un marqueur
|
// Création d'un formulaire lors de l'ajout d'un marqueur
|
||||||
// var form = document.createElement('form');
|
var form = document.createElement('form');
|
||||||
// form.id = "myForm"
|
form.id = "myForm"
|
||||||
//
|
|
||||||
// // Format du formulaire
|
// Format du formulaire
|
||||||
// form.innerHTML =
|
form.innerHTML =
|
||||||
// '<b><label for="marker-title">Name of the tree :</label>' +
|
'<b><label for="marker-title">Name of the tree :</label>' +
|
||||||
// '<br><input style="bottom: 10px" type="text" id="marker-title" name="marker-title" required>' +
|
'<br><input style="bottom: 10px" type="text" id="marker-title" name="marker-title" required>' +
|
||||||
// '<div></div>' +
|
'<div></div>' +
|
||||||
//
|
|
||||||
//
|
|
||||||
// '<br><b><label for="marker-date">Date of Beginning</label>' +
|
'<br><b><label for="marker-date">Date of Beginning</label>' +
|
||||||
// '<br><textarea id="marker-date" name="marker-date" required></textarea>' +
|
'<br><textarea id="marker-date" name="marker-date" required></textarea>' +
|
||||||
// '<div></div>' +
|
'<div></div>' +
|
||||||
// '<br><b><label for="marker-date2">Date of End : (put xxx if none) </label>' +
|
'<br><b><label for="marker-date2">Date of End : (put xxx if none) </label>' +
|
||||||
// '<br><textarea id="marker-date2" name="marker-date2" required></textarea>' +
|
'<br><textarea id="marker-date2" name="marker-date2" required></textarea>' +
|
||||||
// '<div></div>' +
|
'<div></div>' +
|
||||||
//
|
|
||||||
// '<br><b><label for="marker-desc">Description :</label>' +
|
'<br><b><label for="marker-desc">Description :</label>' +
|
||||||
// '<br><textarea id="marker-desc" name="marker-desc" required></textarea required>' +
|
'<br><textarea id="marker-desc" name="marker-desc" required></textarea required>' +
|
||||||
// '<div></div>' +
|
'<div></div>' +
|
||||||
//
|
|
||||||
// '<br><button style="background: none" type="submit" required>Add on map</button>';
|
'<br><button style="background: none" type="submit" required>Add on map</button>';
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
// // Sélection de la bonne icône en fonction du select
|
// Sélection de la bonne icône en fonction du select
|
||||||
// switch (select) {
|
switch (select) {
|
||||||
// case 'boudoir':
|
case 'boudoir':
|
||||||
// //Ajout de l'icône à la carte
|
//Ajout de l'icône à la carte
|
||||||
// var marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: boudoirIcon }).addTo(map).bindPopup(form);
|
var marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: boudoirIcon }).addTo(map).bindPopup(form);
|
||||||
// //Ajout de du marqueur au cluster
|
//Ajout de du marqueur au cluster
|
||||||
// break;
|
break;
|
||||||
//
|
|
||||||
// case 'baum':
|
case 'baum':
|
||||||
// //Ajout de l'icône à la carte
|
//Ajout de l'icône à la carte
|
||||||
// var marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: baumIcon }).addTo(map).bindPopup(form);
|
var marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: baumIcon }).addTo(map).bindPopup(form);
|
||||||
// //Ajout de du marqueur au cluster
|
//Ajout de du marqueur au cluster
|
||||||
// break;
|
break;
|
||||||
// case 'default':
|
case 'default':
|
||||||
// break;
|
break;
|
||||||
// }
|
}
|
||||||
//
|
|
||||||
// // Ajout de l'action pour le formulaire
|
// Ajout de l'action pour le formulaire
|
||||||
//form.action = "ecrire_json.php";
|
form.action = "ecrire_json.php";
|
||||||
//
|
|
||||||
//// Lors du submit
|
// Lors du submit
|
||||||
//form.addEventListener('submit', function (event) {
|
form.addEventListener('submit', function (event) {
|
||||||
// // Empêche le rechargement de la page
|
// Empêche le rechargement de la page
|
||||||
// event.preventDefault();
|
event.preventDefault();
|
||||||
//
|
|
||||||
// //Récupérer les valeurs des champs précedémment remplis
|
//Récupérer les valeurs des champs précedémment remplis
|
||||||
// var title = document.getElementById('marker-title').value;
|
var title = document.getElementById('marker-title').value;
|
||||||
// var date = document.getElementById('marker-date').value;
|
var date = document.getElementById('marker-date').value;
|
||||||
// var date2 = document.getElementById ('marker-date2').value;
|
var date2 = document.getElementById ('marker-date2').value;
|
||||||
// var desc = document.getElementById('marker-desc').value;
|
var desc = document.getElementById('marker-desc').value;
|
||||||
//
|
|
||||||
// //Actualisation de la pop-up avec les informations
|
//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>');
|
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
|
// Création d'un objet contenant les données à envoyer
|
||||||
// var data = {
|
var data = {
|
||||||
// "lat": latitude,
|
"lat": latitude,
|
||||||
// "lng": longitude,
|
"lng": longitude,
|
||||||
// "category": select,
|
"category": select,
|
||||||
// "title": title,
|
"title": title,
|
||||||
// "date": date,
|
"date": date,
|
||||||
// "date2": date2,
|
"date2": date2,
|
||||||
// "description": desc
|
"description": desc
|
||||||
// };
|
};
|
||||||
//
|
|
||||||
// // Conversion des données en chaîne JSON
|
// Conversion des données en chaîne JSON
|
||||||
// var jsonData = JSON.stringify(data);
|
var jsonData = JSON.stringify(data);
|
||||||
//
|
|
||||||
// // Envoi des données au serveur via une requête AJAX
|
// Envoi des données au serveur via une requête AJAX
|
||||||
// var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
// xhr.open("POST", "enregistrer_donnees.php", true);
|
xhr.open("POST", "enregistrer_donnees.php", true);
|
||||||
// xhr.setRequestHeader("Accept", "application/json");
|
xhr.setRequestHeader("Accept", "application/json");
|
||||||
// xhr.send(jsonData);
|
xhr.send(jsonData);
|
||||||
//});
|
});
|
||||||
//
|
|
||||||
//map.addLayer(cluster1);
|
//map.addLayer(cluster1);
|
||||||
//
|
|
||||||
// // Conversion des données en chaîne JSON
|
// Conversion des données en chaîne JSON
|
||||||
// var jsonData = JSON.stringify(data);
|
var jsonData = JSON.stringify(data);
|
||||||
//
|
|
||||||
// // Envoi des données au serveur via une requête AJAX
|
// Envoi des données au serveur via une requête AJAX
|
||||||
// var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
// xhr.open("POST", "enregistrer_donnees.php", true);
|
xhr.open("POST", "enregistrer_donnees.php", true);
|
||||||
// xhr.setRequestHeader("Accept", "application/json");
|
xhr.setRequestHeader("Accept", "application/json");
|
||||||
// xhr.send(jsonData);
|
xhr.send(jsonData);
|
||||||
//
|
|
||||||
//}
|
}
|
||||||
//
|
|
||||||
//map.on("click", addMarker);
|
map.on("click", addMarker);
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//
|
|
||||||
//// Récupération des données entrées par l'utilisateur
|
// Récupération des données entrées par l'utilisateur
|
||||||
//var data = {
|
//var data = {
|
||||||
// "latitude": document.getElementById("latitude").value,
|
// "latitude": document.getElementById("latitude").value,
|
||||||
// "longitude": document.getElementById("longitude").value,
|
// "longitude": document.getElementById("longitude").value,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue