button css

public/css/map.css

@@ -2,6 +2,7 @@ body {
     margin: 0px !important;
 }
 
+
 #container {
     display: flexbox;
 }
@@ -10,35 +11,34 @@ body {
 #map {
     height: 100vh;
     width: 100vw;
-    /*cursor: url('https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png'), auto; *//* custom cursore */
-    /*cursor: url("/img/marker-icon13.png"), auto;*/
 }
 
+
 .button-image {
-    width: 5px;  /* Set the desired width */
+    width: 5px; 
-    height: auto; /* Maintain aspect ratio */
+    height: auto; 
 }
 
+
 .leaflet-popup-content>img {
     width: 100%;
     height: 100%;
 }
 
+
 #addMarkerBtn {
-    /* border-radius: 50%; */
     z-index: 1000;
-    background: white;
+    background: rgb(255, 255, 255);
-    width: 30px;
+    width: 40px;
-    height: 30px;
+    height: 38px;
     position: absolute;
     top: 0;
-    /* Place the button 20px from the bottom */
     right: 0;
-    /* Place the button 20px from the right */
     margin-top: 10px;
     margin-right: 10px;
 }
 
+
 #markerFormContainer {
     display: none;
     z-index: 999;
@@ -52,6 +52,7 @@ body {
     background-color: white;
 }
 
+
 #markerForm {
     display: flex;
     flex-direction: column;
@@ -61,10 +62,12 @@ body {
     margin: 20px 10px;
 }
 
+
 #markerForm > button {
     margin-left: auto;
 }
 
+
 #remainingForm {
     display: none;
 }

public/index.html

@@ -45,8 +45,7 @@
     </div>
     <div id="map">
       <script>
-       document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon13.png" alt="Button Image" />'; 
+       document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />'; 
-       //<button id="addMarkerBtn">📌</button> <!--// bottone vecchio!-->
       </script>
       </div>
   </body>

public/js/eventHandler.js

@@ -21,7 +21,7 @@ export function initEvents(map){
         // 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("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
             document.getElementById('map').style = 'cursor: auto;';
             editMode = false;
             tmpMarkerSet = true;