Advanced Map Dashboard in React

This was a map dashboard single page application developed in React Next.js, for a US-based start up in long-haul freight logistics. The web app makes use of advanced React features such as memoization and context, in order to deal with complex user interactions and a large number of tables, map layers and components. The basemap was built on Mapbox's dark themed style to focus on road transport and the client-side uses Mapbox GL JS. The thematic base of real-time data, i.e. our custom market features, were aggregated, generalized and hand-adjusted in QGIS before transformation into vector tiles hosted by Mapbox. 

The map provides geospatial visualizations for several real-time business analytics on US markets, as well as fleet management features. Thematic map layers include markets, trucks, road and overcast weather with adjustable unit scales and forecast auto-play, traffic, fuel stations, target areas, haul origins and destinations, truck Hours Of Service range circles and others . Side tables with metric visualizations and map controls complete the dashboard's functionality.  The app makes use of the client's custom-built data API, developed in close collaboration in order to fit the map's needs. Geodata is transferred as geojson, with necessary simplifications in the browser using turf.js to maintain performance.

On top of the above, the dashboard features a Itinerary Scheduler and Trip Calculator, featuring a directions-style user interface where adjustable map pins serve as origin/destination points and are transformed into optimized route analytics. The results of these tools are exportable in custom PDF using a canvas-printing technique I implemented in a past project, as well as the React-pdf library.

Through this project I gathered insight on dealing efficiently with the complexity of a modern map interface involving multiple inter-related and changing style and data elements.