shiny-external-plugin.R

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

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

server <- function(input, output, session) {

  # Convert the JS and CSS from
  # https://github.com/mapshakers/leaflet-icon-pulse/tree/master/src
  # to proper URLs using rawgit.com
  pluginDependency <- htmlDependency(
    "leaflet-icon-pulse",version = "1.0",
    src = c(href="https://rawgit.com/mapshakers/leaflet-icon-pulse/master/src/"),
    script = "L.Icon.Pulse.js",stylesheet ="L.Icon.Pulse.css"
  )

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

  output$map <- renderLeaflet({
    leaflet() %>%
      addProviderTiles("CartoDB.DarkMatter") %>%
      registerPlugin(pluginDependency) %>%
      setView(-122.4105513,37.78250256, zoom = 12) %>%
      onRender("function(el,x) {
               var pulsingIcon =
                 L.icon.pulse({iconSize:[5,5],color:'red',heartbeat:0.5});
               var pulsingIcon2 =
                 L.icon.pulse({iconSize:[10,10],color:'orange',heartbeat:2});
               var marker =
                 L.marker([37.78,-122.41],{icon: pulsingIcon}).bindPopup(
                   '<b>Hello world!</b><br>I am a popup.').openPopup().addTo(this);
               var marker =
                 L.marker([37.75,-122.39],{icon: pulsingIcon2}).addTo(this);
               }")
  })
}

shinyApp(ui, server)