hans glick hans glick - 2 months ago 14
R Question

Pulsing marker plugin with the R leaflet package

I want to add a pulsing marker to the map I built with the R leaflet package
Here is the plugin I want to use. In order to do it, I wrote the following code from this from this github account

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-icon-pulse",version = "1.0",
src = c(href = "https://raw.githubusercontent.com/mapshakers/leaflet-icon-pulse/master/src/"),
script = "L.Icon.Pulse.js",stylesheet ="L.Icon.Pulse.css")


# 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(-52.520, 13.185, zoom = 5) %>%
# 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) {
var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'});
var marker = L.marker([52.9167,13.9333],{icon: pulsingIcon}).addTo(this);
}")


However, it does not work. I got a grey rectangle instead of a beautiful map with a beautiful pulsing marker. Anyone see something wrong in my code?

Answer

This code works with three remarks:

  • the js and css file are stored locally
  • the icon is displayed correctly in RStudio viewer but it does not pulsate
  • With the "Show in new window" option in the Viewer everything works fine (tested in Firefox 48.0 and Chrome 53.0.2785.116 (64-bit))

This is the code (adjust the src parameter to match your file location):

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-icon-pulse",version = "1.0",
                                 src = "/home/valter/Desktop/test",
                                 script = "L.Icon.Pulse.js",stylesheet ="L.Icon.Pulse.css")





    # 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() %>% addTiles() %>% setView(-52.520, 13.185, zoom = 5) %>%
            # 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) { var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red'}); 
                     var marker = L.marker([13.185,-52.520],{icon: pulsingIcon}).addTo(this); }")