Draft
Conversation
This commit introduces a new map layer that displays public transport
stops (bus and train) based on the current map viewport.
- Adds `NextDeparturesLayer` to visualize transport stops using NaPTAN
data.
- Implements a custom `useNaPTAN` hook with `react-query` for
efficient
data fetching and caching.
- Introduces a dynamic `busStopWithBearing` icon that renders an
SVG-based arrow indicating the direction of the stop.
- Provides stop details including name, locality, and bearing within
map popups.
- Includes unit tests for icon rotation logic.
```mermaid
sequenceDiagram
participant M as Map (Leaflet)
participant L as NextDeparturesLayer
participant H as useNaPTAN Hook
participant S as Next Departures Service
participant A as API
M->>L: Provides Bounds
L->>H: Request data for bounds
H->>S: fetchNaPTAN(bounds)
S->>A: GET /v1/next-departures/search?bbox=...
A-->>S: JSON NaPTAN Results
S-->>H: SearchResponse
H-->>L: results[]
L->>M: Render Markers with custom Icons
```
This change migrates the bus stop bearing display from a dynamic `DivIcon` string generator to a reusable React component. - Created `BearingIndicator` component using `react-leaflet` **Tooltip** to render direction arrows. - Simplified `NextDeparturesLayer` by using the standard `busStop` icon wrapped in the new indicator. - Added CSS to remove default **Tooltip** borders, backgrounds, and pointers for a clean SVG-only look. - Updated unit tests to cover the new component and removed obsolete icon generation tests.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces a 'Next Departures' map layer that displays public transport stops with bearing indicators. Key additions include the BearingIndicator component, a useNaPTAN hook for data fetching, and new Leaflet icons for bus and train stations. Review feedback focuses on improving consistency by renaming the 'direction' prop to 'bearing', exporting internal constants for unit tests, removing dead code, and aligning coordinate precision between the cache key and API service to optimize performance.
Comment on lines
+39
to
+47
| {/* {data.departures.map((departure) => ( | ||
| <Box key={departure.id} p={2} borderWidth={1} borderRadius="md"> | ||
| <HStack justifyContent="space-between"> | ||
| <Text fontWeight="bold">{departure.line_name}</Text> | ||
| <Text fontSize="sm" color="gray.500">{departure.destination_name}</Text> | ||
| </HStack> | ||
| <Text fontSize="sm" color="gray.500">{departure.expected_departure_time}</Text> | ||
| </Box> | ||
| ))} */} |
Contributor
There was a problem hiding this comment.
Remove this commented-out code block to maintain code cleanliness. If this functionality is intended for a future update, it should be tracked in a task or replaced with a TODO comment.
|
|
||
| export function useNaPTAN(bounds: LatLngBounds) { | ||
| return useQuery<SearchResponse, AxiosError>({ | ||
| queryKey: ["naptan", getBoundsKey(bounds, 4)], |
Contributor
There was a problem hiding this comment.
The coordinate precision for the cache key (4 decimal places) does not match the default precision used in the fetchNaPTAN service (3 decimal places). This discrepancy can lead to redundant API calls for map bounds that resolve to the same rounded coordinates. It is recommended to align these values.
Suggested change
| queryKey: ["naptan", getBoundsKey(bounds, 4)], | |
| queryKey: ["naptan", getBoundsKey(bounds, 3)], |
Renames the `bearing` prop to `direction` to improve clarity and consistency across the codebase. Removes `bearingAngles` from the icon suite tests to reflect changes in the exported API.
Update the `queryFn` in the `useNaPTAN` hook to include the precision level (**4**) when calling `fetchNaPTAN`, ensuring consistency with the generated `queryKey`.
* 'main' of github.com:rm-hull/maps: chore: update yarn version
Coverage Report for CI Build 25179782139Coverage increased (+0.4%) to 24.598%Details
Uncovered Changes
Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
- Add `NextDeparturesList` component to display real-time arrival info
in a table format.
- Create `useNextDepartures` hook and service for fetching data by ATCO
code.
- Refactor API types into a generic `Response<T>` interface.
- Update `dateReviver` regex to support ISO8601 strings with timezone
offsets.
```mermaid
sequenceDiagram
participant UI as NextDeparturesLayer
participant List as NextDeparturesList
participant Hook as useNextDepartures
participant API as API Service
UI->>List: Render with atcoCode
List->>Hook: useNextDepartures(atcoCode)
Hook->>API: GET /v1/next-departures/{atcoCode}
API-->>Hook: return NextDeparture[]
Hook-->>List: update data
List->>UI: display departure Table
```
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This commit introduces a new map layer that displays public transport
stops (bus and train) based on the current map viewport.
NextDeparturesLayerto visualize transport stops using NaPTANdata.
useNaPTANhook withreact-queryforefficient
data fetching and caching.
busStopWithBearingicon that renders anSVG-based arrow indicating the direction of the stop.
map popups.
sequenceDiagram participant M as Map (Leaflet) participant L as NextDeparturesLayer participant H as useNaPTAN Hook participant S as Next Departures Service participant A as API M->>L: Provides Bounds L->>H: Request data for bounds H->>S: fetchNaPTAN(bounds) S->>A: GET /v1/next-departures/search?bbox=... A-->>S: JSON NaPTAN Results S-->>H: SearchResponse H-->>L: results[] L->>M: Render Markers with custom Icons