Azure Maps - with coloured grid overlay (Javascript, Node)
Budget: £10 – £15 GBP
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)
console.log(grid.x)
console.log(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.
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)
console.log(grid.x)
console.log(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.