[R　パッケージ] 　leaflet.extras2を使いこなす


***
この記事は,ある程度のRの知識があり、Leafletを使ったことがある方を対象に書かれています。

LeafletをRで活用するためにはleaflet.extras2が有効ですが、日本語の記事があまり見当たらないため、備忘録も兼ねてまとめてみました。
原典はこちら(https://cran.r-project.org/web/packages/leaflet.extras2/leaflet.extras2.pdf)

使えそうなものをいくつか紹介します。
***
1.addHexbin
6角形のビンを描きます

```R
library(leaflet)
library(leaflet.extras2)
n <- 1000
df <- data.frame(lat = rnorm(n, 42.0285, .01),
lng = rnorm(n, -93.65, .01))
leaflet() %>%
addTiles() %>%
addHexbin(lng = df$lng, lat = df$lat,
options = hexbinOptions(
colorRange = c("red", "yellow", "blue"),
radiusRange = c(10, 20)
))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/341f68bb-9c17-23c5-07c3-7b64f9c3f9b7.png)
ヒートマップに替わる表現方法ですね。
***
2.addHistory
地図上の移動や拡大履歴を記憶して、一つ前、二つ前..に参照した地点、拡大率に戻るアイコンが出現します。
これは使えます。
原典のExampleでは少しわかりにくいため、先ほどのコードにaddHistory()を足してみます。

```R
library(leaflet)
library(leaflet.extras2)
n <- 1000
df <- data.frame(lat = rnorm(n, 42.0285, .01),
lng = rnorm(n, -93.65, .01))
leaflet() %>%
addTiles() %>%
addHistory()　%>%
addHexbin(lng = df$lng, lat = df$lat,
options = hexbinOptions(
colorRange = c("red", "yellow", "blue"),
radiusRange = c(10, 20) 

))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/43fb030f-de5c-7450-ebf1-1433d40e4164.png)
右上に出現したアイコンを操作すると面白いように一つ前の表示に戻ることが出来ます。
以下2021年12月19日　加筆
最近、右上の＜＞アイコンとのリンクが切れてしまっているようで、上記コードを実行してもボックスは現れますが、その中に＜＞アイコンは現れない不具合が続いています。
***
3.addSidebyside
これも面白い仕掛けです。

```R
library(leaflet)
library(leaflet.extras2)
leaflet(quakes) %>%
  addMapPane("left", zIndex = 0) %>%
  addMapPane("right", zIndex = 0) %>%
  addTiles(group = "base", layerId = "baseid",
           options = pathOptions(pane = "right")) %>%
  addProviderTiles(providers$CartoDB.DarkMatter, group="carto", layerId = "cartoid",
                   options = pathOptions(pane = "left")) %>%
  addCircleMarkers(data = breweries91[1:15,], color = "blue", group = "blue",
                   options = pathOptions(pane = "left")) %>%
  addCircleMarkers(data = breweries91[15:20,], color = "yellow", group = "yellow") %>%
  addCircleMarkers(data = breweries91[15:30,], color = "red", group = "red",
                   options = pathOptions(pane = "right")) %>%
  addLayersControl(overlayGroups = c("blue","red", "yellow")) %>%
  addSidebyside(layerId = "sidecontrols",
                rightId = "baseid",
                leftId = "cartoid")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/a2bc44ac-4095-02f6-d75c-f30eb7b8db33.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/bfbb0bf0-11ee-a094-6b30-8226d02ab4b7.png)
カーテンを開け閉めするような感覚で地図の切り替えと、地図に応じたアイコンの表示を実現できます。
黒い地図では青いマーカーが表示され、赤いマーカーは表示されていません。
なお、マーカーはビール醸造所の位置を示しているようです。
***
4.addVelocity
風向風速や、潮流をアニメーションで表現するものです。
筆者のサイトにも早速応用させて頂きましたが、使い方は私のような初心者には少し難しいところがありましたので、その詳細を記述します。

```R
library(leaflet)
library(leaflet.extras2)
content <- "https://raw.githubusercontent.com/danwild/leaflet-velocity/master/demo/wind-gbr.json"
leaflet() %>%
  addTiles(group = "base") %>%
  setView(145, -20, 4) %>%
  addVelocity(content = content, group = "velo", layerId = "veloid") %>%
  addLayersControl(baseGroups = "base", overlayGroups = "velo")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/c2aada38-8ce8-6021-c535-f97c18e91a5a.png)
グレートバリアリーフに流れ込む潮流データを"https://raw.githubusercontent.com/danwild/leaflet-velocity/master/demo/wind-gbr.json"
からjson形式でダウンロードして描いています。

