Kundensketch
parent
bf9a3961a8
commit
88c7a49235
|
|
@ -1 +1,4 @@
|
|||
/target
|
||||
/leaflet
|
||||
|
||||
.*.sw[po]
|
||||
|
|
|
|||
|
|
@ -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>');
|
||||
// });
|
||||
// });
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 928 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 832 KiB |
|
|
@ -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"}]
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
#map {
|
||||
height: 750px;
|
||||
}
|
||||
|
||||
select{
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue