Skip to content

Instantly share code, notes, and snippets.

@jcheng5 jcheng5/README.md
Last active Dec 11, 2019

Embed
What would you like to do?
Using arbitrary Leaflet plugins with Leaflet for R

Using arbitrary Leaflet JS plugins with Leaflet for R

The Leaflet JS mapping library has lots of plugins available. The Leaflet package for R provides direct support for some, but far from all, of these plugins, by providing R functions for invoking the plugins.

If you as an R user find yourself wanting to use a Leaflet plugin that isn't directly supported in the R package, you can use the technique shown here to load the plugin yourself and invoke it using JS code.

library(leaflet)
library(htmltools)
library(htmlwidgets)
# This tells htmlwidgets about our plugin name, version, and
# where to find the script. (There's also a stylesheet argument
# if the plugin comes with CSS files.)
esriPlugin <- htmlDependency("leaflet.esri", "1.0.3",
src = c(href = "https://cdn.jsdelivr.net/leaflet.esri/1.0.3/"),
script = "esri-leaflet.js"
)
# A function that takes a plugin htmlDependency object and adds
# it to the map. This ensures that however or whenever the map
# gets rendered, the plugin will be loaded into the browser.
registerPlugin <- function(map, plugin) {
map$dependencies <- c(map$dependencies, list(plugin))
map
}
leaflet() %>% setView(-122.23, 37.75, zoom = 10) %>%
# Register ESRI plugin on this map instance
registerPlugin(esriPlugin) %>%
# Add your custom JS logic here. The `this` keyword
# refers to the Leaflet (JS) map object.
onRender("function(el, x) {
L.esri.basemapLayer('Topographic').addTo(this);
}")
# This example shows the ability to pass extra R data to onRender.
# At the time of this writing it requires a custom build of htmlwidgets:
# devtools::install_github("ramnathv/htmlwidgets@joe/feature/onrender-data")
#
# Track the progress of this functionality at
# https://github.com/ramnathv/htmlwidgets/pull/202
library(leaflet)
library(htmltools)
library(htmlwidgets)
library(dplyr)
heatPlugin <- htmlDependency("Leaflet.heat", "99.99.99",
src = c(href = "http://leaflet.github.io/Leaflet.heat/dist/"),
script = "leaflet-heat.js"
)
registerPlugin <- function(map, plugin) {
map$dependencies <- c(map$dependencies, list(plugin))
map
}
leaflet() %>% addTiles() %>%
fitBounds(min(quakes$long), min(quakes$lat), max(quakes$long), max(quakes$lat)) %>%
registerPlugin(heatPlugin) %>%
onRender("function(el, x, data) {
data = HTMLWidgets.dataframeToD3(data);
data = data.map(function(val) { return [val.lat, val.long, val.mag*100]; });
L.heatLayer(data, {radius: 25}).addTo(this);
}", data = quakes %>% select(lat, long, mag))
@badbye

This comment has been minimized.

Copy link

badbye commented May 9, 2016

Hi, Im using htmlwidgets version 0.6, the last commands in leaflet-heat.R does not work.

leaflet() %>% addTiles() %>%
  fitBounds(min(quakes$long), min(quakes$lat), max(quakes$long), max(quakes$lat)) %>%
  registerPlugin(heatPlugin) %>%
  onRender("function(el, x, data) {
    data = HTMLWidgets.dataframeToD3(data);
    data = data.map(function(val) { return [val.lat, val.long, val.mag*100]; });
    L.heatLayer(data, {radius: 25}).addTo(this);
  }", data = quakes %>% select(lat, long, mag))

Error in onRender(., "function(el, x, data) {\n    data = HTMLWidgets.dataframeToD3(data);\n    data = data.map(function(val) { return [val.lat, val.long, val.mag*100]; });\n    L.heatLayer(data, {radius: 25}).addTo(this);\n  }",  :
  参数没有用(data = quakes %>% select(lat, long, mag))

Checked the onRender function, it does not have a data parameter.

@badbye

This comment has been minimized.

Copy link

badbye commented May 9, 2016

Install the developing version of htmlwidgets on github repo works, thanks.

@mdmadhu

This comment has been minimized.

Copy link

mdmadhu commented Aug 20, 2016

Very helpful. But I've struggled to figure out how I can extend this logic to enable the display of a Google Maps baselayers (via Pavel Shramov's Google plugin for Leaflet). If you could add another gist showing this, I'd be much obliged. Thanks!

@bhaskarvk

This comment has been minimized.

Copy link

bhaskarvk commented Sep 9, 2016

Madhu,
I was able to get a map with Bing baselayer, but not Google, because Google now requires an API key to be specified but Pavel's plugin has no way to specify that. Here's the bing part

library(leaflet)
library(htmltools)
library(htmlwidgets)

bingPlugin <- htmlDependency("leaflet.plugins", "2.0.0",
                          src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/2.0.0/layer/tile/"),
                          script = "Bing.min.js"
)

leaflet() %>% setView(-122.23, 37.75, zoom = 10) %>%
  registerPlugin(bingPlugin) %>%
  onRender("function(el, x) { 
    var imagerySet = 'Aerial';
    var bing = new L.BingLayer('LfO3DMI9S6GnXD7d0WGs~bq2DRVkmIAzSOFdodzZLvw~Arx8dclDxmZA0Y38tHIJlJfnMbGq5GXeYmrGOUIbS2VLFzRKCK0Yv_bAl6oe-DOc',
         {type: imagerySet});
     this.addLayer(bing);
 }")

You can try the following google map part too, but you'll see errors in javascript console indicating that a key needs to be specified.

googlePlugin <- htmlDependency("leaflet.plugins", "2.0.0",
                          src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/2.0.0/layer/tile/"),
                          script = 'Google.js'
)

gMapDeps <- htmlDependency('google.maps','3.0.0',
                             src=c(href='https://rawgit.com/bhaskarvk/345b591a3dab8d0ff54c3bca6a65b1e0/raw/e085c034f0e88d87895f8fca2d0c3442147468cc/'),
                             script=c('googleMapv3.js'))

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>% setView(-122.23, 37.75, zoom = 10) %>%
  registerPlugin(googlePlugin) %>%
  registerPlugin(gMapDeps) %>%
  onRender("function(el, x) {  var ggl = new L.Google(); this.addLayer(ggl); }")
@satishregonda

This comment has been minimized.

Copy link

satishregonda commented Oct 19, 2016

Hi, I tried to implement leaflet-side-by-side plugin using example codes from the above, however, I have no success so far. I could not figured out what I'm doing wrong. Greatly, appreciate your reply.
Thanks,
Here is the code:


library(leaflet)
library(htmltools)
library(htmlwidgets)

LeafletSideBySidePlugin <- htmlDependency("leaflet-side-by-side","2.0.0",
                                          src = c(href="https://github.com/digidem/leaflet-side-by-side"),
                                          script="leaflet-side-by-side.js")

registerPlugin <- function(map, plugin) {
   map$dependencies <- c(map$dependencies, list(plugin))
   map
}

leaflet() %>% addTiles() %>%
   setView(lng = 12, lat = 50, zoom = 4) %>%
   # Register leaflet-side-by-side plugin on this map instance
   registerPlugin(LeafletSideBySidePlugin) %>%
   onRender("
            function(el, x) {
var mylayer1 = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            maxZoom: 18
            })
var mylayer2 = L.tileLayer(
          '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
            maxZoom: 14
            })
            L.control.sideBySide(mylayer1, mylayer2).addTo(this);
            ")
@klupido

This comment has been minimized.

Copy link

klupido commented Oct 26, 2016

Very helpful, thanks!! I can get the two examples to work. However, I'm struggling with integrating the leaflet.polylineoffset.js plug-in. The java code works when I save it as a html document and (at least in Chrome) the squares are next to each other but it does not work in R. Anyone an idea what I'm missing? Thank you!!

## Loading libraries
library(leaflet)
library(htmltools)
library(htmlwidgets)
library(shiny)

ui <- 
  bootstrapPage(
      tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
      leafletOutput("map", width = "100%", height = "100%")
          )    