以下の記述からは　R,Shiny、Leafletを使ったことがある方を対象にしております。
データが上記のようにURLで参照出来れば良いのですが、筆者の場合はShinyでユーザーが自分で選択した風向風速に応じてLeaflet上にアニメーションを描く事を目的にしているため、一苦労しました。
参考までに下記は実装した結果です。（描画範囲は狭く、風向風速は一様で済むため、データ自体はとても簡単です）
先に紹介したaddHistory()もしっかり実装しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/7dd19eab-7e4f-cae7-129e-dbe1cfdaa093.png)

ここでもう一度サンプルコードに戻ります

```R
library(leaflet)
library(leaflet.extras2)
content <- "https://raw.githubusercontent.com/danwild/leaflet-velocity/master/demo/wind-gbr.json"
leaflet() %>%
  addTiles(group = "base") %>%
  setView(145, -20, 4) %>%
  addVelocity(content = content, group = "velo", layerId = "veloid") %>%
  addLayersControl(baseGroups = "base", overlayGroups = "velo")
```

上記の
addVelocity(content = content, group = "velo", layerId = "veloid") %>%
ですが、筆者のように使うためには
addVelocity(content = ユーザーが設定したデータ, group = "velo", layerId = "veloid") %>%
にしなければなりません。
冒頭に紹介したCRANのマニュアルでContentを調べて見ますと、データフレームを参照すれば良さそうです。

content 
the path or URL to a JSON file representing the velocity data or a data.frame
which can be transformed to such a JSON file. Please see the demo files for
some example data

しかし、上記に書かれているデモファイルを見てもデータフレームは不明です。
https://github.com/onaci/leaflet-velocity/tree/master/demo

解決策として下記のようにコードを記述してサンプルと同じように作動することを確認して

```R
library(leaflet.extras2)
library(jsonlite)
content <- "https://raw.githubusercontent.com/danwild/leaflet-velocity/master/demo/wind-gbr.json"
result <- jsonlite::fromJSON(content)
wind_js <- as.data.frame(result)
leaflet() %>%
  addTiles(group = "base") %>%
  setView(145, -20, 4) %>%
  addVelocity(content = wind_js)
```
wind_jsと名付けたデータフレームの構造を調べてみます。
jsonをデータフレームに変換する為にライブラリー：jsonliteを使っています。

```R
> str(wind_js)
'data.frame':	2 obs. of  2 variables:
 $ header:'data.frame':	2 obs. of  13 variables:
  ..$ parameterUnit      : chr  "m.s-1" "m.s-1"
  ..$ parameterNumber    : int  2 3
  ..$ dx                 : num  1 1
  ..$ dy                 : num  1 1
  ..$ parameterNumberName: chr  "eastward_wind" "northward_wind"
  ..$ la1                : num  -7.5 -7.5
  ..$ la2                : num  -28.5 -28.5
  ..$ parameterCategory  : int  2 2
  ..$ lo2                : num  156 156
  ..$ nx                 : int  14 14
  ..$ ny                 : int  22 22
  ..$ refTime            : chr  "2017-02-01 23:00:00" "2017-02-01 23:00:00"
  ..$ lo1                : num  143 143
 $ data  :List of 2
  ..$ : num  0 0 0 0 0 0 0 0 0 0 ...
  ..$ : num  0 0 0 0 0 0 0 0 0 0 ...
```
初学者の域を脱していない筆者にとってこのデータフレームを最初から作るのには日数がかかりそうです。
打開策として、一旦json形式のデータからデータフレームを作り、それを修正してみました。
緯度経度を日本に移動して、東風および北風成分5m/sの風速で一様な風を吹かせてみます。

```
library(leaflet.extras2)
library(jsonlite)

content <- "https://raw.githubusercontent.com/danwild/leaflet-velocity/master/demo/wind-gbr.json"
result <- jsonlite::fromJSON(content)
wind_js <- as.data.frame(result)

wind_js[[1]]$la1 <- 33
wind_js[[1]]$la2 <- 34
wind_js[[1]]$lo1 <- 128
wind_js[[1]]$lo2 <- 129
wind_js[[1]]$dx <- .1
wind_js[[1]]$dy <- .1
wind_js[[2]][[1]] <- rep(5,121)
wind_js[[2]][[2]] <- rep(5,121)

leaflet() %>%
  addTiles(group = "base") %>%
  setView(128, 34, 6) %>%
  addVelocity(content = wind_js)
```

北緯33～34度、東経128～129度のメッシュに南西風を表示することが出来ました。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376140/0545afa3-9d7c-9818-c2f5-d061d431420a.png)

筆者のサイトに実装するためには、このデータフレームをサーバーのフォルダーに保存して、起動時に読み込み、ユーザーの選択に応じて上記のように座標や風向風速を書き換えるという苦し紛れの対応で一旦は解決できました。

***
leaflet.extras2を使いこなして実装すると応用範囲が広がると思います。