GeoJSON component takes around 15 seconds to render a FeatureCollection object with around 16000 Feature objects. Same data is rendered by leaflet js in 1.2 seconds

[AtulKekan-developer]

GeoJSON component takes around 15 seconds to render a FeatureCollection object with around 16000 Feature objects. Leaflet js takes 1.2 seconds to render the same amount of data Why does GeoJSON component take so much time ?

Above image is time taken by leaflet js

Above image is time taken by GeoJSON component

Please suggest me a solution to improve rendering time using react-leaflet GeoJSON component

[nizz0k]

Hi, so basic leaflet creates individual dom elements for markers, which means that browsers start to see major performance hits at more than a few hundred markers. The solution to this is to use one of 2 work arounds:

1. The basic circle marker can be natively rendered to a canvas element, rather than as a a div. You can do this by setting the renderer to the canvas option on your map container.
2. There are libraries which also provide the canvas functionality, but the one I've been using in my app seems to have broken on me.

Otherwise, it says in the docs that the issue queue isn't meant to be used from support; you're just lucky I happened to be digging for a solution to my library issues...

[javalonde]

Hi, I am struggling with a similar issue. Slower rendering times are acceptable, but the problem is that everything freezes during this time. Is there any way to avoid this?

[AtulKekan-developer]

Hi, so basic leaflet creates individual dom elements for markers, which means that browsers start to see major performance hits at more than a few hundred markers. The solution to this is to use one of 2 work arounds:

1. The basic circle marker can be natively rendered to a canvas element, rather than as a a div. You can do this by setting the renderer to the canvas option on your map container.
2. There are libraries which also provide the canvas functionality, but the one I've been using in my app seems to have broken on me.

Otherwise, it says in the docs that the issue queue isn't meant to be used from support; you're just lucky I happened to be digging for a solution to my library issues...

Hi @nizz0k can you please mention the name of the libraries that provide canvas functionality

[AtulKekan-developer]

Hi, I am struggling with a similar issue. Slower rendering times are acceptable, but the problem is that everything freezes during this time. Is there any way to avoid this?

@javalonde i face the freezing issue too

[nizz0k]

https://www.npmjs.com/package/react-leaflet-canvas-markers is one of them. You can probably implement your own solution. Another work around is to use the native circle markers but based on your screen shot you want custom markers. Let me know how you get along

On Tue, Aug 30, 2022 at 12:34 PM AtulKekan-developer < @.***> wrote:

Hi, I am struggling with a similar issue. Slower rendering times are acceptable, but the problem is that everything freezes during this time. Is there any way to avoid this?

@javalonde https://github.com/javalonde i face the freezing issue too

— Reply to this email directly, view it on GitHub https://github.com/PaulLeCam/react-leaflet/issues/1020#issuecomment-1231481454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFS6LFOKWL4X6ISM3VED4GTV3XPU5ANCNFSM56YZFVDA . You are receiving this because you were mentioned.Message ID: @.***>

[PaulLeCam]

Hi, Please only use GitHub issues to report possible bugs in the library. You can use the react-leaflet tag in StackOverflow for questions related to using it.