Weird Leaflet Map Legend Display

Question

pal <- colorFactor(palette = "Set1", domain = MFT_tidy$Parent_Organization)
popup_text <- paste(MFT_tidy$Facility_Name, "<br>",
                    "Facility_Phone:", MFT_tidy$Facility_Phone, "<br>",
                    "Vendor_Name:", MFT_tidy$Vendor_Name)
layer_groups <- c("OSM (default)", "Toner", "Positron", "NatGeoWorldMap")

leaflet(MFT_tidy, width = "100%") %>% 
    addTiles(group = "OSM (default)") %>%
    addProviderTiles(providers$Stamen.Toner, group = "Toner") %>% 
    addProviderTiles(providers$CartoDB.Positron, group = "Positron") %>% 
    addProviderTiles(providers$OpenTopoMap, group = "OpenTopoMap") %>% 
    addProviderTiles(providers$Esri.NatGeoWorldMap, group = "NatGeoWorldMap") %>% 
    addCircleMarkers(lng = ~longitude, lat = ~latitude,
                     color = ~pal(Parent_Organization),
                     stroke = FALSE, fillOpacity = 1,
                     label = ~Facility_Name,
                     popup = popup_text,
                     clusterOptions = markerClusterOptions() ) %>% 
    addLegend(position = "topright", pal = pal, 
              values = ~Parent_Organization,
              labels = ~Parent_Organization,
              title = "Parent Organization",
              opacity = 1) %>% 
    addLayersControl(baseGroups = c("OSM (default)", "Toner", "Positron", 
                                    "OpenTopoMap", "NatGeoWorldMap"),
                     position = "bottomright") %>% 
    addMeasure(
        position = "bottomleft",
        primaryLengthUnit = "meters",
        primaryAreaUnit = "sqmeters",
        activeColor = "#3D535D",
        completedColor = "#7D4479") %>% 
    addEasyButton(easyButton(
        icon = "fa-globe", title = "Zoom to Original Level",
        onClick = JS("function(btn, map){ map.setZoom(6); }"))) %>%
    addEasyButton(easyButton(
        icon = "fa-crosshairs", title = "Locate Me",
        onClick = JS("function(btn, map){ map.locate({setView: true}); }")))

The code I used to create the map is as above:

There are obvious something wrong with the weird display of legend. I do not know how to correct it. I really cannot find anything wrong in the addLegend function.

rfineman rfineman · Accepted Answer · 2018-01-19T16:20:23

Possible duplicate.

Problem is not with the addLegend function, but rather the zoom in the browser. You can fix this by adjusting CSS on the legend

Copying @Adam's code:

ui <- bootstrapPage( 
  tags$style(type="text/css", "div.info.legend.leaflet-control br {clear: both;}"),
...
)

Weird Leaflet Map Legend Display

1 Answers