GIS / Azure Maps / OSM - with coloured grid overlay / heatmap (Javascript, Node)
£10-15 GBP / hour
In Progress
Posted about 2 years ago
£10-15 GBP / hour
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 ***
Hello
Greeting of the Day
As you are looking for a WEB developer I am glad to tell you that I am a professional programmer with 6 years of experience in WEB development. I think this project is for me and I can finish it in a short time with a quality result.
I am highly skilled in Web Scraping, Python, Django, CodeIgniter, Laravel, Cake PHP, Vue.js, React, Angular.js, Node.js, WordPress, Photoshop, Illustrator, HTML5/CSS3, and JavaScript.
- Available to work in EST/PST/IST time.
- Can start immediately.
- Possess good English skills.
- Keeps communication tight.
I will always provide perfect quality and deadlines. I am looking forward to a long-term partnership. I am an issue-resolving person so don't worry you feel comfortable working with me.
Please don't hesitate to contact me with any questions. Kindly initiate a chat and let's have a talk, so I can start immediately.
Best Regards.
HI, there
I can build you the Azure Map to implement simple visualization of data in a grid overlay
I am quite familiar with Azure Map and that is why I am fully motivated to this job.
Let me do it now.
Thank you and regards.
I have reviewed your explanation carefully and thank you for your detailed explanation.
Having strong experience in Node.js, JavaScript, HTML5 and Google Map, I would like to implement this project and I will provide you with perfect result once you give me a chance.
Please let me help you on this job.
Let's keep in touch.
Best regards.