reactjs - Render Marker at certain interval

Question

In context to my previous question, I'm looking at rendering marker on map at certain intervals, like 10sec or 20 sec.
Below is the code ...

{
                setInterval(() => {
                    this.tmcount += 1;
                    console.log(this.tmcount);
                    console.log(this.state.geoData[this.tmcount]);
                    return (

                                <Marker key={this.tmcount} position={[this.state.geoData[this.tmcount].lat, this.state.geoData[this.tmcount].lng]}>
                                    <Popup>
                                        {this.tmcount} Hi!!!
                                        </Popup>
                                </Marker>
                            )
                }, 1000)
            }

I tried in above way but its not rendering..

question from:https://stackoverflow.com/questions/65662249/render-marker-at-certain-interval

Answer 1

Your question needs a lot of work. I have no idea of the context of where this setInterval is running, or where your actual map component is. That being said, you need to think of this differently. You want your map to update periodically, which means you need to have some state variable that keeps track of what's updating, and the map should respond in kind. Let's set up a component that has an array of markers in its state, and a map that renders what's in that array at any given time:

const MapComponent = () => {

  const [markers, setMarkers] = useState([]) // start with nothing

  return (

    <MapContainer center={center} zoom={zoom}>
      {markers.map((marker, index) => {
        const key = {index} // bad idea here
        const {lat, lng} = marker
        return <Marker key ={} position={} />
      })}
    </MapContainer>

  )

}

Initially, you'll have no markers, because your state variable is an empty array. But your component expects that if there are markers, they will have a .lat and .lng property on each entry in that array. Now, assuming you have some datasource which is an array of objects containing location info, you can set up a useEffect to progressively update your state variable with new entries from that dataset:

const [markers, setMarkers] = useState([])

useEffect(() => {

  const interval = setInterval(() => {

     // clone state variable
     const updatedMarkers = [...markers] 
     // add next marker entry from source dataset
     updatedMarkers.push(geoData[markers.length]) 
     // setMarkers(updatedMarkers)

  }, 1000) // 1 second interval

  return () => { clearInterval(interval) } // clean up interval on unmount

}, [])

return ( ... )

So now, on component mount, a timer is set up to update the state every second with the next entry from your source data. The map will respond in kind and add the next marker every second. I haven't tested this, but hopefully its enough to give you an idea of what to do.