1

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):

enter image description here

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

enter image description here

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

1 Answer 1

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'.

1
  • It's working very fine. Thank you @TomazicM ! I couldn't imagine it was a layer. (PS: and thanks for the subdomains tip.)
    – Vincent Dc
    Nov 14, 2022 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.