react-leaflet Haritanın Gri Görünmesi

17.02.2022 22:06
#REACT #REACT-LEAFLET

react-leaflet Haritanın Gri Görünmesi

React ile geliştirdiğim bir projede react-leaflet kitaplığını kullanmak istedim ve kurdum. Yükledikten sonra haritanın kısmen yüklenmediğini ve gri kaldığını gözlemledim. Harita kaydırıldığında bazı alanlar yüklenmiş olsa da çoğu kısım gri kaldı. Sayfa boyutu değiştirildiğinde harita tamamen tamamlanmış oluyordu.

Bu hatayı çözmek için biraz araştırma yaptıktan sonra çözümün gayet basit olduğunu gördüm. Çözüm olarak MapContainer hazır olduğu zaman tetiklenen whenReady fonksiyonu içerisinde parametre olarak gelen harita referansını kullanarak boyutu geçersiz kılan invalidateSize fonksiyonunu tetikledikten sonra sorun çözülüyor.

Problemi çözmeden önceki ve sonraki kod blokları aşağıdaki gibidir.


Öncesi

Sonrası

<MapContainer
whenReady={ref => {
map.current = ref;
}}



...
<MapContainer
whenReady={ref => {
map.current = ref;
setTimeout(() => {
map.current.target.invalidateSize();
}, 1);
}}
...