I found this Highchart example with animated lines on the map.

I would like to replicate the animated line features using the highcharter package. I have tried using hc_add_series() without any success.

I tried the following code, however no lines are generated:

library(shiny)
library(shinythemes)
library(highcharter)
library(dplyr)
library(jsonlite)

# Load the world map data
geojson <- download_map_data("custom/world-robinson-highres")
topology <- fromJSON("https://code.highcharts.com/mapdata/custom/world-highres.topo.json")

# Prepare coffee data
data <- data.frame(
  `hc-key` = c("ye", "br", "fr", "gb", "id", "nl", "gu", "re", "in"),
  color = c("#ffa500", "#c0ffd5", "#c0ffd5", "#c0ffd5", "#c0ffd5", "#c0ffd5", "#c0ffd5", "#c0ffd5", "#c0ffd5"),
  info = c(
    "Yemen is where coffee took off.",
    "Coffee came from La Reunion.",
    "Coffee came from Java.",
    "Coffee came from Java.",
    "Coffee came from Yemen.",
    "Coffee came from Java.",
    "Coffee came from France.",
    "Coffee came from Yemen.",
    "Coffee came from Yemen."
  )
)

# Prepare line data
lines_data <- list(
  list(
    geometry = list(type = "LineString", coordinates = list(c(48.516388, 15.552727), c(110.004444, -7.491667))), # Yemen to Java
    className = "animated-line",
    color = "#666"
  ),
  list(
    geometry = list(type = "LineString", coordinates = list(c(48.516388, 15.552727), c(55.5325, -21.114444))), # Yemen to La Reunion
    className = "animated-line",
    color = "#666"
  ),
  list(
    geometry = list(type = "LineString", coordinates = list(c(55.5325, -21.114444), c(-43.2, -22.9))), # La Reunion to Brazil
    className = "animated-line",
    color = "#666"
  ),
  list(
    geometry = list(type = "LineString", coordinates = list(c(48.516388, 15.552727), c(78, 21))), # Yemen to India
    className = "animated-line",
    color = "#666"
  ),
  list(
    geometry = list(type = "LineString", coordinates = list(c(110.004444, -7.491667), c(4.9, 52.366667))), # Java to Amsterdam
    className = "animated-line",
    color = "#666"
  ),
  list(
    geometry = list(type = "LineString", coordinates = list(c(-3, 55), c(-61.030556, 14.681944))), # UK to Antilles
    className = "animated-line",
    color = "#666"
  ),
  list(
    geometry = list(type = "LineString", coordinates = list(c(2.352222, 48.856613), c(-53, 4))) # Paris to Guyane
  )
)

# Prepare points data
points_data <- list(
  list(name = "Yemen", geometry = list(type = "Point", coordinates = c(48.516388, 15.552727)), custom = list(arrival = 1414)),
  list(name = "Java", geometry = list(type = "Point", coordinates = c(110.004444, -7.491667)), custom = list(arrival = 1696)),
  list(name = "La Reunion", geometry = list(type = "Point", coordinates = c(55.5325, -21.114444)), custom = list(arrival = 1708)),
  list(name = "Brazil", geometry = list(type = "Point", coordinates = c(-43.2, -22.9)), custom = list(arrival = 1770)),
  list(name = "India", geometry = list(type = "Point", coordinates = c(78, 21)), custom = list(arrival = 1670)),
  list(name = "Amsterdam", geometry = list(type = "Point", coordinates = c(4.9, 52.366667)), custom = list(arrival = 1696)),
  list(name = "Antilles", geometry = list(type = "Point", coordinates = c(-61.030556, 14.681944)), custom = list(arrival = 1714)),
  list(name = "Guyane", geometry = list(type = "Point", coordinates = c(-53, 4)), custom = list(arrival = 1714))
)

ui <- fluidPage(
  theme = shinytheme("paper"),
  tags$script(src = "https://code.highcharts.com/mapdata/custom/world-robinson-highres.js"),
  fluidRow(
    tags$hr(),
    column(
      12,
      selectInput("sel", NULL, c("Preloaded map" = "preload", "Sending map" = "send")),
      actionButton("action", "Generate map")
    ),
    tags$hr(),
    column(12, highchartOutput("hcmap"))
  )
)

server <- function(input, output) {
  
  output$hcmap <- renderHighchart({
    
    input$action  # React to the button click
    
    # Determine map data source
    mapdata <- if (input$sel == "preload") {
      JS("Highcharts.maps['custom/world-robinson-highres']")
    } else {
      geojson
    }
    
    # Create the map
    highchart(type = "map") %>% 
      hc_add_series(
        mapData = mapdata, 
        data = data, 
        joinBy = c("hc-key"),
        borderWidth = 0,
        name = "Coffee Origins",
        color = data$color,
        tooltip = list(useHTML = TRUE, headerFormat = "<b>{point.key}</b>:<br/>", pointFormat = "{point.info}")
      ) %>% 
      hc_add_series(
        type = "mapline",
        data = lines_data,
        lineWidth = 2,
        enableMouseTracking = FALSE
      ) %>%
      hc_add_series(
        type = "mappoint",
        data = points_data,
        color = "#333",
        dataLabels = list(
          format = "<b>{point.name}</b><br><span style='font-weight: normal; opacity: 0.5'>{point.custom.arrival}</span>",
          align = "left",
          verticalAlign = "middle"
        ),
        enableMouseTracking = FALSE
      ) %>% 
      hc_title(text = "The history of the coffee bean ☕") %>% 
      hc_legend(enabled = FALSE) %>% 
      hc_chart(zoomType = "xy") 
  })
}

shinyApp(ui, server)