leaflet によるインタラクティブマップ
マーカー、ポップアップ、タイルレイヤーを備えたインタラクティブな Web マップを描画します。
「leaflet によるインタラクティブマップ」はCoddyKit上の無料R Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはR Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 R Academyコースには全4レッスンが含まれています。
leafletの概要
leafletパッケージはLeaflet.jsライブラリをラップし、Rから直接、インタラクティブでズーム可能なWebマップを作成します。マップはHTMLウィジェットとして、JavaScriptの知識がなくてもRStudioのViewer、R Markdown、Shinyアプリで表示できます。
library(leaflet)
# Minimal leaflet map: tiles + one marker
leaflet() |>
addTiles() |> # OpenStreetMap base layer
setView(
lng = -74.006,
lat = 40.713,
zoom = 12
) |>
addMarkers(
lng = -74.006,
lat = 40.713,
popup = '<b>New York City</b>'
)addTiles: ベースマップレイヤー
addTiles()はデフォルトのOpenStreetMapタイルレイヤーを追加します。addProviderTiles(providers$を使うと、衛星画像、CartoDB、Esri、Stamenなど、別のタイルプロバイダーに切り替えられます。レイヤー名は組み込みのprovidersリストにあります。
library(leaflet)
# Default OpenStreetMap
map1 <- leaflet() |> addTiles()
# CartoDB light theme (great for data overlay)
map2 <- leaflet() |>
addProviderTiles(providers$CartoDB.Positron)
# Satellite imagery
map3 <- leaflet() |>
addProviderTiles(providers$Esri.WorldImagery)
# Custom tile URL
custom <- leaflet() |>
addTiles(
urlTemplate = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution = '(c) OpenStreetMap contributors'
)
map2ポップアップ付きのaddMarkers
addMarkers(lng, lat, popup)は、地図にピンマーカーを追加します。popup引数にはHTML文字列を指定できるため、太字のテキスト、リンク、画像などを含められます。label引数を使うと、クリックせずにホバー時にテキストを表示できます。
library(leaflet)
cities <- data.frame(
name = c('New York', 'Los Angeles', 'Chicago'),
lon = c(-74.006, -118.244, -87.629),
lat = c( 40.713, 34.052, 41.878),
pop = c(8336817, 3979576, 2693976)
)
leaflet(cities) |>
addTiles() |>
addMarkers(
lng = ~lon,
lat = ~lat,
popup = ~paste0(
'<b>', name, '</b><br>',
'Population: ', format(pop, big.mark = ',')
),
label = ~name
)addCircleMarkers
addCircleMarkers()は、画面上のピクセル単位でサイズが固定された円を描画します（ズームに応じて拡大縮小されるaddCircles()とは異なります）。比例記号の表現に適しており、radiusをデータ変数に対応付けて使用します。
library(leaflet)
cities <- data.frame(
name = c('New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'),
lon = c(-74.006, -118.244, -87.629, -95.369, -112.074),
lat = c( 40.713, 34.052, 41.878, 29.760, 33.449),
pop = c(8336817, 3979576, 2693976, 2304580, 1608139)
)
leaflet(cities) |>
addProviderTiles(providers$CartoDB.Positron) |>
addCircleMarkers(
lng = ~lon,
lat = ~lat,
radius = ~sqrt(pop / 50000),
color = 'steelblue',
fill = TRUE,
fillOpacity = 0.6,
popup = ~paste0(name, ': ', format(pop, big.mark = ','))
)addPolygons: コロプレスマップ
addPolygons()は、sfオブジェクトからポリゴンジオメトリを直接描画します。塗りつぶしの色は、colorNumeric()またはcolorBin()のパレット関数を使用してデータ列に対応付けられます。highlightオプションを指定すると、ホバー時の効果を追加できます。
library(leaflet)
library(sf)
nc <- st_transform(
read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
# Colour palette based on birth count
pal <- colorNumeric('YlOrRd', domain = nc$BIR74)
leaflet(nc) |>
addProviderTiles(providers$CartoDB.Positron) |>
addPolygons(
fillColor = ~pal(BIR74),
fillOpacity = 0.7,
color = 'white',
weight = 1,
popup = ~paste0('<b>', NAME, '</b><br>Births 1974: ', BIR74),
highlight = highlightOptions(
weight = 3,
color = '#333',
bringToFront = TRUE
)
) |>
addLegend('bottomright', pal = pal, values = ~BIR74, title = 'Births 1974')setViewとfitBounds
setView(lng, lat, zoom)は、固定した位置とズームレベルで地図の中心を設定します。fitBounds(lng1, lat1, lng2, lat2)は、地理的なバウンディングボックス全体が収まるように自動でズームします。データの範囲を事前に把握できない場合に便利です。
library(leaflet)
library(sf)
nc <- st_transform(
read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
bbox <- st_bbox(nc)
# fitBounds: auto-zoom to data extent
leaflet() |>
addTiles() |>
fitBounds(
lng1 = bbox['xmin'], lat1 = bbox['ymin'],
lng2 = bbox['xmax'], lat2 = bbox['ymax']
) |>
addPolygons(
data = nc,
fillColor = 'lightblue',
fillOpacity = 0.4,
color = 'steelblue',
weight = 1
)addLayersControl: レイヤーの切り替え
addLayersControl()は、ベースマップとオーバーレイレイヤーの表示・非表示を切り替えるラジオボタン／チェックボックス形式のコントロールを追加します。相互排他的なタイルレイヤーにはbaseGroupsを、個別に切り替えられるデータレイヤーにはoverlayGroupsを使用します。
library(leaflet)
library(sf)
nc <- st_transform(
read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
high_birth <- nc[nc$BIR74 > 3000, ]
low_birth <- nc[nc$BIR74 <= 3000, ]
leaflet() |>
addProviderTiles(providers$CartoDB.Positron, group = 'Light') |>
addProviderTiles(providers$Esri.WorldImagery, group = 'Satellite') |>
addPolygons(data = high_birth, color = 'red', group = 'High Births (>3000)') |>
addPolygons(data = low_birth, color = 'blue', group = 'Low Births (<=3000)') |>
addLayersControl(
baseGroups = c('Light', 'Satellite'),
overlayGroups = c('High Births (>3000)', 'Low Births (<=3000)'),
options = layersControlOptions(collapsed = FALSE)
)addPopupsとaddLegend
addPopups()は、常に表示されるポップアップボックスを追加します。addLegend()は、カラーパレットに対応した地図の凡例を作成します。どちらもHTMLコンテンツに対応しており、CSSクラスで自由にカスタマイズできます。
library(leaflet)
leaflet() |>
addTiles() |>
setView(-79.0, 35.5, zoom = 7) |>
addPopups(
lng = -78.639,
lat = 35.779,
popup = '<b>Raleigh</b><br>State Capital of NC'
) |>
addLegend(
position = 'bottomleft',
colors = c('red', 'blue', 'green'),
labels = c('High', 'Medium', 'Low'),
title = 'Risk Level',
opacity = 0.8
)カラーパレット: colorNumericとcolorBin
colorNumeric()、colorBin()、colorQuantile()、colorFactor()の各関数は、データ値を16進カラーコードに対応付けるパレット関数を作成します。結果をfillColorに渡し、同じパレットをaddLegend()にも渡します。
library(leaflet)
library(sf)
nc <- st_transform(
read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
# Continuous palette
pal_num <- colorNumeric('Blues', domain = nc$BIR74)
# Binned palette (5 equal bins)
pal_bin <- colorBin('RdYlGn', domain = nc$BIR74, bins = 5)
# Quantile palette (equal number of features per class)
pal_qtl <- colorQuantile('YlOrRd', domain = nc$BIR74, n = 4)
# Use binned palette
leaflet(nc) |>
addTiles() |>
addPolygons(
fillColor = ~pal_bin(BIR74),
fillOpacity = 0.7, weight = 1, color = 'white'
) |>
addLegend('bottomright', pal = pal_bin, values = ~BIR74,
title = 'Births 1974 (5 bins)')leafletProxy: Shinyで地図を更新する
leafletProxy('mapId')は、地図全体を最初から再描画することなく、Shinyアプリ内の既存のleaflet地図を更新します。clearMarkers()、clearShapes()、addMarkers()などと組み合わせると、ユーザー入力に効率よく対応できます。
library(shiny)
library(leaflet)
# Minimal Shiny app with leafletProxy
ui <- fluidPage(
selectInput('colour', 'Marker colour:', choices = c('red', 'blue', 'green')),
leafletOutput('map')
)
server <- function(input, output, session) {
output$map <- renderLeaflet({
leaflet() |> addTiles() |>
setView(-79.0, 35.5, zoom = 7)
})
observeEvent(input$colour, {
leafletProxy('map') |>
clearMarkers() |>
addCircleMarkers(
lng = -78.639, lat = 35.779,
color = input$colour,
label = paste('Raleigh -', input$colour)
)
})
}
# shinyApp(ui, server) # uncomment to run完全なインタラクティブコロプレスマップ
ここでは、プロバイダータイル、ポリゴンの塗りつぶし、ホバー時のハイライト、動的なポップアップ、カラーレジェンド、レイヤーコントロールという主要機能をすべて組み合わせた、実用的なコロプレスマップを示します。25行未満で実装できます。
library(leaflet)
library(sf)
nc <- st_transform(
read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
pal <- colorQuantile('YlOrRd', domain = nc$SID74, n = 5)
leaflet(nc) |>
addProviderTiles(providers$CartoDB.Positron) |>
addPolygons(
fillColor = ~pal(SID74),
fillOpacity = 0.75,
color = 'white',
weight = 0.5,
popup = ~paste0('<b>', NAME, '</b><br>SIDS 1974: ', SID74),
highlight = highlightOptions(
weight = 2, color = '#555', bringToFront = TRUE
)
) |>
addLegend(
position = 'bottomright',
pal = pal, values = ~SID74,
title = 'SIDS Deaths 1974<br>(Quintiles)'
) |>
addControl('<b>NC SIDS Data 1974</b>', position = 'topright')確認問題
Shinyアプリで、ユーザーがドロップダウンの値を変更したときに、既存のleaflet地図上のマーカー位置を更新したいとします。地図全体を再描画せずに更新するには、どの関数を使用しますか。
まとめ: leafletパッケージ
主なポイント:
leaflet() |> addTiles()で、OpenStreetMapのタイルを使ったインタラクティブな地図を作成できますaddProviderTiles(providers$で、別のタイルプロバイダーに切り替えられます) - 点データには
addMarkers()／addCircleMarkers()を使用し、popupとlabelを活用します - コロプレスマップには
addPolygons(fillColor = ~pal(col))を使用します colorNumeric()、colorBin()、colorQuantile()でパレット関数を作成できますaddLegend()はパレット関数と組み合わせて使用し、addLayersControl()でレイヤーを切り替えます- Shinyで効率よく地図を更新するには
leafletProxy()を使用します fitBounds()でデータの範囲に合わせて自動的にズームできます
library(leaflet)
# Three-line interactive map
leaflet() |>
addProviderTiles(providers$CartoDB.Positron) |>
addCircleMarkers(lng = c(-74, -118, -88), lat = c(41, 34, 42),
label = c('NYC', 'LA', 'Chicago'), color = 'steelblue')
AI チューターと学ぶ R — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 43
- レッスン
- 159
よくある質問
「leaflet によるインタラクティブマップ」レッスンは無料ですか？
はい。「leaflet によるインタラクティブマップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、R Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 R Academyコースには全4レッスンが含まれています。
「leaflet によるインタラクティブマップ」で何を学びますか？
マーカー、ポップアップ、タイルレイヤーを備えたインタラクティブな Web マップを描画します。 ブラウザで直接実行するハンズオンコードでR Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
R Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのR Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「leaflet によるインタラクティブマップ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このR Academyレッスンでコードを書いて実行できますか？
はい。すべてのR Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- sf パッケージによる Simple Features
- 座標参照系と投影法
- 空間結合と空間演算
- leaflet によるインタラクティブマップ