Make route lines thin and add route labels

[Mr-Technician]

This pull request updates both the web and mobile map viewers to improve the appearance and labeling of transit routes, and adds new controls for showing or hiding routes and stations on the mobile map. The most significant changes include the addition of route labels, adjustments to line widths for better visual clarity, and new props to control layer visibility in the mobile app.

Improvements to transit route display and labeling:

• Added a new symbol layer for route labels (transit-routes-label) in viewer.html, displaying either the long_name or short_name of each route with improved styling and placement.
• Adjusted the line width interpolation for both the casing and colored route layers in viewer.html to make lines thinner and improve map legibility at various zoom levels. [1] [2]
• Updated the map filter logic to also apply to the new transit-routes-label layer, ensuring labels are hidden when routes are filtered.

Enhancements to the mobile map component:

• Added optional showRoutes and showStations props to ProviderTiles, allowing dynamic control over which layers are displayed. Updated MapScreen to pass these props based on application state. [1] [2]
• Added a route label layer to the mobile map (routes-label-*), mirroring the web implementation, with consistent styling and zoom-dependent text sizing. [1] [2]
• Adjusted route line widths on mobile for improved clarity at different zoom levels.
• Wrapped route and station layers in conditional rendering blocks, so they only appear if their respective showRoutes or showStations props are true. [1] [2]

Summary by CodeRabbit

• New Features
  • Added visibility controls to toggle transit routes and station layers on the map
  • Enhanced route label styling with improved visual presentation and zoom-level optimization

[coderabbitai]

Warning

Rate limit exceeded

@Mr-Technician has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 59 minutes and 24 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: dd57eb5f-8224-4712-a6b1-593e3f36cc62

📥 Commits

Reviewing files that changed from the base of the PR and between a01b0b9 and e1fe9c2.

📒 Files selected for processing (1)

• apps/mobile/components/map/ProviderTiles.tsx

📝 Walkthrough

Walkthrough

This PR adds visibility controls for transit route and station map layers. The tile server HTML defines a new route label layer with text styling and filtering. The React component accepts optional visibility props, conditionally renders layer pairs (routes with labels, stations with labels), and the map screen wires visibility state based on current mode flags.

Changes

Route and Station Layer Visibility

Layer / File(s)	Summary
Map tile layer styling and route labels apps/api/tiles/viewer.html	Transit route casing and route line widths are adjusted. A new transit-routes-label symbol layer is added with text field selection, minzoom gating, line-following placement, font/size/rotation behavior, and text halo styling. The applyFilter() function extends filtering to keep the label layer in sync with route and casing layers based on hiddenRoutes.
ProviderTiles visibility props and conditional rendering apps/mobile/components/map/ProviderTiles.tsx	New optional showRoutes and showStations props (both defaulting to true) control whether route and station tile layers are mounted. A routeLabelLayerId is computed for route labels. Route rendering now conditionally includes both the route line layer and the route label symbol layer with text field selection and calculated minzoom. Station rendering wraps both circle and label layers in the same conditional block.
MapScreen visibility state wiring apps/mobile/screens/MapScreen.tsx	Each ProviderTiles instance receives showRoutes and showStations props derived from routeMode and stationMode visibility flags.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A rabbit's map tale:
Routes now show and hide with flair,
Labels dance through Mapbox air,
Stations toggle, swift and clean,
The map's most interactive scene! 🗺️✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Make route lines thin and add route labels' clearly summarizes the main changes: thinner route lines and new route label functionality across both web and mobile viewers.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/thinner-route-lines

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/api/tiles/viewer.html`:
- Line 201: The Mapbox `text-field` expression currently checks only ["!=",
["get", "long_name"], ""] which treats null as unequal to "" and therefore
selects null; update the `text-field` expression for the
`long_name`/`short_name` fallback to explicitly check for null and empty string
(e.g. use an ["all", ["!=", ["get","long_name"], null], ["!=",
["get","long_name"], ""]] to choose `long_name`, falling back to
["get","short_name"]) or replace with a ["coalesce", ["get","long_name"],
["get","short_name"]] so `short_name` is used when `long_name` is null or empty.

In `@apps/mobile/components/map/ProviderTiles.tsx`:
- Around line 130-135: The 'text-field' style currently uses a case that only
checks if ['get', 'long_name'] != '' which fails for null/undefined long_name;
update the expression in ProviderTiles.tsx so you coalesce the long_name with ''
(or directly coalesce long_name with short_name) before doing the empty-string
check. In practice, replace the current 'case' branch that checks ['!=', ['get',
'long_name'], ''] with one that first applies ['coalesce', ['get', 'long_name'],
''] (or uses ['coalesce', ['get','long_name'], ['get','short_name']]) so
null/missing long_name falls back to short_name; keep the symbols 'text-field',
'case', 'long_name', 'short_name', and 'coalesce' when locating and editing the
code.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 8f03aba5-e895-48dc-ad16-3d69b866b2d2

📥 Commits

Reviewing files that changed from the base of the PR and between 6744b1a and a01b0b9.

📒 Files selected for processing (3)

• apps/api/tiles/viewer.html
• apps/mobile/components/map/ProviderTiles.tsx
• apps/mobile/screens/MapScreen.tsx