Map Performance

Implemented ways to improve map performance or usability will be documented here.

Layer-based lazy loading

The plant layer (PlantsLayer.tsx) lazy loads its given elements.

It does this by calculating the currently visible bounds of the canvas and then checks which elements intersect with these bounds. Those are then saved into a Set and we iterate over this Set and render the elements. The used utility can be found in lazy-load-util.ts to make it easy to reuse in other layers.

This gives us better overall performance and memory savings as we are only loading and rendering elements as soon as they are necessary. Using this we could lazy load any elements on the canvas, probably putting the performance toll of rendering and loading all elements to a minimum.

This approach could be further improved upon however, because currently we still iterate over all elements to find out which are intersecting and which are not. Finding a way to not having to do that, with certain data structures for example, would make this improvement even more significant.

Concepts that could improve performance and loading times when using the map:

Images

Use .webp

WebP is a modern image format that offers smaller file sizes while maintaining high quality. It provides better compression than JPEG and PNG, reducing bandwidth usage and improving loading speeds. By using WebP, we can enhance performance, reduce storage needs, and create a faster, more efficient user experience without compromising image quality.

Plant Icons

The plant icons come from our Nextcloud instance and should be relatively small in size (max. 500 KB) and use .webp.

Dynamic Image Resizing

We could also resize the images based on scale (zoom level). This is something that can be configured in Nextcloud (https://docs.nextcloud.com/server/latest/admin_manual/configuration_files/previews_configuration.html) by getting an image in multiple resolutions and then dynamically switching them out when the user zooms in or out.

Caching

All images (especially those, that won't change a lot) should be cached in the browser to reduce load times.