- Leafletの地図にマーカーを増やしていったら、だんだん重くなってきた…
- ピンが密集して、どこに何があるのか見えづらい
地図にマーカーを100件、200件と表示していくと、次のような問題が発生します。
- ピンが密集して視認性が悪い
- ズームやスクロールで重くなる
- 目的地が探しづらい
そこで使えるのがLeaflet.markerclusterです。近いマーカーを自動でひとまとまりにし、ズームすると自動で分解してくれるプラグインで、これらの問題を丸ごと解決してくれます。
この記事では、CDN版の導入から実装コードまでを解説します。すでにLeaflet自体（leaflet.js / leaflet.css）を読み込んだ地図があること前提で進めるので、まだの場合は先にそちらを読み込んでおいてください。
目次
Leaflet.markerclusterの導入手順
手順は次の4ステップです。
- CDNでmarkerclusterを読み込む
- 地図とタイルレイヤーを初期化する
- クラスタグループを作成する
- マーカーをまとめて追加する
① CDNでmarkerclusterを読み込む
HTMLの<head>に以下を追加します。
HTML
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>このスクリプトは、地図本体のLeaflet（leaflet.js）を読み込んだあとに読み込む必要があります。順番を逆にすると動きません。
② 地図とタイルレイヤーを初期化する
JavaScript
const map = L.map("map", {
center: [35.68, 139.76],
zoom: 11,
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(map);③ クラスタグループを作成する
ここがmarkerclusterのポイントです。マーカーを地図に直接追加するのではなく、いったんクラスタグループに追加します。
JavaScript
const markerClusterGroup = L.markerClusterGroup();
map.addLayer(markerClusterGroup);④ マーカーをまとめて追加する
手持ちのデータからL.marker()を作り、地図ではなくmarkerClusterGroupのほうにaddLayer()します。
JavaScript
const ALL_PARKS = [
{ id: 1, name: "中央公園", lat: 35.689, lng: 139.700 },
{ id: 2, name: "西公園", lat: 35.665, lng: 139.730 },
// ... 最大数千件まで対応
];
const MAX_MARKERS = 1000; // 任意
const parksForMap = ALL_PARKS.slice(0, MAX_MARKERS);
parksForMap.forEach((park) => {
if (!park.lat || !park.lng) return;
const marker = L.marker([park.lat, park.lng]);
marker.bindPopup(
"<strong>" + park.name + "</strong><br>" +
'<a href="/park/' + park.id + '/">詳細を見る</a>'
);
markerClusterGroup.addLayer(marker);
});MAX_MARKERSで件数を絞っているのは、あくまで念のためです。markerclusterは数千件規模でも十分軽快に動きますが、データ量が読めない場合の安全弁として入れておくと安心です。
導入で得られる効果
- 地図が重くならずサクサク動く
- ピンの密集がクラスタとして見えるので視認性向上
- 既存コードにほぼ手を加えず導入可能
- APIアクセスが増えずバックエンドに優しい
実装のポイント
- 初期表示はややズームアウトしてクラスタが見える状態にする
- パフォーマンスのために最大マーカー数を設定することも可能
- カード連動（クリック・フォーカス）はID管理で簡単に実現可能
- データが非常に増えたら「地図範囲絞り API」方式へ移行もできる
ちなみに実装中、複数のマーカーを高速でクリックすると意図しない挙動になる「クリック時の競合問題」にぶつかりました。この対処法は別記事にまとめています。
あわせて読みたい
【開発ログ】Leaflet.markerclusterで発生した「マーカークリック時の競合問題」とその解決方法
地図アプリを開発していると、クラスター表示（Leaflet.markercluster）と単体マーカーのクリックが競合する問題に出会うことがあります。今回、公園ナビの検索結果ペー…
まとめ
Leaflet.markerclusterを使えば、大量のマーカーを美しく・高速に・ストレスなく表示できます。
- 完全無料
- 高速
- 見やすい
- 導入が簡単
- API負荷なし
地図アプリを作るなら、絶対に押さえておきたい強力なテクニックです。
コメント