Im using react-leaflet to render heatmap using big amount of polygons that I get from database. Polygons are preconfigured and I don't perform any actions on them. My issue is that when user wants to display certain heatmap, the amount of polygons to render on leaflet map is so big (30k) that is causes browser to lag. My issue is that I dont know how to show user that heatmap is loading (ex. using wait cursor), becouse lag starts at the beginning of rendering map loop and ends when all polygons are rendered. Im using
{
// dependencies
"leaflet": "^1.9.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
// devDependencies
"vite": "^5.1.5"
}
all the code responsible for rendering polygons
{ visibleHeatmap && heatmapsData.map( ( { pollutant, polygonSimData } ) => {
if( visibleHeatmap !== pollutant ) return <></>
return polygonSimData.map( ( { color, coordinates }, index ) => (
<Polygon key={ index } positions={ coordinates }
pathOptions={ styleHeatmapPolygon( color ) }/>
) );
} ) }
where
- visibleHeatmap is useState variable which changes when user clicks button in parent component.
- polygonSimData consists all the needed data
I tried switching to rendering polygons on L.canvas but it didnt solve the problem.
How should I change the code, so that I would be able to show user that heatmap is rendering?
