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?

Screen capture

  • 1
    Could you please show us a visual of what you are describing?
    – JeffH
    Commented Jun 12, 2012 at 15:02
  • @JeffH cood idea, here's a screencap i.imgur.com/9RL8I.jpg Commented Jun 12, 2012 at 15:13

4 Answers 4


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

  • Like the switching off idea ... would allow user to customize view to their not as convinced by the combined icons. Commented Jun 12, 2012 at 16:19
  • I really like this. The library that handle's marker clustering doesn't seem to have the function to merge marker icons, but it would be fun to implement Commented Jun 12, 2012 at 17:55

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:

enter image description here

Instead of this:enter image description here

  • This is great. Have you implemented it? Commented Jun 12, 2012 at 15:28
  • Yes very similar, although the issue is there are more than 1 kind markers on display at once, their clusters need to be identifiable (so the icons for washroom marker clusters would be distinguishable from markers for parking lot clusters) Commented Jun 12, 2012 at 15:28
  • From what I've found people respond very well to color. Have you considered color coding the icons and then using a legend for the user to reference? For example for a washroom you could make the icon a blue washing machine.
    – PL3X
    Commented Jun 12, 2012 at 15:43
  • Oh I think I was having the same thought as you ... was drawing the pic when you posted this! Commented Jun 12, 2012 at 15:57
  • >for a washroom you could make the icon a blue washing machine That's genius, lol Commented Jun 12, 2012 at 15:59

In a similar situation I chose the following solution:

Clustered simple map markers

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:

Clustered icon map markers

  • Now why didn't I think of that... +1 for simple and elegant... Commented Jun 18, 2012 at 8:19

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


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

  • No worries it was fun... did lots of this stuff for my Phd many moons ago. Commented Jun 13, 2012 at 22:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.