Screenshots
This page contains screenshots from May 11, 2024.
Table of Contents:
The home page is very simple, shows the map full screen and lets the user explore the are by clicking trees and using the search bar in the header. The map center and initial zoom are configured in the app and are same for all users. However, the map state is saved in the browser, so next time the user opens the app, they see the map as they left it.
We use clustering to avoid showing too many markers.
On mobile devices, we don't show the zoom buttons (+/-), as the user knows that all mobile apps use the pinch gesture to change zoom.
After a tree marker is clicked, a preview pane is shown with basic details for that tree. On desktop, it is shown as a right sidebar, and contains some buttons with available tree actions. On phones, the bar is shown in the bottom half of the screen, with the toolbar buttons using the common mobile UI style, with the most used button being a little bigger.
This page shows all available information for a tree. The page contains the last uploaded photo, a smaller map (not full screen this time), a photo gallery, a comment section and a toolbar with available actions. The map contains a marker highlighting the current tree, and markers with all other trees, so the user can quickly switch between them.
The most typical action for this page is uploading new photos, so the main button is the one to add a new photo.
For galleries, lightGallery is used, which lets the mobile user swipe the photos.
This page contains a form to edit all numeric and textual parameters of a tree: species name, notes, height, crown diameter, circumference. The circumference can be entered in both meters and centimeters (integer values higher than 3 are considered centimeters), which makes it quicker to enter on phones.