server = function(input, output) {

polylineoffset_Plugin <- htmlDependency("Leaflet.PolylineOffset", "1.0.1",
                                          src = c(href = "https://raw.githubusercontent.com/bbecquet/Leaflet.PolylineOffset/master"),
                                          script = "leaflet.polylineoffset.js"
  )

  registerPlugin <- function(map, plugin) {
    map$dependencies <- c(map$dependencies, list(plugin))
    map
  }

  output$map <- renderLeaflet({
    leaflet() %>% 
    addTiles() %>% 
    registerPlugin(polylineoffset_Plugin) %>%
      onRender('function(el, x){

               L.polyline([
               [48.3, 0.1],
               [48.3, 0.7],
               [48.7, 0.7],
               [48.7, 0.1],
               [48.3, 0.1]
               ], {
               fillColor: "none",
               weight: 4,
               lineJoin: "miter",
               color: "green"
               }).addTo(this);
               L.polyline([
               [48.3, 0.1],
               [48.3, 0.7],
               [48.7, 0.7],
               [48.7, 0.1],
               [48.3, 0.1]
               ], {
               offset: -4,
               fillColor: "none",
               weight: 4,
               lineJoin: "miter",
               color: "red"
               }).addTo(this);

                }')

   }) # end: renderLeaflet
} # end server

shinyApp(ui, server)
@bhaskarvk

This comment has been minimized.

Copy link

bhaskarvk commented Oct 28, 2016

@satishregonda & @klupido, we have found out that using a externally hosted javascript file may not always work. It is best if you try your respective examples by downloading the plugin javascript (and CSS and image files if any) locally.

Then instead of src = c(href = "https:/..."),, do src = normalizePath(<path to directory where the plugin files are downloaded>),

@LeonaLim

This comment has been minimized.

Copy link

LeonaLim commented Nov 1, 2016

I can't seem to get the leaflet.defaultextent plugin to work as well even though there is no error. Please assist.

leafletPlugin <- htmlDependency("leaflet.defaultextent", "0.0.3",
                                src = normalizePath("www/Leaflet.defaultextent-master"),
                                script = "leaflet.defaultextent.js"
)

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>%   
  addTiles() %>%  
  fitBounds(110, -10, 120, 20)  %>%

  registerPlugin(leafletPlugin) %>%
  onRender('function(el, x) {
           var map = L.map("map", {center: mapCenter, zoom: 14, defaultExtentControl: true });
           L.control.defaultExtent()
           .addTo(map);')

@GaelCobrenord

This comment has been minimized.

Copy link

GaelCobrenord commented Jan 9, 2017

Hello, thank you for this tip it seems to be very useful. Unfortunately, I have not managed to make the L.control.mousePosition works with this method within a shiny app. Whenever the plugin works if we launch the leaflet by itself (outside the shiny app). The onRender function seems to be the cause of the dysfunction.

Here there is a reproducible example of my code (you just have to load the .js and .css files locally, doesn’t work with the link (https://github.com/ardhi/Leaflet.MousePosition/tree/master/src)):

rm(list=ls(all=TRUE))
library(shiny)
library(leaflet)
library(sp)
library(htmltools)
library(htmlwidgets)

path <- “YourPath”

shape <- Polygon(data.frame(lon = c(-5,-7,-6), lat = c(47, 47, 52)))
shape <-Polygons(list(shape), ID = 1)
shape <- SpatialPolygons(list(shape), proj4string = CRS("+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"))
shape <- SpatialPolygonsDataFrame(shape, data.frame(ID= 1))

mouse_plug <- htmlDependency("Leaflet.MousePosition", "0",
  src = normalizePath(path),
  script = "L.Control.MousePosition.js",
  stylesheet = "L.Control.MousePosition.css"
)
registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}
ui <- fluidPage(
  leafletOutput("map")

)

server <- function(input, output, session) {
	output$map <- renderLeaflet({
		leaflet() %>%
			addPolygons(data = shape, group = "Fond de carte", color = "black", weight = 0.5, fillColor = rgb(238,197,135, maxColorValue = 255), opacity = 1) %>%  
			addLayersControl(
				overlayGroups = "triangle",
				options = layersControlOptions(autoZIndex = TRUE)
			)%>%
			registerPlugin(mouse_plug) %>%
			onRender("function(el, x) {
				 L.control.mousePosition().addTo(this);}"
			)
		  
	})
	
}

shinyApp(ui, server)

I am sorry but I do not know anything about JS code, I am just a R user and maybe it is obvious but I am totally stuck with that and I really need this plugin for my work.

I would be very greatful if you can help me !

Thank you

Gaël

@GaelCobrenord

This comment has been minimized.

Copy link

GaelCobrenord commented Jan 10, 2017

OK I'm sorry I didn't used the right keywords for my search, I felt on that: rstudio/shiny#1389
But I think I don't well understand the solution. I tried to install different versions of htlmlwidgets (included the development version) but it still doesn't work.

@GaelCobrenord

This comment has been minimized.

Copy link

GaelCobrenord commented Jan 10, 2017

Problem solved: I have just had to reboot R after uninstalling the old version of htmlwidgets and then reinstall the 0.8 version with the fixed 237 issue.

Sorry for the trouble

Gaël

@richardblades

This comment has been minimized.

Copy link

richardblades commented Jan 27, 2017

Hi, many thanks for the above insight... Its aloud me to load the Bing "Roads" basemap quite nicely... But I'm having real trouble applying the grayscale plugin to that layer... (I've tried many different methods). Can anyone help? Many thanks, Richard.

