Angular × Google Maps：大量マーカーをクラスタリングする方法（第1回）（js-markerclustererplus導入・実装）

こんにちは。アーティサン株式会社の木戸です。

マーカークラスタリングは導入できても、どの単位でまとめるか／ズーム時の挙動／イベント連携で使い勝手が大きく変わります。

いまの地図要件に合わせて、パラメータ設計や実装方針を一緒に整理したい場合は、技術相談（設計レビュー）として切り出して進められます。

Microsoft クラウド事業

Azure を中心とした Microsoft クラウド環境で、設計・開発・移行・運用まで一貫して支援します。

はじめに

Angular で Google Maps を利用しランドマークなど大量のマーカーを表示した時、画面が煩雑になり見づらくなってしまう場合があるかと思います。
本記事ではそのような状況を回避するため、マーカーをクラスタリング(統合)して表示する、マーカークラスタリングライブラリを Angular に導入・設定する方法をご紹介します。
また、本番環境へ導入する際の注意点等もご紹介します。

Angular で 大量のマーカー表示によるユーザーエクスペリエンスの低下を改善したい方に向けた記事となります。

利用例

下の2枚の画像を見比べてください。1枚目の画像を見るとマーカーが多く、見づらくなっていますが、
マーカークラスタリングライブラリを利用すると、2枚目の画像のようにマーカーを統合して表示する事ができ、ユーザーエクスペリエンスを改善する事ができます。

Google Maps マーカークラスタリングライブラリ
(js-markerclustererplus)とは

表示されている Google Maps を一定のサイズの正方形で区切り、各正方形内に含まれているマーカーを統合し、1 つのクラスターマーカーで表示するライブラリです。
マーカーを統合して表示する事によって、ユーザーエクスペリエンスを改善する事ができます。
また、大量のマーカーを一度に扱わずにすむため、処理負荷を軽減する事もできます。

環境

導入

まず最初に、ライブラリと必要なファイル群を導入していきます。

インストール

@angular/google-maps のインストール

Angular で Google Maps を表示するためのライブラリをインストールします。

js-markerclustererplus のインストール

マーカークラスタリングライブラリをインストールします。

js-markerclustererplus インストール時の注意点

js-markerclustererplusにて 型定義 @types/google.maps のインストールが記載されていますが、@angular/google-maps 側ですでに型定義されているため、インストールの必要はありません。
(二重定義になってしまいます)

クラスタマーカー画像の用意

クラスターマーカーの画像は任意に設定可能であり、ライブラリ側で用意されている物または、独自に作成した物を使用できます。

ライブラリ側で用意されている画像を使用する場合

js-markerclustererplus/imagesにある画像をダウンロードし、Angular プロジェクトに組み込みます。
パスは適宜設定して下さい。

本番運用時の注意点

MapMarkerClustererの Loading the Library にて、script タグを使用しunpkg.comから読み込んでいます。
しかしunpkg.comが障害等で利用できない場合を考慮し、Angular プロジェクトのビルド時にライブラリを組み込むようにします。

ライブラリを組み込む形にすると、外部サーバーの障害を考慮する必要がなく、可用性を確保できるため本番運用に適しています。

Angular ビルド時に マーカークラスタリングライブラリ を取り込む

公開ライブラリの使用を参考に、下記設定を angular.json に記載し、ライブラリを Angular ビルドに組み込みます。

# angular.json
"scripts": ["node_modules/@googlemaps/markerclustererplus/dist/index.min.js"],

実装

シンプルな実装例を記載します。

実装方法

1. Angular コンポーネントを作成
2. HTML ファイルに google-map タグを追加
3. google-map タグ内に map-marker-clusterer タグを追加
4. map-marker-clusterer タグ内に、表示する map-marker タグを追加

Angular コンポーネントの作成

$ npx ng generate component sample

HTML ファイルに各種タグを追加

• コンポーネントのメンバ変数に、表示するマーカー位置の配列を設定します。(sample.component.ts: 10 行)
• 各種タグを追加し、*ngFor を用いてマーカー位置の配列からマーカーを生成します。(sample.component.html: 4 行)

