public/js/app.js

@@ -149,15 +149,10 @@ var MousePositionControl = L.Control.extend({
 
     onAdd: function () {
         var container = L.DomUtil.create('div', 'mouse-position-display');
-        container.style.background = 'rgba(255,255,255,0.85)';
+        container.innerHTML = 'Lat: , Lng: ';
-        container.style.padding = '2px 8px';
-        container.style.fontSize = '12px';
-        container.style.borderRadius = '4px';
-        container.style.fontFamily = 'monospace';
-        container.innerHTML = 'Lat: — | Lng: —';
 
         map.on('mousemove', function (e) {
-            container.innerHTML = 'Lat: ' + e.latlng.lat.toFixed(5) + ' | Lng: ' + e.latlng.lng.toFixed(5);
+            container.innerHTML = 'Lat: ' + e.latlng.lat.toFixed(5) + ', Lng: ' + e.latlng.lng.toFixed(5);
         });
 
         return container;

public/styles.css

@@ -194,6 +194,23 @@ html, body {
 }
 
 
+/* -----------------------------------------------------------------
+   Mouse Position Display
+   ----------------------------------------------------------------- */
+.mouse-position-display {
+    background: rgba(255, 255, 255, 0.85);
+    padding: 2px 8px;
+    font-size: 0.75rem;
+    border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+    .mouse-position-display {
+        display: none;
+    }
+}
+
+
 /* -----------------------------------------------------------------
    Sidebar Overrides
    ----------------------------------------------------------------- */