nakarte

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

commit 7b634cf228baa92db7f713edb6362f12b14f7354
parent 06dad17cfaecde9478ab2a013f522411d8a73ee4
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat,  3 Nov 2018 22:40:00 +0100

highlight track when mouse over track row in controll; show tooltip when mouse over track #135

Diffstat:
Msrc/lib/leaflet.control.track-list/track-list.css | 7++++---
Msrc/lib/leaflet.control.track-list/track-list.js | 29++++++++++++++++++++++++++++-
2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/lib/leaflet.control.track-list/track-list.css b/src/lib/leaflet.control.track-list/track-list.css @@ -262,10 +262,11 @@ margin-top: 2px; } -.leaflet-control-tracklist .hover td { +.leaflet-control-tracklist .hover, +.leaflet-control-tracklist tr:hover { background-color: rgb(93%, 93%, 93%); } -.leaflet-control-tracklist .edit td { - background-color: rgb(217, 232, 255); +.leaflet-control-tracklist .edit { + background-color: rgb(217, 232, 255) !important; } \ No newline at end of file diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js @@ -92,7 +92,12 @@ L.Control.TrackList = L.Control.extend({ </div> <div class="tracks-rows-wrapper" data-bind="style: {maxHeight: trackListHeight}"> <table class="tracks-rows"><tbody data-bind="foreach: {data: tracks, as: 'track'}"> - <tr data-bind="event: {contextmenu: $parent.showTrackMenu.bind($parent)}, css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}"> + <tr data-bind="event: { + contextmenu: $parent.showTrackMenu.bind($parent), + mouseenter: $parent.highLightTrack.bind($parent, track), + mouseleave: $parent.highLightTrack.bind($parent, null) + }, + css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}"> <td><input type="checkbox" class="visibility-switch" data-bind="checked: track.visible"></td> <td><div class="color-sample" data-bind="style: {backgroundColor: $parent.colors[track.color()]}, click: $parent.onColorSelectorClicked.bind($parent)"></div></td> <td><div class="track-name-wrapper"><div class="track-name" data-bind="text: track.name, attr: {title: track.name}, click: $parent.setViewToTrack.bind($parent)"></div></div></td> @@ -908,6 +913,7 @@ L.Control.TrackList = L.Control.extend({ track.visible.subscribe(this.onTrackVisibilityChanged.bind(this, track)); track.measureTicksShown.subscribe(this.setTrackMeasureTicksVisibility.bind(this, track)); track.color.subscribe(this.onTrackColorChanged.bind(this, track)); + track.feature.bindTooltip(() => track.name(), {sticky: true}); //this.onTrackColorChanged(track); this.onTrackVisibilityChanged(track); @@ -917,6 +923,27 @@ L.Control.TrackList = L.Control.extend({ return track; }, + highLightTrack: function(track) { + if (this._trackHighlight) { + this._trackHighlight.removeFrom(this._map); + this._trackHighlight = null; + } + if (track) { + const trackHighlight = L.featureGroup([]); + + track.feature.eachLayer((line) => { + L.polyline(line.getLatLngs()).addTo(trackHighlight); + }); + + trackHighlight.setStyle({ + color: 'yellow', + weight: '15', + opacity: 0.5 + }); + trackHighlight.addTo(this._map).bringToBack(); + this._trackHighlight = trackHighlight; + } + }, setMarkerIcon: function(marker) { var symbol = 'marker',