I am facing some issue while integrating leafet into my react library, sometimes on refresh, the network call is not being made to all the tiles which at the end doesn't load the entire map and just a part of it. For example the api call is being made just to

.png which returns succesfully as this tiles load, but no further api call are being made

Here is the setup and code below

export const Map = ({ mapBounds, markers, polylineMarkers, iconRenderer, onMapBoundsChange, location, params, shouldCallApi, setSearchedBounds, setSearchParams }) => {
  const [mapRef, setMap] = useState(null)
  const [bounds, setBounds] = useState(mapBounds)

  console.log(bounds)

  useEffect(() => {
    if (mapRef) {
      mapRef.on('moveend', handleMoveEnd)
      mapRef.on('zoomend', handleZoomEnd)
      mapRef.fitBounds(formatBounds(bounds))

      return () => {
        mapRef.off('moveend', handleMoveEnd)
        mapRef.off('zoomend', handleZoomEnd)
        console.log('Event listeners cleaned up')
      }
    }
  }, [mapRef])


  function handleMapLoad(s) {
    setMap(s.target)
  }

  function handleMoveEnd() {

  }

  const handleZoomEnd = () => {

  }

  return (
    <div style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}>
    <MapContainer
      bounds={formatBounds([-123.5515950324797, 22.1747014618931, -11.173665344979696, 42.45509353676294])}
      maxBounds={[[85, -180], [-85, 180]]}
      whenReady={handleMapLoad}
      style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}
      worldCopyJump={false}
      noWrap={true}>
      <TileLayer url={'https://{s}.tile.openstreetmap/{z}/{x}/{y}.png'}
        attribution={'&copy <a href=";>OpenStreetMap</a> contributors'} />
    </MapContainer>
    </div>
  )
}

Edit - I did some research and found out that if we add

 setTimeout(() => {
        mapRef?.invalidateSize(true)
      }, 10)

it is working, but then my bounds are not being taken into consideration and the view set is of world level (which shows entire world instead of the bounds that i have defined

I am facing some issue while integrating leafet into my react library, sometimes on refresh, the network call is not being made to all the tiles which at the end doesn't load the entire map and just a part of it. For example the api call is being made just to

https://a.tile.openstreetmap.org/1/0/0.png which returns succesfully as this tiles load, but no further api call are being made

Here is the setup and code below

export const Map = ({ mapBounds, markers, polylineMarkers, iconRenderer, onMapBoundsChange, location, params, shouldCallApi, setSearchedBounds, setSearchParams }) => {
  const [mapRef, setMap] = useState(null)
  const [bounds, setBounds] = useState(mapBounds)

  console.log(bounds)

  useEffect(() => {
    if (mapRef) {
      mapRef.on('moveend', handleMoveEnd)
      mapRef.on('zoomend', handleZoomEnd)
      mapRef.fitBounds(formatBounds(bounds))

      return () => {
        mapRef.off('moveend', handleMoveEnd)
        mapRef.off('zoomend', handleZoomEnd)
        console.log('Event listeners cleaned up')
      }
    }
  }, [mapRef])


  function handleMapLoad(s) {
    setMap(s.target)
  }

  function handleMoveEnd() {

  }

  const handleZoomEnd = () => {

  }

  return (
    <div style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}>
    <MapContainer
      bounds={formatBounds([-123.5515950324797, 22.1747014618931, -11.173665344979696, 42.45509353676294])}
      maxBounds={[[85, -180], [-85, 180]]}
      whenReady={handleMapLoad}
      style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}
      worldCopyJump={false}
      noWrap={true}>
      <TileLayer url={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
        attribution={'&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'} />
    </MapContainer>
    </div>
  )
}

Edit - I did some research and found out that if we add

 setTimeout(() => {
        mapRef?.invalidateSize(true)
      }, 10)

it is working, but then my bounds are not being taken into consideration and the view set is of world level (which shows entire world instead of the bounds that i have defined

• leaflet
• react-leaflet

1 Answer 1

mapRef?.invalidateSize(true)

Redraws the entire map and updates its size. You should call this method if your container has changed its size as a result of some actions.

You can try setting bounds using mapRef.fitBounds(coordinates) and adjust the desired zoom level using mapRef.setView(coordinatesCenterMap, zoomValue).

Additionally, the combination of the zoom and bounds props can conflict with each other, which may result in tiles not loading correctly. You can remove either the zoom or bounds prop and modify these values directly through mapRef.setView or mapRef.fitBounds.

bounds overrides zoom: If bounds is specified, Leaflet automatically calculates the appropriate zoom level, ignoring the explicitly set zoom value. This can lead to unpredictable map behavior, especially if zoom is used for manual zoom control.

You can opt out of using bounds to prevent the map from automatically determining the zoom level by removing the bounds prop and adding the zoom prop along with center={coordinates}.

Try the following code:

<MapContainer
                maxBounds={[
                    [85, -180],
                    [-85, 180]
                ]}
                style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}
                bounds={[
                    [-85, 32.1747014618931],
                    [-61.173665344979696, 42.45509353676294]
                ]}
                whenReady={handleMapLoad}
            >
                <TileLayer
                    noWrap
                    minZoom={2}
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                />
            </MapContainer>