registerPlugin <- function(map, plugin) {
map$dependencies <- c(map$dependencies, list(plugin))
map
}

bingPlugin <- htmlDependency("leaflet.plugins", "2.0.0",
src=c(href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/2.0.0/layer/tile/"),
script="Bing.min.js")

grayscalePlugin <- htmlDependency("leaflet-grayscale", "0.0.0" ,
src=c(href="https://github.com/Zverik/leaflet-grayscale"),
script="TileLayer.Grayscale.js")

leaflet() %>%
registerPlugin(grayscalePlugin) %>%
registerPlugin(bingPlugin) %>%
onRender("function(el, x) {
var imagerySet='Road';
var bing=new L.BingLayer.grayscale(
'IGQNg4zQGQnWnhrgeRtx~-_iDYzKzo9RJjvpr-6mMgg~AkD6k2dx3I-4tQgUUh1lITbm-ts2iumSNTmAd5qtIWCJPIoptszrzXs6-mk9_IcA',
{type: imagerySet});
this.addLayer(bing);
}") %>%
addPolygons(data=Building, color="black", fill=TRUE, fillColor="pink",
group="Building", opacity=0.3, weight=0.5)

@rickyars

This comment has been minimized.

Copy link

rickyars commented Mar 24, 2017

Like everyone else, I'm also having problems adapting the example. My question is this: what's the best way to debug problems? All I know is that it's not working for me, but no error messages are reported. I tried opening the map in the browser and inspecting but nothing appears on the console. Suggestions?

@rickyars

This comment has been minimized.

Copy link

rickyars commented Mar 29, 2017

Any idea why I can't get this to work when using leafletProxy?

@rickyars

This comment has been minimized.

Copy link

rickyars commented Mar 30, 2017

Another question: I'm trying to pass an icon to a marker. Using a URL it works file. But when I try to grab the icon locally from disk I get a blue box with a question mark. I'm presuming that it can't find the icon. So what is the "working" directory for the javascript that's run in OnRender?

@rickyars

This comment has been minimized.

Copy link

rickyars commented Mar 30, 2017

One more thing for others looking for help with this. You can't use forEach in your inside OnRender. I think this has to do with the fact that this has special meaning in forEach - I'm not a javascript programmer so that's about the extent of my knowledge - and since this is the map they don't play nice together. Convert your forEach to a for-loop.

@Surya1987

This comment has been minimized.

Copy link

Surya1987 commented Apr 13, 2017

Hi All,

I want to add Leaflet.AreaSelect Plugin to map using R. I want to select an area on the map and need to know the information of the points/circles inside that. Kindly share the code if you have worked on.

@roberrrt-s

This comment has been minimized.

Copy link

roberrrt-s commented Jul 5, 2017

This solution, while tested, keeps giving me the following error:
$ operator is invalid for atomic vectors

Anyone has a clue what's the problem here?

@Bignoozer

This comment has been minimized.

Copy link

Bignoozer commented Nov 17, 2017

Hello everybody,

First, I'm not sure it's the good place to post so sorry if it's not.

I'm trying to add a rotatedMarker in my leaflet map using a leafletProxy.
Unfortunatly it's not working.

Puting it directly in the leaflet map works fine.

here is the code.

`
library(shiny)
library(dplyr)
library(leaflet)
library(htmltools)
library(htmlwidgets)

      angle <- 20
      
      travel <- data.frame("time" = c("6/20/17 13:32", "6/20/17 13:33", "6/20/17 13:34", "6/20/17 13:35", "6/20/17 13:36", "6/20/17 13:37"),
                           "lat" = c(59.313833, 59.312333, 59.309897, 59.307728, 59.300728, 59.298184),
                           "lon" = c(18.070431, 18.07431, 18.085347, 18.076543, 18.080761, 18.076176),
                           stringsAsFactors = F) %>%
      mutate(
        time = as.POSIXct(time, format = "%m/%d/%y %H:%M")
      )
      
      rotatedMarker <- htmlDependency(
        "Leaflet.rotatedMarker",
        "0.1.2",
        src = normalizePath("./www/js"),
        script = "leaflet.rotatedMarker.js"
      )
      
      registerPlugin <- function(map, plugin) {
        map$dependencies <- c(map$dependencies, list(plugin))
        map
      }
      
      ui <- fluidPage(
        sliderInput(inputId = "time", label = "Time", min = min(travel$time), 
                    max = max(travel$time),
                    value = min(travel$time),
                    step=60, # set to increment by 60 seconds, adjust appropriately
                    animate= animationOptions(interval = 2000, loop = F)),
        leafletOutput("mymap")
      )
      
      server <- function(input, output, session) {
        
        points <- reactive({
          travel %>% 
            filter(time == input$time)
        })
        
        history <- reactive({
          travel %>%
            filter(time <= input$time)
        })
        
        output$mymap <- renderLeaflet({
          
          req(input$time)
          
          m <- leaflet(travel) %>% 
            addTiles(urlTemplate = "map/tiles/{z}/{x}/{y}.png", 
                     option=tileOptions(tms = T, continuousWorld = T, minZoom="4",maxZoom="4")) %>%
            addPolylines(lng = ~lon,
                         lat = ~lat,
                         data = travel) %>%
            fitBounds(~min(lon),
                      ~min(lat),
                      ~max(lon),
                      ~max(lat))
        })
        
        observe({
          proxy <- leafletProxy("mymap")
      
          proxy %>% clearControls()
          if (input$time) {
            
            data <- points()
            ind <- which(travel$time == data$time)
            angle <- angle * ind
            
            proxy %>% clearMarkers() %>%
              registerPlugin(rotatedMarker) %>%
              onRender(paste0("function(el, x) {
                              var planeIcon = L.icon({iconUrl: 'images/icon_plane.png', iconAnchor: [16, 16]});
                              var pathPattern = L.marker([", data$lat[1], ",", data$lon[1], "], {icon: planeIcon, rotationAngle:", angle, "}).addTo(mymap);
                              }"))
          }
        })
      
        session$onSessionEnded(stopApp)
      }
      
      shinyApp(ui, server)

`

Thanks for the help.

@JCGTech

This comment has been minimized.

Copy link

JCGTech commented Feb 12, 2018

YES! Thank you

@mimaque

This comment has been minimized.

Copy link

mimaque commented Mar 21, 2018

@bhaskarvk 's comment of substituting the src call inside htmlDependency for normalizePath and downloading the zipfile to the specified path allowed me to run locally his pulsating marker example, which I could not run before

@laurapoggio-sptools

This comment has been minimized.

Copy link

laurapoggio-sptools commented Apr 18, 2018

I am trying to use the SideBySide plugin, however without any luck at the moment. I tried the suggestion of downloading the file and this answer here. Below what I am trying to run (using chrome under fedora 27). I can see the first layer but not the handle to compare the two.

Any help would be greatly appreciated. Thanks

LeafletSideBySidePlugin <- htmlDependency("leaflet-side-by-side","2.0.0",
                                          src = normalizePath("/full/path/to/folder/with/js"),
                                          script="leaflet-side-by-side.js")

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>%
 registerPlugin(LeafletSideBySidePlugin) %>%
  onRender("
           function(el, x) {
           var mylayer1 = L.tileLayer(
           'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
           maxZoom: 18
           }).addTo(this);
           var mylayer2 = L.tileLayer(
           '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
           maxZoom: 14
           }).addTo(this);
           L.control.sideBySide(mylayer1, mylayer2).addTo(this);
          } ")

