How to change css in r markdown cell & shiny?

Question

I am creating a leaflet plot for which I need a white background instead of grey.

I came across this SO post for same: blank, white background for leaflet map & tried:

Plot code:

daily_leaflet_plt <- ind_states %>% leaflet(options = leafletOptions(zoomControl = FALSE,
                                                dragging = FALSE,
                                                minZoom = 3,
                                                style = list(
                                                  "background-color" = "white"
                                                )
                                                )) %>%
          
          addPolygons(
                      label = label_daily,
                      labelOptions = labelOptions(
                        opacity = .6,
                        style = list(
                            "color" = "white",
                            "background-color" = "black",
                            "font-size" = "15px",
                            "border-color" = "rgba(0,0,0,0.5)"
                        )
                      ),
                      stroke = TRUE,
                      color = "white",
                      dashArray = "3",
                      weight = .2,
                      smoothFactor = .5,
                      opacity = 1,
                      fillOpacity = 0.5,
                      fillColor = ~ pal_daily(Daily_confirmed),
                      highlightOptions = highlightOptions(weight = .5,
                                                          fillOpacity = 1,
                                                          bringToFront = TRUE)) %>%

          addLegend(position = "bottomleft",
                    pal = pal_daily,
                    values = ~ ind_states$Daily_confirmed,
                    title = "Daily Confirmed Cases",
                    opacity = 0.7)

css as per SO post:

```{r results="daily_leaflet_plt"}
cat("
<style>
.leaflet-container {
    background: #FFF;
}
</style>
")
```

But this doesn't work, How can I get white background space in leaflet plt in rmarkdown & shiny as eventually I will be using this in shiny.

I have also raised this in another SO post which is phrased differently & remains unanswered: How to change color of leaflet map around the polygon shape in r?

Answer 1

I think your CSS selector is correct, but I'd personally find it easier to just specify that in the typical Shiny way, i.e.,

library(shiny)
library(leaflet)

ui <- fluidPage(
    tags$head(tags$style(HTML(".leaflet-container {background: none;}")))
    leafletOutput("map")
)

server <- function(input, output, session) {
    output$map <- renderLeaflet({
        leaflet(quakes) %>%
            addTiles()
     })
}

shinyApp(ui, server)

For R markdown, you can embed a CSS code chunk as you would an R code chunk, e.g.,

```{css, echo = FALSE}
.leaflet-container {
    background: none;
}
```


```{r}
library(leaflet)

leaflet(quakes) %>%
    addTiles()
```