How to animate a flux over a line in a leaflet map in R?

Question

How to animate a flux over a line in a leaflet map in R ?

Is there a way to use leaflet-ant-path (https://github.com/rubenspgcavalcante/leaflet-ant-path) in R ?

library(sf)
library(leaflet)

pts <-  matrix(1:10, , 2)
ls1 <-  st_linestring(pts)
leaflet() %>% 
   addTiles() %>% 
   addPolylines(data= ls1)

Answer 1

I am not sure what your code is showing but I was able to figure this out by tying together several threads. Firstly, I used this gist from Joe Cheng to ensure that the antPath library was properly loaded into the browser. To call antPath I needed a CDN and fortunately, there is a CDN which was described in this closed PR

Finally, I had to dig into the the onRender function from htmlwidgets to properly execute the js code. I added the points manually as LatLong objects here in the JS code. I'm sure there is a way to pass them directly from the R session but that was what I used to make this work.

Full code:

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

antPlugin <- htmlDependency(name = "leaflet-ant-path", version = "1.2.1",
                             src = c(href = "http://unpkg.com/leaflet-ant-path@1.2.1/dist/"),
                             script = "leaflet-ant-path.js"
)

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

leaflet() %>%
  setView(-0.18, 51.50, 14) %>%
  addTiles() %>%
  registerPlugin(antPlugin) %>%
  onRender("function(el, x) {
    polylinePoints = [
            new L.LatLng(51.51032167, -0.187084072),
            new L.LatLng(51.51019814, -0.187030437),
            new L.LatLng(51.51013137, -0.187845822),
            new L.LatLng(51.50457546, -0.185415744),
            new L.LatLng(51.50476244, -0.181875224),
            new L.LatLng(51.50457546, -0.179622177),
            new L.LatLng(51.50409462, -0.175459380),
            new L.LatLng(51.50368057, -0.174365042),
            new L.LatLng(51.50299938, -0.174729820),
            new L.LatLng(51.50213117, -0.174686903),
            new L.LatLng(51.50199760, -0.177412030),
            new L.LatLng(51.50179725, -0.180373197),
            new L.LatLng(51.50143660, -0.180351735),
         ];
    polylineOptions = {color: 'blue', weight: 6, opacity: 0.9};
    L.polyline.antPath(polylinePoints, polylineOptions).addTo(this);
  }")

This does not show up in the little RStudio preview window but expanding to full browser shows this: