Map not loading in the React-leaft 304 http

Question

The map loads partially when the component is called, but then I just open the dev tools that it loads and starts receiving 200 http, but if it opens with the dev tools appearing, the same happens and receives the code 304 http, and it is removed the dev tools it loads again normally. I'm using ionic with react.

<MapContainer
  center={[middleOfVisit.lat, middleOfVisit.lng]}
  zoom={15}
  style={{ width: '100%', height: '85vh' }}
>
  <TileLayer
    url={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
  />

Sounds like [mapbox is cacheing your tiles](https://stackoverflow.com/questions/45748391/why-mapboxgl-api-returns-304-status-code), but the [resize event](https://stackoverflow.com/questions/36037178/leaflet-loads-incomplete-map) when opening and closing devtools is forcing a fresh http call — Seth Lutske, Apr 20 '21 at 18:34

score 0 · Accepted Answer · answered May 10 '21 at 19:08

0

With this function that invalidates the size, I created a component for my tileLayer and markers to be inside it

function ComponentResize() {
    const map = useMap()
    map.invalidateSize()
    return null
  }

answered May 10 '21 at 19:08

Mikhail Rommulo

73
1
1
5

Map not loading in the React-leaft 304 http

1 Answers1