Membuat Peta Interaktif dengan Control Layer Menggunakan Leaflet — R
Package leaflet merupakan salah satu paket di R yang dapat digunakan untuk membuat peta interaktif. Dengan peta interaktif, memungkinkan pengguna untuk menampilkan peta sesuai dengan yang dibutuhkan. Pada artikel ini akan dijabarkan cara menambahkan control layer pada peta leaflet menggunakan R, dengan hasil seperti berikut:
Library
Ada beberapa library atau paket yang diperlukan. Jika belum terinstall, silahkan di-install terlebih dahulu
library(dplyr)
library(leaflet)Data
Data yang digunakan bersumber dari website Kampung KB BKKBN. Data tersebut telah kami scraping dan disimpan di github kami. Untuk mengimport data kita cukup mengunakan link raw data.
#membaca data
data_peta <- read.csv("https://raw.githubusercontent.com/armdhn23/data-aktualisasi/main/data/hasil_scraping_kkb.csv")
Data di atas terdiri dari beberapa kolom lagi, salah satunya kolom latitude untuk memetakan posisi desa di peta. Selanjutnya kolom jumlah_dasar hingga jumlah_berkelanjutan akan dijadikan kolom tunggal yang berisi nilai klasifikasi kampung kb desa. Angka 1 merupakan kode yang menunjukkan desa memiliki klasifikasi sesuai nama kolom.
Menyiapkan Data
#merubah bentuk data
join_rdk_kkb <- data_peta %>%
mutate(klasifikasi_kkb = case_when(
jumlah_dasar == 1 ~ "Dasar",
jumlah_berkembang == 1 ~ "Berkembang",
jumlah_lengkap == 1 ~ "Lengkap",
jumlah_berkelanjutan == 1 ~ "Berkelanjutan",
TRUE ~ "small"
)) %>% select(
prov, kab, kec, nama_desa, klasifikasi_kkb, latitude,
longitude
)Kita sekarang memiliki kolom baru dengan nama klasifikasi_kkb
Selanjutnya kita menambahkan kolom warna dan label desa pada peta.
join_rdk_kkb$klasifikasi_kkb <- factor(join_rdk_kkb$klasifikasi_kkb,
levels = c("Dasar", "Berkembang",
"Lengkap", "Berkelanjutan"))
# menambah kolom warna
join_rdk_kkb <- join_rdk_kkb %>%
mutate(color_peta_kkb = case_when(
klasifikasi_kkb == "Dasar" ~ "#FF0000",
klasifikasi_kkb == "Berkembang" ~ "#FFA500",
klasifikasi_kkb == "Lengkap" ~ "#0000FF",
TRUE ~ "#00FF00"
))
#menambah kolom label
join_rdk_kkb$label_kkb <- sprintf(
"<strong>%s</strong><br/>%s",
join_rdk_kkb$nama_desa, join_rdk_kkb$klasifikasi_kkb
) %>% lapply(htmltools::HTML)
Perlu diingat jika leaflet adalah peta berbasis web, sehingga pada label kita menggunakan atribut html.
Split Data
Tujuan awal artikel ini adalah membuat control layer pada peta leaflet. Agar hal tersebut memungkinkan, kita perlu membagi data ke beberapa subdata berdasarkan klasifikasi.
Secara sederhana, jika kita mencentang data Dasar, maka peta menampilkan subdata Dasar pada peta. Begitu sebaliknya dan seterusnya.
Membuat Peta Cluster
Jenis peta yang digunakan pada dasarnya disesuaikan dengan kebutuhan. Oleh karena ada banyak desa yang akan ditampilkan, maka akan lebih rapi jika menggunaan ‘cluster map’.
l <- leaflet() %>% addTiles()
names(join_rdk_kkb.df) %>%
purrr::walk( function(df) {
l <<- l %>%
addCircleMarkers(data=join_rdk_kkb.df[[df]],
lng = ~longitude, lat = ~latitude ,radius = 10, # size of the dots
fillOpacity = .7, # alpha of the dots
stroke = FALSE, # no outline
label = ~label_kkb,
color = ~color_peta_kkb,
group = df,
clusterOptions = markerClusterOptions(removeOutsideVisibleBounds = F),
labelOptions = labelOptions(noHide = F,
direction = 'auto'))
})
l
Jika peta di semakin di zoom out, maka titik-titik yang berdekatan akan membentuk kluster sesuai kedekatan titik. Angka dalam kluster menunjukkan jumlah titik yang ada. Sebaliknya jika peta di zoom in, maka titik-titik desa akan muncul secara individu.
Menambahkan Control Layer dan Legend
Terakhir kita akan menambahkan control layer dan legend menggunakan sintaks berikut:
#legend
l <- l %>%
leaflet.extras::addResetMapButton() %>%
addLegend("bottomright",
colors = c("red", "orange", "blue", "green"),
labels = c("Dasar", "Berkembang", "Lengkap", "Berkelanjutan"),
title = "Klasifikasi Kampung KB",
opacity = 1) %>%
setView(118.8529847, -2.6636167, zoom = 10)
l
#layer control
l %>% addLayersControl(
overlayGroups = names(join_rdk_kkb.df),
options = layersControlOptions(collapsed = FALSE)
)Sintaks Lengkap
library(dplyr)
library(leaflet)
#membaca data
data_peta <- read.csv("https://raw.githubusercontent.com/armdhn23/data-aktualisasi/main/data/hasil_scraping_kkb.csv")
#merubah bentuk data
join_rdk_kkb <- data_peta %>%
mutate(klasifikasi_kkb = case_when(
jumlah_dasar == 1 ~ "Dasar",
jumlah_berkembang == 1 ~ "Berkembang",
jumlah_lengkap == 1 ~ "Lengkap",
jumlah_berkelanjutan == 1 ~ "Berkelanjutan",
TRUE ~ "small"
)) %>% select(
prov, kab, kec, nama_desa, klasifikasi_kkb, latitude,
longitude
)
join_rdk_kkb$klasifikasi_kkb <- factor(join_rdk_kkb$klasifikasi_kkb,
levels = c("Dasar", "Berkembang",
"Lengkap", "Berkelanjutan"))
# menambah kolom warna
join_rdk_kkb <- join_rdk_kkb %>%
mutate(color_peta_kkb = case_when(
klasifikasi_kkb == "Dasar" ~ "#FF0000",
klasifikasi_kkb == "Berkembang" ~ "#FFA500",
klasifikasi_kkb == "Lengkap" ~ "#0000FF",
TRUE ~ "#00FF00"
))
#menambah kolom label
join_rdk_kkb$label_kkb <- sprintf(
"<strong>%s</strong><br/>%s",
join_rdk_kkb$nama_desa, join_rdk_kkb$klasifikasi_kkb
) %>% lapply(htmltools::HTML)
#memisah data berdasarkan dataframe
join_rdk_kkb.df <- split(join_rdk_kkb, join_rdk_kkb$klasifikasi_kkb)
l <- leaflet() %>% addTiles()
l
names(join_rdk_kkb.df) %>%
purrr::walk( function(df) {
l <<- l %>%
addCircleMarkers(data=join_rdk_kkb.df[[df]],
lng = ~longitude, lat = ~latitude ,radius = 10, # size of the dots
fillOpacity = .7, # alpha of the dots
stroke = FALSE, # no outline
label = ~label_kkb,
color = ~color_peta_kkb,
group = df,
clusterOptions = markerClusterOptions(removeOutsideVisibleBounds = F),
labelOptions = labelOptions(noHide = F,
direction = 'auto'))
})
l
#menambah legend
l <- l %>%
leaflet.extras::addResetMapButton() %>%
addLegend("bottomright",
colors = c("red", "orange", "blue", "green"),
labels = c("Dasar", "Berkembang", "Lengkap", "Berkelanjutan"),
title = "Klasifikasi Kampung KB",
opacity = 1) %>%
setView(118.8529847, -2.6636167, zoom = 10)
l
#layer control
l %>% addLayersControl(
overlayGroups = names(join_rdk_kkb.df),
options = layersControlOptions(collapsed = FALSE)
)Sekian. Semoga membantu.
