多くの地理的な情報を使いやすい形式で表示したい場合、多くの方は地図を使用するでしょう。しかし、その地図は一目で全体像を伝達することができ、ユーザーにもっと探索したいという気持ちにするような分かりやすいものでなければなりません。
密集した何百ものマーカー（ポイントデータ）がマップを分かりにくくしている場合もあります。この記事では、JavaScript の Marker Clusterer ライブラリを使用して、マーカーが重複することなく全体として同じ情報を伝える方法をご紹介します。また、皆さんのプロジェクトで、マーカークラスタリングを調整する方法をより理解できるように、どのように機能するかについてもご紹介します。
マーカークラスタリングが必要な理由
オーストラリアとニュージーランドにプロットされた一群のマーカーを見てみましょう。
それぞれのマーカーには便利なラベルが付いていますが、その多くが密集しており、マーカーが重なってしまっています。マーカーは 25 か所もないのですが、あまりに距離が近いため、マップ上で重なることなく表示することができません。
このように表示されていると、表示しようとしているすべての重要な情報をユーザーは理解できないかもしれません。そこでマーカークラスタリングの出番です。シンプルなオープンソース ライブラリでマップ コードを少し変更することで、マーカークラスタリングを追加してユーザー エクスペリエンスを大きく改善することができます。
マーカークラスタリング は、視覚的にマーカーを統合するのに便利なツールで、マップ上の近接するマーカーを組み合わせてクラスタ化することで、見る人がマップ全体を理解しやすくなります。クラスタはひとつのアイコンとしてマップ上に表示されます。
マーカークラスタリングを有効にするには
数行の JavaScript のコードを加えるだけでマップ上にクラスタを追加することができます。ここでは web マップを中心に説明しますが、Google Maps Platform の
Maps SDK for Android や
Maps SDK for iOS にもよく似たユーティリティがあります。はじめに、マーカー クラスタを作成するために、クラスタ化されていないマーカーを作成する方法を見てみましょう。マップ上に典型的なマーカーを追加する場合、コードは次のようになります。
const pos1 = {lat: -33.727111, lng: 150.371124};
const marker1 = new google.maps.Marker({position: pos1, map: map});
const pos2 = {lat: -33.718234, lng: 150.363181};
const marker2 = new google.maps.Marker({position: pos2, map: map});
数十以上のマーカーがある場合、マーカーごとに変数を作成することはまずはしないでしょう。しかし、クラスタリングの動作を確認するのであればこの 2 つのマーカーだけで十分です。
マーカークラスタリングを有効にするために、マップ コードに 以下の 2 つ追加する必要があります。まず、MarkerClusterer ライブラリを読み込みます。商用目的で使うのであれば、GitHub から
ソースコードをダウンロードして 自社のサーバー上で JavaScript をホストしてください。今回のデモでは、Google Maps Platform ドキュメント サイトから読み込みます。
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
次に、マップとマーカーをクラスタリング ライブラリに渡し、マーカー変数の下に次のコードを追加します。
// すべてのマーカーの配列を作る
const markers = [marker1, marker2];
// 追加するクラスターアイコンへのパスを定義する (1.png, 2.png, ...)
const imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";
// マップとマーカーに対してクラスター化を有効にする
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
繰り返しますが、商用で使う場合は、自社のサーバーでクラスタ画像をホストする必要があります。この例では、最小のクラスタだけが必要なので、
m1.png を読み込みます。
MarkerClusterer のインスタンスを作成する場合、マップの変数、マーカーの配列と、画像パスを渡します。その情報から、MarkerClusterer ライブラリは、クラスタに含まれているポイントの数を数えてクラスタ アイコンに変換し表示します。
クラスタ アイコンをクリックするとマップが 2 つのマーカーが見えるレベルまで拡大されます。
いくつかのレベルでズームアウトすると、クラスタ アイコンは、2 つのマーカーが重なるレベルで元の場所に戻ります。
より多くのポイントを対象とした例については、
マーカークラスタリング ガイド をご覧ください。または、マーカークラスタリングが機能する方法とご自身のプロジェクトのために調整できるオプションについての詳細をご覧ください。
マーカークラスタリングはどのように動くのか
マーカークラスタリング ライブラリは
GitHub のオープンソース マップ ユーティリティの一部です。すべてのコードにアクセスでき、必要に応じて変更することもできます。アルゴリズムが機能する高度な方法を見てみましょう。
はじめに、アルゴリズムはマップをグリッドに分割します。それぞれのグリッドのセクションはデフォルトの 60x60 ピクセルです。上述の密集したマーカーの例を使うと、次のように見えるでしょう。
実際は、マーカーに基づくので、グリッドは上記のとおりではありません。一つ目のマーカーは最初のセクターの中央になります。セクター内にある次のマーカーは、そのセクターのクラスタに追加されます。クラスタの中央はそのすべてのマーカーの平均に基づいてアップデートされます。1 つのマーカーが複数のクラスタに含まれる可能性がある場合、
マーカーの座標間の距離 に基づいていちばん近いクラスタに追加されます。
デフォルトの設定とアルゴリズムはほとんどのユースケースに対応しますが、コードは完全にオープン ソースなので、必要に応じてどのようにでも変更できます。
マーカー クラスタをカスタマイズ
マーカー クラスタの見た目と機能を調整する方法はたくさんあります。その多くは基本となるライブラリを編集する必要はありません。その代わり、クラスタを作成する時に設定できるオプションがいくつかあります。
クラスタ化されたマップを作成する最も簡単な方法は、独自のアイコンを使うことです。単純なクラスタリングの例では、
imagePath オプションを使いました。クラスタ ライブラリは、1 から 5 までの番号をパスの末尾に追加し、そのあとにファイルの拡張子が続きます。この拡張子のデフォルトは
.png です。
imageExtension オプションで別のファイルの種類を使用することができます。マップ上では透明なアイコンが最適に見えることを覚えておいてください。
デフォルトでは、2 つのマーカーがあれば 1 つのクラスタを作成できます。この設定を変更するために、minimumClusterSize オプションを使用することができます。マーカーの数を増やすことで重複しますが、いくつまで重複させるかという限界点を設定することができます。
次に、マーカー クラスタ ライブラリを試す他のオプションをご紹介します。
gridSize：クラスタ グリッド内のピクセルの数
zoomOnClick：クラスタをクリックすると拡大するかどうか
maxZoom：標準のマーカーが常に表示されるまで拡大できるズーム値
styles：文字の色、サイズやクラスタの他の機能を含んだそれぞれのクラスタの種類に向けたオブジェクトの配列
例えば、次のようにクラスタ ライブラリへの呼び出しをすることで、上記のすべてのオプションを一度に使用することができます。
// オプションの定義
const clusterOptions = {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
// マーカーを管理する Marker Clusterer を追加する
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// クラスターが生成されたあとにスタイルを変更する
const styles = markerClusterer.getStyles();
for (let i=0; i<styles.length; i++) {
styles[i].textColor = "red";
styles[i].textSize = 18;
}
上記のオプションをオーストラリアとニュージーランドの例に適用すると、次のようなマップになります。
2 つのことに気づきましたか。より小さなグリッド サイズのため、クラスタの数が増え、数字が赤く、かなり大きくなっています。
クラスタをクリックしても拡大しませんが、手動で拡大することができます。主にマーカーが重なる可能性が低くなるようにグリッドサイズを調整しているため、それぞれのマーカーは以前よりも高速に表示されます。レベル 10（マップはレベル 3 から始まります）まで拡大すると、マーカーがどれだけ近接していてもすべて表示されます。
ここまで、マーカーが密集しているマップからすっきりとクラスタ化されたマップまでをご紹介してきました。この新しい知識を使って、ユーザーに多くのマーカーを表示するマップのより良いエクスペリエンスを提供してください。
マーカー クラスタ ライブラリ のコードから、さらに多くのカスタマイズの方法を見つけることができます。
Google Maps Platform に関する詳しい情報は
こちら をご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Posted by
丸山 智康 (Tomoyasu Maruyama) - Google Maps テクニカル アカウントマネージャ
この記事は Google の Google Maps Platform の Software Engineer である Travis McPhail による Google Maps Platform Blog の記事 "How to cluster map markers " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
マーカークラスタリングが必要な理由
オーストラリアとニュージーランドにプロットされた一群のマーカーを見てみましょう。
マーカークラスタリングを有効にするには
Maps SDK for Android や Maps SDK for iOS にもよく似たユーティリティがあります。はじめに、マーカー クラスタを作成するために、クラスタ化されていないマーカーを作成する方法を見てみましょう。マップ上に典型的なマーカーを追加する場合、コードは次のようになります。
const pos1 = {lat: -33.727111, lng: 150.371124};
const marker1 = new google.maps.Marker({position: pos1, map: map});
const pos2 = {lat: -33.718234, lng: 150.363181};
const marker2 = new google.maps.Marker({position: pos2, map: map});
ソースコードをダウンロードして 自社のサーバー上で JavaScript をホストしてください。今回のデモでは、Google Maps Platform ドキュメント サイトから読み込みます。
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
// すべてのマーカーの配列を作る
const markers = [marker1, marker2];
// 追加するクラスターアイコンへのパスを定義する (1.png, 2.png, ...)
const imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";
// マップとマーカーに対してクラスター化を有効にする
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});
m1.png を読み込みます。
マーカークラスタリング ガイド をご覧ください。または、マーカークラスタリングが機能する方法とご自身のプロジェクトのために調整できるオプションについての詳細をご覧ください。
マーカークラスタリングはどのように動くのか
マーカークラスタリング ライブラリは GitHub のオープンソース マップ ユーティリティの一部です。すべてのコードにアクセスでき、必要に応じて変更することもできます。アルゴリズムが機能する高度な方法を見てみましょう。
マーカーの座標間の距離 に基づいていちばん近いクラスタに追加されます。
マーカー クラスタをカスタマイズ
マーカー クラスタの見た目と機能を調整する方法はたくさんあります。その多くは基本となるライブラリを編集する必要はありません。その代わり、クラスタを作成する時に設定できるオプションがいくつかあります。
imagePath オプションを使いました。クラスタ ライブラリは、1 から 5 までの番号をパスの末尾に追加し、そのあとにファイルの拡張子が続きます。この拡張子のデフォルトは .png です。imageExtension オプションで別のファイルの種類を使用することができます。マップ上では透明なアイコンが最適に見えることを覚えておいてください。
gridSize：クラスタ グリッド内のピクセルの数
zoomOnClick：クラスタをクリックすると拡大するかどうか
maxZoom：標準のマーカーが常に表示されるまで拡大できるズーム値
styles：文字の色、サイズやクラスタの他の機能を含んだそれぞれのクラスタの種類に向けたオブジェクトの配列
例えば、次のようにクラスタ ライブラリへの呼び出しをすることで、上記のすべてのオプションを一度に使用することができます。
// オプションの定義
const clusterOptions = {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
// マーカーを管理する Marker Clusterer を追加する
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// クラスターが生成されたあとにスタイルを変更する
const styles = markerClusterer.getStyles();
for (let i=0; i<styles.length; i++) {
styles[i].textColor = "red";
styles[i].textSize = 18;
}
マーカー クラスタ ライブラリ のコードから、さらに多くのカスタマイズの方法を見つけることができます。
こちら をご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
丸山 智康 (Tomoyasu Maruyama) - Google Maps テクニカル アカウントマネージャ
