The world’s leading publication for data science, AI, and ML professionals.

Data Visualisation of Travel Routes by Multiple Service Providers on Web App- Built with LeafletJS…

Which path is the ❝optimal route❞? Mobile responsive map layout. Full source code included.

Illustration by Author | Displaying a classical scene of a Grab/Uber driver navigating a route suggested by a map provider
Illustration by Author | Displaying a classical scene of a Grab/Uber driver navigating a route suggested by a map provider

Many digital commodities such as e-commerce purchases, food-delivery requests as well as ride-hailing services have been increasingly lucrative following a surge in demand by global consumers during today’s "endemic" era. Apart from its paperless (i.e. digitised) nature, another common characteristic of each aforementioned services is its reliance on Optimal Route Planning for economic efficiency.

As major market players such as Grab, Gojek and Uber find themselves engaged with new entrants in this highly competitive landscape, a cornerstone for success in the ride-hailing market has always undoubtedly been the effective use of Geospatial Technologies & Tools.

Rationale for Geospatial Side Project

For day-to-day errands, most of us intuitively turn to Google Maps to attain a ❝navigable❞ travel route in order to reach our target destination.

On a macro scale or commercial level however, large enterprises such as Logistics Shipment rarely (if ever) apply this to their practices as they are well aware that a Navigable Route ≠ Optimal Route

Hence, to gather deeper insights into the Travelling Salesman Problem and understand the underlying decision-making for route suggested, I decided to integrate 3 different Routing APIs onto a single web platform for easier inter-service cross-comparisons for the suggested travel routes.

Web Application Functionalities

(Accessible at https://sg-routing-app.glitch.me with mobile responsive layout.)

3 Routing APIs Integrated

Use-Case Demo: Navigating the streets of the country, Singapore

  • Mode of transport: Car
  • Origin: Habourfront Centre
  • Destination: Bukit Timah Road/Duchess Road

Other features

  • Toggle among 3 routing services
  • Voice synthesis for navigation instructions with ❝read aloud❞ feature

Application Preview (Mobile Android Layout)

Screenshots by Author | From LEFT to RIGHT, map service providers are - Onemap, Graphhopper, HERE respectively.
Screenshots by Author | From LEFT to RIGHT, map service providers are – Onemap, Graphhopper, HERE respectively.

Evidently, for the same input origin & destination, all 3 map service providers have returned different navigation paths for the supposed driver. This simple proof-of-concept has demonstrated that the running algorithm behind each travel path varies and depends heavily on which business use-case is being tackled. Assuming the objective of a business is to maximise profits, then it is fair to assume that custom conditions (e.g. toll-free, minimal traffic light encounters) are preferably set in place in order to offset the overall costs incurred from transportation with total revenue gained.

FYI: Application source code at my GitHub repo sg-routing-app (feel free to 🔱 or ⭐ it and tweak it for your own use-case!)


Additional Proof-of-Concept (Network Graph Theory)

Out of pure curiosity, amidst my self-exploration of applying the theory behind Network Graphs in various domains, I decided to plot the shortest path based on Open Street Maps (OSM)‘s open-sourced street networks side by side with Google Maps‘s return route for the same set of start-end Geo-coordinates:

  • Origin: 1 HarbourFront Walk, Singapore 098585 | Lat: 1.264313825, Lng: 103.8220734
  • Destination: 101 Alps Ave, Singapore 498793 | Lat: 1.375412026, Lng: 104.0025137
  • Mode: Drive
Image by Author | On the left, a path calculated by Python package networkx is returned | On the right, the route returned by Google Maps is returned (do note that multiple possible routes are returned)
Image by Author | On the left, a path calculated by Python package networkx is returned | On the right, the route returned by Google Maps is returned (do note that multiple possible routes are returned)

Result: For several locations, at least 1 among the suggested routes by Google Maps overlaps coordinate for coordinate with the shortest path calculated via Graph Theory!


Overall Evaluation & Comments

Since the components which determine travelling costs (road tolls, distance of route, nature of commodity supplied etc.) varies significantly from place to place, a rationale assumption would be that the ❝optimal path❞, despite being the shortest path, may not be the one which enables maximum cost-savings for the driver after all.

While global map service providers such as Google Maps would return a universally navigable path, many business-driven travellers would in fact base their final delivery routes on more location-centric map services (can be commercial or in-house developed) in order to not only meet customer demands but also incur the lowest possible costs to fulfil its business KPI.


And there you have it! Many thanks for persisting to the end of this article! ❤ Hope you have found this article useful and feel free to follow me on Medium if you would like more Geographic Information Systems (GIS), Data Analytics & Web application-related content. Would really appreciate it – 😀

— 🌮 Please buy me a Taco ξ(🎀 ˶❛◡❛)


Related Articles