From d60b1ad15fac22654645ea5a6244708485d6d304 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Tue, 2 Apr 2019 21:58:32 +0200 Subject: [PATCH] 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 | 9 ++++ js/control/Control.Layers.js | 19 ++++----- js/control/LayersTab.js | 22 ++++++++++ js/plugin/leaflet-fullHash.js | 77 +++++++++++++++++++++++++++++------ 4 files changed, 105 insertions(+), 22 deletions(-) diff --git a/js/LayersConfig.js b/js/LayersConfig.js index a710e29..952e6d9 100644 --- a/js/LayersConfig.js +++ b/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; diff --git a/js/control/Control.Layers.js b/js/control/Control.Layers.js index e2dd0c7..17fd550 100644 --- a/js/control/Control.Layers.js +++ b/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) { - return this._layers[i]; - } - } + var obj = this._layers[i]; + if (obj.name === name) { + return obj; + } + } + + return null; }, - activateLayer: function (name) { - var obj = this.getLayer(name); - if (obj) { - this._map.addLayer(obj.layer); - } - return obj; + activateLayer: function (layer) { + this._map.addLayer(layer); }, activateFirstLayer: function () { diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js index 1406db5..6e5ced2 100644 --- a/js/control/LayersTab.js +++ b/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(); }, diff --git a/js/plugin/leaflet-fullHash.js b/js/plugin/leaflet-fullHash.js index 6b1eaed..2802da9 100644 --- a/js/plugin/leaflet-fullHash.js +++ b/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 layerSeparator = layersParam.indexOf('-') !== -1 ? '-' : this.options.layerSeparator; - var layers = layersParam.split(layerSeparator).map(function (layerEncoded) { - return decodeURIComponent(layerEncoded); - }); + var countFoundLayers = function (count, obj) { + if (obj) { + count++; + } + 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) { - if (!name) return; - var obj = layersControl.activateLayer(name); - if (obj && !obj.overlay) { - added = true; + layers.forEach(L.bind(function(obj, index, array) { + if (obj) { + layersControl.activateLayer(obj.layer); + if (obj && !obj.overlay) { + 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);