異なるステータスのマップマーカーをクラスター化する方法
マップ上に多数のマーカーを表示するアプリケーションを設計しています。これらのマーカーでいくつかのクラスタリングを行う必要がありますが、問題は、各マーカーのステータスに4つの可能なオプションがあることです。
- OK（緑）
- 警告（黄色）
- 重大なエラー（赤）
- 接続なし（灰色）
また、マップには最大10種類のマーカーがある場合があります。
現在のアプローチは、マーカーのタイプをアイコンで、ステータスを色で表示することです。ユーザーがズームアウトすると、同じタイプのマーカーがクラスター化され、グループ内のマーカーの総数が表示されます。マーカーグループの色はグループ内の最も重要なステータスに基づいているため、たとえば、これらのマーカーの1つが警告のステータスを持っている場合、他のすべてのマーカーが持っているにもかかわらず、クラスター化されたマーカーの色は黄色になりますOKのステータス。
ただし、これは問題に対する最良の解決策ではないというユーザーからのフィードバックを得ています。
これらのアイコンを見ただけでは、これらのグループのどれがより重要であるかをユーザーが知る方法はありません。また、ユーザーフィードバックに基づいて、グループ内のマーカーの総数は、異なるステータスのマーカーの数を示すほど重要ではないと判断しました。
この問題に取り組むために私が作成したドラフトの一部を以下に示しますが、これらの使いやすさに不満があります。
では問題は、最も有益で使いやすい方法で、マーカーグループ内のさまざまなステータスをどのように表示できるかということです。
したがって、地図作成の観点からは、状況に応じて機能する2つのアプローチがありますが、これらのアプローチは、ユーザーがこれらのマーカーをどのように処理するかによって異なります。
1つは、ユーザーがこれらを視覚的な補助として使用することを意味します。つまり、対話性がなく、静的な画像でユーザーに通知します。この場合、次のような円グラフマーカーを使用します。
これにより、ユーザーはどの領域が良いか、悪いかなどが一目でわかるようになります。ただし、インタラクティブ機能が必要だと思うので、2番目のソリューションを使用します。
2番目の解決策は、ベースとして リーフレットとMapboxのマーカークラスタリング を使用することですが、少し変更します。
ユーザーがグループ内のマーカーを正確に表していない色に不満を感じているので、クラスターを中間色にします。グレーが既に使用されていることはわかっていますが、グレーの明度が薄い可能性があります（マップ内の他の色によって異なります）。
これは、Mapboxの例から変更が行われる場所です。問題の領域を拡大するのではなく、マーカーを開いて、ここで提供した例と同様に、マーカーの下に各カテゴリの数を表示します。
あなたは家をあなたが選ぶ同じ中立色に保ちますが、それらのカテゴリーに応じて色付けされたそれぞれの数字のセットを持っています。これにより、ユーザーはそのマーカーの下にあるものの概要をすばやく確認でき、ズームインしてそれらを分離して、より近くのビューを取得できます。
編集：
問題に関するいくつかの詳細情報を取得した後、別のアプローチを取る必要があります。
ユーザーに問題を解決することを目的とする場合は、最も重要な問題を最初に示す必要があります。上記のLeafletのクラスタリングソリューションを引き続き使用します。クラスターの色は、そのグループで最も重大な問題を示している可能性があります。
ユーザーがグループをクリックすると、そのエリアが拡大され、新しいクラスター（またはマーカー）が作成されます。これにより、ユーザーは問題のある場所をすばやく確認し、必要に応じて対処することができます。
私は同様の問題に直面し、Googleマップマーカークラスターライブラリを拡張し、ライブラリに付属するデフォルトのクラスターマーカーの代わりにBDDによって提案された円グラフを使用することで解決しました。私のGitHubリポジトリからソリューションをダウンロードできます： https://github.com/hassanlatif/chart-marker-clusterer
マーカーとして単一のピンを保持しながら、ピン内で単純な視覚化を整理して、データが「含まれたまま」になるようにすることができます。表示するアイテムが多い場合は、ピンのサイズを少し大きくすることができます。
例えば：
または、アイコンを内側の円の外に移動します。
ピンの形状を変更できます：
また、クラスター内で最も重要なアイテムの種類に応じてピンを色分けできます。
興味のあるアイデアは次のとおりです。
これにより、マーカーに必要なスペースが減り、数値によってマップの視覚がより明確になります。それらを概説すると、読みやすくなります。
普通の種類。しかし、それは時の試練に耐えました。
上記のすべての提案を使用すると、ユーザーインターフェースが乱雑になり、見ているものをすばやく理解することが難しくなります。
毎分タイマーを実行し、一度に1つのカテゴリのみを表示します。次のカテゴリが表示されるまでの時間とそれが何であるかを示すインジケーターとともに、表示されているもの（関連付けられた色で）を示す大きな見出し（遠くからの読みやすさ）を用意します。
ユーザーがボタンの上にマウスを置くと、さまざまなカテゴリを自由に切り替えることができます。このようにして、プロジェクションをそのままにしておくとループ上で実行でき、手動で使用すると対話できます。
ベスト、シェーン