Only show markers selected from other widget when using crosstalk

[tedmoorman]

With crosstalk I'm using R's reactable package to display a table to use for filtering. When I select a single row, I see too many markers on the map, even though the opacity of the unselected markers is reduced. I would like for all markers to disappear except the ones I've chosen from the table. You can sort of see what I'm talking about here: [https://glin.github.io/reactable/articles/examples.html#linked-selection-1]. Just imagine many, many more markers.

Maybe there's a quick fix from leaflet. Or maybe the problem has to do with crosstalk or reactable. I'm cross referencing in all issue forums. Please see [https://github.com/rstudio/crosstalk/issues/84].

[tedmoorman]

Reactable developer seemed to think that this was a leaflet issue:

glin commented Feb 14, 2021
Hi, I think this is most likely a leaflet thing. reactable only interacts with leaflet through Crosstalk, and doesn't do anything specific for leaflet. Other Crosstalk examples with leaflet seem to work the same too, like at https://rstudio.github.io/crosstalk/index.html. There may be some config option in leaflet to control the unselected marker opacity, so I'd guess the leaflet repo is the best place to ask about it.

[chris31415926535]

I second this: It would be great to have a way to fine-tune what happens to Leaflet markers when their rows are selected from other widgets using crosstalk.

I've done a quick skim of the Leaflet package code, but I'm not familiar with the codebase and it wasn't obvious to me where the behaviour for selected rows is defined.

Does anyone have an idea of where the behaviour for crosstalk-selected Leaflet markers is defined? e.g. is it in the R code, the JavaScript code, css, or somewhere else? With a hint, I might be able to help 🙂

[michaelbgarcia]

@chris31415926535 I just came across this same need in my work, and noticed that the markers outside of the filtered selection are being set to an opacity of 0.2. I took a look through the repo and believe I found where that is happening:

leaflet/inst/htmlwidgets/leaflet.js

Line 1040 in 5bf15ec

_this._setOpacity(_layerInfo4, selectedKeys[_groupKeys2[_i4]] ? 1.0 : 0.2);

As of where to go from here, I am not sure since this is hardcoded in the source code...

[tedmoorman]

@michaelbgarcia

The next step is to make sure that changing the code in the place you've located will work. Download the source code as a zip file. Extract the files from the zip. Edit the line you've discovered. Re-zip. Unzip and then install with R CMD Install. Use some test data to make sure the fix works.

After a successful edit, edit the file on the master branch: https://github.com/rstudio/leaflet/blob/master/inst/htmlwidgets/leaflet.js . Then commit the change - and be sure to make them add you as a coauthor.

[michaelbgarcia]

@tedmoorman ah yes of course! My statement was, I guess, more rhetorical in the sense that for a particular project/visualization, you're stuck with what you have given the opacity level is hardcoded :)

To your point, I can confirm that the block of code I referenced will change the opacity (I set to 0, and they 'disappeared'). Of course if you have marker labels they will still show up, so perhaps creating a solution to just adjust opacity of the markers is not robust enough. It was fun for me to dive in and locate the source code responsible for this. Perhaps I can find the personal time to actually do something with this!

[tedmoorman]

@michaelbgarcia sounds like you've got it figured out. I noticed a similar section of code in the same file:

leaflet/inst/htmlwidgets/leaflet.js

Lines 973 to 978 in 5bf15ec

	if (ctGroup) {
	if (layer.setStyle) {
	// Need to save this info so we know what to set opacity to later
	layer.options.origOpacity = typeof layer.options.opacity !== "undefined" ? layer.options.opacity : 0.5;
	layer.options.origFillOpacity = typeof layer.options.fillOpacity !== "undefined" ? layer.options.fillOpacity : 0.2;
	}

Any idea what's going on there?