Unexpected moving behavior with a lot of markers

[jaballogian]

Hello there

I'm using this library with dynamic real data from my API to create moving animation markers.
I always request the API and update the marker state (a list of markers) every 10 seconds.
The API would update all the object locations every time I request it.
The object would be motorcycles or cars.

When I tested with only 10 real object data (one object item will be displayed with a marker on the map), the moving animation works as expected.
But when I tested with hundreds (more than 300) of real object data, a lot of markers didn't move as expected. The markers moved unreasonably very fast (around 100 km/second meanwhile the average moving of the object is around 20-30 km/hour).

I'm in Indonesia. The marker could move from the starting point to the finish points I note below (green line) in just a few seconds meanwhile from the west edge to the east edge of the island (blue line) is around 1300 km.

My question is have you tried using this library with hundreds of real data?

I wish I could create you a codesandbox with our real data but it's our confidential data.
Perhaps I could create you a codesandbox with nearly closed data soon.

[alexandra-c]

Hello @jaballogian,

I haven't used this with hundreds of markers but, I think maybe this may be an implementation issue. If you'd share some code or setup a reproduction code somewhere it would help...
In the mean time, I can just make assumptions...for example, do your markers have an id property or can they be uniquely identified by something? It's very important that you update the right marker, especially when you have hundreds of them.

Let me show you my use case scenario, I'm tracking air flights near an airport, and I'm reading radar data from the data source every 2 seconds. Each flight object has the following structure:

flightsData {
      flightNo
      origin 
      destination
      latitude
      longitude
    }

The flightNo property represents the flight number, which is unique and I'm using it to uniquely identify each airplane.

In my fronted app, I'm saving all the flights data that is displayed on the screen in a local storage, for example a React useState([]).
Now, every time I get new data from the backend, I iterate through all the flights I'm receiving and check to see if they are already displayed or not. If my flights data local storage already contains a flight, I update it with the new data, if not, I just append the new flight object meaning there will be a new marker on my map.

Here's my code:

const LeafletMap = () => {
  const [flightsData, setFlightsData] = useState([])

 const { data } = useQuery(TRACKING_DATA_QUERY, {
    pollInterval: 2000,
    onCompleted: data =>
      setFlightsData(prev =>
        reduce(
          (acc, elem) => {
            const index = findIndex(propEq('flightNo', elem?.flightNo), acc)
            if (index >= 0) {
              const previousPosition = [acc[index].latitude, acc[index].longitude]
// Here I make sure to update the position of an existing maker
              acc[index] = { ...elem, previousPosition }
              return acc
            }
//Here I add a new marker
            return acc.concat(elem)
          },
          [],
          prev.concat(data?.flightsData)
        )
      )
  })

  return (
    <MapContainer style={{ height: 'calc(100vh - 52px)' }} center={airportPosition} zoom={13} minZoom={10}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
      {flightsData?.map(ap => (ap ? <AirplaneMarker key={ap.flightNo} data={ap} /> : null))}
    </MapContainer>
  )
}

I'm using GraphQL queries to read new data as my backend is a GraphQl server, just focus on the onCompleted function which gets called when new data arrives, in addition, I'm also passing the flightNo to React key property.

PS: I'm using reduce, findIndex, propEq functions from ramda.

Hope this helps you find the issue.
Best regards!