Visualize traffic hotspots


Feature ID	FEA005
Subsystem the feature is part of	Service Client UI
Responsible person	Frontend
Status	Implemented

Description

A visual representation of where traffic is busy. Locations with good traffic flow are presented with green markers while markers on roads with worse flow will gradually turn more yellow and then red.


Use Case 1	Visualize traffic hotspots
FUNC-REQ-C0005	Visualize traffic flow with colours

Preliminary user stories

As a logistic company, I want to see an estimation of traffic in a specific area based on logistic timetables and routes received from other traffic participants. #21
As Combitech, I want to be able to monitor traffic volumes. #47
As a food delivery person, I want to know which roads are congested so that I can pick the delivery route. #37
As a city planner, I want to know which roads are congested so that we can see where we need to change road plans. #29

User interface mock-up

heatmap

Implementation

Most of the Leaflet heatmap libraries were abandoned projects with the last commits 6+ years ago.

We decided to go with a customized marker to show traffic flow.

marker

markers

Logic of the colors

The colors of the markers are set by the traffic flow percentage. "Traffic flow" refers to a calculated percentage that tells "The average estimated cruising speed when the traffic is traveling at its inherent target speed.(LAM-Documentation)"

We use a script that returns the color depending on the station's traffic flow percentage.

export default function getTrafficColor(trafficPercentage: number): string {
  const min = 0;
  const max = 100;

  // Clamp traffic percentage between 0 and 100
  const clampedPercentage = Math.min(Math.max(trafficPercentage, min), max);

  let color: string;

  if (clampedPercentage >= 90) {
    color = 'green';
  } else if (clampedPercentage >= 80) {
    color = '#32CD32';
  } else if (clampedPercentage >= 70) {
    color = 'yellow';
  } else if (clampedPercentage >= 60) {
    color = 'orange';
  } else if (clampedPercentage >= 50) {
    color = '#ff3700';
  }else {
    color = '#c50000';
  }

  return color;
}

So everything under 50% of traffic flow will be shown as dark red. Then in 10% steps, we go from red to dark green. Traffic flow can be way over 100% so it clamps it to max 100%.

Leaflet.markercluster was used for clustering multiple markers when zoomed out. The number on the cluster indicates how many markers (stations) are under it.

clusters

Testing / possible acceptance criteria

Testcase	Test source	Responsible
Testcase 1	FUNC-REQ-C0005	Testers