Control marker visibility by zoom level Reactjs

Question

From the backend I receive data with locations, then I show them on the map. How can I make it so that on the map, depending on the zoom, the number of markers changes, and when you get closer, so that the number increases?

<GoogleMap zoom={zoom} center={center} mapContainerClassName="map-container"
            options={{
                restriction: {
                    latLngBounds: azerbaijanBounds,
                    strictBounds: false,
                },
            }}
        >
            {counter && data && data.map((loc) => (
                <div key={loc.id} className="custom-marker-wrapper">
                    <Marker
                        position={{ lat: loc.location[0], lng: loc.location[1] }}
                        onClick={() => handleMarkerClick(loc)}
                        icon={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAq1BMVEUAAABl1o5m2Y1l141l141l141l141k2I5l141l141l1oxl141o2Ihl141l141m1406aqo/bahj14tl141l145k1o08bKk9bKk8a6lk141l141o3Is7bKc9a6k9bKk9a6k+ZaZXpptl2I48bKg9bKo/b6g9bKk8bKk8bKlk14w9a6k9bKk7bKw9bKlm1o09bKk9bKk+bKo9bao9bKg8bKc9bao9bKk9bKg5capaHh7zAAAAOXRSTlMAUQqs/ybVT/TMg58QtPlnMCst3OQ4ZPVZWMAWDaP/lwgEj9fKIPzsTjNFiRrAfdyCrD/dQLDQbRKMyS9lAAABDUlEQVR4Ac3PVWLDMBAE0IkzYWbeMDPa9z9ZV2qYforPbGkJ387nwzuOn/Q7eCkQpAoG8EIoTEYiZDiEp6IkY44TIxnFo3iCTKaQziCVJBNx3MnmyHwBxVKpjEKezGVxoxImq7V6Q1SzVauS4Qou2h2SnXamK1avf/yBo2NAsaSLg4HehqNjSlhjW7Jl03fTk6Goads2NYYRNE1/pm/Ugdlc1HxmxgrCiIUXKJv0pSKM9lTUcIJFOAar3WqKWqZxNBqablbtNo7SotZ1nPV7oja43jDHtdZWf+1uNuzt/7SCcXi+oS+q9X83zG83LB82yKpcLruiymoqDxseXW1oDeWJkoez3Xr+YD/BL/kATPEwwGzXEGUAAAAASUVORK5CYII='}
                    >
                        {loc.isOpen && loc.title && (
                            <InfoWindowF onCloseClick={() => handleMarkerClose(loc)}>
                                <div className='infoWindowDiv' onClick={(e) => { window.open(`https://example.com/item/${offerType}/${loc.id}`) }}>
                                    <span className='infoWindowTitle'>{loc.title}</span>
                                    <span className='infoWindowInfo'>Qiymet - <span className='infoWindowPrice'>{loc.price} AZN</span></span>
                                    <span className='infoWindowInfo'>Sahə - <span className='infoWindowPrice'>{loc.area} m <sup><small>2</small></sup></span></span>
                                    <span className='infoWindowInfo'>1kv/qiymet - <span className='infoWindowPrice'>{Math.round(loc.m2)} AZN</span></span>
                                </div>
                            </InfoWindowF>
                        )}
                    </Marker>
                </div>
            ))}
        </GoogleMap >

I tried to add class names in order to change the display values depending on the distance but it didn’t work

Answer 1

I just sort relative to one point, then depending on the zoom I change the state

const groupMarkers = ((locations, zoom) => {
    const groupingThreshold = 0.5 / Math.pow(2, zoom / 2);
    const groupedMarkers = [];
    const sortByLocation = (properties, lat, lng) => {
        return properties?.sort((a, b) => {
            const distanceA = calculateDistance(a.location[0], a.location[1], lat, lng);
            const distanceB = calculateDistance(b.location[0], b.location[1], lat, lng);
            return distanceA - distanceB;
        });
    }
    const calculateDistance = (lat1, lng1, lat2, lng2) => {
        const earthRadius = 6371;
        const radLat1 = (Math.PI * lat1) / 180;
        const radLat2 = (Math.PI * lat2) / 180;
        const deltaLat = (Math.PI * (lat2 - lat1)) / 180;
        const deltaLng = (Math.PI * (lng2 - lng1)) / 180;
        const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        const distance = earthRadius * c;
        return distance;
    }
    const sortedProperties = sortByLocation(locations, 40.317574, 50.339039);
    for (let i = 0; i < sortedProperties?.length - 1; i++) {
        if ((Math.abs(sortedProperties[i].location[0] - sortedProperties[i + 1].location[0])) > groupingThreshold && (Math.abs(sortedProperties[i].location[1] - sortedProperties[i + 1].location[1])) > groupingThreshold) {
            groupedMarkers.push(sortedProperties[i]);
        }
    }
    setData2(groupedMarkers)
})