The Web Developer Bootcamp 2023 セクション56/61
Mapboxでクラスター地図を作る
複数の地点の位置を示す地図をウェブサイトに表示したいが、各地点を個別に表示する必要はないと思ったことはないだろうか。そこで登場するのが、クラスターマップです。クラスター地図は、複数のポイントを1つのクラスターにまとめ、そのクラスター内のポイント数を表示することで、あるエリアのポイント密度を簡単に確認することができます。このブログでは、オープンソースの地図プラットフォームであるMapboxを使って、クラスターマップを作成する方法について説明します。
はじめに
クラスタマップを構築するための最初のステップは、Mapboxを使用して基本的なマップを設定することです。このためのコードは、ドキュメントや例とともに、Mapboxのウェブサイトに掲載されています。このコードをコピーして、アプリケーションに統合します。また、Mapboxのアクセストークンを必ず含めるようにし、コードに渡します。
データの再利用
次に、キャンプ場のデータを地図に取り込む必要があります。しかし、現在のデータでは、すべてのキャンプ場がモンタナ州の1つのクラスターにまとまっています。これを解決するために、データを再シードする必要があります。そこで、citiesデータファイルからランダムな都市の緯度と経度を取り出し、それをシードに使用します。サーバーを起動し、ページを更新した後、新しいキャンプ場が異なる場所に表示されているかどうかをチェックします。
キャンプ場の基本的なクラスタリング
データの設定が完了したので、キャンプ場データをマップに差し込むことができます。Mapboxが期待するフォーマット（主要な「特徴」を含む）に適合するように、キャンプ場データを修正する必要があります。データを正しい変数に追加し、期待される形式に合うようにフォーマットします。ページを更新した後、キャンプ場の位置が地図上にクラスタとして表示されているかどうかを確認します。
マップをスタイリングする
次のステップは、マップのスタイル設定です。まずは50のキャンプ場という小さなデータセットから始め、200まで増やして、より多くのデータでマップがどのような挙動を示すかを確認します。クラスターのサイズと色を調整し、3つの異なる色を使用することにします。しかし、この結果に満足できず、さらにクラスタのサイズと色を変更して、マップの見た目を改善します。
カスタムポップアップの追加
最後に、カスタムのポップアップをマップに追加します。キャンプ場スキーマに仮想プロパティを作成し、ポップアップテキスト用のテンプレートをあらかじめ作成しておきます。JavaScriptのコードでこの仮想プロパティにアクセスし、キャンプ場のタイトルとIDに基づいて情報をダイナミックに表示します。また、説明文を一定の文字数に切り詰め、切り詰めた説明文をポップアップ・テキストに追加します。
まとめ
結論として、Mapboxでクラスターマップを構築することは、大量のデータをより管理しやすく理解しやすいフォーマットで表示するための素晴らしい方法です。このブログ記事で取り上げたステップに従うことで、特定のニーズに合ったカスタムクラスターマップを作成することができるようになります。ウェブ開発のほとんどは暗闇の中で手探りするものですが、適切なリソースと試行錯誤があれば、すぐに美しく機能的なクラスターマップを作成することができますよ。
この記事が気に入ったらサポートをしてみませんか？