Auto sizing Leaflet Widget in Rmd HTML Document

Question

I am trying to host a leaflet map on Rpubs.com, but am facing problems trying to size the map size in the knitted Rmd file before publishing. Ideally, I would like for the map to resize based on the browser window dimensions. There are a couple of examples on Rpubs.com that achieve this, such as this one, but I couldn't find any useful solutions to scale my map.

This is the map as it currently stands. Note the white space at the sides and hard-coded length.

The code chunk I used to generate the Leaflet object is as follows

    ```{r echo = FALSE, fig.height= 10, fig.width = 12, fig.align="left"}
    mata_cams <- leaflet() %>% 
      setView(lat = 1.352754, lng = 103.866692, zoom = 12) %>%
      addTiles(urlTemplate = "http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga", 
               attribution = 
               '<a href = "maps.google.com">Google Maps</a>
               <a href = "https://www.google.com/intl/en-GB_US/help/terms_maps/">(Terms of Service)</a>', 
               group = "Google Maps") %>%
      addProviderTiles(provider = "OneMapSG.Original", group = "OneMapSG") %>% 
      addProviderTiles(provider = "OneMapSG.Grey", group = "OneMapSG (Grey)") %>% 
      setMaxBounds(lat1 = 1.157170,
                   lat2 = 1.476471,
                   lng1 = 103.588712,
                   lng2 = 104.1) %>%
      addCircleMarkers(~location_longitude,
                       ~location_latitude,
                       color = "#f07b0e",
                       radius = 5,
                       group = "Speed Cameras",
                       popup = popup_speed,
                       fillOpacity = 0.5,
                       stroke = FALSE,
                       data = all_speed_cams) %>%
      addCircleMarkers(data = red_light_cams@data,
                       lat = ~LATITUDE,
                       lng = ~LONGITUDE,
                       color = "red",
                       group = "Red Light Cameras",
                       popup = popup_rl,
                       radius = 5,
                       fillOpacity = 0.5,
                       stroke = FALSE) %>%
      addKML(kml_road,
             markerType = "circleMarker",
             fillColor = "blue",
             fillOpacity = 0.5,
             stroke = FALSE,
             markerOptions = leaflet::markerOptions(radius = 5),
             group = "Road Cameras") %>%
      addLegend(colors = c("#f07b0e", "red", "blue"), 
                labels = c("Speed Cameras", "Red Light Cameras", "Road Cameras"),
                values = NULL,
                position = "topright",
                title = "Camera Type") %>%
      addLayersControl(baseGroups = c("Google Maps", "OneMapSG", "OneMapSG (Grey)"),
                       overlayGroups = c("Speed Cameras", "Red Light Cameras", "Road Cameras"),
                       options = layersControlOptions(collapsed = FALSE))

    mata_cams
    ```

All other code chunks in the Rmd use include = FALSE, and the YAML header only includes the line output: html_document.

I have tried

• Using out.width = '100%' and out.height = '100%' in the chunk header. This was suggested in several other SO threads, but has no discernible effect on the knitted map's dimensions.
• Using the widgetframe package. When running the code in RStudio, this creates the output perfectly as publishable output within RStudio (shows in the viewer window, not after the code chunk). But when published it fails to load on Rpubs.com. It also fails to display when knitted - the error (I think the same in both cases, but at least true for the knitted document) is "/rmd_output/0/mata_cams_output_files/figure-html//widgets/widget_unnamed-chunk-6.html?initialWidth=910&childId=htmlwidget-07c11ed0372ca4ab106d&parentTitle=mata_cams_output.utf8.md&parentUrl=http%3A%2F%2F127.0.0.1%3A25451%2Frmd_output%2F0%2F not found"

The solution I finally settled on was to use fig.height and fig.width to manually set the figure dimensions, but this does not allow for the auto-sizing as desired.

Hope to get help with this.

Answer 1

Check out the answers here. Added the leaflet parameter for this specific use case.

Increase width of entire HTML Rmarkdown output

Basically create a style.css in the same location as your file to define the container width.

div.main-container {
  max-width: 1600px !important;
}

Reference in your yaml

output:
  html_document:
    css: style.css

when you create you leaflet object utilizing the width parameter

m1 <- leaflet(width = "100%")%>%
  addTiles()

You could probably do this with inline CSS, but I haven't played around with that.

Visual Examples from an RMD to html. Box plot does not change size.

standard output from rmd.

css and leaflet parameter applied

Answer 2

In order to scale the map to the full size of the browser window (as shown in the example you gave here), you need to publish the map directly from the preview window, and not from an Rmarkdown document.