fix: improved gtfs visualization map readability#103
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Alessandro100
changed the title
|
*Lighthouse ran on https://mobilitydatabase-jlo4jca0q-mobility-data.vercel.app/ * (Desktop)
*Lighthouse ran on https://mobilitydatabase-jlo4jca0q-mobility-data.vercel.app/feeds * (Desktop)
*Lighthouse ran on https://mobilitydatabase-jlo4jca0q-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-jlo4jca0q-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-jlo4jca0q-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
|
There was a problem hiding this comment.
Pull request overview
Skill applied: vercel-react-best-practices.
Improves GTFS map visualization readability across light/dark basemaps by adding contrast-aware route/stop styling and enhancing route/stops rendering behavior.
Changes:
- Add a theme-level
basemapTileOverallColorand use it to drive contrast-aware outline/halo styling. - Introduce a MapLibre expression to choose route outline colors based on contrast vs background/alternate outline color.
- Enhance map layers: rounded route caps/joins, stronger highlight visibility, and updated stop highlight behavior; add unit tests for the new expression generators.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/app/Theme.ts |
Adds basemapTileOverallColor to the theme for contrast computations. |
src/app/screens/Feed/components/FullMapView.tsx |
Fixes route type chip labels to use the common translator. |
src/app/components/GtfsVisualizationMap.tsx |
Inserts the new highlight outline layer and passes theme to updated layer helpers. |
src/app/components/GtfsVisualizationMap.layers.tsx |
Updates route/stops layer styling (contrast-aware outlines, rounded joins/caps, highlight tweaks). |
src/app/components/GtfsVisualizationMap.functions.tsx |
Adds contrast/luminance helpers and a route-outline MapLibre expression generator. |
src/app/components/GtfsVisualizationMap.spec.tsx |
Adds test coverage for the new contrast/expression logic. |
| const LIGHT_ALT = '#444444'; | ||
| const DARK_ALT = '#ffffff'; | ||
|
|
||
| describe('generateStopColorExpression', () => { |
Summary:
closes #65
The gtfs map visualization did not properly support color contrast on light / dark mode maps. This lead to white routes being unreadable on light map, and dark routes being unreadable on dark maps
This PR introduces a contrast check between the route color and the map background, which also applies to the stop elements
Also includes map enhancements
Expected behavior:
When you go on a map that has route colors that have low contrast with the map background, there should be halo lines to help with the contrast. ex:
https://mobilitydatabase-web-git-fix-65-map-colors-mobility-data.vercel.app/feeds/gtfs/mdb-2126/map
https://mobilitydatabase-web-git-fix-65-map-colors-mobility-data.vercel.app/feeds/gtfs/mdb-437/map
these aren't the most clear cut examples as there are limited feeds with visualization in dev environment but you still see the contrast coming out: (STM: the yellow metro line)
Testing tips:
Go on feeds with gtfs visualization and assure that the map feels good and that the colors have proper contrast
Please make sure these boxes are checked before submitting your pull request - thanks!
yarn testto make sure you didn't break anythingBefore
After
Before
After
Before (rounding)
After
Before (stop zoom)
After
Stops Contrast Highlights
