data+img_mrk_temp+bug_mrk_infiniti

public/css/map.css

@@ -1,32 +1,25 @@
-body {
+/*BODY*/
+    body {
         margin: 0px !important;
-}
+    }
 
 
-#container {
+/*CONTAINER*/
+    #container {
         display: flexbox;
-}
+    }
 
 
-#map {
+/*MAP*/
+    #map {
         height: 100vh;
         width: 100vw;
-}
+    }
 
 
-.button-image {
-    width: 5px; 
-    height: auto; 
-}
+/*BOTTONE ALTO DX*/
 
-
-.leaflet-popup-content>img {
-    width: 100%;
-    height: 100%;
-}
-
-
-#addMarkerBtn {
+    #addMarkerBtn {
         z-index: 1000;
         background: rgb(255, 255, 255);
         width: 40px;
@@ -36,10 +29,18 @@ body {
         right: 0;
         margin-top: 10px;
         margin-right: 10px;
-}
+    }
+
+    .button-image {
+        width: 5px; 
+        height: auto; 
+    }
 
 
-#markerFormContainer {
+/*FORM INSERIMENTO MARKER*/
+
+    /*CONTENITORE DEL FORM*/
+    #markerFormContainer {
         display: none;
         z-index: 999;
         position: absolute;
@@ -50,30 +51,53 @@ body {
         text-align: center;
         width: fit-content;
         background-color: white;
-}
+    }
 
-input[type='file'] {
+    /*FORM*/
+    #markerForm {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        align-items: flex-start;
+        gap: 10px;
+        margin: 23px 20px;
+    }
+
+    /*OGEETTI DEL FORM*/
+    #remainingForm {
+        display: none;
+    }
+
+    /*BOH*/
+    #markerForm > button {
+        margin-left: auto;
+    }
+
+    /*AREA NOME MARKER*/
+    input[type='file'] {
         color: transparent;
       }
 
-textarea[name="description"] {
+    /*AREA DESCRIZIONE MARKER*/
+    textarea[name="description"] {
         width: 200px;
         height: 50px;
       }
 
-
-
-.image {
+    /*
+    .image {
       display: flex;
       flex-direction: column;
-  align-items: center;
-}
+      align-items: left;
+    }*/
 
-.file-input {
+    /*BOTTONE SCEGLI IMMAGINE*/
+    .file-input {
         display: none; /* Hide the file input */
-}
+    }
 
-.file-label {
+    /*BOTTONE SCEGLI IMMAGINE*/
+    .file-label {
         background-color: #e9e9ed; /* Button color */
         color: rgb(0, 0, 0);
         border: 100cm;
@@ -82,54 +106,52 @@ textarea[name="description"] {
         border-radius: 50px;
         cursor: pointer;
         margin-bottom: 10px; /* Space between button and file name */
-}
+    }
 
-.file-label:hover {
+    /*EFFETTO BOTTONE SCEGLI IMMAGINE*/
+    .file-label:hover {
         background-color: #bec3c9; /* Background color on hover */
-}
+    }
 
-
-.file-chosen {
+    /*NOME FILE SCELTO*/
+    .file-chosen {
         font-size: 14px;
         color: #555;
-}
+    }
 
 
+/*POPUP MARKER*/
 
-.leaflet-popup-content p {
-    margin: 0;                   /* Remove default margin */
-    padding: 5px;                /* Optional: Add some padding */
-    word-wrap: break-word;       /* Allow long words to break */
-    overflow-wrap: break-word;   /* Recommended for modern browsers */
-    white-space: normal;         /* Ensure normal text wrapping */
-    text-align: center;          /* Optional: Center the text */
-}
+    .leaflet-popup-content-wrapper {
+        width: 100%;
+        height: auto;  
+    }
 
-.leaflet-popup-content h1 {
-    margin: 0;                   /* Remove default margin */
-    padding: 5px;                /* Optional: Add some padding */
-    word-wrap: break-word;       /* Allow long words to break */
-    overflow-wrap: break-word;   /* Recommended for modern browsers */
-    white-space: normal;         /* Ensure normal text wrapping */
-    text-align: center;          /* Optional: Center the text */
-}
+    .leaflet-popup-content>img {
+        max-width: 230px;
+        max-height: 230px;
+        width: 100%;
+        height: 100%;
+    }
 
+    .leaflet-popup-content p {
+        margin: 0;                   
+        padding: 5px;           
+        word-wrap: break-word; 
+        overflow-wrap: break-word;   
+        white-space: normal;     
+        text-align: center;    
+    }
 
-#markerForm {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-    gap: 10px;
-    margin: 23px 20px;
-}
+    .leaflet-popup-content h1 {
+        margin: 0;                   
+        padding: 5px;           
+        word-wrap: break-word; 
+        overflow-wrap: break-word;   
+        white-space: normal;     
+        text-align: center;    
+    }
 
-
-#markerForm > button {
-    margin-left: auto;
-}
-
-
-#remainingForm {
-    display: none;
-}
+    .leaflet-popup-content-wrapper {
+        text-align: center;
+    }      

