Using React-Leaflet to render large dataset of Makers

App Development
,
1

This is vaguely connected to Dgraph, but it is not a Dgraph Problem, but maybe somebody here has worked with React-Leaflet before and might have some insights.

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: GraphQL Markers - CodeSandbox

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: