htmlwidgets popups in shiny

[CedricMondy]

Hello and thank you very much for this useful extension to {leaflet}.

I would like to add popups to markers displaying a htmlwidget graph obtained with {ggiraph}, if I use popupGraph() with the list of htmlwidgets inside the call to addCircleMarkers() it works when I run the code interactively but not when integrated into a Shiny app (Error 404).

The problem seems to be that the temp folder where the html are stored (popup_graph folder) is at an unknown location from within shiny.

If I understood this issue correctly, the addPopupGraph function may fix this issue but it does not seem to work properly with htmlwidgets since, even in an interactive session, the map displayed contained only empty popups.

Is there a way to include htmlwidgets popups in shiny apps?

Thank you,

Cédric

[tim-salabim]

Yes, the add* function(s) for htmlwidget based content is still under development. For the time being, you can use leafpop:::addPopupIframes. If that doesn't work, please let us know. One word of caution, adding many of these htmlwidgets will result in very large maps/apps as we blindly attach all relevant resources for all widgets (so lots of duplication) I think.

[CedricMondy]

Thanks for your response! I managed to have things sort of working saving the widgets using htmltools::saveWidget to a known location and passing the file names to leafpop:::addPopupIframes.

So far, I create self-selfcontained html files for the popups, but as you mentionned all the dependencies are duplicated for each popup (in my case about 2000 :-(. Outside, of a shiny app, I managed to get things working saving all the JS dependencies in a unique folder next to the html files. However, in shiny, things are still not working since the popups seem not to be able to locate the JS resources. I will keep on figuring out a solution (the ideal would be that all the JS could be served from a CDN)

[CedricMondy]

For your information, I managed to get everything working as I wished.

Since I use the {golem} framework to build the app, I saved the popup widgets using the htmlwidgets::saveWidget to a known location inside the inst/app/www folder. To limit the size of the html pages, I used the selfcontained=FALSE option and specified a common directory where the javascript libraries were saved using the libdirargument.

Then, I used leafpop:::popupIframe to generate all the code for all the popups. I prefer this solution to leafpop:::addPopupIframes because I can prepare the popup html code in advance instead of generating it in the app and I just have to filter which elements to display, much faster. To make things a little lighter, I programmaticaly remove the header and style tag contents from all the popup code and copied the css content to the app css file.

I named the popup list to be able to filter it in the shiny app and saved it as package data.

In the app code, I just have to pass the unnamed filtered popup list to the popup argument inside the leaflet::addCircleMarkers and everything works smoothly and quickly even if I have more than 2000 points and associated popups.

Best regards,

Cédric

[tim-salabim]

Sounds great! Can I see that code somewhere? Maybe I can learn from it how to keep things small.

[CedricMondy]

Hello, my code was really specific to my project, partly using french names for functions and not (yet) documented. So I prefer submit a PR with some proposals to use external files for popup CSS and htmlwidgets JS.

Best regards,

Cédric