Currently, the project is loading all data for all islands at once. And it will draw all overlays all the time. This is a big performance burden, especially since the typical use case is to only show one island at a time.
Idea:
Add the ability to select one island to show. Can be both or either:
The URL has a path for each island, like https://hawaiizoningatlas.com/oahu
A select UI component is added to select an island.
Split up the data set for each island. Then, load and draw that specific island's data.
This is mean to be very primitive. Lazy loading would be cool but would be tough. This should be a relatively straight forward way to get a performance increase. This might even be a better UX. For example, when an island is selected, it can automatically center and zoom in the map on that island.
Basic Example
See summary.
Drawbacks
What happens if you want to view multiple islands at the same time?
Start Date
No response
Implementation PR
No response
Reference Issues
No response
Summary
Currently, the project is loading all data for all islands at once. And it will draw all overlays all the time. This is a big performance burden, especially since the typical use case is to only show one island at a time.
Idea:
https://hawaiizoningatlas.com/oahu
This is mean to be very primitive. Lazy loading would be cool but would be tough. This should be a relatively straight forward way to get a performance increase. This might even be a better UX. For example, when an island is selected, it can automatically center and zoom in the map on that island.
Basic Example
See summary.
Drawbacks
Unresolved questions
No response