69 lines
No EOL
2.7 KiB
JavaScript
69 lines
No EOL
2.7 KiB
JavaScript
|
|
import { processForm } from "./formHandler.js";
|
|
import { basicElements } from "./getHtmlElements.js";
|
|
import {createMarker} from "./markerHandler.js";
|
|
|
|
let editMode = false
|
|
let tmpMarkerSet = false
|
|
|
|
export function initEvents(map){
|
|
|
|
const [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm] = basicElements()
|
|
|
|
markerForm.addEventListener("submit", processForm);
|
|
|
|
let isRedIcon = false; // inizializza stato icona X
|
|
|
|
addMarkerBtn.onclick = function (event) {
|
|
event.stopPropagation();
|
|
//editMode = true;
|
|
//tmpMarkerSet = false;
|
|
markerFormContainer.style.display = 'flex';
|
|
noticeCoordsPicker.style.display = 'block';
|
|
|
|
// switch modalità inserimento/visualizzazione
|
|
if (isRedIcon) {
|
|
// imposta un marker come icona pulsante, icona cursore normale e esce dalla modalità inserimento.
|
|
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon13.png" alt="Button Image" />';
|
|
document.getElementById('map').style = 'cursor: auto;';
|
|
editMode = false;
|
|
tmpMarkerSet = true;
|
|
// implementare eliminazione (visiva) dell'eventuale marker temporaneo inserito
|
|
|
|
} else {
|
|
// imposta una X rossa come icona pulsante, come icona cursore un marker e entra nella modalità inserimento.
|
|
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/xred20.png" alt="Button Image" />';
|
|
document.getElementById('map').style = 'cursor: url("https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png") 13 41, auto;';
|
|
editMode = true;
|
|
tmpMarkerSet = false;
|
|
}
|
|
|
|
// attiva/disattiva icona X
|
|
isRedIcon = !isRedIcon;
|
|
};
|
|
|
|
|
|
|
|
//event listener onclick on map, display #remainingForm
|
|
map.on("click", function (e) {
|
|
if(editMode && !tmpMarkerSet){
|
|
let formInputCoordY = document.getElementById('formInputCoordY')
|
|
let formInputCoordX = document.getElementById('formInputCoordX')
|
|
formInputCoordY.value = e.latlng.lat
|
|
formInputCoordX.value = e.latlng.lng
|
|
noticeCoordsPicker.style.display = 'none';
|
|
remainingForm.style.display = 'block';
|
|
map.getContainer().style.cursor = 'auto';
|
|
const tmpMarker = {
|
|
coordinate: { x: formInputCoordX.value, y: formInputCoordY.value},
|
|
name: '',
|
|
description: '',
|
|
filename: '',
|
|
}
|
|
const marker = createMarker(tmpMarker, L, map)
|
|
tmpMarkerSet = true
|
|
// Va creata la logica di eliminazione del marker tmp
|
|
//localStorage.setItem("tmpMarkerId", marker._leaflet_id);
|
|
}
|
|
})
|
|
} |