nakarte

commit 1574a87d9748948a095b128e5e6637d35c570c60
parent 5ac418c9262ddc1c41f1ef6325f4da5036b9d135
Author: Sergey Orlov <wladimirych@gmail.com>
Date:   Wed, 16 Dec 2020 17:06:12 +0100

tracks: highlight tracks segments start and end, and markers

Related to: #408

Diffstat:
M
src/lib/leaflet.control.track-list/track-list.js
 | 
52
++++++++++++++++++++++++++++++++++++++++------------

1 file changed, 40 insertions(+), 12 deletions(-)
diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js
@@ -78,6 +78,26 @@ L.Control.TrackList = L.Control.extend({
             lineCursorInvalidStyle: {color: 'red'},
             splitExtensions: ['gpx', 'kml', 'kmz', 'wpt', 'rte', 'plt', 'fit', 'tmp', 'jpg', 'crdownload'],
             splitExtensionsFirstStage: ['xml', 'txt', 'html', 'php', 'tmp', 'gz'],
+            trackHighlightStyle: {
+                color: 'yellow',
+                weight: 15,
+                opacity: 0.5,
+            },
+            trackMarkerHighlightStyle: {
+                color: 'yellow',
+                weight: 20,
+                opacity: 0.6,
+            },
+            trackStartHighlightStyle: {
+                color: 'green',
+                weight: 13,
+                opacity: 0.6,
+            },
+            trackEndHighlightStyle: {
+                color: 'red',
+                weight: 13,
+                opacity: 0.6,
+            },
         },
         includes: L.Mixin.Events,
 
@@ -1196,19 +1216,27 @@ L.Control.TrackList = L.Control.extend({
                 this._trackHighlight = null;
             }
             if (this._highlightedTrack && this._highlightedTrack.visible()) {
-                const trackHighlight = L.featureGroup([]);
-
-                this._highlightedTrack.feature.eachLayer((line) => {
+                const trackHighlight = L.featureGroup([]).addTo(this._map).bringToBack();
+                for (const line of this._highlightedTrack.feature.getLayers()) {
                     let latlngs = line.getFixedLatLngs();
-                    L.polyline(latlngs).addTo(trackHighlight);
-                });
-
-                trackHighlight.setStyle({
-                    color: 'yellow',
-                    weight: '15',
-                    opacity: 0.5
-                });
-                trackHighlight.addTo(this._map).bringToBack();
+                    L.polyline(latlngs, {...this.options.trackHighlightStyle, interactive: false}).addTo(
+                        trackHighlight
+                    );
+                    const start = latlngs[0];
+                    const end = latlngs[latlngs.length - 1];
+                    L.polyline([start, start], {...this.options.trackStartHighlightStyle, interactive: false}).addTo(
+                        trackHighlight
+                    );
+                    L.polyline([end, end], {...this.options.trackEndHighlightStyle, interactive: false}).addTo(
+                        trackHighlight
+                    );
+                }
+                for (const marker of this._highlightedTrack.markers) {
+                    const latlng = marker.latlng.clone();
+                    L.polyline([latlng, latlng], {...this.options.trackMarkerHighlightStyle, interactive: false}).addTo(
+                        trackHighlight
+                    );
+                }
                 this._trackHighlight = trackHighlight;
             }
         },