@chintanp

This comment has been minimized.

Copy link

chintanp commented May 10, 2018

This gist is really helpful and on point and exactly what I was looking for. I tried using the method to use the "Leaflet playback" plugin.

My code looks like this:

# Draw a line from startPoint to Endpoint on the map
                    leafletProxy(mapId = "map") %>%
                        onRender(
                            "function(el, x, data) {
                                // Initialize playback
                                var playback = new L.Playback(this, data, onPlaybackTimeChange);
                                console.log('Inside leaflet playback');
                            };
                            
                            // A callback so timeline is set after changing playback time
                            function onPlaybackTimeChange (ms) {
                                //timeline.setCustomTime(new Date(ms));
                            };", data = geojson_ends
                        )

I register the plugin with the first call to leaflet where I create the map. Two functions are created inside the onRender as L.PLayback needs a callback function onPalybackTimeChange. The leafletproxy is just used for updating the plot. As such I don't think this is working. No error, just no change in behavior.

  • Is there a way to debug this? I tried putting a console.log to see it gets printed, no luck.
  • Is there a way I can use "Developer tools" to inspect the code in the the browser? If yes, which file should I look for? Apparently, shiny creates a bunch of files.
  • Any other hints/comments?
@Jigar-S

This comment has been minimized.

Copy link

