CODEWITHSUNDEEP
javascriptcssrshinyr-leaflet
Lauren
Lauren

Reputation: 1085

How to create a custom leaflet popup style?

The task at hand is simple--I want to be able to customize the CSS style of my Leaflet popups within a Shiny app. I've tried to combine solutions from this and this example to no avail.

Using both of the above linked solutions, here is some (failed) example code:

library(shiny)
library(leaflet)

shinyApp(
  ui <- fluidPage(

      tags$head(includeCSS(system.file('www', 'style.css', package = 'myPackage'))),

      leafletOutput("map", width = "100%", height = "800")
    ), #END UI


  server <- function(input, output, session) {
    
    output$map <- renderLeaflet({
      leaflet() %>% 
        addTiles() %>% 
        addCircles(lng = -80, lat = 30, radius = 100, popup = as.character("Test"))
    }) #END RENDERLEAFLET
  }
)

The style.css file looks like this and is saved in the www folder inside my Shiny app directory:

<style>

.custom-popup .leaflet-popup-content-wrapper {
  background: #DB0925;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
  }
</style>

<div class='custom-popup' id='map'></div>

I suspect that the path to my css file is the issue. When I run this code as is, I get the following error:

Warning in file(con, "r") : file("") only supports open = "w+" and open = "w+b": using the former

Do you have any solutions how to get this to work?

Upvotes: 0

Views: 1867

Answers (1)

Lauren
Lauren

Reputation: 1085

Icaro Bombonato led me to the solution! Instead of tags$head(includeCSS(system.file('www', 'style.css', package = 'myPackage'))),, all that was necessary was includeCSS("style.css") in the UI. The style.css file was also housed in my main Shiny directory rather than the www folder.

Upvotes: 2

Related Questions