Make the LatLng indicator draggable

assets/css/styles.css

@@ -1174,15 +1174,34 @@ input.input-text.pickr-userpin {
     display: none;
 }
 
+@media (max-width: 768px) {
+    .lat-lng-container {
+        max-width: 40%;
+    }
+}
+
+.lat-lng-container div div {
+    font-size: 14px;
+    line-height: 2;
+}
+
+.lat-lng-container .lat-lng-value {
+    color: #eee;
+    margin-top: 4px;
+    font-family: var(--title-font);
+}
+
+.lat-lng-container .btn-close {
+    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eee'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
+}
+
 .lat-lng-container #lat-lng-container-close-button {
     position: absolute;
     top: 0;
     right: 4px;
-    font-size: 16px;
     border: none;
-    margin: 0;
+    margin-top: 4px;
     padding: 0;
-    background-color: transparent;
 }
 
 .help-button {

assets/js/map.js

@@ -500,19 +500,27 @@ const MapBase = {
 
   testData: { data: [] },
   addCoordsOnMap: function (coords) {
-
     // Show clicked coordinates (like google maps)
-    if (Settings.isCoordsOnClickEnabled) {
-      const container = document.querySelector('.lat-lng-container');
-      container.style.display = 'block';
-
-      container.querySelector('p').innerHTML = `
-        Latitude: ${parseFloat(coords.latlng.lat.toFixed(4))}
-        <br>Longitude: ${parseFloat(coords.latlng.lng.toFixed(4))}
-      `;
+    const container = document.querySelector('.lat-lng-container');
 
-      document.getElementById('lat-lng-container-close-button').addEventListener('click', function() {
-        container.style.display = 'none';
+    if (Settings.isCoordsOnClickEnabled) {
+      if (container.style.display = 'none') container.style.display = 'block';
+      container.title ||= Language.get('map.draggable');
+      draggableLatLngCtn ||= new PlainDraggable(container);
+
+      const lat = coords.latlng.lat.toFixed(4);
+      const lng = coords.latlng.lng.toFixed(4);
+      document.querySelector('.lat-value').textContent = lat;
+      document.querySelector('.lng-value').textContent = lng;
+
+      ['click', 'touchend'].forEach((event) => {
+        document.getElementById('lat-lng-container-close-button').addEventListener((event), () =>{ 
+          container.style.display = 'none';
+          if (draggableLatLngCtn) {
+            draggableLatLngCtn.remove();
+            draggableLatLngCtn = null;
+          }
+        }, { once: true });
       });
     }
 

assets/js/scripts.js

@@ -37,6 +37,8 @@ const colorNameToHexMap = Object.fromEntries(
   Object.entries(colorNameMap).map(([hex, name]) => [name, hex])
 );
 
+let draggableLatLngCtn = null;
+
 document.addEventListener('DOMContentLoaded', function() {
   try {
     init();
@@ -163,10 +165,18 @@ function isLocalHost() {
 }
 
 function changeCursor() {
-  const cursorStyle = Settings.isCoordsOnClickEnabled ? 'pointer' : 'grab';
-  const displayStyle = (cursorStyle === 'pointer') ? '' : 'none';
-  document.querySelectorAll('.leaflet-grab').forEach(el => el.style.cursor = cursorStyle);
-  document.querySelectorAll('.lat-lng-container').forEach(ctn => ctn.style.display = displayStyle);
+  const isCoordsEnabled = Settings.isCoordsOnClickEnabled;
+  const pointer = 'url(assets/images/crosshair_thick.png) 12 12, pointer';
+  document.querySelector('.leaflet-grab').style.cursor = isCoordsEnabled ? pointer : 'grab';
+
+  const latLngCtn = document.querySelector('.lat-lng-container');
+  latLngCtn.style.display = isCoordsEnabled ? 'block' : 'none';
+  if (isCoordsEnabled) {
+    draggableLatLngCtn ||= new PlainDraggable(latLngCtn);
+  } else if (draggableLatLngCtn) {
+    draggableLatLngCtn.remove();
+    draggableLatLngCtn = null;
+  }
 }
 
 function getParameterByName(name, url) {

index.html

@@ -1235,8 +1235,12 @@ <h3 class="fme-title" id="next-role-name"></h3>
 
   <div id="map"></div>
 
-  <div class="lat-lng-container">
-    <p></p><button id="lat-lng-container-close-button">×</button>
+  <div class="lat-lng-container" data-help="map_coordinates_container">
+    <div>
+      <div><span data-text="map.latitude">Latitude</span>:&nbsp;<span class="lat-lng-value lat-value">-.----</span></div>
+      <div><span data-text="map.longitude">Longitude</span>:&nbsp;<span class="lat-lng-value lng-value">-.----</span></div>
+    </div>
+    <button type="button" id="lat-lng-container-close-button" class="btn-close" aria-label="Close"></button>
   </div>
 
   <!-- Modals -->
@@ -1335,6 +1339,7 @@ <h4 class="modal-title" id="remove-all-pins-title" data-text="menu.modal_remove_
   <script src="assets/js/lib/oms.min.js"></script>
   <script src="assets/js/lib/rbush.js"></script>
   <script src="assets/js/lib/pickr.min.js"></script>
+  <script src="assets/js/lib/plain-draggable.min.js"></script>
   <script>var module = {};</script>
   <script src="assets/js/lib/leaflet.canvas-markers.js"></script>
   <script>module.exports(L);</script>

langs/en.json

@@ -89,6 +89,9 @@
   "menu.dailies": "Daily Challenges",
   "menu.condor_egg": "Condor Egg",
   "menu.back_to_top": "Scroll back to top (Draggable)",
+  "map.draggable": "Draggable",
+  "map.latitude": "Latitude",
+  "map.longitude": "Longitude",
   "help.clear_important_items": "Clears the highlight from all markers marked as important.",
   "help.collector_map": "Opens a new tab with the other map by Jean, where you can browse markers related to the Collector role.",
   "help.cookie_export": "Exports your settings to a file.",