Jigar-S commented Dec 31, 2018

This is really helpful information. We are trying implement the 'leaflet-measure' plugin but it simply does not render properly (renders without any icons being displayed). This post seems like a promising solution, but on trial and error, it fails to load any plugins that are of type leaflet-control. Dunno if this is the correct place to post, but I would really appreciate some help to rectify the issue.
Here's my code to use the leaflet-control type plugins using this method.

`library(leaflet)
library(htmltools)
library(htmlwidgets)

LeafletMeasure <- htmlDependency("leaflet-measure","3.1.0",
src = c(href="https://github.com/ljigis/leaflet-measure/src"),
script="leaflet-measure.js",
stylesheet = "https://github.com/ljigis/leaflet-measure/scss/leaflet-measure.scss")

registerPlugin <- function(map, plugin) {
map$dependencies <- c(map$dependencies, list(plugin))
map
}

leaflet() %>% addTiles() %>%
setView(lng = 12, lat = 50, zoom = 4) %>%
registerPlugin(LeafletMeasure) %>%
onRender("
function(el, x) {
measureControl.addTo(this);}")`

The plugin has a scss that is in a different folder from the standard src folder. I have tried referencing the file through the Github repository as well as local copy.

@jcheng5

This comment has been minimized.

Copy link
Owner Author

jcheng5 commented Feb 28, 2019

Wow, sorry, I didn't know there were so many messages posted here over the years. @Jigar-S, leaflet-measure is already bundled with the leaflet R package, just do leaflet() %>% addMeasure() for example.

For the rest of you, I'd focus on the following for debugging:

  1. Are my JS/CSS resources being properly attached? (BTW, you can't use .scss or .less files from htmlDependency directly, they have to be compiled to .css first for the browser to understand them.) You can use Chrome Developer Tools to see if there are any errors in the Console tab about JS and CSS URLs not being downloaded, and look in the Elements tab to see if the proper JS/CSS links are in the <head> of the document.
  2. Am I getting any JS errors? Again, use the Chrome Developer Tools' Console tab to see if there are errors. If there are, you need to fix those first.
  3. If the previous steps pass, or you have trouble figuring out the cause of the errors, then try the JS Debugger. One easy way is to add the statement debugger; to the start of your onRender function's JS function. Then, if you load the page with Chrome Developer Tools enabled, the JS debugger should pause just inside your JS function. With the debugger paused, you can examine the values of this, el, x, etc. to see if everything matches your expectations.

If you have continued problems, feel free to file an issue on the rstudio/leaflet repository, or drop by https://community.rstudio.com/c/shiny.

@helgasoft

This comment has been minimized.

Copy link

helgasoft commented May 20, 2019

@jcheng5, thank you for this thread and all the directions.
Sharing our successful integration of one JS plugin for tile-layer opacity.
Shiny app code is here. The js/css files have to be downloaded before execution.
The bulk of the work was to find the Leaflet JS 'hook-up' objects, which are not documented.

@micahwilhelm

This comment has been minimized.

Copy link

micahwilhelm commented Oct 30, 2019

@helgasoft, thank you for sharing your code! Do you know the 'hook-up' object syntaxes for polygons, polylines or markers?
My attempt to integrate the leaflet-groupedlayercontrol plugin have so far been unsuccessful. Thanks in advance for any tips you might offer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.