nakarte

commit d4cf986ed51c8252a45c7133f171d645b6a3689d
parent 513b56088b261431cf324f1c2969fff0c8d21204
Author: myadzel <myadzel@gmail.com>
Date:   Sun, 30 Mar 2025 23:03:24 +0300

Coordinates control: enable to hide elevation at cursor

Fixes #1257

Diffstat:
M
src/lib/leaflet.control.coordinates/coordinates.css
 | 
6
++++--
M
src/lib/leaflet.control.coordinates/index.js
 | 
31
+++++++++++++++++++++++++++----
M
src/lib/leaflet.layer.elevation-display/index.js
 | 
25
++++++++++++++++---------

3 files changed, 47 insertions(+), 15 deletions(-)
diff --git a/src/lib/leaflet.control.coordinates/coordinates.css b/src/lib/leaflet.control.coordinates/coordinates.css
@@ -40,7 +40,9 @@
     float: right;
 }
 
-.leaflet-coordinates-format-radio {
+.leaflet-coordinates-format-radio,
+.leaflet-coordinates-elevation-toggle
+{
     margin-top: -1px;
     vertical-align: middle;
 }
@@ -48,6 +50,6 @@
 .leaflet-coordinates-divider {
     border: none;
     border-top: 1px solid hsl(0, 0%, 92%);
-    margin-top: 0px;
+    margin-top: 3px;
     margin-bottom: 3px;
 }
diff --git a/src/lib/leaflet.control.coordinates/index.js b/src/lib/leaflet.control.coordinates/index.js
@@ -33,6 +33,7 @@ L.Control.Coordinates = L.Control.extend({
             L.Control.prototype.initialize.call(this, options);
 
             this.elevationDisplayLayer = new ElevationLayer(elevationTilesUrl);
+            this.displayElevation = ko.observable(true);
 
             this.latlng = ko.observable();
             this.format = ko.observable(DEFAULT_FORMAT);
@@ -57,7 +58,8 @@ L.Control.Coordinates = L.Control.extend({
 
             this.wrapperClass = ko.pureComputed(() => this.format().wrapperClass, this);
 
-            this.formatCode.subscribe(this.saveStateToStorage, this);
+            this.formatCode.subscribe(this.saveFormatStateToStorage, this);
+            this.displayElevation.subscribe(this.onDisplayElevationChange, this);
         },
 
         onAdd: function(map) {
@@ -87,6 +89,13 @@ L.Control.Coordinates = L.Control.extend({
                             </label>
                         </div>
                     </div>
+                    <hr class="leaflet-coordinates-divider" />
+                    <label title="">
+                        <input type="checkbox"
+                            data-bind="checked: displayElevation"
+                            class="leaflet-coordinates-elevation-toggle"/>
+                        Display elevation
+                    </label>
                 </div>
             `;
 
@@ -106,16 +115,25 @@ L.Control.Coordinates = L.Control.extend({
         loadStateFromStorage: function() {
             const active = safeLocalStorage.leafletCoordinatesActive === '1';
             const code = safeLocalStorage.leafletCoordinatesFmt || DEFAULT_FORMAT.code;
+            const elevationDisplayed = (safeLocalStorage.leafletCoordinatesDisplayElevation ?? '1') === '1';
 
             this.formatCode(code);
+            this.displayElevation(elevationDisplayed);
             this.setEnabled(active);
         },
 
-        saveStateToStorage: function() {
+        saveEnabledStateToStorage: function() {
             safeLocalStorage.leafletCoordinatesActive = this.isEnabled() ? '1' : '0';
+        },
+
+        saveFormatStateToStorage: function() {
             safeLocalStorage.leafletCoordinatesFmt = this.formatCode();
         },
 
+        saveElevationDisplayStateToStorage: function() {
+            safeLocalStorage.leafletCoordinatesDisplayElevation = this.displayElevation() ? '1' : '0';
+        },
+
         onMouseMove: function(e) {
             this.latlng(e.latlng);
         },
@@ -192,7 +210,12 @@ L.Control.Coordinates = L.Control.extend({
 
         onClick: function() {
             this.setEnabled(!this.isEnabled());
-            this.saveStateToStorage();
-        }
+            this.saveEnabledStateToStorage();
+        },
+
+        onDisplayElevationChange: function(on) {
+            this.saveElevationDisplayStateToStorage();
+            this.elevationDisplayLayer.enableElevationDisplay(on);
+        },
     }
 );
diff --git a/src/lib/leaflet.layer.elevation-display/index.js b/src/lib/leaflet.layer.elevation-display/index.js
@@ -1,6 +1,7 @@
 import L from 'leaflet';
 
 import {fetch} from '~/lib/xhr-promise';
+
 import './style.css';
 
 class DataTileStatus {
@@ -39,27 +40,33 @@ const ElevationLayer = L.TileLayer.extend({
             },
             null
         );
+        this.displayElevation = true;
+    },
+
+    enableElevationDisplay: function (enable) {
+        this.displayElevation = enable;
+        if (!this._map) {
+            return;
+        }
+        if (enable) {
+            this.setupEvents(true);
+        } else {
+            this._map.removeLayer(this.label);
+            this.setupEvents(false);
+        }
     },
 
     onAdd: function (map) {
         L.TileLayer.prototype.onAdd.call(this, map);
-        this.setupElements(true);
-        this.setupEvents(true);
+        this.enableElevationDisplay(this.displayElevation);
     },
 
     onRemove: function (map) {
         this.setupEvents(false);
-        this.setupElements(false);
         map.removeLayer(this.label);
         L.TileLayer.prototype.onRemove.call(this, map);
     },
 
-    setupElements: function (enable) {
-        const classFunc = enable ? 'addClass' : 'removeClass';
-        L.DomUtil[classFunc](this._container, 'highlight');
-        L.DomUtil[classFunc](this._map._container, 'elevation-display-control-active');
-    },
-
     setupEvents: function (on) {
         const eventFunc = on ? 'on' : 'off';