Map Interaction and Zooming Performance
Motivation
Map interaction performance was investigated because zooming and moving the map caused noticeable lag, especially on larger maps.
The issue was more visible in Firefox.
Investigation method
Performance was mostly tested with the Firefox developer tools.
The runtime analysis tab was used to record performance while panning and zooming the map for about 15 seconds.
Several possible bottlenecks were considered:
- expensive event handling during panning and zooming;
- rendering cost caused by many drawing-layer polygons;
- unnecessary React or Konva updates during map interaction;
- inefficient lookup of visible plantings.
Event handling during panning and zooming
Panning and zooming can trigger many events in a short time.
If many event listeners are active during these interactions, they could cause performance degradation.
To test this, event listeners were disabled one by one and the resulting performance was compared.
No significant performance change was observed during this investigation.
Result
- Event handling was not identified as the main bottleneck.
- This result only reflects the state of the code at the time of the investigation.
- Event handling could become relevant again if more expensive handlers are added in the future.
Drawing-layer polygons
The drawing layer was also considered as a possible source of performance problems.
Drawing-layer elements can contain polygon-based shapes. Rendering and updating many polygons, especially polygons with many points, can become expensive.
Performance was compared with the following layer combinations:
- all layers enabled;
- all layers except drawing layers enabled;
- all layers except the plant layer enabled;
- only drawing layers enabled;
- only the plant layer enabled.
Some improvement was observed when layers were disabled.
However, the improvement was not large enough to identify the drawing layer as the main bottleneck.
Result
- Drawing-layer rendering may contribute to the total rendering cost.
- It was not identified as the main cause of the observed zooming and panning performance problem.
React and Konva updates during map interaction
Unnecessary React or Konva updates during map interaction were also considered as a possible bottleneck.
Panning and zooming can trigger many updates in a short time. If these updates cause React components to re-render unnecessarily or cause Konva to redraw unchanged canvas elements, map interaction can become less responsive.
Log statements were added to monitor the update rate.
Because lazy loading had already been implemented, the observed reload rate was not high enough to indicate a significant bottleneck from React or Konva updates during map interaction.
Result
- Unnecessary React or Konva updates were not identified as the main bottleneck during this investigation.
- This could be worth checking again if performance problems reappear after future changes.
Plant-layer viewport selection
The most significant finding was that the plant layer's viewport selection used a linear scan.
Even though the plant layer already lazy loaded its elements, it still had to iterate over all plantings to determine which ones were visible.
This was identified as a significant bottleneck, especially on larger maps with many plantings.
Result
- Lazy loading reduced the number of rendered plantings.
- The lookup of visible plantings was still inefficient.
- The linear scan was identified as a major performance bottleneck.
A spatial index and a threshold-based heuristic were implemented to improve viewport selection.
The implementation and benchmark results are documented in Plant-layer viewport culling.