3

I have a map application that shows locations. You can select what item you want to see data about as well, which edits the icons on the map. In the below picture, you see several locations, and the selected item was a football. The number in an icon indicates how many footballs are at that location, and the colour indicates how many transactions involving footballs have been made at that location. The red locations have a lot of transactions involving footballs, the green ones have very little to no transactions, yellow is in between.

The current situation However, I'm using marker clusters as well. The red icon with 100 on the left contains several markers. If you click on the red 100 icon, or zoom in on it, it falls apart into multiple icons, as shown in the second picture:

Red zoomed in /

I have considered adding an transparent outer border to the cluster icons, but while that does differentiate the cluster icon from the marker cluster icon, and outer border doesn't exactly say "there's more markers beneath this icon".

My question:

How do I differentiate the cluster icons from the single marker icons, considering they already show so much information?

Improve this question
1
  • As a side note, I sure hope you don't have any colour-blind users. Red-green colour-blindness is the most common type. They may not be able to see your colour-only distinctions.
    – Bill Dagg
    Jan 31, 2015 at 0:45

4 Answers 4

Reset to default
7

Normal markers can be as is, but cluster markers can be distinguished by having group of overlapping makers, as show in the snap below:-

This is similar to having user icon, and user group icon.

enter image description here

Zoomed in view

enter image description here

Improve this answer
2
  • Thanks, this is a great idea! I'm going to wait till the end of the day to see if anyone else answers before selecting an answer, but this is a very clean and doable answer!
    – yesman
    Dec 5, 2014 at 10:40
  • I ended up implementing this idea. As a cool touch, the extra circles behind the front one have the colours of the icons included in the marker cluster. That means that in your second picture, the front circle would be red, but with 2 green circles and 1 yellow one behind it.
    – yesman
    Dec 10, 2014 at 13:48
3

You may want to look at real estate and apartment search sites and applications for ideas.

A common practice is to use size to differentiate. You can also use shape. Where you might have a a round cluster pin (with our without radial), for an individual item, you might use a marker shaped like a map pin.

cluster markers and map pins

There are lots of way to represent individual map pins that make them clearly different from a cluster marker: http://goo.gl/Ejvu98

Improve this answer
2
  • This is also a good idea. While I don't agree with making the markers different sizes (smaller ones would be harder to tap on a touch screen), the border could also be a good indication of it not being a normal marker.
    – yesman
    Dec 10, 2014 at 13:46
  • You could also take a look at map-search based search sites and their apps in real estate, apartments, and travel for ideas: 1. Redfin has a good example of using cluster markers and individual pins 2. The big boys in real estate: Trulia, Zillow, Homes.com, Redfin, Realtor.com 3. beta.har.com/mapsearch <-- They do pretty neat stuff in map search. 4. Apartment search: ForRent.com, Rent.com 5. Hotel and Lodging: Hipmunk, AirBnB 6. Entertainment search: Foursquare
    – Kelley C
    Dec 11, 2014 at 19:03
2

I really like the stack option mentioned above as a simple solution!

There is as a fairly important consideration though:

Using colours can be an issue for those with colour-blindness, namely your green and yellow will be practically indistinguishable. As its a primary metric this might be worth noting?

In the effort of helping give more ideas, why not try a custom marker? custom markers

I've included a colour version for fun, but you could play around with ways of representing the 3 variants (red/yellow/green) in that space..perhaps wedges, bars, but make sure to explore in greyscale or it'll run into the same hurdle.

The small plus icon simply denotes that the marker has "child" elements.

Hopefully that gives you some ideas!

Improve this answer
1
  • Thanks, I had not considered colour-blind people yet. Switching the current marker colours to various shades of grey should be no problem. I'll add a selection box for that.
    – yesman
    Dec 5, 2014 at 12:29
1

I wondered if you'd considered hotspot clusters? Like what the weather maps use to display the intensity of a storm? Or as in the case of this link, Earthquake Hazards: http://pubs.usgs.gov/fs/2003/fs017-03/

I have also been reading lately how the nba teams use cameras located all over the court to look at the way sports contests are viewed, understood and played. Again in some of their rendering visuals hotspots are used:

hotspot areas on the court

Could this possibly work for you, when much more data is presented?

Improve this answer
1
  • It's a cool idea and I have considered it, but there's not enough points on my map to make a heatmap useful. You'd end with a lot of single points that are bright red with a small yellow border, and only get a proper heatmap (like in your image) when you zoom out very far.
    – yesman
    Dec 10, 2014 at 13:41

Your Answer

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

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