1

Is there a way to make a leaflet map's legend draggable? Like a library, or something?

2

Here is a piece of code from this Leaflet example: http://leafletjs.com/examples/choropleth-example.html

    var legend = L.control({ position: 'bottomright' });

    legend.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 10, 20, 50, 100, 200, 500, 1000],
            labels = [],
            from, to;

        for (var i = 0; i < grades.length; i++) {
            from = grades[i];
            to = grades[i + 1];

            labels.push(
                '<i style="background:' + getColor(from + 1) + '"></i> ' +
                from + (to ? '&ndash;' + to : '+'));
        }

        div.innerHTML = labels.join('<br>');

        var draggable = new L.Draggable(div);
        draggable.enable()

        return div;
    };

I added in these two lines of code to make the legend moveable.

var draggable = new L.Draggable(div);
draggable.enable()

Using Leaflet's Draggable class: http://leafletjs.com/reference-1.0.0.html#draggable

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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