1

I am trying to create a time line plot using leaflet and leaftime packages. I want to set custom date in sliderOptions, such that I have both of Gregorian calendar and Persian calendar(or even pass any information from dataset). In here I saw following code to customize date:

    sliderOpts = sliderOptions(
    formatOutput = htmlwidgets::JS(
     "function(date) {return new Date(date).toDateString()}
   ")

According to the above code, I try to pass data as an argument to the function, 'function(date, data)', and try to use the dataset variable by 'data.properties.persian_date' as follows:

 library(leaflet)
 library(leaftime)
 library(htmltools)

 power <- 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),       persian_date=c("1393/10/11","1393/10/12","1393/10/13","1393/10/14","1393/10/15","1393/10/16","1393/10/17","1393/10/18","1393/10/19","1393/10/20")

 )

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




 leaflet(power_geo) %>%
   addTiles() %>%
   setView(44.0665,23.74667,2) %>%
   addTimeline(
       sliderOpts = sliderOptions(
  formatOutput = htmlwidgets::JS(
    "function(date,data) {return   new Date(date).toDateString()+'<br/>' +'new 
 info'+data.properties.persian_date}
  "),
       position = "bottomright",
       #step = 10,
       duration = 6000,
       showTicks = FALSE
     )
     ,
     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
     }
   ).bindPopup( data.properties.color_temp+ '   <br/>  '+  data.properties.persian_date+ '   <br/>  '+  data.properties.start);
 }
 "
       )
     )
   )

But unfortunately it does not work. If I remove '+data.properties.persian_date' part, the code run fine:

  leaflet(power_geo) %>%
     addTiles() %>%
     setView(44.0665,23.74667,2) %>%
     addTimeline(
         sliderOpts = sliderOptions(
    formatOutput = htmlwidgets::JS(
      "function(date,data) {return   new Date(date).toDateString()+'<br/>' +'new data' }
    "),
         position = "bottomright",
         #step = 10,
         duration = 6000,
         showTicks = FALSE
       )
       ,
       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
       }
     ).bindPopup( data.properties.color_temp+ '   <br/>  '+        data.properties.persian_date+ '   <br/>  '+  data.properties.start);
         }
         "
         )
       )
     )

The error happen in '+data.properties.persian_date'. How to fix this?

Masoud
  • 535
  • 3
  • 19
  • I don't know how to pass other data arguments to formatOutput but a cheat using [this](https://stackoverflow.com/questions/35570884/how-to-change-gregorian-date-to-persian-date-in-javascript) and [this](https://stackoverflow.com/questions/31439604/how-to-convert-persian-and-arabic-digits-of-a-string-to-english-using-javascript/51113170#51113170) is to convert the provided data to Persian and then to latin numeric. (there will certainly be a better way). – user20650 Jul 04 '21 at 12:09
  • 1
    ... `formatOutput = htmlwidgets::JS( "function(date) { var dt = new Date(date); pdt = dt.toLocaleDateString('fa-IR'); pdtl = pdt.replace(/[۰-۹]/g, function(t) { return t.charCodeAt(0) - '۰'.charCodeAt(0); }); return dt.toDateString() + '
    ' + pdt + '
    ' + pdtl; }")`     – user20650 Jul 04 '21 at 12:09
  • @user20650, It works! Your comment completely answered the question! How to specify days of week and month in Persian date? (I am not familiar with Java)? – Masoud Jul 05 '21 at 04:49
  • 1
    There are options that you can add: see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString for examples – user20650 Jul 05 '21 at 08:10
  • @user20650, where can I search about add a Listener to a CheckBox to handle is it checked or not? consider in a map I want to show some summary statistics in some where, based on which group is selected. How to do it? please see https://stackoverflow.com/questions/68253492/calculate-percentage-number-of-points-in-leaflet-in-r – Masoud Jul 05 '21 at 09:40
  • sorry Masoud beyond me. Would this not be easier sticking the map in a shiny App? – user20650 Jul 05 '21 at 10:20
  • @user20650, In https://rstudio.github.io/leaflet/morefeatures.html, using 'htmlwidgets::onRender' when 'baselaye'r change, the map changes! We need to handle 'Overallylayers' change. Thank u. I think shiny App needs to R be open (Am I right?), It limits the usefulness of it in my project. – Masoud Jul 06 '21 at 04:30
  • Yes for shiny R runs in the background. – user20650 Jul 06 '21 at 08:14
  • I handled a way to show some summary statistics for selected points in the map in leaflet map, by DataTable, https://stackoverflow.com/questions/68342915/use-circle-instead-rectangle-for-select-reign-in-leaflet. – Masoud Jul 12 '21 at 06:45

0 Answers0