0

I apologize for the utter simplicity of this, but it is beyond me.

I am using a Leaflet and Leaflet.markercluster to add markers to a map. The latter helps resolve clutter by grouping icons near to each other, which would otherwise overlap.

enter image description here

As you can see from this screenshot, the more markers in a group, the darker - sort of, it runs from dark orange, through yellow to green (there are actually 5 levels). Visit the demo and zoom the map to see how it works.

So far, so good. I have implemented this in my app and when expanded to individual markers, they are either green or blue, with each having a specific meaning.

I also have different set of markers, which are read, and now there becoming enough of them to want to cluster them too.

The red marker is enter image description here with RGB value of #982E40 (I use the smaller marker). See here for all leaflet markers.

There are a total of five zoom levels, governed by CSS, depending on how "big" the group is (how many markers it represents).

Finally, a question: which RGB values, dark to light, should I use to represent the second set of circular cluster groups (notice that the circles actually have a darker centre, with a lighter surround) in order to distinguish them from the others.

I want to have two visually different groups of clusters. I am capable of making each group a single colour, no matter how markers it contains. I am not capable of making the five levels of each both distinct and visually appealing.

Hmmm, maybe I want to use that outer circle and make it either green or red, irrespective of the centre colour? Also, the default uses up to five colours; maybe that ought to be just 5 shades of green, to compare with 5 shades of red? Note,: I am not married to green & red (the existing groups represent companies and the new one will represent unemployed people).

Also, 2 colours might enough, as the clusters show how many markers they contain. I can see how colours relating to size might help, but might they also confuse?

Improve this question
5
  • 1
    I either don't understand your question, or I don't understand how you expect it to work... it sounds like you are looking for a second set of colour scheme for an alternate data value. But if you have different colours, how do you expect them to merge when they occupy the same area? So for example, say you have a red marker right next to a blue marker. When you zoom out, which grouping cluster do you expect to see? – musefan Jan 18 at 10:43
  • "how do you expect them to merge when they occupy the same area?" it is accetpable for one to be behind the other. – Mawg says reinstate Monica Jan 18 at 10:44
  • "` it sounds like you are looking for a second set of colour scheme for an alternate data value`" - two different kinds of data, two different colours for the clusters – Mawg says reinstate Monica Jan 18 at 10:44
  • 1
    If they overlap, then it will make it difficult to read the number. Also, it is assumed they will occupy the exact same positions for each marker group, so there wouldn't be any benefit to having the second group as you would rarely be able to see them anyway. Unless you can redesign how the markers work, and allow them to show 2 values, then I think it already is the best it can be - just show the combined total. – musefan Jan 18 at 11:04
  • Can we leave that as a problem for another day (upvote)? It probably requires another question, probably on S.O, as it will require some coding. There is a very reltaed S.O question here – Mawg says reinstate Monica Jan 18 at 11:06
3

I think there are two possibilities: the theoretical and the perceptual

Theoretical

Following the color theory, the selection made for the base group is created following one of the halves of the color wheel (A in the image below). Consequently, the following group should be made based on the second half (B in the graph):

enter image description here

Making two different color groups using only hue variables causes poor contrast and a big visual confusion.

Perceptual

Considering visual perception, contrast is the most relevant point to consider. From the three variables of color, hue, brightness and saturation, the base scheme follows the first of these, hue, so I would investigate in depth the possibilities of the other two: brightness and saturation. In my personal opinion, the option that offers the highest contrast is the one that totally nullify the hue, the grayscale. Within the grays there are many possibilities, (Google images: "cool and warm gray shades")

enter image description here

Improve this answer

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.