d3heatmap() after leaflet() in R Markdown causes addLegend() to disappear

Question

I am working on an R Markdown document ( *.Rmd ) in RStudio with HTML widgets. I have a map created by functions in the leaflet package, including a legend created by the addLegend() function. This is then followed by a heatmap created by the d3heatmap() function of the d3heatmap package. When I run the code using Run All Chunks, the output that appears in the Viewer pane looks fine. When I run the code using Knit HTML, the output that appears in the pop up window is missing the legend.

What do I need to do in order to keep the legend displayed on the map, even when I display a heatmap afterwards?

Below is an example that you can try for yourself. It's based on http://rstudio.github.io/leaflet/legends.html and requires you to download the countries.geojson data from http://data.okfn.org/data/datasets/geo-boundaries-world-110m .

Using Knit HTML on this example, if I include the heatmap , using {r, eval=TRUE} , there is no legend on the leaflet map. If I exclude the heatmap , using {r, eval=FALSE} , there is a legend on the leaflet map.

I am using R version 3.2.3 (2015-12-10), Platform: x86_64-w64-mingw32/x64 (64-bit), Running under: Windows 7 x64 (build 7601) Service Pack 1, with RStudio Version 0.99.491 and packages d3heatmap_0.6.1, rgdal_1.1-3, sp_1.2-1, and leaflet_1.0.0.

---
title: "Testing"
output:
  html_document: default
---

Some text.

```{r, message=FALSE}
library(leaflet)
library(rgdal)

countries <- readOGR("json/countries.geojson", "OGRGeoJSON",
  verbose=FALSE)

map <- leaflet(countries) %>% addTiles()
pal <- colorNumeric(
  palette = "YlGnBu",
  domain = countries$gdp_md_est)
map %>%
  addPolygons(stroke = FALSE, smoothFactor = 0.2, fillOpacity = 1,
    color = ~pal(gdp_md_est)) %>%
  addLegend("bottomright", pal = pal, values = ~gdp_md_est,
    title = "Est. GDP (2010)",
    labFormat = labelFormat(prefix = "$"),
    opacity = 1)
```

Some text.

```{r, eval=TRUE}
library(d3heatmap)
d3heatmap(mtcars)
```

Answer 1

Both leaflet and d3heatmap share the same CSS class called .info When I uncheck the css options for .info, then you can again see the legend.

You have to manually re-assign the CSS class using the className parameter such as the following: addLegend("bottomright", className = "legendbox", pal = pal, values = ~gdp_md_est,

You will have to append additional CSS settings for the new class.