https://github.com/stevekirks/deckgl-trips
deck.gl trips - an example
https://github.com/stevekirks/deckgl-trips
create-react-app deck-gl deckgl mapbox react typescript
Last synced: 3 months ago
JSON representation
deck.gl trips - an example
- Host: GitHub
- URL: https://github.com/stevekirks/deckgl-trips
- Owner: stevekirks
- License: mit
- Created: 2019-08-04T08:50:41.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-02-01T02:52:34.000Z (4 months ago)
- Last Synced: 2025-02-01T03:27:40.971Z (4 months ago)
- Topics: create-react-app, deck-gl, deckgl, mapbox, react, typescript
- Language: TypeScript
- Homepage: https://stevekirks.github.io/deckgl-trips
- Size: 16.1 MB
- Stars: 25
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
deck.gl trips | example
This is an example of the deck.gl trips layer. Written using [deck.gl](https://deck.gl) with React and Typescript.
Sample data is a short timespan of South-East Queensland Bus & Ferry service locations from the [Translink data feed](https://data.qld.gov.au/dataset/translink-real-time-data), [transformed](https://github.com/stevekirks/gtfs-protobuf-to-trips-rs) to suit.
### Features
- Trip movement
- Jump to time, adjust speed and trail length
- Highlight trips that pass through a node (in the sample these are bus/ferry stops)
- Hover over nodes to get their Id
### Usage
Clone this repo, set environment variable `VITE_MAPBOX_TOKEN` with a [Mapbox](https://www.mapbox.com/) token. This variable can be set in the `.env` file. Then:
```
npm install
npm run start
```
### Data format
Sample data is stored in the `public/data` folder. Not all bus/ferry vehicles or stops are shown.
If you wish to use different data, colors or basemap, modify `public/app-settings.json`.