Improve contrast for country and state labels and border lines

Code-for-All / lockdown

Project Lockdown (an initiative from The IO Foundation) is a civic tech, interactive platform providing an overview of the state of Human and Digital Rights around the globe. It evaluates policies obtained from high quality sources that may impact their observance. It provides, among other tools, a layered map interface that allows for a visual representation of the policies adopted, assisting a broad range of stakeholders in understanding the global state of their Rights. This empowers them to become active agents of global change.

https://ProjectLockdown.world

Apache License 2.0

28 stars 30 forks source link

Improve contrast for country and state labels and border lines #266

Closed planemad closed 4 years ago

planemad commented 4 years ago

Move 'admin-0-fill' layer before the 'admin-1-boundary-bg' boundary line layers
Add runtime map style improvements for improved contrast of:
- Country and state labels
- Country and state lines
Make water white for improved contrast with land
Fix implementation of default color for no values or undefined lockdown values
Create a variable selectedWorldview to easily control the boundary version for disputed areas in future. Ref: https://docs.mapbox.com/vector-tiles/reference/mapbox-boundaries-v3/#--polygon---worldview-text

Before

After

cc @aherreDev @JFQueralt

netlify[bot] commented 4 years ago

Deploy request for zen-joliot-eeb856 pending review.

Review with commit af1dafdecade58958166c9066670e2dfaab840e8

https://app.netlify.com/sites/zen-joliot-eeb856/deploys

planemad commented 4 years ago

If we want to support dark mode on the map, the simplest way would be to change the color of water from white to something dark

map.setPaintProperty('water','fill-color','#444');

planemad commented 4 years ago

Another enhancement:

Added map hash to the url so that links can be shared to a particular map view

planemad commented 4 years ago

For future reference:

Since i dont have access to the actual style used in jfqueralt Mapbox account, i created a new monochrome light style in Mapbox Studio to get a sense of the layers available for styling. Alternatively one can also get this by using map.getStyle().layers in the web dev JS console.
Tried out different colors values on the test map in Mapbox Studio to get a sense of how the end result would look.
Implemented the style change of the specific layers using https://docs.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty and https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/

planemad commented 4 years ago

Made water color grey based on feedback

planemad commented 4 years ago

Use palette color '#e0e0e0' for the water.

cc @petrajaaskelainen

petrajaaskelainen commented 4 years ago

If you want to use the different color for the water on dark mode, you can use #4F4F4F - it is currently the darkest shade after #333 in our visual identity design

planemad commented 4 years ago

If you want to use the different color for the water on dark mode, you can use #4F4F4F - it is currently the darkest shade after #333 in our visual identity design

@petrajaaskelainen this PR does not implement any changes for dark mode, that would touch a different part of the code which triggers the dark mode and is best implemented seperately.

petrajaaskelainen commented 4 years ago

Ah, ok! I just saw the comment above regarding it so commented on that - but so you know :)

aherreDev commented 4 years ago

Let's do the merge