leaflet{leaflet}を利用して出力した地図をモノクロ表示にする方法

leaflet {leaflet} を利用して出力した地図をモノクロ表示にする方法です。

始めにパッケージのバージョンを確認します。

library(leaflet)
packageVersion("leaflet")

[1] '2.2.2'

続いて、参考としてスプリング8 http://www.spring8.or.jp/ja/about_us/whats_sp8/ の位置を中心とした地図をデフォルトで表示します。

leaflet(width = "100%") %>%
  addTiles() %>%
  setView(lng = 134.43, lat = 34.95, zoom = 15)

デフォルトではカラー表示されます。

モノクロ出力にするために以下のスタイルを適用します。参考としましたページは https://github.com/PaulLeCam/react-leaflet/issues/143 です。

div#monochrome .leaflet-tile-pane {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

なお、本ページではカラー表示とモノクロ表示を1枚のページに一緒に出力しているため下記のコードでは elementId を指定していますが、出力する地図を全てモノクロ表示とするのであれば elementId も、上記スタイル中の div#monochrome も不要です。

leaflet(width = "100%", elementId = "monochrome") %>%
  addTiles() %>%
  setView(lng = 134.43, lat = 34.95, zoom = 15)

モノクロで表示されました。

以上です。