Add active state to route quality coding button, sync layer (#262)

js/plugin/RoutingPathQuality.js

@@ -68,13 +68,33 @@ BR.RoutingPathQuality = L.Control.extend({
                 })
             }
         };
-        this.selectedProvider = this.options.initialProvider || 'incline';
+        this._initialProvider = this.options.initialProvider || 'incline';
+        this.selectedProvider = this._initialProvider;
+
+        this._active = false;
     },
 
     onAdd: function(map) {
-        var self = this;
         this._map = map;
-        this._routingSegments.addTo(map);
+
+        map.on(
+            'overlayadd',
+            function(evt) {
+                if (evt.layer === this._routingSegments) {
+                    this._activate(this.routingPathButton);
+                }
+            },
+            this
+        );
+        map.on(
+            'overlayremove',
+            function(evt) {
+                if (evt.layer === this._routingSegments) {
+                    this._deactivate(this.routingPathButton);
+                }
+            },
+            this
+        );
 
         var states = [],
             i,
@@ -88,12 +108,22 @@ BR.RoutingPathQuality = L.Control.extend({
                 stateName: keys[i],
                 icon: provider.icon,
                 title: provider.title,
-                onClick: (function(state) {
+                onClick: L.bind(function(state) {
-                    return function(btn) {
+                    return L.bind(function(btn) {
-                        btn.state(state);
+                        if (this._active) {
-                        self.setProvider(state);
+                            btn.state(state);
-                    };
+                            this.setProvider(state);
-                })(nextState)
+
+                            if (state === this._initialProvider) {
+                                this._deactivate(btn);
+                            } else {
+                                this._getIcon(btn).classList.add('active');
+                            }
+                        } else {
+                            this._activate(btn);
+                        }
+                    }, this);
+                }, this)(nextState)
             });
         }
 
@@ -103,6 +133,22 @@ BR.RoutingPathQuality = L.Control.extend({
         return new L.DomUtil.create('div');
     },
 
+    _activate: function(btn) {
+        this._active = true;
+        this._getIcon(btn).classList.add('active');
+        this._routingSegments.addTo(this._map);
+    },
+
+    _deactivate: function(btn) {
+        this._active = false;
+        this._getIcon(btn).classList.remove('active');
+        this._map.removeLayer(this._routingSegments);
+    },
+
+    _getIcon: function(btn) {
+        return btn.button.firstChild.firstChild;
+    },
+
     update: function(track, layer) {
         var segments = [];
         layer.eachLayer(function(layer) {
@@ -115,7 +161,6 @@ BR.RoutingPathQuality = L.Control.extend({
     setProvider: function(provider) {
         this.selectedProvider = provider;
         this._update(this.segments);
-        this._routingSegments.addTo(this._map);
     },
 
     _update: function(segments) {