[GIS] Making info panel clickable in Leaflet

leaflet

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.

Best Answer

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.

Blah

Related Question