2

I have an ReactJS admin panel that monitors the location of all our company drivers and plots them as markers using @react-google-maps/api, I also want to provide live-location tracking. I was able to plot the markers but when I did a simulation for the live tracking, the CPU usage spiked up and made the map laggy.

This is how I plotted the markers

//DashboardMap.jsx
import { GoogleMap } from "@react-google-maps/api";

import Markers from "./Markers";

const DashboardMap = () => {
        return (
          <GoogleMap {...MAP_CONFIG}>
            <Markers />
          </GoogleMap>
        );
};

//Markers.jsx
import { useSelector} from "react-redux";

const Markers = () => {

   const {drivers} = useSelector((state) => state.drivers);

   return (
      <React.Fragment>
         {drivers.map((driver, index) => <Marker {...driver.marker} //marker config />}
      </React.Fragment>
   );
};

To simulate the live-location tracking I created an interval that updates the marker position every second

const simulateTracking = () => {
   setInterval(() => {
        drivers.forEach(driver => {
            dispatch({type: "SIMULATE_LIVE_TRACKING", 
                      payload: {
                       driverId: driver.id,
                       newPosition: { lat: driver.position.lat + .001, 
                                      lng: driver.position.lng + .001  }
                      }
            })
        })
  }, 1000);

//reducer
case "SIMULATE_LIVE_TRACKING":
  const driver = _.remove(state.drivers, (item) => item.id === action.payload.driverId)[0];
  driver.marker.position = action.payload.newPosition;
  return { ...state, list: [...state.drivers, driver ] };

This is currently working but the thing is the CPU usage spiked up to 20% when the number of drivers was 15, and we currently have hundreds of them. My guess is because Markers.jsx re-renders every time the a driver's position changes but I have no idea how to prevent that.

j.ian.le
  • 207
  • 4
  • 16
  • Hi, what are the practical requirements in real life? No driver will have moved very far in a second so could you update every minute say. And/or update a driver only if they have moved a significant amount (testing driver.marker.position lat/lng against action.payload.newposition). – A Haworth Mar 18 '21 at 06:54
  • Hello, hmm we can think of the test as an N number of drivers who just updated their current location at the same time. So if say at least 15 out of hundreds of drivers updated their location at the same time (having them update their location every minute). – j.ian.le Mar 18 '21 at 07:09
  • If drivers update their positions no more than once a minute, draw the complete map just once every minute. And it is probably worth doing a complete draw (no removing of previous markers - just a clean draw of everything). See what happens then with hundreds of markers. I've drawn hundreds of markers on a map and it doesn't take a minute. – A Haworth Mar 18 '21 at 07:42

0 Answers0