Change style for leaflet legend in a shiny app

[JP]

I am using the new leaflet version (0.0.16) in a shiny app (version 0.12.1) and I really like the new  addLengend feature - it makes things much easier. Is there some way to assign a class or id to the legend to make it easier to apply .css styles? If I could give the legend an id, I could use the shinyjs package to add a class, which would help a lot.

JP

[Yihui Xie]

The legend is written in a div with CSS classes "info legend
leaflet-control":
https://github.com/rstudio/leaflet/blob/master/inst/htmlwidgets/lib/leafletfix/leafletfix.css
Not sure if that helps you.

Regards,
Yihui

[JP]

Thanks, That is helpful - could it be possible in the future to add an `id=` argument so that the div can be given a CSS id?  Should I log this as an issue on github?

 

[Yihui Xie]

Do you have to apply different CSS styles to different id's?

Regards,
Yihui

[JP]

My thought was that if I had an id, then I could use the shinyjs package to add a class to the legend, and thereby make the legend look like other panels in the app without having to do a lot of trial and error to get it to work. My web development experience is limited, however, so maybe that is not feasible.

Also, my impression is that you could have more than one set of symbols on the map and each one could have its own legend, and it might be nice to style those independently, but I expect that won't come up very often.

JP

[Yihui Xie]

Looking at https://github.com/daattali/shinyjs, it seems it is
possible to change the CSS of existing classes using inlineCSS()? I'm
not quite sure, so Cc'ed the author of shinyjs.

Currently the legend only supports colors. Other properties of
graphical elements like the size are not possible to be represented in
the legend. So you can only have one legend at the moment.

Regards,
Yihui

[Dean Attali]

JP: I think (but not 100% sure) that what you want to do is use the `shinyjs::addClass` function on a legend, is that right? Currently addClass only accepts "id" as a parameter, but if there's a need for it, I could make it accept any selector, such as a css class, ie. you could do something like "addClass(.selector = '.legend', class = 'nice-legend')".  Would that be very useful? If so, please open a github issue so I don't forget. I haven't done it yet because there was no demand for it.

Until then, I'd do what Yihui suggested and add css that applies to the ".legend" class

[Joe Cheng]

Here, we're adding a way to just add classes onto a legend directly.

https://github.com/rstudio/leaflet/pull/126

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/cd5e728e-be00-4ec7-b282-4673e01b446c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[JP]

Dean, Yihui,

 Thanks for responding. Before I waste any more of your time I'll explain better what I am hoping to do.  I am developing a shiny app where a map is a key element. On the map I have several panels that are used for various controls. The map also has a legend, produced via the addLegend function in RStudio's leaflet package. 

I recently found out that someone in my organization has produced a bootstrap 3 theme, so I am using that theme for styling the app. I am using  a class of "panel panel-default" on the panels that are on the map. The legend, however, has a different class.

My idea was to assign the class "panel panel-default" to the legend, and then I would not have to figure out all changes I would need to make, and going forward maintenance would be much easier. So, if this is possible I will add the github issue. However, if it won't work I don't want to waste your time.

Thanks for you help,

JP

[JP]

Just read Joe's message, so maybe this is all moot now.

JP

[Yihui Xie]

Yep, try addLegend(className = "panel panel-default"), or perhaps
"panel panel-default legend" since I guess you still need the CSS
styles for "legend i" (the color squares in the legend):
https://github.com/rstudio/leaflet/blob/master/inst/htmlwidgets/lib/leafletfix/leafletfix.css

Regards,
Yihui

[JP]

That did it, thanks!