Color tweaking on map

[althio]

Map leaflet, colour rendering for tiles:

• Done as orange fill and Validated as green fill are established and well-suited.
• Selected fill color is almost indistinguishable from Invalidated fill color.
• For the states Invalidated/Done/Validated: shades are not 'progressive' ['gray'], ['orange'], ['green']. I guess gray is meant for neutrality; but with these colors I perceive Validated as closer to Invalidated than to Done (does it make sense?). Anyway I would change Invalidated for something radically different like pale purple. Or alternatively do not render Invalidated, just like Ready.
• "worked on" orange outline is too close to Done orange fill; it becomes less visible on a partly completed project map.
• Selected is not a state (similarly to "worked on") and should be visible together with a state; hence it would be better as outline rather than fill. [EDITED to add:] Selected and worked on can be applied to the same tile. So either one of them should be dashed outline or the thinner outline needs to be rendered on top of the wider.

Key	current rendering	proposed
Cur. worked on	outline: 2px solid orange	outline: 2px solid red [EDIT] on top
(selected)	blue-greenish fill color: #0078A8	outline: 6px solid black [EDIT] maybe dashed
(Ready)	NONE	NONE
Invalidated	gray fill	mediumorchid fill
Done	orange fill	orange fill
Validated	green fill	green fill

[pierzen]

Priority areas should also be considered. When there is a priority zone defined, it is very hard to follow the status of each tile. Could it be possible to use a lighter color with a pattern to show priority zone?

[althio]

@pierzen I agree. I had similar thoughts about the priority zone. Trouble is I don't know how to put a pattern. So I wanted to think more about it and maybe open another issue. A fix would be for the priority zone:

• a strong border line
• no fill at all or lighter color/reduce opacity

It would make the map and colored tiles more readable at large scale. Drawback is that when zoomed in [edit] you could lose track of the position inside or outside of the priority zone. So what do you think? A bit too dirty? Better still than the current state?

Back to my previous tracks: What are your thoughts on the proposed modifications here, even if priority zone is not considered?

[pierzen]

I also looked at this. While there are patterns with OpenLayers, I cannot find the equivalent for LeafLet.

I opened a new issue for the Priority zone. see https://github.com/hotosm/osm-tasking-manager2/issues/501

[ethan-nelson]

Same as #432. Since then I found out, too, Leaflet has no cool patterns you can do.

The alternatives I have brainstormed are either to make a selected tile have a much thicker outline (so that when you zoom out it still stands out), or looking into the possibility of taking the bbox of a tile as it's selected and overlaying an image that is transparent with the exception of a certain pattern (see my mock up in #432, but instead of yellow it would be transparent)...that could be done with imageOverlay(). Using the outline as you mention is probably the more efficient way computationally and wouldn't require a separate legend (it seems intuitive enough that the large outline means that is selected).

[althio]

Thank you @ethan-nelson for mentioning the issue #432 I missed it... And there are some good pieces of information even if the description is somehow confusing at times.

432 & #500 are indeed similar but not quite the same as here a few more problems are mentioned and addressed besides the common issue: Selected fill color is almost indistinguishable from Invalidated fill color.

Further comments

to make a selected tile have a much thicker outline (so that when you zoom out it still stands out) [...] Using the outline as you mention is probably the more efficient way computationally and wouldn't require a separate legend (it seems intuitive enough that the large outline means that is selected).

Indeed no need for a key legend for the one selected tile but it must really stand out enough. But then one more idea: Selected and worked on can be applied to the same tile. So either one of them should be dashed outline or the thinner outline needs to be rendered on top of the wider.

looking into the possibility of taking the bbox of a tile as it's selected and overlaying an image that is transparent with the exception of a certain pattern [...] that could be done with imageOverlay()

That is a nice bit of brainstorming. I don't know the specifics of imageOverlay() but how would it apply on arbitrary polygons? Still with the bbox? With all this overlay and stacked opacities I do not see a way to have it cleanly done.

Some day leaflet may enable pattern and we can reconsider if they are useful. For the time being I would prefer any worthy improvement with straightforward change.

[ethan-nelson]

You're very correct....imageOverlay would be a terrible choice with the polygon tiling. So, I vote in favor of the outlines :). Are you working on this, then, or should I do a mock-up branch?

[althio]

