1

We have an application where we need to plot ~13K+ markers on a map depending on the users current filters. I have found that react-leaflet does not handle this many markers very well. I even offloaded all of the popup data to a separate query on popup to reduce the initial data load, but to no avail.

I did find that using clustering does help improve the performance, so I have enabled that (even though it is not in the following example code). But even with clustering, on the initial map load a user might have to wait 20 seconds for the map to render with the markers, but the actual data fetch from the GraphQL API is less than a second.

I am trying to find a way to only fetch the markers that are present within the bounding box of the page. I am doing this successfully, but the problem now is that all of the markers flash (re-render) when the map is moved/zoomed even if the new bounds is just a subset of the original.

CodeSandbox: https://codesandbox.io/s/graphql-markers-t409f?file=/src/App.js

Is there a way for react-leaflet to only re-render the markers that are new and not all the markers? I am providing the unique id of the marker from the api to the Marker component key field, but that doesn't seem to provide any improvements.

I am thinking that maybe the best way to handle it would be to do something to manage the map bounds to the min east, max west, max north, and min south and only refetch if the new bounds are outside of the currently fetched area. This along with a 10-20% over area fetch to not refetch if the map is only very slightly moved in any direction.

Note: I am not guaranteeing that this GraphQL backend will be available after the question has been answered. There is a 1Mb/Day data transfer limitation on this backend in case this question blows up and you cannot see the markers. See the README in the codesandbox for steps to setup the backend for free online in under 2 minutes.

Some related issues that may help if no other solution is found:

Not the same question as Plotting 140K points in leafletjs. I am specifically looking for an answer to how it might be possible to update markers to remove markers not in new data fetch and add new markers not present in previous data fetch without re-rendering existing markers.

Take a look at the example code and you will see the markers flash as they all get re-rendered when the new data is fetched. This might lead to a better hybrid between performance and UX as I really don't want to use the CircleMarker and I already added clustering but still have existing lag.

Improve this question
5
  • 1
    Does this answer your question? Plotting 140K points in leafletjs
    – Seth Lutske
    Commented Jun 21, 2021 at 22:23
  • Maybe supercluster might help, I might give that a try. Really want to use markers and not circles if possible. I did try to use CircleMarker but I couldn't get it to then work with Popups. Might be something I was doing wrong. Still interested in an answer if it is possible to only re-render new marker data and not all markers each time marker data might be updated. (Some removed, some added)
    – amaster
    Commented Jun 21, 2021 at 22:36
  • 1
    Marker clustering 13k points should take way less than 20 seconds, see the live demo on Leaflet.markercluster homepage. You may have configured something incorrectly. As to hide/show points outside the viewport (possibly with some margin), you are essentially re-doing a feature of Leaflet.markercluster.
    – ghybs
    Commented Jun 22, 2021 at 2:37
  • 1
    @ghybs, I still can't figure out what I am doing wrong in my actual production code. Let me rig up an example that is closer to what I am doing in production to better show my problem of a 20+ second load time using clustering with ~13K markers
    – amaster
    Commented Jun 22, 2021 at 17:51
  • @amaster The speed of generating markers depends on the speed of the device on which we run the map. The basis is to set the map on the canvas preferCanvas={true} and instead of the usual markers use CircleMarker and also set it to renderer={L.canvas({padding: 0.5})} I checked 13,000 markers and on my old computer the map is generated locally for 12 seconds Take a look here I have an example there are only 60K markers but see how fast they load markers-60K
    – Grzegorz T.
    Commented Jun 23, 2021 at 13:32

1 Answer 1

Reset to default
0

You should use the React Canvas Markers plugin. The poor performance is because the default behavior is to create an individual div for each marker. This avoids the performance hit by writing your map and markers to a canvas element. Here's a working example from SO.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.