An open API service indexing awesome lists of open source software.

https://github.com/jfrux/comma-map-visualizer

Comma Map Speed Visualizer
https://github.com/jfrux/comma-map-visualizer

Last synced: 8 days ago
JSON representation

Comma Map Speed Visualizer

Awesome Lists containing this project

README

          

# Comma Map Speed Visualizer

Shows a list of routes, user selects a route, it shows the points on a map with a blip for speed of each point.

## Todos / Nice to haves

- [ ] Field to quick add a new feed by URL
- [ ] Animate / replay the drive in real-time, showing speed in HUD

## Done

- [x] Research existing OSS modules that could be helpful in this project.
- [x] Basic mapbox implementation
- [x] Overall structure of layout.
- [x] Redux Store
- [x] Mock-endpoint for raw JSON results.
- [x] Serves JSON files as static assets for now until we want to host them somewhere or allow users to add feeds.
- [x] Very fast performance for processing the data in the browser.
- [x] Display the routes in a list next to a map.
- [x] User clicks route, shows route in map with speeds at each point.
- [x] As you zoom in you see more and more speeds
- [x] It must scrub the data in real-time in the browser.
- [x] Iterate data through a visualization sdk such as Mapbox.
- [x] Display the points on Mapbox map with a tag showing speed estimated at each point.

## User Stories

- [x] User visits page and sees list of routes and a message telling them to select a route.
- [x] User clicks a route, Mapbox appears where message was.
- [x] User sees points visualized on the map for the route.
- [x] User zooms in and sees more and more detailed list of speeds.

## Starting the dev server

Make sure you have the latest Stable or LTS version of Node.js installed.

1. `git clone https://github.com/jfrux/comma-map-visualizer.git`
2. Run `npm install` or `yarn install`
3. Start the dev server using `npm start`
3. Open [http://localhost:8080](http://localhost:8080)

## Available Commands

- `npm start` - start the dev server
- `npm clean` - delete the dist folder
- `npm run production` - create a production ready build in `dist` folder
- `npm run lint` - execute an eslint check
- `npm test` - run all tests
- `npm run test:watch` - run all tests in watch mode
- `npm run coverage` - generate code coverage report in the `coverage` folder

## Licence

_comma-map-visualizer_ is available under MIT.