10

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

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

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).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

| improve this answer | |
  • Like the switching off idea ... would allow user to customize view to their not as convinced by the combined icons. – Lisa Tweedie Jun 12 '12 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 – CheapSteaks Jun 12 '12 at 17:55
9

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

| improve this answer | |
  • This is great. Have you implemented it? – Lisa Tweedie Jun 12 '12 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) – CheapSteaks Jun 12 '12 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 Jun 12 '12 at 15:43
  • Oh I think I was having the same thought as you ... was drawing the pic when you posted this! – Lisa Tweedie Jun 12 '12 at 15:57
  • >for a washroom you could make the icon a blue washing machine That's genius, lol – CheapSteaks Jun 12 '12 at 15:59
4

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

| improve this answer | |
  • Now why didn't I think of that... +1 for simple and elegant... – Lisa Tweedie Jun 18 '12 at 8:19
3

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.

mockup

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!

mockup

download bmml source

| improve this answer | |
  • No worries it was fun... did lots of this stuff for my Phd many moons ago. – Lisa Tweedie Jun 13 '12 at 22:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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