Skip to main content

Notification System

GeoLens has a built-in notification system that surfaces status updates as non-blocking banners. All notifications are also stored persistently in localStorage and accessible via a notification center panel.

When something noteworthy happens (a layer loads, a filter completes, an error occurs), a slide-up banner appears at the bottom-center of the screen.

  • Auto-dismisses after 15 seconds
  • A progress bar animates the countdown
  • Click the × button to dismiss immediately
  • If a second notification fires while one is visible, it queues and shows when the current one exits

Showing a Notification (Developer API)​

showNotification({
  title: 'CO₂ Interpolation Complete',
  description: 'Heatmap generated across 5 sensors.',
  logo: '/images/ucf -1.png',  // optional
  duration: 8000               // optional, default 15000ms
});
OptionTypeDescription
titlestringBold headline text
descriptionstringSecondary detail text
logostring (URL)Optional image shown on the left
durationnumberAuto-dismiss time in milliseconds

Notification Center​

A 🔔 button in the top-right corner of the map opens the notification history panel. It shows a scrollable list of all past notifications with relative timestamps ("2 minutes ago").

  • Unread notifications show a badge with the count
  • Click Clear All to wipe the notification log
  • The panel slides in/out with a CSS animation

Persistence​

Notifications are stored in localStorage under the key cesiumApp_notifications. The log is capped at 100 entries. Older entries are discarded when the cap is reached.

Badge Count​

The badge reflects the number of notifications received since the notification center was last opened. It resets to zero when the panel is opened.

Implementation Notes​

The notification system is entirely self-contained within app.js. It injects its own <style> block into <head> on first run so no external CSS file is required. The banner element (#cesiumNotificationBanner) is created and removed from the DOM dynamically for each notification.