RuscoMap/ruscomap
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

data+img_mrk_temp+bug_mrk_infiniti

Browse source
This commit is contained in:
scossa 2024-08-22 17:29:00 +02:00
parent 7b385d534b
commit 461f6b9cbe
8 changed files with 162 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

262
public/css/map.css
View file

@ -1,135 +1,157 @@
body {
margin: 0px !important;
}
/*BODY*/
body {
margin: 0px !important;
}
#container {
display: flexbox;
}
/*CONTAINER*/
#container {
display: flexbox;
}
#map {
height: 100vh;
width: 100vw;
}
/*MAP*/
#map {
height: 100vh;
width: 100vw;
}
.button-image {
width: 5px;
height: auto;
}
/*BOTTONE ALTO DX*/
#addMarkerBtn {
z-index: 1000;
background: rgb(255, 255, 255);
width: 40px;
height: 38px;
position: absolute;
top: 0;
right: 0;
margin-top: 10px;
margin-right: 10px;
}
.button-image {
width: 5px;
height: auto;
}
.leaflet-popup-content>img {
width: 100%;
height: 100%;
}
/*FORM INSERIMENTO MARKER*/
/*CONTENITORE DEL FORM*/
#markerFormContainer {
display: none;
z-index: 999;
position: absolute;
margin-left: auto;
margin-right: auto;
left:42px;
right: 42px;
text-align: center;
width: fit-content;
background-color: white;
}
/*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;
}
/*AREA DESCRIZIONE MARKER*/
textarea[name="description"] {
width: 200px;
height: 50px;
}
/*
.image {
display: flex;
flex-direction: column;
align-items: left;
}*/
/*BOTTONE SCEGLI IMMAGINE*/
.file-input {
display: none; /* Hide the file input */
}
/*BOTTONE SCEGLI IMMAGINE*/
.file-label {
background-color: #e9e9ed; /* Button color */
color: rgb(0, 0, 0);
border: 100cm;
border-color: black;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
margin-bottom: 10px; /* Space between button and file name */
}
/*EFFETTO BOTTONE SCEGLI IMMAGINE*/
.file-label:hover {
background-color: #bec3c9; /* Background color on hover */
}
/*NOME FILE SCELTO*/
.file-chosen {
font-size: 14px;
color: #555;
}
#addMarkerBtn {
z-index: 1000;
background: rgb(255, 255, 255);
width: 40px;
height: 38px;
position: absolute;
top: 0;
right: 0;
margin-top: 10px;
margin-right: 10px;
}
/*POPUP MARKER*/
.leaflet-popup-content-wrapper {
width: 100%;
height: auto;
}
#markerFormContainer {
display: none;
z-index: 999;
position: absolute;
margin-left: auto;
margin-right: auto;
left:42px;
right: 42px;
text-align: center;
width: fit-content;
background-color: white;
}
.leaflet-popup-content>img {
max-width: 230px;
max-height: 230px;
width: 100%;
height: 100%;
}
input[type='file'] {
color: transparent;
}
.leaflet-popup-content p {
margin: 0;
padding: 5px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
text-align: center;
}
textarea[name="description"] {
width: 200px;
height: 50px;
}
.leaflet-popup-content h1 {
margin: 0;
padding: 5px;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
text-align: center;
}
.image {
display: flex;
flex-direction: column;
align-items: center;
}
.file-input {
display: none; /* Hide the file input */
}
.file-label {
background-color: #e9e9ed; /* Button color */
color: rgb(0, 0, 0);
border: 100cm;
border-color: black;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
margin-bottom: 10px; /* Space between button and file name */
}
.file-label:hover {
background-color: #bec3c9; /* Background color on hover */
}
.file-chosen {
font-size: 14px;
color: #555;
}
.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 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 */
}
#markerForm {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 10px;
margin: 23px 20px;
}
#markerForm > button {
margin-left: auto;
}
#remainingForm {
display: none;
}
.leaflet-popup-content-wrapper {
text-align: center;
}

BIN
public/img/trashb.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
public/img/trasho.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
public/img/trashw.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

2
public/index.html
View file

@ -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="

12
public/js/eventHandler.js
View file

@ -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);
}
})

6
public/js/markerHandler.js
View file

@ -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;

10
tutorial.txt
View file

@ -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,