Shiny Leaflet legend markers same as map markers

Question

I'm creating a legend to differentiate two sets of circle markers, which are distinguished by fillOpacity = 1 (filled in) or fillColor = "white" (empty), corresponding to an df$aircraft column with two levels. I want the legend to have a filled and empty marker to match up with each.

This seems like a simple thing, but the other question asking this did not receive an answer. I've tried modifying the function/CSS styling found here, but haven't been successful in changing the opacity of each legend marker separately, or in keeping the stroke color (only the inside should be empty).

Here's code to generate a simple map, with the markers looking how I'd want the legend to look (legend does not show up):

library(shiny)
library(leaflet)

# create data
df<-data.frame(x=runif(10,20,21), y=runif(10,0,1))
df$aircraft[1:5] <- "C130"
df$aircraft[5:10] <- "B200"

# create map
map = leaflet() %>% addTiles()

# set up shiny app
ui <- leafletOutput("myMap")


server <- function(input, output, session){

  df_c <- filter(df,df$aircraft == "C130")
  df_b <- filter(df,df$aircraft == "B200")

  output$myMap = renderLeaflet({map %>% 
      addCircleMarkers(df_c$x,df_c$y, radius=10, opacity = 1, fillColor = "white") %>%
      addCircleMarkers(df_b$x,df_b$y, radius=10, opacity = 1, fillOpacity = 1) 
    %>%
     addLegend(colors = c("blue", "blue"), labels = c("C130", "B200"))
  })
}

shinyApp(ui, server)

Thanks for any help.

The square boxes shown as legends should be changed to respective circle right? — amrrs

amrrs amrrs · Accepted Answer · 2017-11-09T10:28:07

I've created something for you but it's slightly a messed up css.

library(shiny)
library(leaflet)
library(magrittr)

# create data
df<-data.frame(x=runif(10,20,21), y=runif(10,0,1))
df$aircraft[1:5] <- "C130"
df$aircraft[5:10] <- "B200"

# create map
map = leaflet() %>% addTiles()


# set up shiny app
ui <- bootstrapPage( tags$style(type = "text/css", "html, body {width:100%;height:100%}",
                                "
                                .leaflet-top .leaflet-control {
                                   margin: 0px;
                                }    

                                .leaflet-right {
                                     margin-right: 40px;
                                  }    
                                .full{
                                background-color: blue;
                                border-radius: 50%;
                                width: 20px;
                                height: 20px;
                                float: left;

                                }
                                .circle {
                                background-color: #FFF;
                                border: 3px solid blue;
                                border-radius: 50%;
                                height: 20px;
                                width: 20px;

                                }

                                .leaflet-control i{
                                  margin-right: 25px;
                                }
                                "),
                     leafletOutput("myMap"))



server <- function(input, output, session){

  df_c <- filter(df,df$aircraft == "C130")
  df_b <- filter(df,df$aircraft == "B200")

  output$myMap = renderLeaflet({map %>% 
      addCircleMarkers(df_c$x,df_c$y, radius=10, opacity = 1, fillColor = "white") %>%
      addCircleMarkers(df_b$x,df_b$y, radius=10, opacity = 1, fillOpacity = 1) %>%
      addLegend(colors = c("blue"), labels = c("B200"), className='full')  %>%
      addLegend(colors = c("white"), labels = c("C130"), className = 'circle')

  })
}

shinyApp(ui, server)

Output Screenshot:

Shiny Leaflet legend markers same as map markers

1 Answers