How to arrange HTML Widgets inside of a RMarkdown Document (PDF, HTML)

Question

I'm working in a R notebook and would like use it to create two ouptuts: an HTML document and PDF document.

My analysis includes leaflet maps (html widgets), which is causing problems when I knit the notebook to a PDF document. Thanks to the webshot function now included in the knitr package, "knitr will try to generate static screenshots for HTML widgets automatically using the webshot package" (https://github.com/yihui/knitr/blob/master/NEWS.md).

This works fine when my output is a series of leaflet maps stacked on top of each other, but I would like to group the maps together in a more concise row arrangement (see image below).

Here's a reproducible example of my R notebook: gist

Unfortunately, when I try to knit this to a PDF document I get the following error message:

Error: Functions that produce HTML output found in document targeting latex output.
Please change the output type of this document to HTML. Alternatively, you can allow
HTML output in non-HTML formats by adding this option to the YAML front-matter of
your rmarkdown file:

  always_allow_html: yes

Note however that the HTML output will not be visible in non-HTML formats.

How can I get this single-row arrangement in a PDF document?

Answer 1

If I understand you correctly, then all you have to do is to add some chunk options. The key here is the option fig.show='hold' which determines that all plots in the chunk will be collected and displayed together at the very end of the chunk.

---
title: "R Notebook"
output:
  pdf_document: 
    keep_tex: yes
  html_notebook: default
---

###Default Arrangement
```{r, echo=FALSE,message=FALSE, fig.height=4, fig.width=2, fig.show='hold'}
#devtools::install_github("wch/webshot")

library(leaflet)
library(htmltools)
library(RColorBrewer)

m1 <- leaflet(quakes) %>% 
        addTiles() %>% 
        addMarkers(lng=174.768, lat=-36.852)

m2 <- leaflet(quakes) %>% 
        addProviderTiles("Esri.WorldGrayCanvas") %>% 
        addMarkers(lng=174.768, lat=-36.852)

m3 <- leaflet(quakes) %>%
        addProviderTiles("Stamen.Toner") %>%
        addMarkers(lng=174.768, lat=-36.852)
m1
m2
m3
```

If you want to have this format for both pdf and html output you could add this script to the body ofyour Rmd document (not inside a chunk):

<script>
  $(document).ready(function() {
    $('.leaflet').css('float','left');
  });
</script>

Trying to add this CSS snippet via the chunk option out.extra does not work, since LaTeX does not know how to deal with CSS. Though the JS code is ignored when compiled to pdf.