Using Leaflet and htmlwidgets in a Hugo blog post

[This article was first published on The USGS OWI blog , and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

We are excited to use many of the JavaScript data visualizations in R using the htmlwidgets package in future blog posts. Having decided on using Hugo, one of our first tasks was to figure out a fairly straightforward way to incorporate these widgets. This post describes the basic process to get a basic leaflet map in our Hugo-generated blog post.

In this example, we are looking for phosphorus measured throughout Wisconsin with the dataRetrieval package. Using dplyr, we filter the data to sites that have records longer than 15 years, and more than 50 measurements.

pCode <- c("00665")
phos.wi <- readNWISdata(stateCd="WI", parameterCd=pCode,
                     service="site", seriesCatalogOutput=TRUE)

phos.wi <- filter(phos.wi, parm_cd %in% pCode) %>%
            filter(count_nu > 50) %>%
            mutate(period = as.Date(end_date) - as.Date(begin_date)) %>%
            filter(period > 15*365)

Plot the sites on a map:

leafMap <- leaflet(data=phos.wi) %>% 
  addProviderTiles("CartoDB.Positron") %>%
                   color = "red", radius=3, stroke=FALSE,
                   fillOpacity = 0.8, opacity = 0.8,

Next, we use the htmlwidgets package to save a self-contained html file. The following code could be generally hid from the reader using echo=FALSE.


currentWD <- getwd()
dir.create("static/leaflet", showWarnings = FALSE)
saveWidget(leafMap, "leafMap.html")

The html that was saved with the saveWidget function can be called with the iframe html tag.

<iframe seamless src="/static/leaflet/leafMap/index.html" width="450" height="500"></iframe>

When building the site, Hugo converts the “leafMap.html” to “leafMap/index.html”.

One issue for our Hugo theme was that the created widget page is included in the overall blog index. The was fixed by adding a line to the overall index.html layout page to only lists pages with dates above Jan. 1, 1970 (so really, any legitimate date):

{{ if ge $value.Date.Unix 0 }}
  <div class="col-sm-4">
    {{ .Render "grid" }}
{{ end }}

A screenshot of the map was taken to use for the thumbnail in the blog index.


Please direct any questions or comments on dataRetrieval to:

To leave a comment for the author, please follow the link and comment on their blog: The USGS OWI blog . offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)