More

Making info panel clickable in Leaflet?

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?