Making Leaflet-fullHash and Leaflet.EdgeScaleBar addons work together in Leaflet?

Question

Leaflet.fullhash is useful for allowing to save the list of layers and the current location and zoom params in the URL like "mypage.com/#6/58.585/17.292/osm" : it's in https://github.com/KoGor/leaflet-fullHash

and Leaflet.EdgeScaleBar gives a fine scalebar along the edges of the map : https://github.com/dtutic/Leaflet.EdgeScaleBar

But when you copy an URL to share out to the Web, the scalebar won't show in that URL.

The basic page without extra URL parameters shows the scalebar, putting aside my bad connection on retrieving the tiles (https://mappingforyou.eu/test):

But with that URL with fullhash parameters, no scalebar is visible ( https://mappingforyou.eu/test/#6/58.585/17.292/osm ):

Basic Leaflet map settings:

var map = L.map('map').setView([48.505, 2.09], 6);

    var toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
        subdomains: 'abcd',
            attribution: 'Stamen Toner',
    maxZoom:18,
    ext: 'png'
    }).addTo(map);

        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                subdomains: 'abcd',
                        attribution: 'OSM',
    maxZoom:18,
        ext: 'png'
        });

calling the scalebar

L.edgeScaleBar().addTo(map);

calling fullhash:

var allMapLayers = { 'osm': osm,
                      'toner': toner                      
                    };
L.hash(map, allMapLayers);

and basic map controls:

L.control.layers({
    'OSM Map': osm,
    'Stamen Toner': toner
},
).addTo(map);

I copied the code here: https://codepen.io/vincedchart/pen/RwJVzBy?editors=1111

Answer 1

You must have in mind that L.edgeScaleBar() is also a layer, so you have to include it in allMapLayers to be shown.

Relevant part of the code could then look something like this:

var edgeScaleBar = L.edgeScaleBar().addTo(map);

var allMapLayers = {
  'osm': osm,
  'toner': toner,             
  'edge': edgeScaleBar                    
};
L.hash(map, allMapLayers);

Initially displayed URL on your test site would then look like this:

 https://mappingforyou.eu/test/#6/58.585/17.292/toner-edge

URL to display OSM would be:

 https://mappingforyou.eu/test/#6/58.585/17.292/osm-edge

By the way, OSM layer on your test site does not work correctly because of your subdomains: 'abcd' layer option. OSM has only three subdomains, so it should be subdomains: 'abc'.