design.estate/dees-catalog-geo
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(map): Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-05 15:49:07 +00:00
parent 32bec849ee
commit f215133997
7 changed files with 492 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
readme.hints.md
View File

@@ -82,6 +82,7 @@ The navigation panel (`showNavigation={true}`) provides A-to-B routing using OSR
- **Transport modes**: Driving, Walking, Cycling
- **Point selection**: Type an address or click on the map
- **Route display**: Blue line overlay with turn-by-turn directions
- **Click on step**: Click any turn-by-turn step to fly/pan the map to that location
- **API**: Uses free OSRM API (https://router.project-osrm.org) with fair-use rate limit
- **Traffic-aware routing**: When a traffic provider is configured, shows duration with/without traffic
@@ -209,34 +210,55 @@ const nav = new NavigationController({
### UI Layout
The component uses a header toolbar above the map for a cleaner layout:
The component uses a CSS Grid layout with sidebars that **push** the map (not overlay):
```
┌──────────────────────────────────────────────────────────────────────┐
│ HEADER TOOLBAR │
│ [Draw Tools] | [Search Bar] | [Nav Toggle] [Traffic] [Zoom +/-] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ [Navigation] MAP │
│ (toggleable) │
│ │
│ [Traffic Legend] [Feature Count] │
└──────────────────────────────────────────────────────────────────────┘
│ [Nav Toggle] | [Search Bar] | [Draw Toggle] [Traffic] [+/-] │
├───────────────┬──────────────────────────────┬───────────────────────┤
│ LEFT SIDEBAR │ MAP │ RIGHT SIDEBAR │
│ (Navigation) │ │ (Draw Tools) │
│ │ │ │
│ - Mode select │ │ [Point] [Line] │
│ - Start input │ │ [Polygon][Rect] │
│ - End input │ │ [Circle] [Free] │
│ - Route steps │ │ ───────────────── │
│ │ [Traffic Legend] │ [Select & Edit] │
│ │ [Feature Count] │ [Clear All] │
└───────────────┴──────────────────────────────┴───────────────────────┘
```
**Header Toolbar Sections:**
- **Left**: Draw tools (Point, Line, Polygon, Rectangle, Circle, Freehand, Select, Clear)
- **Center**: Search bar (expandable width)
- **Right**: Navigation toggle, Traffic toggle, Zoom in/out buttons
**CSS Grid Layout:**
- Grid columns: `var(--left-panel-width) 1fr var(--right-panel-width)`
- Grid rows: `auto 1fr` (header + content)
- Sidebars push the map area, not overlay it
**Map Overlays:**
- Navigation panel: Toggleable overlay on top-left of map
**Header Toolbar Sections:**
- **Left**: Navigation panel toggle button
- **Center**: Search bar (expandable width)
- **Right**: Draw panel toggle, Traffic toggle, Zoom in/out buttons
**Left Sidebar (300px when open):**
- Contains NavigationController render output
- Slides in/out with 0.25s ease transition
- Default open when `showNavigation={true}`
**Right Sidebar (180px when open):**
- Draw tools panel with 2-column grid layout
- Tool buttons with icons AND labels
- Select & Edit and Clear All actions
- Slides in/out with 0.25s ease transition
- Default open when `showToolbar={true}`
**Map Overlays (remaining):**
- Traffic legend: Bottom-left overlay (when traffic enabled)
- Feature count: Bottom-left overlay (when features exist)
**Z-index hierarchy:**
- `z-index: 20` - Dropdowns (search results, nav search results)
- `z-index: 5` - Map overlays (navigation panel, traffic legend, feature count)
- `z-index: 10` - Header toolbar
- `z-index: 5` - Map overlays (traffic legend, feature count)
### Shadow DOM & Terra-Draw Drawing Fix
Terra-draw's event listeners normally intercept map events through MapLibre's canvas element. In Shadow DOM contexts, these events are scoped locally and don't propagate correctly, causing terra-draw handlers to fail while MapLibre's drag handlers continue working.