Platform flight paths: color refinements

[heidimok]

Situation

We have release a version of the flight maps where the paths have a uniform color. This works okay but given how many paths there are on a given campaign map associated with different platforms, the team thought it could be benefit to use color and symbols to help users tell the difference between lines and dots on the map.

Current

New (mock up only)

Acceptance Criteria

Icons and colors for stationary sites Source of icons: font awesome, free, some of the names won't match perfectly as they aren't custom made Since there are relatively few stationary platforms and these sites don't move, icons might be helpful in understanding what these 'dots' on the map are. They are fixed.

• Permanent Land Sites FFFFD4 https://fontawesome.com/icons/warehouse?f=classic&s=solid
• Vehicles FEE391 https://fontawesome.com/icons/van-shuttle?f=classic&s=solid
• Balloons FEC44F https://fontawesome.com/icons/location-pin?f=classic&s=solid
• Field Sites FE9929 https://fontawesome.com/icons/tent?f=classic&s=solid
• Field Survey EC7014 https://fontawesome.com/icons/clipboard-list?f=classic&s=solid
• Permanent Water Site CC4C02 https://fontawesome.com/icons/ferry?f=classic&s=solid
• Moored Buoy 8C2D04 https://fontawesome.com/icons/monument?f=classic&s=solid

Icon and colors for moving paths For moving platforms, colors are not fixed to a platform. We always start with the light color and have up to 5 colors. Note that we do not have to fix to these colors, we can use a min/max and then programmatically assigning colors between depending on the number of platforms.

• Platform 1 F1EEF6
• Platform 2 BDC9E1
• Platform 3 74A9CF
• Platform 4 2B8CBE
• Platform 5 045A8D

Icons: Change to horizontal line instead of diagonal line symbol

Add sections for Moving and Stationary

• If no platform exists for a category, remove the heading

[heidimok]

Will need to move and continue this into sprint 4

[LanesGood]

@willemarcel has been working on this issue in #638. We've noted that the colors of the flight maps are quite difficult to distinguish, given that these are rendered with a sequential color map per the designs.

@willemarcel thanks for helping me get set up to play around with the flightmap colors. I've made a few experiments, which I'm posting below and can also be found in the figma file:

My main suggestions and considerations are:

• Color Scale There is no use for a sequential color scale here. This would be applicable to a visualization where color is quantitative and each color implies numeric meaning; flight time or altitude, for example. However, here we have a need for a qualitative color scale; each color implies a different category. There is no underlying order to the color mapping, and its not possible to use shading for different deployments as we're mapping color in a more generic way. As such, I believe we should revert to one of Heidi's earlier explorations of a qualitative color scale, and use the well-tested ColorBrewer scale. The first five maps in the above figure (reading left to right, top to bottom) are made with other color scales, like https://personal.sron.nl/~pault/#sec:qualitative; everything following these are made with ColorBrewer.

• Opacity After experimenting with color, I also found that adjusting the opacity of the route line had a large effect on the readability of the flight path. I think 0.5 opacity is a good starting place; we can also experiment with adjusting this using a zoom-based expression

• Basemap The basemap itself presents itself as the biggest culprit against readability. I do think that enough contrast in the route lines will provide a readable experience; removing the basemap labels also helps a lot in understanding this map. I experimented with using the default mapbox satellite-streets instead of the default dark basemap to have some consistency with the top hero map - this also has labels. Ultimately I still found the label-less satellite basemap distracting from the flight paths. I've created a custom dark style that is based on the theme colors of the application, and removed all labels.

Let me know your thoughts on the above. I'm happy to push my local suggestions directly to the codebase in your PR.

[LanesGood]

We've pushed the changes for the color scale to #638, and set a new custom basemap for the flight path maps.

Remaining todo items for this include:

• [x] Update legend with flight path color
• [x] Update legend symbol (horizontal line, pictured above)
• [ ] Fix build
• [ ] Update stationary platforms color scale, symbology, and legend sections
• [x] @LanesGood to add svg icons to Mapbox studio style