More

Making info panel clickable in 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.


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 themousedownevent, therefore won't pan the view, therefore the content of the info panel becomes selectable.

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


Watch the video: How to create interactive maps in R? Leaflet and Mapdeck? (October 2021).