Connect backend and front end such that map display information for specific users

[YoyoLiuuu]

As a USER, I want to see that the website displays map with information specifically for my purchases. Map should contain pins at the latitude and longitude I made the purchase, locations can have pin of a different colour (4 different colours) corresponding to how green the company is. When I hover on the location, I can see the name of the company that I made the purchase, as well as the percentile the company's ESG score is at.

A/C
For map,

• connects to get_map_data/
• displays pins on the map
• set colours of pin regarding how green the company is. 1 is best: Green, 2: Yellow, 3: Orange, 4: Red.
• Hover over the pin, displays company name, Tier, and Score (1: >560, 2: > 520, 3: > 500, 4 <=500)