nakarte

Source code of https://map.sikmir.ru (fork)
git clone git://git.sikmir.ru/nakarte
Log | Files | Refs | LICENSE

commit e02c5b53c2845faf9e977f67d72dec9855c5d675
parent a9b5839a26183474556ee15bc724e1bf4346148c
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat,  9 Dec 2017 02:06:21 +0300

[elevation profile] fixed marker flicker; refactored to avoid icon creation for every move event

Diffstat:
Msrc/lib/leaflet.control.elevation-profile/elevation-profile.css | 1-
Msrc/lib/leaflet.control.elevation-profile/index.js | 24++++++++++++++++--------
2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/lib/leaflet.control.elevation-profile/elevation-profile.css b/src/lib/leaflet.control.elevation-profile/elevation-profile.css @@ -135,7 +135,6 @@ margin-left: 0 !important; margin-top: 0 !important; white-space: nowrap; - pointer-events: none; } .elevation-profile-marker-icon { diff --git a/src/lib/leaflet.control.elevation-profile/index.js b/src/lib/leaflet.control.elevation-profile/index.js @@ -256,7 +256,12 @@ const ElevationProfile = L.Class.extend({ this._map._controlContainer.appendChild(container); this.setupContainerLayout(); this.updateGraph(); - this.trackMarker = L.marker([1000, 0], {clickable: false, icon: L.divIcon()}); + const icon = L.divIcon({ + className: 'elevation-profile-marker', + html: '<div class="elevation-profile-marker-icon"></div><div class="elevation-profile-marker-label"></div>' + } + ); + this.trackMarker = L.marker([1000, 0], {interactive: false, icon: icon}); this.polyline = L.polyline(this.path, {weight: 30, opacity: 0}).addTo(map); this.polyline.on('mousemove', this.onLineMouseMove, this); this.polyline.on('mouseover', this.onLineMouseEnter, this); @@ -327,6 +332,14 @@ const ElevationProfile = L.Class.extend({ return x / (this.svgWidth - 1) * (this.values.length - 1); }, + setTrackMarkerLabel: function(label) { + const icon = this.trackMarker._icon; + if (!icon) { + return; + } + icon.getElementsByClassName('elevation-profile-marker-label')[0].innerHTML = label; + }, + updateGraphSelection: function(e) { if (this.dragStart === null) { return; @@ -638,13 +651,8 @@ const ElevationProfile = L.Class.extend({ var label = L.Util.template('{ele} m<br>{dist} km<br>{angle}&deg;', {ele: Math.round(elevation), dist: distance, grad: gradient, angle: angle} ); - var icon = L.divIcon({ - className: 'elevation-profile-marker', - html: '<div class="elevation-profile-marker-icon"></div><div class="elevation-profile-marker-label">' + - label + '</div>' - } - ); - this.trackMarker.setIcon(icon); + + this.setTrackMarkerLabel(label); }, onSvgMouseMove: function(e) {