GIS / Azure Maps / OSM - with coloured grid overlay / heatmap (Javascript, Node)

I need an Azure Maps (or OSM) solution that enables simple visualisation of data in a grid overlay. This is almost like heatmap, but using a grid system overlay onto Azure Maps or OSM. In this example, I have air quality data which is: - Timestamp - Long/Latitude - Value (22) - Type (i.e. NO2, CO2) I want to visualise this in a map overlay. It must do the following: #Part 1 - HTML front-end demo 1 - Define a rectangular area (i.e. 5KM x 2KM) using long/latitude coordinates (area defined in code) 2 - Within that area, render a grid system on the mapping tool using (100m x 100m) squares (grid size could be configurable, i.e. 50m x 50m) 3 - Must be able to fill each square individually with a colour hex/RGB and opacity (i.e. 20%). 4 - Each cell must have an identifier (i.e. javascript element, or css selector) - Data provided (i.e. in json or javascript array) will be --- Timestamp (i.e. 2022-03-22 20:28:00) --- Key name (i.e. NO2) --- Longitude/Latitude, --- Value (0-100) Examples: --- i.e. 2022-03-22 20:28:00, 'NO2', 54.1869606,-4.4826624, 50 --- i.e. 2022-03-22 20:30:00, 'NO2', 54.1869606,-4.4826612, 40 I need a function that when passing longitude/latitude as arguments, function will resolve the grid reference (as per 2) i.e. psuedo code grid = getGridReference(54.1869606,-4.4826624) [login to view URL](grid.x) [login to view URL](grid.y) would resolve to Row 4, Column 18 From a HTML page, javascript will: - Render map - Look at data - For each coordinate, resolve the grid square - Style the grid square background based on the value (i.e. Value<20 = Green, Value<50 = Blue, Value>50 = Red) Deliverables: - Long/Lat of rectangle defined in code - Cell size in code (i.e. 100m) - Area rendered with cells - Data with long/lat/value/key/timestamp/value [0-100] - Able to style individual cells #Part 2 server side function Would also be interested to be able to resolve grid square from a server-side function (node?) Would prefer HTML, Javascript, JQuery, Azure Maps (or OSM) (I understand Turf is a library that can assist) i.e. If the data was in a MySQL table, could I use node to loop through table, check long/latitude, and update a column with the grid square #Part 3 This project may develop to include filters, time, API, etc. *** Examples or screenshots of work would be welcomed *** *** If Azure Maps is to be used, we can provide an API/Developer key - if you advise what is required ***