Modify project grid map stylings

[ethan-nelson]

Reviving the discussion from #500, here are changes to make different states on the map a little more visible. Here's an example of the map:

Comments? The other option may be to explore the leaflet plugin for fill patterns, but that my be a bit overkill.

[althio]

Thanks for the proposed PR.
Love it (of course...) :-)

[pgiraud]

I like it too. Thanks for the initial work @althio.
I think this is an important enhancement and I should have taken this into account earlier myself.

The only color I'm not super happy with is the pink for invalidated. I've no other suggestion though.

[coveralls]

Coverage remained the same at 94.898% when pulling 56b07a5 on ethan-nelson:tile-colors into d00afa1 on hotosm:master.

[ethan-nelson]

Yeah medium orchid wasn't my most favorite. How about we match validated or invalidated tiles with the styling of the validate/invalidate buttons? That way the status is like a stoplight: red-not ready, yellow-caution, green-good to go. But then do we want to keep the outline color of ''currently being worked on'' red as well?

[althio]

I don't like stoplight (red/yellow/green) for several reasons:

• red is 'harsh' as a color or judgement. I don't think project managers and validators want to use 'red' to flag tiles (and mappers...) as not acceptable (yet). 'red' makes it the tile appear as in a worse state than unworked on. I think 'purple' is better to convey the idea of 'strange' input that need to be corrected/completed.
• red/yellow/green is NOT good against different kinds of color-blindness.

On the other hand I agree:

How about we match validated or invalidated tiles with the styling of the validate/invalidate buttons

But the other way round: we choose colors for the map tiles and legend, and then we match the styling of the buttons with the map tiles.

[ethan-nelson]

Alright, fair points. Here's the default purple for your perusal...it's similar to the pinkish color above, but not completely. Thoughts?

[althio]

Hi @ethan-nelson, the purple variation is hard to judge directly from the picture, because of the outline which can create optical illusion.

TL;DR: 'purple' #800080 and 'mediumorchid' #ba55d3 are close enough, one is darker, other is lighter. I have no call on this, other than both are valid for me. I value more the feedback of others and your input, especially regarding color blindness and cultural signification of colors.

Long story and some background:
What I tried to do when proposing something like 'pale purple' for Invalidated...
I wanted to maximise the distance between colors, something like a triadic scheme or split complementary.
text:wikipedia -- images:link

I wanted to keep current 'green' and 'orange', they are well-established and well-adapted.
'green': hue 120°
'orange': hue 39°
The starting point for a distinct color is then something around hue 280°, for maximal "color distance" (this helps for everyone, especially color blind people).
Anything in the range 240° (violet-blueish) and 320 (pink) could be considered.
Full 'blue' is going too close to 'green' and not harmonious (personal opinion aka own taste)
Full 'red' is too close to 'orange' (and blue component is not used at all, certainly bad for color blindness)
I liked 'purple'-'violet' (as previously said, I think signification-wise, it conveys the idea of 'strange' input that need to be corrected/completed).

The level of saturation and value/lightness/brightness of my 'purple' / 'pale purple' was chosen arbitrarily as far as I can remember, to match the level of visual impact from 'green' and 'orange' and the fact that Invalidated tiles are not very common, and should not stand out for beginners.

Than I looked for the closest hmtl-code websafe color, and ended up with 'mediumorchid', hence the proposal for this particular color.

schemes with green (note that 'green' and 'purple' are direct opposites, complementary colors)
schemes with orange
schemes with purple
schemes with mediumorchid