leaflet

leafletとは

leaflet は地図を描くためのJavaScriptライブラリです。いろいろな地図タイルが使えます。次の例は OpenStreetMap です。

上のような地図をページに埋め込むには,まず,ページの頭書き(head要素)に次のように書いておきます:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin="">
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
   integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
   crossorigin=""></script>

そして,地図を入れたいところに次のように書きます:

<div id="map" style="width:100%; height:300px"></div>
<script>
var map = L.map('map').setView([34.7468,136.5248], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([34.7468,136.5248]).addTo(map)
    .bindPopup('ここにいます')
    .openPopup();
</script>

ここで [34.7468,136.5248] は緯度・経度です。15 は大きな数にするほど拡大した地図になります。

別の例として地理院地図を使ってみましょう。

これは次のように書きました。

<div id="map2" style="width:100%; height:300px"></div>
<script>
var map2 = L.map('map2').setView([34.7468,136.5248], 15);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).addTo(map2);
L.marker([34.7468,136.5248]).addTo(map2)
    .bindPopup('ここにいます')
    .openPopup();
</script>

地理院地図にはいろいろな種類があります。詳しくは地理院タイル一覧をご覧ください。

leafletでGoogle Mapを使うこともできます(ググってください)。

Rでleafletを使う

Rの leaflet パッケージを使えばRから上のような地図を簡単に書けます。

まず,CRANからパッケージをインストールし,読み込みます:

install.packages("leaflet")
library(leaflet)

上と同様の地図を描くには,Rのコンソールに次のように打ち込みます:

m = leaflet()
m = addTiles(m)
m = addMarkers(m, lat=34.7468, lng=136.5248, popup="ここにいます")
m

地理院地図にするには2行目を次のようにします。

m = addTiles(m, "//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png")

同じことですが,次のようなパイプ記法も使えます:

m = leaflet() %>%
  addTiles() %>%
  addMarkers(lat=34.7468, lng=136.5248, popup="ここにいます")
m

さらに詳しい説明が こちら にあります。

leafletで放射線地図

もう古い話になりましたが,福島の42万点での放射線測定の結果を地図にする話がRgoogleMapsを使った放射線地図にあります。leafletで42万点に耐えられるかどうか,やってみました。かなり重いのでご注意ください。地理院タイルの淡色地図を使いました。マーカーの色遣いにもっと工夫が必要です。

library(leaflet)
library(RColorBrewer)

cols=c("white",brewer.pal(9, "YlOrRd"),rep("black",100))
fukushima = read.csv("https://oku.edu.mie-u.ac.jp/~okumura/stat/data/fukushima.csv", as.is=TRUE)
t = as.POSIXct(fukushima$datetime)
o = order(t)

m = leaflet(fukushima[o,])
m = addTiles(m, "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png") # 淡色地図
m = setView(m, 140.2, 37.38, 9)
m = addCircles(m, radius=10, color=cols[floor(fukushima[o,]$radiation*2)+1])
m = addMarkers(m, lat=37.422778, lng=141.032339, popup="福島第一原発")
m
福島県の放射線地図