Maps: Styling TEI layers

cooper-joe commented 4 years ago

These are the proposed default layer styles for TEI layers in apps that display maps:

I've recorded my process here, feedback and discussion is very welcome.

Background

I have been looking into the default styles to apply to TEI layers. These styles will apply to both web and mobile map apps. Default styles will give the sense of consistency to maps across platforms.

There are various considerations to keep in mind when setting default styles. The styles need to:

be obviously different and not easily confused
work across multiple basemaps
help to understand relationship linking
be understandable for poor-sighted and color-blind users
cover most use-cases

Colors and shapes

I've researched color combinations using ColorBrewer, a fantastic tool for building color palettes for GIS visualizations (thanks @turban!). I used ColorBrewer to make a qualitative palette with 9 colors:

This color palette is marked ? for color-blind users on ColorBrewer, so I've investigated that below. I tested the palette on various map layers and adjusted for best results. Yellow, for example, does not display well.

The adjusted 9 color qualitative palette:

These colors work well for normal-sighted users. However, color-blind users will have difficulty telling them apart:

Low-quality mobile device screens may also present difficulties, especially when viewed in direct sunlight.

We can add contrast to the layer styles by using a set of shapes:

Shapes are assigned to each color for maximum contrast. Comparing the styles with and without shapes clearly shows the benefits they bring:

It would be possible for a user to customize these shapes and colors, of course. I think the best we can do is provide defaults that are accessible to as many people as possible.

Displaying shapes on a map

The shapes are slightly translucent in the middle. This, in theory, helps to better pinpoint the center of the shape. I'd like to test this further on device to see how successful this is.

I would also like to test the default size for the shapes. The best size for shapes may differ on web vs. mobile.

Relationships

Relationship styles inherit from the parent/linked shape:

In theory, the relationship styles are also customisable, but inheriting from the default styles should cover most use cases.

9+ layers

If a user adds more than 9 TEI layers the default styles will need to be recycled. The same color and shape combinations should not be used.

Examples in use

Here are examples of the default styles in use in different situations:

Default styles across all provided basemaps: ss 2020-05-19 at 13 39 04 ss 2020-05-19 at 13 39 33 ss 2020-05-19 at 13 39 48 ss 2020-05-19 at 13 39 55 ss 2020-05-19 at 13 40 07

Relationship styles on all provided basemaps: ss 2020-05-19 at 13 40 39 ss 2020-05-19 at 13 40 51 ss 2020-05-19 at 13 41 00 ss 2020-05-19 at 13 41 09 ss 2020-05-19 at 13 41 20

Buffer styles on all provided basemaps: ss 2020-05-19 at 13 41 45 ss 2020-05-19 at 13 42 02 ss 2020-05-19 at 13 42 09 ss 2020-05-19 at 13 42 18 ss 2020-05-19 at 13 42 25

cooper-joe commented 4 years ago

To-do:

[x] How to display relationships with polygons?
[x] Display TEI photos/icons
[x] How do map markers look when a TEI is selected?

cooper-joe commented 4 years ago

Displaying TEI photos and icons

Based on the work already done by the Android team, TEI photos and icons could be displayed like so:

cooper-joe commented 4 years ago

Point -> Polygon relationships

Displaying a point to polygon relationship could be displayed like so:

In theory I think the best way to display this would be point -> closest point of the polygon. However, this may require too much calculation? If so, it could instead be point -> first point of the polygon. That may create some odd relationship links that cross over polygons though.

In this example the polygons are inheriting from the color styles defined above.

cooper-joe commented 4 years ago

Selected / Hovered Points

Exploration of how points could react to being hovered (web only) or selected (mobile and web). Here is an mockup of a selected/hovered point and a selected/hovered relationship link:

Here is a live html/css demo of point hovering to help get a feel for it: http://jsfiddle.net/joe_dhis2/f256b4s7/37/

turban commented 4 years ago

Nice work @cooper-joe!

dhis2 / notes