Rのリーフレットパッケージでループして複数のマップを作成することはできません

Question

ここに新しいものとRには比較的新しいものがありますので、先ほど申し訳ありませんが、私はこの投稿で間違っていることをお知らせします。

リーフレットマップのシーケンス（1971年9月〜1972年4月）を作成しようとしています。最後に、それらを光沢のあるものにクランチして、ユーザーにアニメーションを再生/一時停止させたい（光沢のあるループアニメーションスライダー）。

whileループはfor meで働いていませんでした。コードを実行した後に私のiをチェックしたときに増分が働いていましたが、リーフレットは機能しませんでした。ループがなければ、私の "Dynamic Leaflet Fails"（コードセクションの下を参照）が働き、地図を開いた。

リーフレットを順番に作成できませんか？

#set working directory 
require(leaflet) 
require(dplyr) 

#Build data.frame with 10 obs + 3 cols 
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 <- c(as.Date(
"15-Sep-1971", "1-Dec-1971", "1-Feb-1972", "1-Feb-1972", "1-Feb-1972", "1-Feb-1972", "1-Apr-1972", "1-Apr-1972", "24-Apr-1972", "24-Apr-1972", format = "%d-%b-%Y"))) 

#"Dynamic" leaflet Fails1: While+For combo 
i<- as.Date("1971-09-14") 
while (i < as.Date("1972-05-01")) { for(star in start){ 
if (star > i) { 
leaflet(power) %>% addTiles() %>% 
    addCircleMarkers(lng = ~Longitude, lat = ~Latitude) 
}} 
i <- i+60} 

#"Dynamic" leaflet Fails2: For+break combo 
lap <- seq(as.Date("1971-09-14"), as.Date("1972-05-01"), by = "month") 
for(i in lap) { 
leaflet (data = power[power$start > i,]) %>% 
addTiles() %>% 
addCircleMarkers(lng = ~Longitude, lat = ~Latitude) 
if (i > as.Date("1951-01-01")) 
{  break }} 

Answer 1

ここには、あなたが提案する方法でleaflet-timelineを追加する簡単な方法があります。何らかの理由でタイムラインがRStudio Viewerで完全にレンダリングされませんが、Chromeで正しく動作しているようです。私はステップを説明するコードをインラインでコメントしました。

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

#Build data.frame with 10 obs + 3 cols 
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" = do.call(
    "as.Date", 
    list(
     x = c("15-Sep-1971", "1-Dec-1971", "1-Feb-1972", "1-Feb-1972", "1-Feb-1972", "1-Feb-1972", "1-Apr-1972", "1-Apr-1972", "24-Apr-1972", "24-Apr-1972"), 
     format = "%d-%b-%Y" 
    ) 
) 
) 

# set start same as end 
# adjust however you would like 
power$end <- power$start 


# use geojsonio to convert our data.frame 
# to GeoJSON which timeline expects 
power_geo <- geojson_json(power,lat="Latitude",lon="Longitude") 

# create a leaflet map on which we will build 
leaf <- leaflet() %>% 
    addTiles() 

# add leaflet-timeline as a dependency 
# to get the js and css 
leaf$dependencies[[length(leaf$dependencies)+1]] <- htmlDependency(
    name = "leaflet-timeline", 
    version = "1.0.0", 
    src = c("href" = "http://skeate.github.io/Leaflet.timeline/"), 
    script = "javascripts/leaflet.timeline.js", 
    stylesheet = "stylesheets/leaflet.timeline.css" 
) 

# use the new onRender in htmlwidgets to run 
# this code once our leaflet map is rendered 
# I did not spend time perfecting the leaflet-timeline 
# options 
leaf %>% 
    setView(44.0665,23.74667,2) %>% 
    onRender(sprintf(
    ' 
function(el,x){ 
    var power_data = %s; 

    var timeline = L.timeline(power_data, { 
     pointToLayer: function(data, latlng){ 
     var hue_min = 120; 
     var hue_max = 0; 
     var hue = hue_min; 
     return L.circleMarker(latlng, { 
      radius: 10, 
      color: "hsl("+hue+", 100%%, 50%%)", 
      fillColor: "hsl("+hue+", 100%%, 50%%)" 
     }); 
     }, 
     steps: 1000, 
     duration: 10000, 
     showTicks: true 
    }); 
    timeline.addTo(HTMLWidgets.find(".leaflet")); 
} 
    ', 
    power_geo 
)) 

Answer 2

@ timelyportfolioの昨年の投稿の更新版です。私はそれを動作させるために、timelineControl関数を追加する必要がありました。また、リーフレット要素のgetMap()関数を呼び出して、マップオブジェクトにバインドする関数を取得する必要がありました。

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

#Build data.frame with 10 obs + 3 cols 
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" = do.call(
     "as.Date", 
     list(
      x = c("15-Sep-1971", "1-Dec-1971", "1-Feb-1972", "1-Feb-1972", "1-Feb-1972", "1-Feb-1972", "1-Apr-1972", "1-Apr-1972", "24-Apr-1972", "24-Apr-1972"), 
      format = "%d-%b-%Y" 
     ) 
    ) 
) 

# set start same as end 
# adjust however you would like 
power$end <- power$start + 30 


# use geojsonio to convert our data.frame 
# to GeoJSON which timeline expects 
power_geo <- geojson_json(power,lat="Latitude",lon="Longitude", pretty = T) 

# create a leaflet map on which we will build 
leaf <- leaflet() %>% 
    addTiles() 

# add leaflet-timeline as a dependency 
# to get the js and css 
leaf$dependencies[[length(leaf$dependencies)+1]] <- htmlDependency(
    name = "leaflet-timeline", 
    version = "1.0.0", 
    src = c("href" = "http://skeate.github.io/Leaflet.timeline/"), 
    script = "javascripts/leaflet.timeline.js", 
    stylesheet = "stylesheets/leaflet.timeline.css" 
) 

# use the new onRender in htmlwidgets to run 
# this code once our leaflet map is rendered 
# I did not spend time perfecting the leaflet-timeline 
# options 
leaf %>% 
    setView(44.0665,23.74667,2) %>% 
    onRender(sprintf(
     ' 
     function(el,x){ 
     var power_data = %s; 

     var timelineControl = L.timelineSliderControl({ 
      formatOutput: function(date) { 
      return new Date(date).toString(); 
      } 
     }); 

     var timeline = L.timeline(power_data, { 
     pointToLayer: function(data, latlng){ 
     var hue_min = 120; 
     var hue_max = 0; 
     var hue = hue_min; 
     return L.circleMarker(latlng, { 
     radius: 10, 
     color: "hsl("+hue+", 100%%, 50%%)", 
     fillColor: "hsl("+hue+", 100%%, 50%%)" 
     }); 
     }, 
     steps: 1000, 
     duration: 10000, 
     showTicks: true 
     }); 
     timelineControl.addTo(HTMLWidgets.find(".leaflet").getMap()); 
     timelineControl.addTimelines(timeline); 
     timeline.addTo(HTMLWidgets.find(".leaflet").getMap()); 
     } 
     ', 
     power_geo 
    ))