Webアプリの場合、「クラスター」マーカーアイコンをマップ上の通常のアイコンと区別するにはどうすればよいですか？

Question

約12種類の異なるマーカーを含むマップがあり、一度に表示するには多すぎるため、クラスターアイコンを使用して、近接している複数のマーカーを表します。

これらのクラスターが使用するアイコンを、それらが表す個々のアイコンと区別する最良の方法は何ですか？

Answer 1

ユーザーが探しているものに基づいて検索を絞り込む方法をユーザーに許可することをお勧めします。これは、マーカーの一部を削除するのに役立ちます。

シンボルを1つのマーカーに結合するのが十分でない場合、中央の場所にあるアトラクション/施設が近すぎて個々のマーカーを表示できない場合。次に、ユーザーがズームインすると、マーカーを分割して位置をより適切に反映できます（可能な場合）。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 2

私の質問を正しく理解できたら、クラスターアイコンを使用して、近すぎて重なってしまい、クリックできない/選択できない複数の個別のアイコンを表現したいと考えています。

これが事実である場合、私は常に人々が地図上の場所をマークするために使用する赤い球のようなプッシュピンを思い描きます。他の場所から十分離れている個々の場所については、1つの赤いプッシュピンを使用できます。次に、多くの場所がひとまとまりになっている場合、「クラスター」を示​​すすべての方向を指すこれらのピンのクラスターを作成できます。おそらく、ユーザーがこのクラスターを選択すると、画面がこの場所にズームインして、多くの個別のピンが表示されます。

一般的なアイデアの例を次に示します。

これの代わりに：

Answer 3

同様の状況 で、私は次の解決策を選択しました：

それでもいくつかの視覚的な調整が必要ですが、その要点は、クラスター内のポイントの数に応じてスケーリングされた番号付きマーカーを使用することです。

複雑なアイコンベースのマーカーのため、これはケースに直接適用できないので、次のように、iOSアプリから小さな番号のバッジを借りることをお勧めします。

Answer 4

現在のアイコンは少し複雑すぎると思います。それらを簡素化する方法を考えてください。

あなたの最善の策は、Yallowが示した図と同じような色と数を使うことかもしれません。しかし、各色は12のタイプの1つに関連しています。

つまり、1つしかなかった場所にはアイコンが表示され、それ以外の場所には色と数が表示されます。

これは圧倒されるかもしれないので、私は無地を使用しないと思いますが、色のついた円と白い塗りつぶしの組み合わせはうまくいくかもしれません。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

更新

これについてもう少し考えました...色を使用している場合は、マップ上の色を強調しないことをお勧めします...グレースケールまたはわずかにミュートしたマップの方がうまくいく場合があります。

また、12種類の要素がたくさんあると思いました。他よりも重要なものがあるはずです。なぜ上位5つだけを表示し、「詳細」または「詳細」設定でその他を非表示にしないのですか。

今、これについて考えるのをやめます！

^{bmmlソースをダウンロード}