Making info panel clickable in Leaflet?

Question

How do we make it possible to click, drag, copy text that appears in Info panel in leaflet.js?

In a leaflet application similar to the choropleth example, I'm populating the info panel on click instead of on mouseover. I need to enable the user to select and copy text that is present on the panel. At present, hyperlinks I make on the panel are clickable. But the text in the panel cannot be selected.. the mouse behaviour is like it's on the map only.. the panel is a "ghost" for the mouse unless a hyperlink comes along. Link to project.

Answer 1

On creating the div, make sure to add an event listener to it, which stops propagating the event to the map. Easier way:

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this._div.onmousedown = function(evt) {evt.stopPropagation()};
    this.update();
    return this._div;
};

More sophisticated way:

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this._div.addEventListener('mousedown', 
        function(evt) {evt.stopPropagation()}
    );
    this.update();
    return this._div;
};

This way the map won't get the mousedown event, therefore won't pan the view, therefore the content of the info panel becomes selectable.

Note that I have manually added the id s to the div of the info panel just for the sake of the example.