Vehicle Monitoring System

A simple web app for AVM systems, written in React and TypeScript, to show location based data in Real Time.

You just need to define the interface of your remote data model.

My custom components (to improve) are based on Tailwind CSS style library (for now loaded via CDN to keep configuration simple).

Features

Vehicles View

This view presents a list of API endpoints provided by the user, where they can be selected to request remote data and then showing results on map as markers.

Results are shown on map as markers and their information are listed in a scrollbar. Clicking on a marker will open a popup, that contains all information about the tracked vehicle.

Vehicle's Details

When a vehicle is clicked, a box will be shown, listing every information related to that vehicle.

Speedometer

A simple component has been built to animate speed variations when real time tracking is enabled.

Filters

Real Time

Real Time feature shows vehicles positions in realtime. Realtime stream can be handled by user via GET requests, setting your favorite interval time to fetch data, or via WebSockets (`incoming) as well.

GTFS View

incoming

This view allows you to show vehicles data on map with GTFS (General Transit Feed Specification) data provided by a Public Transport Agency, such as bus stops, routes and trips.

Roadmap

• Location based API support

• Show data in Real Time

• User Position

• Map Controls

  • Fit Markers
  • Refresh Data
  • Switch to show Markers Labels
  • Follow Marker (when a marker is selected)

• Vehicles View

  • Select API endpoint to fetch data
  • Show results as list
  • Fit Markers when data are ready
  • Markers Leaflet Popup
  • Markers Updates CSS animations
  • Markers Leaflet Tooltip
  • Locate marker on map from list
  • Detail Card Infobox, to show all vehicle's information
  • Speedometer

• Real Time

  • WebSocket handler

• GTFS View

• Geocoding

• Custom and Reusable Components

• Demo Page - public API needed

• React Optimizations and Code Refactoring

• React useContext

• Accessibility

Release History

v0.2.1

• Speedometer in DetailCard to animate speed information when a vehicle is tracked real time. v0.2.0
• Removed Leaflet Popup for markers to introduce DetailCard component
• Now, when a marker is clicked, vehicle's info are shown on a Details Card and its status as well
• When a marker is tracked by user and, moving, gets out from current view bounds, map will change view to center that marker again (Follow Marker feature is going to change map's view everytime the tracked marker changes its position)
• DetailCard, like every component from my own UIkit, is going to be a fully reusable component, where content and its logic are passed as props
• Highlighted Card in vehicles list for the selected vehicle
• Sibedar Infobox now gets data from environment variables, by using process.env

v0.1.0

• Location based API support, User Position
• Real Time
• Map Controls: Fit Markers, Refresh Data, Markers Labels
• Vehicles View: API endpoint list to fetch data, vehicles list

External Resources

Bus Icon made by Vectors Market from www.flaticon.com

License

MIT © Giuseppe Bianchi