3

I'm creating a google map, with some custom markers on it. Each marker has a "heat" parameter, and I would like to design those markers depending on this parameter. But I can't figure the best way to do it.

Let's say if I have a marker with a score of 100, and another one of 30, I would like to show that the one with a score of 100 is hotter of course, but I don't know what is the best way. Coloring them with shades or red? And turning this red to yellow the less hot the marker is? Is this a good way?

I'm coding with javascript, but I'm bad at designing and coloring things. So I'm kind of open-minded about colors and animations, but I don't actually know how to use them. Also, I would like to show which marker is the hottest one. I thought about bordering this one, or maybe making him pulse with an animation. I don't see as many examples over the web showing a lot of markers "ranked" with some color, or whatever else. I also thought about the size of the marker, but I ask you what is the best way.

I don't ask you to do the job for me, like the coding or whatever else, just to give me an idea of how a designer would solve this "heat" problem.

Improve this question
2
  • 2
    I think you'd be most helped by looking up examples of how these sorts of things work. You should search terms like "heat maps" and look at how map services do similar things
    – Zach Saucier
    Jun 28, 2016 at 4:58
  • 1
    @ZachSaucier "heat map" or "heatmap" is a specific term in geography/cartography jargon that refers to something somewhat different so searching for that will probably give bad results. "temperature map" would do better.
    – smithkm
    May 26, 2017 at 0:49

2 Answers 2

Reset to default
1

Personally I think more information about what exactly you are indicating with the markers is needed to give a complete answer, but maybe this can help you get started.

Assuming you are talking about 'hotness' in temperature, the most common way I have come across to specify temperature is with the colours green, yellow and red. Green being the coldest, red the hottest.

Blue and red are also common to indicate if something is hot or cold, but these colours blend into purple when working with gradients, which can be confusing.

As far as size goes, I would try to not play with the size of the markers. Often there are two sizes for markers, smaller for less important information and larger for important information. (ie; big cities get big markers, neighbourhoods get small markers).

I think Zach's comment is good as well, do some research on design websites to see what other people are choosing and find out what matches your specific project.

Improve this answer
3
  • I have already done researches, asking a question here is the last thing I do. Thank you for your answer, but I didn't give enough informations, it's not about temperature hotness, it's more like the hotness of a topic, a thread, like on the front page or reddit for example. But I've done my own mechanism: I color from yellow to red, and I change opacity, and z-index (coldest = lowest z-index, opacity, and near yellow), with a white thin border, and the hottest marker is purple with a pulsating animation on it.
    – mgul
    Jun 29, 2016 at 11:38
  • In that case I would pick a color that matches the style of the subject and take dark and light shades. For 'hottest shops, go for shades of light pink to dark pink for example.
    – Kelly
    Jun 29, 2016 at 11:39
  • I've edited my previous comment, and I'm working on a dark styled map so I think I'll play with light shades for markers. Here is the result with fake markers: imgur.com/5puSjwb
    – mgul
    Jun 29, 2016 at 11:40
0

ColorBrewer is a tool for designing colour schemes for maps, considering things like the kind of data, how many classes it divides into, and whether it needs to be safe for print or colourblind users.

Improve this answer

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.