Use layer id instead of name for hash

- to make it work across languages and on translation changes
- with legacy support for old names

js/LayersConfig.js

@@ -12,6 +12,15 @@ BR.LayersConfig = L.Class.extend({
         'Waymarked_Trails-Hiking'
     ],
 
+    legacyNameToIdMap: {
+        'OpenStreetMap': 'standard',
+        'OpenStreetMap.de': 'osm-mapnik-german_style',
+        'OpenTopoMap': 'OpenTopoMap',
+        'Esri World Imagery': 'Esri.WorldImagery',
+        'Cycling (Waymarked Trails)': 'Waymarked_Trails-Cycling',
+        'Hiking (Waymarked Trails)': 'Waymarked_Trails-Hiking'
+    },
+
     initialize: function (map) {
         this._map = map;
 

js/control/Control.Layers.js

@@ -33,18 +33,17 @@ BR.ControlLayers = L.Control.Layers.extend({
 
     getLayer: function (name) {
         for (var i = 0; i < this._layers.length; i++) {
-			if (this._layers[i] && this._layers[i].name === name) {
+            var obj = this._layers[i];
-				return this._layers[i];
+            if (obj.name === name) {
-			}
+                return obj;
-		}
+            }
+        }
+
+        return null;
     },
 
-    activateLayer: function (name) {
+    activateLayer: function (layer) {
-        var obj = this.getLayer(name);
+        this._map.addLayer(layer);
-        if (obj) {
-            this._map.addLayer(obj.layer);
-        }
-        return obj;
     },
 
     activateFirstLayer: function () {

js/control/LayersTab.js

@@ -293,6 +293,28 @@ BR.LayersTab = BR.ControlLayers.extend({
         return layer;
     },
 
+    getLayerById: function (id) {
+        for (var i = 0; i < this._layers.length; i++) {
+            var obj = this._layers[i];
+            if (obj.layer.id === id) {
+                return obj;
+            }
+        }
+
+        return null;
+    },
+
+    getLayerByLegacyName: function (legacyName) {
+        var obj = null;
+        var id = this.layersConfig.legacyNameToIdMap[legacyName];
+
+        if (id) {
+            obj = this.getLayerById(id);
+        }
+
+        return obj;
+    },
+
     saveRemoveActiveLayers: function () {
 		this.saveLayers = this.removeActiveLayers();
     },

js/plugin/leaflet-fullHash.js

@@ -85,12 +85,42 @@
             }
         },
 
+        _parseLayers: function (layersParam, layerSeparator) {
+            var layers = layersParam.split(layerSeparator).map(L.bind(function (layerEncoded) {
+                var obj = null;
+                var layerString = decodeURIComponent(layerEncoded);
+
+                if (layerString) {
+                    obj = this._getLayerFromString(layerString);
+                }
+
+                return obj;
+            }, this));
+
+            return layers;
+        },
+
         parseLayers: function (layersParam) {
-            // legacy support for '-' layer separator
+            var countFoundLayers = function (count, obj) {
-            var layerSeparator = layersParam.indexOf('-') !== -1 ? '-' : this.options.layerSeparator;
+                if (obj) {
-            var layers = layersParam.split(layerSeparator).map(function (layerEncoded) {
+                    count++;
-                return decodeURIComponent(layerEncoded);
+                }
-            });
+                return count;
+            };
+
+            var layers = this._parseLayers(layersParam, this.options.layerSeparator);
+            var found = layers.reduce(countFoundLayers, 0);
+
+            if (found < layers.length) {
+                // legacy support for name instead of id and '-' layer separator
+                var layersLegacy = this._parseLayers(layersParam, '-');
+                var foundLegacy = layersLegacy.reduce(countFoundLayers, 0);
+
+                if (foundLegacy > found) {
+                    layers = layersLegacy;
+                }
+            }
+
             return layers;
         },
 
@@ -100,13 +130,14 @@
 
             layersControl.removeActiveLayers();
 
-            layers.forEach(function(name, index, array) {
+            layers.forEach(L.bind(function(obj, index, array) {
-                if (!name) return;
+                if (obj) {
-                var obj = layersControl.activateLayer(name);
+                    layersControl.activateLayer(obj.layer);
-                if (obj && !obj.overlay) {
+                    if (obj && !obj.overlay) {
-                    added = true;
+                        added = true;
+                    }
                 }
-            });
+            }, this));
 
             if (!added) {
                 // if we couldn't add layers (removed or invalid name), add the default one
@@ -117,11 +148,33 @@
         formatLayers: function () {
             var objList = this.options.layersControl.getActiveLayers();
             var layerList = objList.map(L.bind(function (obj) {
-                return encodeURIComponent(obj.name);
+                return encodeURIComponent(this._toLayerString(obj));
             }, this));
+
             return layerList.join(this.options.layerSeparator)
         },
 
+        _toLayerString: function (obj) {
+            return obj.layer.id ? obj.layer.id : obj.name;
+        },
+
+        _getLayerFromString: function (layerString) {
+            var layersControl = this.options.layersControl;
+            var obj = layersControl.getLayerById(layerString);
+
+            if (!obj) {
+                // fallback to name for custom and config layers
+                obj = layersControl.getLayer(layerString);
+
+                if (!obj) {
+                    // legacy layer name support
+                    obj = layersControl.getLayerByLegacyName(layerString);
+                }
+            }
+
+            return obj;
+        },
+
         removeFrom: function(map) {
             if (this.changeTimeout) {
                 clearTimeout(this.changeTimeout);