For a web-app, how to differentiate “cluster” marker icons from normal icons on a map?

Question

We have a map with around a dozen different kinds of markers, and there are too many to display at once so we're using cluster icons to represent multiple markers that are close together.

What would be the best way to differentiate the icons that these clusters use from the individual icons that they represent?

Answer 1

I would suggest allowing users a way to filter down their search based on what they are looking for; as this can help remove some of your markers.

When that is not enough how about combining symbols into one marker, when the attraction/facility in a central location are too close to show a individual markers. Then as users zoom in the markers could be split up to better reflect location (when possible).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

If I understand your question correctly you want to use a cluster icon to represent multiple individual icons that are too close together and would otherwise overlap and would be unclickable/unselectable.

If this is the case I always envision the red sphere-like pushpins that people use to mark locations on a map. For individual locations that are far enough away from the others you could use a single red pushpin. Then if many locations are bunched together you could create a cluster of these pins that point out in all directions indicating a "cluster". Perhaps a user could select this cluster and the screen would zoom in on this location exposing many individual pins.

Here is an example of the general idea:

Instead of this:

Answer 3

In a similar situation I chose the following solution:

It still needs some visual tweaks, but the gist of it is to use a numbered marker scaled according to the number of points in the cluster.

This isn't going to be directly applicable to your case due to your complicated icon based markers so I would suggest borrowing the little numbered badges from iOS apps, like:

Answer 4

I think your current icons might be a little too complex. Think about ways to simplify them.

Your best bet might be to use color and number similar to the way the diagram Yallow showed. But each color related to one of the twelve types.

So places you had just one it would show the icon and places where there were more it would show the color and number.

I think I wouldn't use solid color as this might be overpowering but a mix of a colored circle with a white fill might work.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Update

Had a few more thoughts on this... If you are using color you might want to de-emphasize the color on the map... a grey scale or slightly muted map might work better.

Also I was thinking that 12 sorts of elements was a lot. There must be some that are more key than others. Why not only show the top five and hide the others in an "advanced" or "more" setting.

Will stop thinking about this now!

^{download bmml source}