public/index.html

@@ -9,7 +9,7 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin=""
     />
-    <link rel="icon" type="image/png" sizes="16x16" href="../img/garbage64.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="../img/trashw.png">
     <script
       src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="

public/js/eventHandler.js

@@ -51,7 +51,7 @@ export function initEvents(map) {
     };
 
 
-    //event listener onclick on map, display #remainingForm
+    //event listener onclick on map, inserisce marker il temporaneo e mostra il remainingForm
     map.on("click", function (e) {
         if (editMode && !isTmpMarkerSet) {
             let formInputCoordY = document.getElementById('formInputCoordY')
@@ -63,14 +63,14 @@ export function initEvents(map) {
             map.getContainer().style.cursor = 'auto';
             const tmpMarker = {
                 coordinate: { x: formInputCoordX.value, y: formInputCoordY.value },
-                name: '',
-                description: '',
-                filename: '',
+                name: null,
+                description: "Compila il form per aggiungere un marker qui. Oppure annulla l'inserimento del marker cliccando sulla X in alto a destra",
+                filename: null,
+                ts: null,
             }
+            console.log(tmpMarker); 
             tmpMarkerSet = createMarker(tmpMarker, L, map, true)
             isTmpMarkerSet = true
-            // Va creata la logica di eliminazione del marker tmp
-            //localStorage.setItem("tmpMarkerId", marker._leaflet_id);
         }
     })
 

public/js/markerHandler.js

@@ -4,7 +4,8 @@ export function initMarkers(markerList, L, map){
         let popUpContentTitle = "<h1>"+ customMarker.title +"</h1>";
         let popUpContentdescription = "<p>"+ customMarker.description +"</p>";
         let popUpContentImage = "<img src='/img/"+ customMarker.imgName+"'</img>";
-        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage
+        let popUpContentDate = "<br><p>Inserito il: " + markerData.ts.substring(0, 10) + "<br>alle " + markerData.ts.substring(11, 16) + "</p>";
+        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate
         marker.bindPopup(popUpContent).openPopup(); 
     });    
 }
@@ -14,7 +15,8 @@ export function createMarker(markerData, L, map, returnMarker = false){
         let popUpContentTitle = "<h1>"+ markerData.name +"</h1>";
         let popUpContentdescription = "<p>"+ markerData.description +"</p>";
         let popUpContentImage = "<img src='/imgs/"+ markerData.filename +"'</img>";
-        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage
+        let popUpContentDate = "<br><p>Inserito il: " + markerData.ts.substring(0, 10) + "<br>alle " + markerData.ts.substring(11, 16) + "</p>";
+        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate 
         marker.bindPopup(popUpContent);
         if(returnMarker) {
             return marker;

tutorial.txt

@@ -3,13 +3,15 @@ RuscoMap
 <br>
 RuscoMap è una mappa della propria città dove utenti in anonimo possono inserire dei marker con nome, descrizione e foto dell'oggetto abbandonato, segnalandolo a tutti i visitatori della mappa._ 
 <br> 
-Si può trovare o inserire la qualunque purchlaè ci sia una vaga speranza di riutilizzo, trasformazione o riparazione.
+Si può trovare o inserire la qualunque purchè ci sia una vaga speranza di riutilizzo, trasformazione o riparazione.
 <br>
 Sulla falsa riga del "_te lo regalo se vieni a prenderlo_", questo è più il "_segnalo che c'è sta roba lì, è tua se te la vai a prendere_"
 <br>
 
 Navigazione
-Quando sei sulla mappa, puoi liberamente curiosare tra gli oggetti inseriti oppure cercare con con il form SOMEWHERE una parola chiave (esempio: divano).
+Quando sei sulla mappa, puoi liberamente curiosare tra gli oggetti inseriti
+oppure cercare con il form $SOMEWHERE una parola chiave 
+esempio ricerca: divano. Spariranno tutti i marker rimanendo solo quelli che nel nome o nella descrizione contengono la parola "divano".
 
 Inserimento
 Cliccando il pulsante in alto a destra (icona marker blu) entri in modalità inserimento.
@@ -17,3 +19,7 @@ A questo punto cliccando su un punto della mappa inserisci la posizione del nuov
 Si aprirà un form dove inserire nome dell'oggetto, una breve descrizione e una foto.
 Cliccando "Aggiungi marker" il nuovo oggetto comparirà automagicamente sula mappa. 
 
+                coordinate: { x: formInputCoordX.value, y: formInputCoordY.value },
+                name: '',
+                description: "Compila il form per aggiungere un marker qui. Oppure annulla l'inserimento del marker cliccando sulla X in alto a destra",
+                filename: null,