How to optimize performance when there are a LOT of markers?

[nonoumasy]

Just a general question on optimizing performance when there is a LOT of markers, for eg when there are more than 1000 markers on map. I've used marker cluster in the past but I just don't like the current implementation.

What techniques do you use to optimize performance?
For eg. I have this map which sometimes has more than 10,000 markers.
https://csb-ydksp-ashen.vercel.app

[EthanEFung]

A couple suggestions that have costs and benefits

1. virtualization
   I'm not going to use this term in the strict sense. The way I'm defining it is limiting the amount of data that is rendered based on the viewport. For example this screen shot is only showing the points in Los Angeles, so we can lazy load the points in New York up until the event that the user drags the viewport over New York.

2. Establish a marker threshold
   If you were to take a look at the Zillow website and zoom out far enough, you'll notice that the number of points that are rendered is 500 and a clean notification to the user that they should zoom in to see more (at least at the time that I am writing this). I'm assuming that the map that you're building here won't have as much meta data on the actual points as Zillow) so I'm sure a more lenient threshold could be used.

3. Use the HeatMapLayer component
   Looking at the screenshot above leads me to believe that you're looking for trends. This component seems more suited for what I'm assuming is your goal (idk, you tell me).

• https://developers.google.com/maps/documentation/javascript/heatmaplayer?hl=en
• https://react-google-maps-api-docs.netlify.app/#heatmaplayer