"/home/yossef/notes/git/projects/maplibra/modules/UI Components.md"

path: maplibra/modules/UI Components.md

- **fileName**: UI Components
- **Created on**: 2026-06-16 00:48:42

UI Components

Purpose: User-facing interface elements for search, floor selection, theme switching, and navigation.

Related: ../Home.md, ../Architecture.md, ./Layer Management.md, ./Pathfinding.md, ./Bootstrap System.md

What It Does

The UI layer provides interactive controls overlaid on the map. Most UI elements are rendered in index.html and controlled by JavaScript classes in src/ui/ and src/ui-manager.js.

Search (src/ui/SearchBox.js)

• Search input with suggestions dropdown
• Location search across all floors or filtered to current floor
• Auto-start drop mode on selection (navigate to selected location)
• Floor change on selection when location is on a different floor
• Enrichment of anchor points with floor geometry

Theme Controller (src/ui/ThemeController.js)

• Toggle between light and dark themes
• Persists choice in localStorage
• Dispatches theme-changed custom event
• In Android WebView mode, updates window.__INGUIDE_BASEMAP_STYLE__

Error Toast (src/ui/ErrorToast.js)

• Non-blocking error and warning notifications
• Max 3 concurrent toasts
• Auto-dismiss with duration
• Used by the global ErrorHandler in bootstrap-shell.js

Floor Controls (src/ui-manager.js)

• Native mode: custom dropdown menu matching Android/iOS style
• Browser mode: standard <select> element
• Floor change requests dispatch floor-change-requested event
• Persist selected floor in localStorage
• View indicator shows "Outdoor View" or "Indoor View" based on zoom

Navigation Panel (src/pathfinding/ui-panel.js)

• Route summary (distance, duration, steps)
• Start/cancel navigation buttons
• Live location status
• Close button to clear route

Drop Mode UI (src/pathfinding/drop-ui.js)

• Floating cursor follower for selecting target point
• Drop hint overlay with instructions
• Cancel button to exit drop mode

Settings Menu (index.html + script.js)

• Upload new map
• Clear cached maps
• Download offline data
• Reset view
• Toggle theme

Important Files

• src/ui/SearchBox.js
• src/ui/ThemeController.js
• src/ui/ErrorToast.js
• src/ui-manager.js — Floor controls, zoom listener, view indicator, locate me
• src/pathfinding/ui-panel.js — Navigation route panel
• src/pathfinding/drop-ui.js — Drop mode cursor
• index.html — All UI markup

How It Connects

• SearchBox is created lazily by bootstrapSearch and added to window.InGuide

• ThemeController listens to toggle button and broadcasts theme changes

• UIManager coordinates floor changes with FloorDataManager and LayerManager

• Navigation panel is managed by NavigationController inside PathfindingController

• Settings menu actions are handled in script.js (setupSettingsMenu)

  continue:[[]]
  before:[[]]