Leaflet: NA value not positioned correctly in legend for continuous variables

[Harrison8]

Issue: In legends for continuous variables, the NA value is out of line with the rest of the color scale. It is positioned to the right, causing the legend box to be very wide.

Workaround: Add CSS to the leaflet map using this code from the htmlwidgets package:

css_fix <- "div.info.legend.leaflet-control br {clear: both;}" # CSS to correct spacing
html_fix <- htmltools::tags$style(type = "text/css", css_fix)  # Convert CSS to HTML
m %<>% htmlwidgets::prependContent(html_fix)                   # Insert into leaflet HTML code

Explanation of issue and workaround: The NA value used to fall below and in line with the rest of the color scale, with a line break between the color scale and the NA value. The line break requires an HTML tag <br clear:"both"> to position it correctly in line with the rest of the color scale. The HTML tag has been removed from Leaflet, allowing the NA value to float to the right. (Leaflets produced in August of 2017 did not have this issue. Also, for discrete variables, there is no line break, and the NA value is correctly positioned in line with the other legend entries.)

Currently, the legend HTML is formatted like this:

<div class="info legend leaflet-control">     # Opens the legend section
  <div style="margin-bottom:3px">...</div>    # Legend title
  <div style="float: left;">...</div>         # Color scale
  <div style="float: left;">...</div>         # Corresponding number scale
  <br>                                        # Line break
  <div>...</div>                              # NA color and the text "NA"

It results in the NA value moving to the right of the other legend entries, rather than below them:

The line break used to have an HTML tag <br clear:"both"> that resulted in the NA value falling in the correct place:

I don't think this issue is related to the R code that I've used, but here it is. map is a SpatialPolygonsDataFrame.

pal <- colorNumeric(
      palette = brewer.pal(9, "BuPu"),
      domain = map@data$var)

m <- leaflet(map) %>%
  addTiles() %>%
  addPolygons(fillColor = ~pal(var)) %>%
  addLegend(
    pal = pal, 
    values = ~var, 
    title = "Bachelor's Degree<br>or Higher",
    position = "bottomright")

saveWidget(m, "output.html")

[jzadra]

I have this issue as well.

[everetr]

The proposed workaround works. Thank you very much, @Harrison8. I'm commenting to add that the prependContent() function comes from the htmlwidgets package, in case anyone is confused.

[jzadra]

The proposed workaround works. Thank you very much, @Harrison8. I'm commenting to add that the prependContent() function comes from the htmlwidgets package, in case anyone is confused.

Did I miss something? Where is the workaround from @Harrison8 ?

[Harrison8]

@jzadra The workaround is the first box of code. I updated the comment to make the workaround easier to find!
@everetr Thank you for pointing that out. I added the htmlwidgets information into my explanation to make it more visible.

[manterd]

I'm trying to add this in a shiny environment but prepend does not work. I get the following error: Ignoring prepended content; prependContent can't be used in a Shiny render call.

Also adding the following to my css doesn't work.

.info .legend .leaflet-control br {
clear: both;
}

Any suggestions?

[jcnoordsij]

I'm trying to add this in a shiny environment but prepend does not work. I get the following error: Ignoring prepended content; prependContent can't be used in a Shiny render call.

Also adding the following to my css doesn't work.

.info .legend .leaflet-control br {
clear: both;
}

Any suggestions?

I was able to get it working in Shiny by converting to a raw html string with as.character() and then inserting that into my UI:

css_fix <- "div.info.legend.leaflet-control br {clear: both;}"
html_fix <- as.character(htmltools::tags$style(type = "text/css", css_fix))

shinyUI(fluidPage(
    HTML(html_fix),
    ...
))

[JosephCrispell]

In case anyone is looking for an easy in-line fix. I just created two palettes:

  qpal <- colorNumeric("Reds", values)
  qpalWithoutNA <- colorNumeric("Reds", values, na.color=rgb(0,0,0,0))

I then fed into the leaflet plotting commands:

  # Create initial map using the shape file boundaries
  leaflet(boundaries) %>%

    # Set the zoom:
    setView(lng=latLong[2], lat=latLong[1], zoom=zoom) %>%

    # Add polygons for each health department
    addPolygons(weight=2, fillColor=~qpal(values)) %>%

    # Add a legend
    addLegend(values=values, pal=qpalWithoutNA, title="Legend", na.label="")

This effectively removes the NA label from the legend.