Leaflet.js for the map


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

Description

Leaflet.js is a JavaScript library that can help you build interactive maps.

ID	Description
Use Case 1	Leaflet.js for the map
FUNC-REQ-C0004	The user is able to interact with map elements with clicks / taps

Preliminary user stories

As an environmentalist group, we want to know the types of vehicles in a specific area so that we see if we need to check for air quality / pollution in an area. #50
As Combitech, I want to be able to monitor traffic volumes. #47
As a food delivery person, I want to know the avarege speed of vehicles in a specific area so that i can pick the fastest route. #48
As a commuter, I want to see the difference between location of a vehicle to the estimated lcoation. #43
As Combitech, I want application to have layers with ready made filters. #40
As a food delivery person, I want to know which roads are congested so that i can pick the delivery route. #37
As a logistic company employee, I want to see all my company's trucks visivle in a selected area of the map. #33
As Combitech, I want to be able to separate heavy traffic, busses and regular cars. #1

User interface mock-up

Implementation

React Leaflet in use

We used Leaflet.js, a popular open-source JavaScript library collection for interactive maps. While we use React we of course had to use the React Leaflet (GitHub) so the Leaflet elements are presented as React components.

Example from /components/mapLayers.tsx

export function MapLayers(): JSX.Element | null {
  return (
    <LayersControl>
      <LayersControl.Overlay name="Show station data" checked>
        <LayerGroup>
          <MarkerClusterGroup pmIgnore>
            <MarkerList />
          </MarkerClusterGroup>
        </LayerGroup>
      </LayersControl.Overlay>
    </LayersControl>
  );
}

Testing / possible acceptance criteria

Testcase	Test source	Responsible
Testcase 2	FUNC-REQ-C0028	Testers
Testcase 3	FUNC-REQ-C0028	Testers
Testcase 4	FUNC-REQ-C0004	Testers