Add switch to turn off centering hovered data table entry on map (#241)

css/style.css

@@ -519,6 +519,19 @@ table.dataTable.display tbody tr.even:hover {
     justify-content: center;
 }
 
+/* corresponding to leaflet-sidebar-expand/-close in leaflet-sidebar-v2 */
+.sync-map {
+    float: right;
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    cursor: pointer;
+    color: #333;
+}
+.sync-map.active {
+    color: #0074d9;
+}
+
 /*
  * CodeMirror
  */

index.html

@@ -737,9 +737,16 @@
 
                         <div class="leaflet-sidebar-pane" id="tab_data">
                             <h1 class="leaflet-sidebar-header">
-                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
-                                ><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span
-                                ><span data-i18n="sidebar.data.title">Data</span>
+                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
+                                <span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span>
+                                <span
+                                    id="data-sync-map"
+                                    class="sync-map active"
+                                    data-i18n="[title]sidebar.data.sync-map"
+                                    title="Synchronize map"
+                                    ><i class="fa fa-exchange"></i
+                                ></span>
+                                <span data-i18n="sidebar.data.title">Data</span>
                             </h1>
                             <table id="datatable" class="mini cell-border hover stripe"></table>
                         </div>

js/control/TrackMessages.js

@@ -4,7 +4,9 @@ BR.TrackMessages = L.Class.extend({
             color: 'yellow',
             opacity: 0.8,
             weight: 8
-        }
+        },
+        // center hovered edge (way segment) on map
+        syncMap: true
     },
 
     // true when tab is shown, false when hidden
@@ -29,6 +31,9 @@ BR.TrackMessages = L.Class.extend({
         var table = document.getElementById('datatable');
         this.tableClassName = table.className;
         this.tableParent = table.parentElement;
+
+        var syncButton = document.getElementById('data-sync-map');
+        L.DomEvent.on(syncButton, 'click', this._toggleSyncMap, this);
     },
 
     update: function(polyline, segments) {
@@ -196,11 +201,20 @@ BR.TrackMessages = L.Class.extend({
             edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1);
 
         this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map);
+        if (this.options.syncMap) {
             this._map.panTo(this._selectedEdge.getBounds().getCenter());
+        }
     },
 
     _handleHoverOut: function(evt) {
         this._map.removeLayer(this._selectedEdge);
         this._selectedEdge = null;
+    },
+
+    _toggleSyncMap: function(evt) {
+        var button = evt.currentTarget;
+
+        button.classList.toggle('active');
+        this.options.syncMap = !this.options.syncMap;
     }
 });

locales/en.json

@@ -172,6 +172,7 @@
       "title": "Customize profile"
     },
     "data": {
+      "sync-map": "Synchronize map",
       "title": "Data"
     },
     "itinerary": {