Real-Time Data Syncing with React & MapboxGL

Job ID: 38240325

Budget: €30 – €250 EUR

I have a project with Vite, React, MapboxGL, and Firebase (Realtime Database and Authentication) and I need to add a functionality.

I have a map where MapboxGL renders some plots stored in JSON format in Firestore's Realtime Database. When I click on a plot, a popup appears. I have implemented a button that modifies an attribute of a plot (specifically its Classification, from 1 to 4 and vice versa). Therefore, I would like that when the button is clicked, the attribute in the database is updated (this part is already done) and the map is displayed with the current changes, as the colors depend on the Classification attribute (red = class 1, purple = class 2, green = class 3, and light blue = class 4).

It is also important that this change does not cause any issues afterward (such as the popup not appearing if I click on a different plot after modifying a Classification or preventing other data from being modified in other plots).
Related categories: JavaScript React.js Google Firebase