Mapbox GL JS - Heatmap with live data API and Data visualisation options

Job ID: 33267247

Budget: $30 – $250 CAD

Dear Freelancers,
We are looking for someone that could develop a heatmap using Mapbox GL JS and Live data API.

Here is what we have in mind :

Use Mapbox GL JS and Maps SDKs for Mobile as the main tool for heatmap creation, graphical interface and user experience.
- Mapbox GL JS to create mapbox heatmap and broadcast the map on the web
- Maps SDKs for Mobile to consult the map on mobile devices ( Tablets, Android or IOS phones ) and visualise the data with the visualisation features we need.

The data to increment and display on the heatmap would be the approx. number of people and crowd density in each section.( Red spots as very high number of people and high crowd density and blue as very low numbers of people and low crowd density )

Here is the data structure from the data api we're going to provide for the heatmap live data update :

[
{
"id": "z1a1",
"zone": 1,
"area": 1,
"number_of_pixels": 1000000,
"crowd_count": 124,
"ts": 1645898972070
},
{
"id": "z1a2",
"zone": 1,
"area": 2,
"number_of_pixels": 1000000,
"crowd_count": 198,
"ts": 1645898972070
},
{
"id": "z2a1",
"zone": 2,
"area": 1,
"number_of_pixels": 1000000,
"crowd_count": 85,
"ts": 1645898972070
},
{
"id": "z2a1",
"zone": 2,
"area": 2,
"number_of_pixels": 1000000,
"crowd_count": 243,
"ts": 1645898972070
}
]

We include the number of pixels in data so that we can have something that is normalized in people density.

You'll have to use an API that our software development team would provide, that is refreshing the Data file every "X" seconds.

We also would like the map available to be consulted with mobile devices, using Mapbox SDK for Mobile devices with the features on the image I've provided in attachments files.

I provided an image that is showing visually what we need as features for data visualisation in this project.

Quick features overview :

- Being able to change the background mode view ( Mapbox dark, Satelite view and GPS view )

- Slide and choose the heatmap density/transparency ( in percent ) over the background

- Having a "Refresh URL" field to enter new API URL if needed

- Slide and choose the "refresh rate" ( in seconds ) of the automated Data

- Data display tab with timelapse to be able to visuialise Latest datas, 25 seconds ago data, 1 min ago data, etc.. ( Ideally we could choose any timestamp/timelapse we need or want )

Don't hesitate to start chat if any further questions are needed to be answered on our side !

Regards,