Last active
November 14, 2020 15:47
-
-
Save helgasoft/799fac40f6fa2561c61cd1404521573a to your computer and use it in GitHub Desktop.
Demo - using Leaflet JS plugins in R and Shiny
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Demo - using Leaflet JS plugins in R and Shiny | |
# directions from https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92 | |
# implementing an Opacity plugin that works for tile-layers only: | |
# https://github.com/dayjournal/Leaflet.Control.Opacity | |
# download js/css files first, see note (2) below | |
library(shiny) | |
library(leaflet) | |
library(htmlwidgets) | |
# workaround for the src/href problem - dnld/save locally first | |
urlf <- 'https://cdn.statically.io/gh/dayjournal/Leaflet.Control.Opacity/master/dist/%s' | |
download.file(sprintf(urlf,'L.Control.Opacity.js'), 'C:/Temp/L.Control.Opacity.js', mode="wb") | |
download.file(sprintf(urlf,'L.Control.Opacity.css'), 'C:/Temp/L.Control.Opacity.css', mode="wb") | |
ctrlOpacity <- htmltools::htmlDependency( | |
name = 'ctrlOpacity', | |
version = "1.0.0", | |
# (1) works in R but not in Shiny due to async loading, see https://github.com/rstudio/shiny/issues/1389 | |
# src = c(href = 'https://cdn.statically.io/gh/dayjournal/Leaflet.Control.Opacity/master/dist/'), | |
# (2) works in R and Shiny - download js/css files, then use this: | |
src = c(file = normalizePath('C:/Temp')), | |
script = "L.Control.Opacity.js", | |
stylesheet = "L.Control.Opacity.css" | |
) | |
registerPlugin <- function(map, plugin) { | |
map$dependencies <- c(map$dependencies, list(plugin)) | |
map | |
} | |
Location <- c("Atlanta ","Los Angeles","Chicago","New York","Dallas","Baltimore","Phoenix","Charlotte","Houston","San Antonio", "Seattle" ) | |
Lat <- c(33.74401,33.82377,41.78798,40.767309,32.88153,39.148492,33.45444,35.2406,29.935842,29.44838,47.714965 ) | |
Lon <- c(-84.56032,-118.2668,-87.7738,-73.978308,-96.64601,-76.796211,-112.32401,-81.04028,-95.398436,-98.39908,-122.127166 ) | |
mdf <- data.frame(Location, Lat, Lon) | |
ui <- fluidPage( leafletOutput("mymap") ) | |
server <- function(input, output, session) { | |
output$mymap <- renderLeaflet({ | |
map <- leaflet() %>% | |
addTiles(layerId='osm', urlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png") %>% | |
addWMSTiles(layerId='radar', baseUrl="http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", | |
layers = "nexrad-n0r-900913", | |
options = WMSTileOptions(format = "image/png", transparent = TRUE), | |
attribution = "Weather data © 2012 IEM Nexrad" | |
) %>% | |
addMarkers(data=mdf, lng=~Lon, lat=~Lat, label=~Location) %>% | |
addControl(tags$div(HTML('<b>Note</b>: clicking sliders works better')), position='bottomright') | |
map %>% | |
registerPlugin(ctrlOpacity) %>% | |
onRender("function(el, x) { | |
var map = this; | |
// not documented weird layer naming = research-time-eating Monster! | |
var tileLayer1 = map.layerManager._byLayerId['tile\\nosm']; | |
var tileLayer2 = map.layerManager._byLayerId['tile\\nradar']; | |
L.control.opacity({ 'osm': tileLayer1, 'radar data' : tileLayer2 }, | |
{ label: 'Tile-layer opacity' }).addTo(map); | |
}") | |
}) | |
} | |
shinyApp(ui, server) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment