Using React Leaflet with lazy loading

Asked Dec 31 '20 at 09:27

Active Dec 31 '20 at 11:40

Viewed 723 times

I am using React Leaflet. React and everything is working fine, but when I try to use React lazy loading the map just not render or render a small square as shown below. It is just a small box.

<MapContainer center={[selectedLat, selectedLong]} zoom={zoom}>
 <ChangeView center={[selectedLat, selectedLong]} zoom={zoom} />
  <TileLayer attribution='&copy; <a 
   href="http://osm.org/copyright">OpenStreetMap</a> contributors'  
   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>

Also, I added the CSS in index.html:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin="" />

edited Dec 31 '20 at 11:40

Zsolt Meszaros

21,961
19
54
57

asked Dec 31 '20 at 09:27

Mohamed Fawzy

Please add your lazy code! – b3hr4d Dec 31 '20 at 10:03
1

And what happens when you resize your window? – ghybs Dec 31 '20 at 11:44
Agree with @ghybs, solution is almost certainly triggering a window resize. This is a known issue with certain situations https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize – Jared Smith Dec 31 '20 at 11:49
when I resize the window it works fine and load all the data. – Mohamed Fawzy Jan 04 '21 at 10:49

Using React Leaflet with lazy loading

0 Answers0