React-Leaflet: Markers disappear when panning the map

Question

I have a map created with react-leaflet. The problem is that when I move the map in mobile devices, markers that are close to map container edge get disappeared.

I have something like 4000 markers on my map. What I expect is to markers never disappear, even if they went out of the visible map area.

Map Component:

<MapContainer
        ref={map}
        center={[31.89448, 54.36954]}
        zoom={5}
        worldCopyJump
        boundsOptions={{ padding: [50, 50] }}
        zoomControl={false}
        scrollWheelZoom={false}
        whenCreated={setMap}
        className={classes.leafletContainer}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {markerData ? (
          <MarkerClusterGroup>
            {markerData.map((singleMarker) => (
              <Marker
                key={`${singleMarker.organization_id}y`}
                icon={L.icon({
                  iconUrl: singleMarker.logo,
                  iconSize: [38, 95],
                  iconAnchor: [22, 94],
                  popupAnchor: [-3, -76],
                  shadowUrl: null,
                  shadowSize: [68, 95],
                  shadowAnchor: [22, 94],
                })}
                position={[singleMarker.lat, singleMarker.long]}
              >
                <Popup className={classes.popup}>
                  <MapCard organizationId={singleMarker.organization_id} />
                </Popup>
              </Marker>
            ))}
          </MarkerClusterGroup>
        ) : (
          <Grid item md={12} className={classes.mapLoading}>
            <Typography>در حال بارگذاری موسسه ها...</Typography>
          </Grid>
        )}

        {selectedOrganizationData && (
          <Marker
            key={selectedOrganizationData?.id}
            icon={L.icon({
              iconUrl: selectedOrganizationData?.logo,
              iconSize: [38, 95],
              iconAnchor: [22, 94],
              popupAnchor: [-3, -76],
              shadowUrl: null,
              shadowSize: [68, 95],
              shadowAnchor: [22, 94],
            })}
            position={[
              selectedOrganizationData?.addresses[0]?.lat,
              selectedOrganizationData?.addresses[0]?.long,
            ]}
          >
            <Popup className={classes.popup}>
              <MapCard organizationId={selectedOrganizationData?.id} />
            </Popup>
          </Marker>
        )}
      </MapContainer>

Map Css:

leafletContainer: {
    width: '100%',
    height: '100%',
    zIndex: 10,
    borderRadius: '0 0 21px 21px',
    boxShadow: '0 10px 15px 0 rgba(0, 0, 0, 0.16)',

    '& .leaflet-div-icon': {
      border: 'none',
      backgroundColor: 'transparent',
    },

    '& .leaflet-top': {
      bottom: '4px !important',
      top: 'unset !important',
    },

    '& img.leaflet-marker-icon': {
      background: 'url("../marker.svg")',
      backgroundSize: '100% 86%',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: '100% 100%',
      height: '38px !important',
      padding: '10px',
      borderRadius: '50%',
    },
  },

So far, I have tested worldCopyJump property but nothing changed.

Answer 1

We were experiencing the same issue when panning the map. Each marker disappeared when about 50% off the screen. Panning in the opposite direction made them appear back, now when they were about 50% back inside the screen. In our case the issue was caused by the 'removeOutsideVisibleBounds' parameter in the MarkerClusterGroup setup.

We modified the parameter from: removeOutsideVisibleBounds={true}

To: removeOutsideVisibleBounds={false}

Using: react 17.0.2 + react-leaflet 3.2.0 + react-leaflet-markercluster 3.0.0-rc1