I proposed 2 minimal changes just after my first post https://github.com/althio/osm-tasking-manager2/commit/23112e0bda9f7339b8d54b6b66a90a2836e8a32a https://github.com/althio/osm-tasking-manager2/commit/522746c2a7f9fc22d6bb7cd471701a6878e86d95 But so far I have been terrible with my commits so please review, test if possible and feel free to make your own clean proposal with a separate pull request.

[ethan-nelson]

I think this is what you're looking for as a way to modify the style of the selected tile: https://github.com/ethan-nelson/osm-tasking-manager2/commit/2bf8dc32d937a7abd2afff358d955a1c7329ca40. I couldn't track down if/where the selected tile is assigned that gray fill, so I just set it to 0 while defining the line surrounding the tile to be its new style.

[althio]

I couldn't track down if/where the selected tile is assigned that gray fill

How about https://github.com/althio/osm-tasking-manager2/commit/522746c2a7f9fc22d6bb7cd471701a6878e86d95 @ line 188? Is this possibly related to the selected tile or something else altogether?

Thanks for the accurate pointer... I may have been focusing my effort on the legend only but not on the actual map with my previous commits... :-1:

[ethan-nelson]

L188 affects the Leaflet attribution in the bottom of the slippy map...when I added that in, it had a very large black box around it. The second thing you modified, I wasn't sure what that affected from my brief interaction with the test. The legend change did in fact work! I just didn't focus that commit on that aspect.

[althio]

Please do continue if you are willing to! You can code and test far better and quicker than me if I am any judge ;)

[ethan-nelson]

A few years of Python development in grad school helps a bit :). I'll work on redoing all these then and post what it looks like.

[ethan-nelson]

Looking for comments. From https://github.com/ethan-nelson/osm-tasking-manager2/commit/2124d15c796f636e8ea9f7bfb210c35e1c28831f (and also https://github.com/ethan-nelson/osm-tasking-manager2/commit/2bf8dc32d937a7abd2afff358d955a1c7329ca40 of some previous changes) we now have:

Selecting an unlocked tile:

Selecting a locked tile:

Selecting a validated tile:

Selecting an invalidated tile:

Changes include:

• Altering the scheme of a selected tile, from a gray filled to a dashed black line (it may be I need to decrease the fraction of dash to nondash so that the currently worked on red shines through better).
• Altering the coloring of invalidated tiles to a mediumorchid.
• Altering the color of currently worked on tiles to red outlines.

[althio]

Just like my wildest dreams ;-) :+1: for your work, code, test and screenshots!

I like the mockup and your suggestion for less dash. Waiting for other comments.

[ethan-nelson]

This seems to be as good of dashing as possible (a value of 15) before we run into some corners not having dashes in them and some just overall weird patterns:

[bgirardot]

Looks like a big improvement to me. They also seem to do pretty well when color-blindness simulation is applied.

Around 8-9% of people have some form of color blindness and you might want do some checks with a site like this: http://www.color-blindness.com/coblis-color-blindness-simulator/ (the first two options red-blind or green-blind are the vast majority of people with color blindness) for the full filled in colors to make sure they can be figured out.

For example, in these screen shots above the red outline color and the orange filled in color look almost identical in the CB simulation. I think the rest of the colors hold up ok and since we are talking filled in v. outline, that probably is enough to keep them distinguishable.

Maybe we need to make the color legend a bit bigger? It is almost useless when the CB simulations are applied.

Thank you both for working on this, it comes up pretty often.

[althio]

@ethan-nelson Dash outline for selected tile; could you give that a try:

        style: {
            weight: 5,
            opacity: .5
            color: 'black',
            dashArray: '5,10',
            fill: 0
        }

Or try anything similar that you like?

@bgirardot Thanks a lot for the link to color-blindness-simulator! I was aware of the situation for a lot of people but I didn't know such websites with straightforward tests existed.

[ethan-nelson]

@bgirardot I have to admit that I myself am partially colorblind, hence my extra desire to get this working :P. I will work on that @althio and post some more screenshots.

[ethan-nelson]

Re: your specifications @althio

Non-currently worked on tile: Currently worked on tile:

[pyrog]

Please read the issue leaflet/leaflet#2214 to see how @ethan-nelson and others see the maps :wink:

I also play with Sim Daltonisme : you could see that it's impossible to view the red dot on the map for protanopia (the most common types of daltonisme).

See also this useful tool about color blindness and map readability / accessibility: http://colorbrewer2.org/?type=qualitative&scheme=Set1&n=9

Keywords: CVD, color vision deficiency, daltonism, protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly