How to cluster map markers with different statuses

Question

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:

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:

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

Answer 1

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:

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:

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.

EDIT:

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.

Answer 2

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

Answer 3

Here's an idea you may be interested in:

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.

Answer 4

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

Answer 5

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:

Or moving the icon outside the inner circle:

You could change the shape of the pin:

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.