Using Leaflet and htmlwidgets in a Hugo-generated page
Using the R packages dataRetrieval, leaflet, and htmlwidgets, the workflow for a Hugo page is explained.
We are excited to use many of the JavaScript data visualizations in R using the htmlwidgets package in future 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 page.
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.
library(dataRetrieval)
pCode <- c("00665")
phos.wi <- readNWISdata(stateCd="WI", parameterCd=pCode,
service="site", seriesCatalogOutput=TRUE)
library(dplyr)
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:
library(leaflet)
leafMap <- leaflet(data=phos.wi) %>%
addProviderTiles("CartoDB.Positron") %>%
addCircleMarkers(~dec_long_va,~dec_lat_va,
color = "red", radius=3, stroke=FALSE,
fillOpacity = 0.8, opacity = 0.8,
popup=~station_nm)
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.
library(htmlwidgets)
library(htmltools)
currentWD <- getwd()
dir.create("static/leaflet", showWarnings = FALSE)
setwd("static/leaflet")
saveWidget(leafMap, "leafMap.html")
setwd(currentWD)
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="100%" height="500"></iframe>
One issue for our Hugo theme was that the created widget page is included in the overall site 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" }}
</div>
{{ end }}
A screenshot of the map was taken to use for the thumbnail in the blog index.
Questions
Please direct any questions or comments on dataRetrieval to: https://github.com/USGS-R/dataRetrieval/issues
Categories:
Related Posts
Calculating Moving Averages and Historical Flow Quantiles
October 25, 2016
This post will show simple way to calculate moving averages, calculate historical-flow quantiles, and plot that information. The goal is to reproduce the graph at this link: PA Graph.
Using the dataRetrieval Stats Service
October 5, 2016
Introduction This script utilizes the new dataRetrieval package access to the USGS Statistics Web Service. We will be pulling daily mean data using the daily value service in readNWISdata, and using the stats service data to put it in the context of the site’s history.
Hydrologic Analysis Package Available to Users
July 26, 2022
A new R computational package was created to aggregate and plot USGS groundwater data, providing users with much of the functionality provided in Groundwater Watch and the Florida Salinity Mapper.
Large sample pulls using dataRetrieval
July 26, 2022
dataRetrieval is an R package that provides user-friendly access to water data from either the Water Quality Portal (WQP) or the National Water Information Service (NWIS).
dataRetrieval Tutorial - Using R to Discover Data
January 8, 2021
R is an open-source programming language. It is known for extensive statistical capabilities, and also has powerful graphical capabilities. Another benefit of R is the large and generally helpful user-community.