500K map objects, first render cut from 800 to 480 ms
A Mapbox GL JS interface with 300K–500K geospatial objects: first render from about 800 ms to about 480 ms.
Mapbox GL JSPerformanceReactElasticsearchGIS
At KeyHorse, GIS interfaces had to render and work with datasets of 300K–500K geospatial objects. The first interaction on the map felt slow, and the delay was spread over several places instead of sitting in one function.
What changed
- Restructured map layers and styles.
- Added clustering.
- Moved filtering to the client.
- Shortened the data path between the React state layer and Elasticsearch to remove repeated work.
Result
Initial Mapbox GL JS rendering went from about 800 ms to about 480 ms. Separate work on the search algorithms made geospatial search about 30% faster.