We're designing an application that displays a large number of markers on a map. We need to do some clustering on these markers, but the problem is that each marker has four possible options for their status:

  1. OK (Green)
  2. Warning (Yellow)
  3. Critical error (Red)
  4. No connection (Grey)

There might also be up to 10 different type of markers on the map.

The current approach is to display the type of the marker with an icon and the status with a colour. When user zooms out we cluster the same type of markers and show the total number of markers inside the group. The colour of the marker group is based on the most critical status inside the group, so for example if one of these markers has a status of warning, the colour of the clustered marker will be yellow, even though all of the other markers have a status of OK.

However we have gotten feedback from the users that this is not the best solution to the problem:

Two marker groups

There is no way for the user to know which one of these groups is more critical just by looking at these icons. Also based on the user feedback we have decided that the total number of markers inside of group is not as important as showing the number of markers with different statuses.

Here are few drafts I have made to tackle this problem, but i'm not happy with the usability of these:

Different type of clusters

So the question is how can we show the different statuses inside the marker group in the most informative and usable way?

  • 2
    Quickly reading all of the post whats strikes me is you are trying to put to much information on the graphical interface. If they need to see what is critical so action can be taken the show that information separately. Such as a list. Basically show them only the information they need to make a decision everything else is irrelevant.
    – user69407
    Commented Aug 1, 2015 at 15:12
  • 1
    It's weird that you didn't describe the task/goal of your users. That should be what drive your design. Do they want to find the most critical location? the one with best/worst distribution? etc. Commented Mar 4, 2016 at 14:38
  • 1
    Also if you have 10 different states using pie chart is to be consider carefully as it a kind of chart that work well for 3-4 types but don't scale well, even more if it's a small icon. Maybe consider horizontal stackbar Commented Mar 4, 2016 at 14:40
  • 1
    Did you user test various algorithm to decide the color of a pin? Does 1 critical = 1 ok, or is it 1 critical = 10 ok? Or you can mark pin as red as soon as they have critical but scale them based on the number of critical (the more the bigger) Commented Mar 4, 2016 at 14:46
  • 1
    Interesting question. Could it be that when it's seen on a high level, all that data isn't apparent until it's zoomed in?
    – UXerUIer
    Commented Mar 4, 2016 at 21:29

5 Answers 5


So there are two approaches coming from a cartographic standpoint that could work in your situation, but it depends on what you want the user to do with these markers.

The first involves the user using these as just a visual aid meaning they would have no interactivity and be just static images to inform the user. In this case, I would a pie chart marker similar to these:

Pie chart markers

image source

This would give your users a quick glance at what areas are good, bad, etc. However, since my guess is you want interactivity, I would go with the second solution.

The second solution would be to use Leaflet and Mapbox's marker clustering as a base, but modifying it slightly.

Since your users were upset about the color not accurately representing the markers in the group, make the clusters a neutral color. I know gray is already in use, but it could maybe be a lighter shade of gray (it all depends on the other colors in your map).

This is where the modification would take place from the Mapbox example. Instead of zooming in on the area in question, have the marker open to display the number of each category under the marker, similar to the examples you provided here:

User examples

You would keep the house the same neutral color you choose, but then have each individual set of numbers colored according to their category. This would give your users a quick overview of what is under that marker and allow them to zoom in to separate them to get a closer view.


After getting some more information about the problem, a different approach should be taken.

If the idea is to get users to clear out the problems, then the user should be shown the most critical ones first. I would still use Leaflet's clustering solution that's mentioned above. The color of the cluster can show the most critical problem in that group.

When the user clicks on the group, they will be zoomed in to that area and new clusters (or markers) will be created. This will allow the user to rapidly see where their problem areas are and address them as they are needed.

  • 2
    Thank you for your answer. It seems that I forgot to mention couple of things in my question: Sometimes this map will be projected on the wall of a monitoring room, so users should be able to see the the situation without any interaction with the map. So it should work without any hovers, mouseclicks etc. However, just using a piechart will not be the best solution either because there might be a case where group has 100 pins and only one of them is critical. To a user it seems that the piechart is almost copletely green, but in reality there is one error that user must take care of.
    – JBERG
    Commented Apr 17, 2015 at 6:11
  • Also the problem with users is not that the colour did not represent all of the markers in the group, but more so that the users have no way to tell which of the groups is in most critical state and needs to be taken care first. Hope this clarified my problem
    – JBERG
    Commented Apr 17, 2015 at 6:17
  • 1
    Just so I can understand correctly, will your users care about which ones are 'OK' or will they just care about the 'Warning' and 'Critical' groups?
    – BDD
    Commented Apr 17, 2015 at 10:44
  • User needs to see which markers are in 'OK' status, but they do not require any user actions. If the marker is in 'warning' or 'critical' state, user needs to do something in order to get it back to 'OK' state. So the big picture is important, but it is necessary for the user to see with just a quick glance those markers that require some actions and also to be able to decide which groups to take care first.
    – JBERG
    Commented Apr 17, 2015 at 12:08
  • I've updated the answer. Let me know if you want more clarification!
    – BDD
    Commented Apr 20, 2015 at 2:06

I faced a similar problem and solved it by extending the Google Maps Marker Cluster Library and using pie charts as suggested by BDD instead of the default cluster marker that comes with the library. You can download the solution from my GitHub repository: https://github.com/hassanlatif/chart-marker-clusterer


Here's an idea you may be interested in:

enter image description here

It reduces the required space for your marker, and the numbers provide more vision of the map. Outlining them makes them easier to read.
Kind of plain. But it's withstood the test of time.


With all of the suggestions above you end up cluttering the user interface and making it more difficult to quickly understand what is being looked at.

Run a timer every minute and only show a single category at a time. Have a big heading (ease of readability from a distance) stating what is being shown (with the associated colour), along with an indicator of how long until the next category is show and what that will be.

Have options for a user to mouse over buttons to toggle the different categories at their will. This way it can run on a loop when left on a projection, and can be interacted with when being used manually.

Best, Shane


You could keep a single pin as the marker but organise a simple visualisation within the pin so the data stays 'contained'. You could increase the size of the pin a little if you have more items to show.

For example:

enter image description here

Or moving the icon outside the inner circle:

enter image description here

You could change the shape of the pin:

enter image description here

And you could colour the pin according to the most important type of item within the cluster - even if it's not the most numerous.

enter image description here

  • 1
    The problem here is that the size of the pin is really big. Even when we cluster the markers there will still most likely be ~20-30 markers on the map and with a pin like this almost all none of the map itself is visible. Also the smallest numbers are quite hard to see even in this size, so if we need to resize the pin it will be even harder to see. I understand that this is most likely due to my example, should have stated clearly that the image of the pin was not in real size.
    – JBERG
    Commented Apr 17, 2015 at 6:00
  • @JBERG - my examples are just that - examples - inspiration to do what you will - not an exact size template. :) Commented Apr 17, 2015 at 7:02

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.