add track casing + change color to magenta

css/leaflet-routing.css

@@ -1,5 +1,5 @@
 div.line-mouse-marker {
-  background-color: #ffffff;
-  border: 4px solid rgba(0, 51, 255, 0.6);
+  background-color: white;
+  border: 4px solid magenta;
   border-radius: 8px;
 }

js/control/TrackMessages.js

@@ -3,6 +3,7 @@ BR.TrackMessages = L.Class.extend({
     options: {
         edgeStyle: {
             color: 'yellow',
+            opacity: 0.8,
             weight: 8
         }
     },

js/index.js

@@ -207,9 +207,18 @@
             styles: {
                 trailer: {
                     dashArray: [10, 10],
-                    opacity: 0.4
+                    opacity: 0.6,
+                    color: 'magenta'
+                },
+                track: {
+                    color: 'magenta',
+                    opacity: 1
+                },
+                trackCasing: {
+                    weight: 8,
+                    color: 'white',
+                    opacity: 1
                 },
-                track: {},
                 nodata: {
                     color: 'darkred'
                 }

js/plugin/Elevation.js

@@ -13,6 +13,13 @@ BR.Elevation = L.Control.Elevation.extend({
 
     update: function(track, layer) {
         this.clear();
+
+        // bring height indicator to front, because of track casing in BR.Routing
+        if (this._mouseHeightFocus) {
+            var g = this._mouseHeightFocus[0][0].parentNode;
+            g.parentNode.appendChild(g);
+        }
+
         if (track && track.getLatLngs().length > 0) {
             this.addData(track.toGeoJSON(), layer);
         }

js/plugin/Routing.js

@@ -13,8 +13,13 @@ BR.Routing = L.Routing.extend({
     },
 
     onAdd: function (map) {
+        this._segmentsCasing = new L.FeatureGroup().addTo(map);
+
         var container = L.Routing.prototype.onAdd.call(this, map);
 
+        this._segments.on('layeradd', this._addSegmentCasing, this);
+        this._segments.on('layerremove', this._removeSegmentCasing, this);
+
         // turn line mouse marker off while over waypoint marker
         this.on('waypoint:mouseover', function(e) {
             // L.Routing.Edit._segmentOnMouseout without firing 'segment:mouseout' (enables draw)
@@ -86,6 +91,17 @@ BR.Routing = L.Routing.extend({
         return container;
     }
 
+  ,_addSegmentCasing: function(e) {
+    var casing = L.polyline(e.layer.getLatLngs(), this.options.styles.trackCasing);
+    this._segmentsCasing.addLayer(casing);
+    e.layer._casing = casing;
+    this._segments.bringToFront();
+  }
+
+  ,_removeSegmentCasing: function(e) {
+    this._segmentsCasing.removeLayer(e.layer._casing);
+  }
+
   ,_removeMarkerEvents: function(marker) {
       marker.off('mouseover', this._fireWaypointEvent, this);
       marker.off('mouseout' , this._fireWaypointEvent, this);