GeoJSON and performance

[leo-petrucci]

I'm currently trying to render an interactive map. I started from the official examples but have found myself stuck on how to improve performance.

Link to codesandbox

I've tried to simplify the GeoJSON data as much as possible, but haven't seen a lot of performance improvements.

While the problem is obviously the amount of data, the map only starts performing well again once the whole Mercator component is removed, rather than removing when the coordinates are mapped.

Is it possible to have this running at a decent framerate or should I give up on it?

Thank you for the library!

EDIT: d3 suggested using the library simplify-geojson to simplify my output, but the outputted object looks just as big as the original despite the map being less precise so I'm not entirely sure if my topology is actually being simplified correctly.

[williaster]

Hey @creativiii 👋 thanks for checking out visx. Gonna update this to a discussion since it's more of a usage question.

Generally perf in react specifically can be really hard when you have a lot of fast successive updates like zooming or animating (this is why animation libraries like react-spring purposefully avoid the react re-render cycle).

I took a quick shot at updating your sandbox. It's still messy/not perfect (in particular the zoom minimap and something is wonky when you zoom in really far), but it's signficantly better. Generally the approach I think you need to employ is applying the zoom transform not to the projection itself (which forces a complete re-render of the map), but on a parent element like <g />. Hope it makes sense/let me know if you have any other questions, please share back a final result if you get it working to your liking!

[leo-petrucci]

Oh wow the difference is amazing, thank you so much!

Any idea how I could replicate centering my map to specific coordinates with this method?

[williaster]

I just updated the sandbox to pull out the center coordinate array. I think if you pass that to both the projection (used for points) and the Mercator map, it will center the map and points correctly.

You could also pass that in from the parent component, you'd just need to be careful to memoize it (e.g., with useMemo) such that you aren't passing a new array of coordinates each time the zoom updates, otherwise the Map component will update each zoom change again.

[tonyneel923]

Thank you @williaster this was a huge help for perf in my map. Maybe the current example for preset geo should show this optimization?