闪亮的传单图例标记与地图标记相同

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.

Answer 1

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: