WebGL | Mapbox - Heatmap with Zones, Live data API and Data visualization

I'm looking for a Freelancer to develop a WebGL Heatmap, using Mapbox and Live API Data. Project Description and Overview : The project is about getting the data from the API URL and cast the data on the heatmap live. The Heatmap color would represent the "Person Count" devided by zones. We also would like to visualize the data on a heatmap using "Person / m2" ( People density rate ) for each zones. Zones and areas specs: Origin of coordinates system is top-left of background image. Zones, are defined with a JSON file (ex : ) [ { "id": "z1", "top-left-x": 1000, "top-left-y": 200, "bottom-right-x": 2000, "bottom-right-y": 1800 }, { ... Area width and height are constants in a config file Project features : - Heatmap type change option : Person / m2 or Person Count - Data Visualization Dropdown : Latest data, from 30 sec ago data to 30 min ago data. - Language : English or French - Heatmap Transparency Slider : Slide from 1 to 100 percent heatmap transparency/opacity - Live Data API refres rate Slider : Slide from 10 sec to 120 sec automatic refresh rate - Background image Selector : Background selection from Dark/3D map, Releif/Satellite and Street/Map view. Heatmap Type: The heatmap type dropdown requires "Person Count" and Person / m2. Person Count : means to display the number of person per square/zones/areas on the map over the colors, based on the people count live data Person / m2 : means to only display the colors based on the density of people count highness with people per pixel density live data. Additional requirements: Configurable heatmap scale & colors Support latest version of Chrome, Firefox and Safari UI is password-protected (simply hardcoded with 5 hashed passwords) Data Live API: I can provide a live URL for data API that is going to be simulating the real usage. We are going to change the URL when time comes but we have a API to provide to be able to build the project