Sites
Floating Panel & Tabs
The floating panel is the primary interface for interacting with site data in SiteView. It sits alongside the CesiumJS 3D globe, giving you access to site information, survey management, layer controls, measurement data, and a timeline — all without leaving the map view.
![[Screenshot: SiteView desktop layout showing the floating panel on the left side (380px wide) with the Overview tab active, and the CesiumJS 3D globe filling the remaining screen area on the right]](/images/placeholder.png)
Panel Layout
Desktop
On desktop screens, the panel appears as a fixed-width sidebar on the left side of the screen, approximately 380 pixels wide. The CesiumJS globe fills the remaining screen area to the right. The panel can be collapsed to give the globe full-screen width, and expanded again when needed.
Mobile
On mobile devices, the panel converts to a bottom sheet with three drag states:
| State | Description |
|---|---|
| Peek | A small handle visible at the bottom of the screen, showing the site name and current tab — the globe is fully visible |
| Half | The panel covers the lower half of the screen, useful for quick interactions while keeping the globe visible above |
| Full | The panel covers the entire screen, useful for reading detailed information or long lists |
Drag the handle up or down to transition between states. Tapping the globe area while the panel is in half or full state collapses it back to peek.
💡 Tip
On mobile, use the peek state while navigating the map, pull up to half when you need to toggle layers or check measurements, and go full-screen when reading survey details or the timeline.
The Five Tabs
The panel contains five tabs, each providing access to a different aspect of the site's data.
Overview
The default tab when you open a site. Shows the site stats (survey count, measurement count, design count), site details (description, location, tags, linked project), and quick action buttons. See Site Detail Page for full details.
Surveys
Lists all surveys associated with the site, ordered by date. From this tab you can:
- View survey details (name, date, status, available outputs)
- Create a new survey
- Open the import or drone processing workflows
- Delete existing surveys
Each survey card shows what data is available — orthophoto, point cloud, DEM — with status indicators. See Creating Surveys for the full workflow.
Layers
Controls what is visible on the CesiumJS globe. The Layers tab is split into sections:
- Base Map — switch between map styles (Street, Outdoor, Satellite)
- Survey Layers — toggle orthophoto overlays and point cloud tilesets, with opacity controls
- Design Surfaces — toggle design surface layers on and off, with colour and opacity controls
See Survey Layers & Overlays and Layer Management for detailed information.
Measurements
Lists all measurements taken on the site. Each entry shows the measurement type, value, date, and associated survey. From this tab you can review measurement results and navigate to specific measurements on the map.
Timeline
A chronological record of activity on the site — surveys uploaded, measurements taken, design surfaces added, and status changes. The timeline provides an audit trail of what happened and when.
Tab Switching and URL Persistence
Switching between tabs updates the URL in the browser address bar. This means:
- You can bookmark or share a direct link to a specific tab
- Using the browser's back button returns you to the previous tab
- Refreshing the page keeps you on the same tab
ℹ️ Did you know?
The URL reflects both the active site and the active tab, so a URL like /sites/abc123?tab=layers takes you directly to the Layers tab for that site.
Collapsing and Resizing
Collapsing the Panel (Desktop)
Click the collapse button (chevron icon) at the top of the panel to hide it entirely. The globe expands to fill the full screen width. Click the expand button (which appears as a floating icon on the left edge) to bring the panel back.
This is useful when you want maximum globe area for visual inspection, point cloud navigation, or taking screenshots.
Resizing the Panel (Mobile)
On mobile, drag the bottom sheet handle between peek, half, and full states as described above. The globe automatically adjusts its viewport as the panel resizes.
Panel and Map Interaction
The panel and the CesiumJS globe work together:
- Layer toggles in the Layers tab immediately show or hide data on the globe
- Fly-to buttons on surveys and design surfaces animate the globe camera to centre on that data
- Measurement entries in the Measurements tab highlight the corresponding measurement geometry on the globe when selected
- Creating a new measurement from the panel activates the measurement tool on the globe, and results appear in the panel when complete
The panel never obscures critical map interactions — on desktop it sits beside the globe, and on mobile it can be collapsed to peek state for full map access.
💡 Tip
When presenting site data to stakeholders, collapse the panel to show the full globe view with survey overlays and design surfaces visible. Then expand the panel to walk through specific measurements or timeline entries.
What's Next?
- Site Detail Page — learn about the Overview tab content in detail
- Survey Layers & Overlays — understand layer controls for survey data
- Layer Management — manage design surface layers in the Layers tab
- Creating Surveys — add survey data via the Surveys tab