// sample.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "app-sample",
  templateUrl: "./sample.component.html",
  styleUrls: ["./sample.component.scss"],
})
export class SampleComponent {
  public markerPositions: google.maps.LatLngLiteral[] = [];
}

<!-- sample.component.html -->
<google-map>
  <map-marker-clusterer imagePath="assets/images/m">
    <ng-container *ngFor="let position of markerPositions">
      <map-marker [position]="position"></map-marker>
    </ng-container>
  </map-marker-clusterer>
</google-map>

設定

パラメータ

主要なパラメータをご紹介します。

実装例

<map-marker-clusterer
  [gridSize]="100"
  [minimumclusterSize]="5"
  [imageExtension]="'jpg'"
  [imagePath]="'assets/images/m'"
  [maxZoom]="12"
  [zomOnclick]="false"
>
  <!-- マーカーを追加 -->
</map-marker-clusterer>

gridSize(デフォルト値: 60)

クラスタリング処理を行う際に、表示されている Google Maps を区切る正方形のサイズ(ピクセル単位)を指定します。
値が大きい場合、より広い領域を 1 つのクラスターマーカーで表示します。

minimumClusterSize(デフォルト値: 2)

上記 gridSize で区切った 1 つの正方形内のマーカーの数が、この数以上になるとクラスターマーカーを表示します。
大きな数値にした場合、クラスタリングの効果が発揮されず、そのままマーカーが表示されるためあまり大きな数値を設定するのは推奨しません。

imageExtension(デフォルト値: ‘png’)

クラスターアイコンに使用する画像ファイルの拡張子。

imagePath(デフォルト値: ‘../images/m’)

クラスターアイコンに使用する画像ファイル名のプレフィックス。
実際に使用される画像ファイル名は以下の形で決定されます。

• imagePath + n + ‘.’ + imageExtension(n は 1,2 等、数字は 1 つのクラスターに含まれるマーカーの数によって変化します。)

maxZoom(デフォルト値: null)

クラスタリング処理を行う最大のズームレベル。
null の場合は全てのズームレベルでクラスタリング処理が行われます。

zoomOnClick(デフォルト値: true)

クラスターマーカーがクリックされた時に、マップをズームするかどうかを指定します。

イベント

クリックされた際などに発行されるイベントをご紹介します。

実装例

<map-marker-clusterer
  (clusteringbegin)="sample1()"
  (clusteringend)="sample2()"
  (clusterClick)="sample3()"
>
  <!-- マーカーを追加します -->
</map-marker-clusterer>

clusteringbegin

マーカーのクラスタリング処理の開始時にイベントが発行されます。

clusteringend

マーカーのクラスタリング処理の終了時にイベントが発行されます。

clusterClick

クラスターマーカーのクリック時にイベントが発行されます。

あとがき

本記事では導入、設定など基本的な部分をご紹介しました。
次回の記事では、クラスターマーカーの表示切り替え、マーカーアニメーション使用時の注意点等、より実践的な部分をご紹介致します。

関連リンク

• MapMarkerClusterer
• js-markerclustererplus
• js-markerclustererplus/images
• 公開ライブラリの使用

AngularでGoogle Maps マーカークラスタリングライブラリの利用(2)

Angular で Google Maps を利用した際の、大量のマーカー表示によるユーザーエクスペリエンス低下の回避法についてご紹介します。クラスターマーカーの表示・非表示の切り替えや注意点を説明します。

本番環境では、外部依存（CDN）やビルドへの組み込み、大量データ時のパフォーマンスなど、運用前に潰しておきたい論点が増えます。

既存の Angular アプリに地図機能を組み込み、クラスタリング設定まで含めて安定運用に乗せる段階で詰まっている場合は、実装・運用設計の支援として整理できます。

Microsoft クラウド事業

Azure を中心とした Microsoft クラウド環境で、設計・開発・移行・運用まで一貫して支援します。