trafficonese / leaflet.extras

Extra functionality for leaflet R package.
https://trafficonese.github.io/leaflet.extras/
GNU General Public License v3.0
211 stars 74 forks source link

Leaflet.velocity #175

Closed ghost closed 5 months ago

ghost commented 4 years ago

I'm trying to work with leaflet.velocity plugin. Does anyone know how to do it? or have a working example?

trafficonese commented 4 years ago

I know how to make a shiny app work with the velocity plugin, but I would also be interested in knowing how to incorporate that in a leaflet.extras function. I tried to add the reachability plugin but failed for now.

Would it be possible to make a helpfile/vignette on how to incorporate a plugin to that package? Especially how to build the sourceMappings (.map files), the package.json, the webpack.config.js, what to put in /bindings, /build, /src, etc..?

For the following app to work, one needs to download the leaflet-velocity.css and leaflet-velocity.js files from here and put them in the /www folder of the app. It is based on this Gist.

library(shiny)
library(httr)
library(htmlwidgets)
library(leaflet)

windjson <- httr::GET("https://raw.githubusercontent.com/danwild/leaflet-velocity/master/demo/wind-global.json")
content <- rawToChar(windjson$content)

ui <- fluidPage(
  tags$head(tags$link(href = "leaflet-velocity.css")),
  tags$head(tags$script(src = "leaflet-velocity.js")),
  leafletOutput("map")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      setView(-122.23, 37.75, zoom = 10) %>%
      onRender(paste0("function(el, x) {
                  L.velocityLayer({
                    displayValues: true,
                    displayOptions: {
                      velocityType: 'Global Wind',
                      displayPosition: 'bottomleft',
                      displayEmptyString: 'No wind data'
                    },
                    data: ",content,",
                    maxVelocity: 15
                  }).addTo(this);
                }"))
  })
}

shinyApp(ui, server)
ghost commented 4 years ago

It works! Thank you very much!

trafficonese commented 4 years ago

There is now leaflet.extras2, which supports this plugin.