Is it possible to drag the scale on a Leaflet map ?

L.control.scale({'position':'bottomleft', 'metric':true,'imperial':false}).addTo(map);

I used this possibility for a wind rose with this code

north.onAdd = function(map) {
    var div = L.DomUtil.create("div", "info legend");
    div.innerHTML = '<img src="/gps/images/compas-120.png">';
    var draggable = new L.Draggable(div);
    return div;

2 Answers 2


Yes , it's actually quite simple. Get the container of the scale control with the .getContainer() method and then make it draggable:

var controlScale = L.control.scale({'position':'bottomleft', 'metric':true,'imperial':false}).addTo(map);
var scaleContainer = controlScale.getContainer();

var draggable = new L.Draggable(scaleContainer);

I just applied your solution for the scale "Leaflet.GraphicScale" , it's also valid

var graphicScale = L.control.graphicScale({position: 'bottomleft', doubleLine:true, fill:true}).addTo(map);
var scaleText = L.DomUtil.create('div', 'scaleText' );
graphicScale._container.insertBefore(scaleText, graphicScale._container.firstChild);

var scaleContainer = graphicScale.getContainer();
var draggable = new L.Draggable(scaleContainer);

Your Answer

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

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