Live update markers - Help to reduce Mapbox cost

[carljoachim]

const MapComponent = ({
    scooters
}) => {
 
useEffect(() => {
    setScooters(scooters)
 }, [scooters])

 const scooterMarkers =
        scooters.map((scooter) => {
           return (
                <Marker
                    key={scooter.id}
                    latitude={scooter.lat}
                    longitude={scooter.lon}
                >
                      <div className="scooter-pin">
                          <ScooterIcon />
                      </div>
                </Marker>
            )
        })

return (
        <ReactMapGL
            mapboxAccessToken={process.env.MAPBOX_TOKEN}
            mapStyle={process.env.MAPBOX_STYLE}
            reuseMaps
        >
              {scooterMarkers}
        </ReactMapGL>
)
}

We have an application where users can enable a map view and get updates on scooters locations. The scooter locations are typically updated every minute. Unfortunately we've seen that Mapbox charges this a render of this component as a new Map Load, and therefore it leads to a lot of map loads, and a high Mapbox bill. The maps location is not changing, it's only the Markers that changes their location. Does anyone have an idea on how we can update the location of this scooters without having to have a new Mapbox map load? That would be very appreciated!

[Pessimistress]

Mapbox charges this a render of this component as a new Map Load

Nothing in the code that you shared would cause that.

[carljoachim]

scooters are being sent as a prop to this map-component every minute, so then it leads to a re-render. But all I want is for the Markers to update their position, which they do, but Mapbox treats this like a new map-load when the component is rendering.

[Pessimistress]

All I'm saying is that you don't provide enough information for others to diagnose the issue. My suggestion is to upgrade to the latest of both react-map-gl and mapbox-gl, and if the issue persists, create a CodeSandbox that reproduces it.