MapConductorドキュメント / 拡張機能 / マーカークラスタリング
マーカーを大量に置く
近接するマーカーを自動でクラスタにまとめ、ズームインで展開します。どのプロバイダの地図ビューでも同じコードで動きます。
ANDROID
com.mapconductor:marker-clustering
iOS
MapConductorMarkerCluster
REACT
@mapconductor/react-marker-clustering
01 · インストール
app/build.gradle.kts
implementation("com.mapconductor:marker-clustering")Package.swift
.package(url: "https://github.com/MapConductor/ios-marker-cluster", from: "1.1.4"), .product(name: "MapConductorMarkerCluster", package: "ios-marker-cluster"),
terminal
npm install @mapconductor/react-marker-clustering
02 · 使い方
マーカーの配列をクラスタグループに渡すだけです。マーカー自体の状態オブジェクトは通常のものと同じで、書き換えは不要です。
ClusteredMap.kt · Jetpack Compose
val markerStates: List<MarkerState> = remember { buildMarkerList() }
val clusterState = remember {
MarkerClusterGroupState(
clusterRadiusPx = 90.0,
minClusterSize = 5,
onClusterClick = { cluster -> /* handle tap */ },
)
}
MapLibreMapView(state = mapState) {
MarkerClusterGroup(state = clusterState, markers = markerStates)
}ClusteredMap.swift · SwiftUI
@State private var clusterState = MarkerClusterGroupState(
clusterRadiusPx: 90,
minClusterSize: 5,
onClusterClick: { cluster in /* handle tap */ }
)
MapLibreMapView(state: mapState) {
MarkerClusterGroup(state: clusterState, markers: markerStates)
}ClusteredMap.tsx · React
import { MarkerClusterGroup } from '@mapconductor/react-marker-clustering';
import { MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
<MapLibreMapView2D state={state}>
<MarkerClusterGroup
markers={markers}
minClusterSize={2}
clusterRadiusPx={80}
enableZoomAnimation
onClusterClick={cluster => console.log(cluster.count)}
/>
</MapLibreMapView2D>03 · 主なオプション
Option
Default
説明
clusterRadiusPx
90.0
クラスタにまとめる距離（画面ピクセル）。小さくすると分割が細かくなります。
minClusterSize
3
クラスタとして表示する最小マーカー数。これ未満は個別マーカーのまま。
clusterIconProvider
circle badge
クラスタ数に応じたアイコンを返します。既定は円形バッジ。
onClusterClick
null
クラスタのタップを受け取ります。ズームインに使うのが一般的です。
enableZoomAnimation
false
ズーム時の展開・集約をアニメーションする ON/OFF。既定は無効。所要時間は zoomAnimationDurationMs（既定 300ms）で調整します。
04 · 性能
数千個でも滑らかに
クラスタリングはバックグラウンドで計算し、カメラ停止時にのみ再構成します。
SAMPLE
24,526