How to set custom color in AddTimeLine

Question

I am trying to create a time line plot using leaflet and leaftime packages. I want to set custom color in addTimeline to specify each point to his groups, as follows:

library(leaflet)
library(leaftime)
library(geojsonio)

power_d <- data.frame(
  "Latitude" = c(
    33.515556, 38.060556, 47.903056, 49.71, 49.041667, 31.934167,
    54.140586, 54.140586, 48.494444, 48.494444
  ),
  "Longitude" = c(
    129.837222, -77.789444, 7.563056, 8.415278, 9.175, -82.343889,
    13.664422, 13.664422, 17.681944, 17.681944
  ),
  "start" = seq.Date(as.Date("2015-01-01"), by = "day", length.out = 10),
  "end" = seq.Date(as.Date("2015-01-01"), by = "day", length.out = 10) + 1,
color_temp=rep(c("red","blue","green"),len=10)
)

power_geo <- geojsonio::geojson_json(power_d ,lat="Latitude",lon="Longitude")

leaflet() %>%
  addTiles() %>%
  setView(44.0665,23.74667,2) %>%
  addTimeline(data = power_geo,
  timelineOpts = timelineOptions(
      styleOptions = styleOptions(
    radius = 5,     
    color=color_temp,
    fillColor = color_temp,
    fillOpacity = 1
      )
    )
)

Unfortunately I got following error:

Error in lapply(x, f) : object 'color_temp' not found

I also try replacing color_temp with power_d$color_temp, the code run without error, but the color of points do not change. The color arguments not work in above code, why? and how to fix it?

It seems you can't pass a vector of colour like this but check the third last example in `addTimeline` but change the relevant line to `color: data.properties.color_temp` — user20650, Jul 03 '21 at 13:15

score 3 · Accepted Answer · answered Jul 03 '21 at 13:34

3

It doesn't seem as if you can pass a vector of colours with the standard styleOptions, however, an example from the help page for ?addTimeline show how you can add colours based on the data using a little JavaScript (which thankfully is provided in the example).

Using the example that starts "# to style each point differently based on the data" you need to change it slightly to point to your colour vector e.g. change data.properties.color to data.properties.color_temp. Running the code below leads to

# code
leaflet(power_geo) %>%
  addTiles() %>%
  setView(44.0665,23.74667,2) %>%
  addTimeline(
    timelineOpts = timelineOptions(
      styleOptions = NULL, 
      pointToLayer = htmlwidgets::JS(
"
function(data, latlng) {
  return L.circleMarker(
    latlng,
    {
      radius: 25,
      color: data.properties.color_temp,
      fillColor: data.properties.color_temp,
      fillOpacity: 1
    }
  );
}
"
      )
    )
  )

answered Jul 03 '21 at 13:34

user20650

24,654
5
56
91

It works! In this case how to set popup? I think it should pass ' L.circleMarker'? for example if we want to pass color_temp and further information How to do it? – Masoud Jul 04 '21 at 04:27
I found it! '.bindPopup()' can pass popup! – Masoud Jul 04 '21 at 05:25
I want to customize date in the above code. How to do it? I try in https://stackoverflow.com/questions/68242487/how-to-customize-date-in-leaflet – Masoud Jul 04 '21 at 07:38
Why in the code, when we press forward (or backward) button, we have current time point and next time point? – Masoud Jul 04 '21 at 09:14

How to set custom color in AddTimeLine

1 Answers1