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

10
changelog.md
View File

@@ -1,5 +1,15 @@
# Changelog
## 2026-02-05 - 1.2.0 - feat(map)
Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction
- Replace overlay/header layout with a CSS Grid: left and right sidebars (controlled via --left-panel-width/--right-panel-width) that push the map area instead of overlaying it.
- Move navigation panel from map overlay into a left sidebar and add NavigationController viewMode with a new directions view (summary, back button) and planning view separation.
- Add a right-side draw tools panel (draw panel UI, tool grid, actions) with isDrawPanelOpen state and toolbar toggle to show/hide draw tools.
- Add interactivity: clicking a turn-by-turn step flies the map to that step (flyToStep), and directions->planning switching via setViewMode/back button.
- Numerous style additions and adjustments: header toolbar grid area, sidebar/draw panel styling, nav directions styles, z-index tweaks, cursor and hover states.
- Add new arrowLeft icon and reorganize toolbar controls (navigation/draw toggles, traffic, zoom) to accommodate sidebar layout
## 2026-02-05 - 1.1.1 - fix(assets)
remove header toolbar PNG assets (header-toolbar-fixed, header-toolbar-full, header-toolbar-layout, header-toolbar-v3)

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.

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog-geo',
version: '1.1.1',
version: '1.2.0',
description: 'A geospatial web components library with MapLibre GL JS maps and terra-draw drawing tools'
}

271
ts_web/elements/00componentstyles.ts
View File

@@ -652,6 +652,7 @@ export const navigationStyles = css`
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background-color 0.15s ease;
cursor: pointer;
}
.nav-step:last-child {
@@ -732,6 +733,73 @@ export const navigationStyles = css`
font-size: 12px;
}
/* Directions view styles */
.nav-directions-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: var(--geo-text, #fff);
cursor: pointer;
transition: background-color 0.15s ease;
flex-shrink: 0;
}
.nav-back-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.nav-back-btn svg {
width: 18px;
height: 18px;
}
.nav-directions-summary {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
}
.nav-directions-summary svg {
width: 14px;
height: 14px;
color: var(--geo-tool-active, #0084ff);
}
.nav-directions-separator {
color: rgba(255, 255, 255, 0.4);
margin: 0 4px;
}
/* Make steps section taller when it's the main content in directions view */
.nav-directions-view .nav-steps {
max-height: none;
flex: 1;
overflow-y: auto;
}
.nav-directions-view {
display: flex;
flex-direction: column;
}
/* Traffic-aware route info */
.nav-traffic-info {
display: flex;
@@ -801,21 +869,27 @@ export const navigationStyles = css`
* Header toolbar styles for toolbar above map
*/
export const headerToolbarStyles = css`
/* CSS Grid layout for sidebars that push the map */
.geo-component {
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: var(--left-panel-width, 0px) 1fr var(--right-panel-width, 0px);
grid-template-rows: auto 1fr;
grid-template-areas:
"header header header"
"left-panel map-area right-panel";
height: 100%;
width: 100%;
transition: grid-template-columns 0.25s ease;
}
.header-toolbar {
grid-area: header;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
flex-shrink: 0;
min-height: 52px;
position: relative;
z-index: 10;
@@ -824,7 +898,7 @@ export const headerToolbarStyles = css`
.toolbar-left {
display: flex;
align-items: center;
gap: 4px;
gap: 8px;
flex-shrink: 0;
}
@@ -890,11 +964,196 @@ export const headerToolbarStyles = css`
max-width: 300px;
}
/* Map container takes remaining space */
/* Left Sidebar - Navigation Panel */
.left-sidebar {
grid-area: left-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-right: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
}
.left-sidebar.collapsed {
border-right: none;
}
.left-sidebar .navigation-panel {
width: 300px;
min-width: 300px;
border: none;
border-radius: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
height: 100%;
overflow-y: auto;
}
/* Right Sidebar - Draw Panel */
.right-sidebar {
grid-area: right-panel;
background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
border-left: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
}
.right-sidebar.collapsed {
border-left: none;
}
/* Draw Panel Styles */
.draw-panel {
width: 180px;
min-width: 180px;
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
.draw-panel-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.draw-panel-header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--geo-tool-active, #0084ff);
}
.draw-panel-header-icon svg {
width: 18px;
height: 18px;
}
.draw-panel-header-title {
font-size: 13px;
font-weight: 600;
color: var(--geo-text, #fff);
}
.draw-tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 12px;
}
.draw-tool-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: transparent;
color: var(--geo-text, #fff);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.draw-tool-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.2);
}
.draw-tool-button.active {
background: var(--geo-tool-active, #0084ff);
border-color: var(--geo-tool-active, #0084ff);
color: #fff;
}
.draw-tool-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.draw-tool-button svg {
width: 22px;
height: 22px;
}
.draw-tool-button-label {
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.draw-panel-divider {
height: 1px;
margin: 4px 12px;
background: rgba(255, 255, 255, 0.1);
}
.draw-panel-actions {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
.draw-action-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: transparent;
color: var(--geo-text, #fff);
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.draw-action-button:hover {
background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
border-color: rgba(255, 255, 255, 0.2);
}
.draw-action-button.active {
background: var(--geo-tool-active, #0084ff);
border-color: var(--geo-tool-active, #0084ff);
}
.draw-action-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.draw-action-button svg {
width: 16px;
height: 16px;
}
.draw-action-button.danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
}
/* Map container takes grid area */
.geo-component .map-container {
flex: 1;
grid-area: map-area;
position: relative;
min-height: 0;
min-width: 0;
}
`;

136
ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
View File

@@ -141,6 +141,9 @@ export class DeesGeoMap extends DeesElement {
@state()
private accessor isNavigationOpen: boolean = true;
@state()
private accessor isDrawPanelOpen: boolean = true;
// Controllers
private searchController: SearchController | null = null;
private navigationController: NavigationController | null = null;
@@ -836,6 +839,10 @@ export class DeesGeoMap extends DeesElement {
this.isNavigationOpen = !this.isNavigationOpen;
}
private toggleDrawPanel(): void {
this.isDrawPanelOpen = !this.isDrawPanelOpen;
}
// ─── Render ─────────────────────────────────────────────────────────────────
public render(): TemplateResult {
@@ -843,24 +850,31 @@ export class DeesGeoMap extends DeesElement {
const hasTrafficProvider = this.trafficController?.provider?.isConfigured ?? false;
const showTrafficControls = Boolean(hasTrafficProvider || this.trafficApiKey || this.trafficProvider);
// Calculate panel widths for CSS Grid
const leftPanelWidth = this.showNavigation && this.isNavigationOpen ? '300px' : '0px';
const rightPanelWidth = this.showToolbar && this.isDrawPanelOpen ? '180px' : '0px';
return html`
<div class="geo-component">
<div class="geo-component" style="--left-panel-width: ${leftPanelWidth}; --right-panel-width: ${rightPanelWidth};">
<!-- Header Toolbar Above Map -->
${this.renderHeaderToolbar(showTrafficControls)}
<!-- Left Sidebar: Navigation Panel -->
<div class="left-sidebar ${!this.showNavigation || !this.isNavigationOpen ? 'collapsed' : ''}">
${this.showNavigation && this.isNavigationOpen && this.navigationController
? this.navigationController.render()
: ''}
</div>
<!-- Map Container -->
<div class="map-container" @contextmenu=${(e: MouseEvent) => this.handleMapContextMenu(e)}>
<div class="map-wrapper"></div>
<div class="map-overlay">
<!-- Top Left: Navigation Panel (toggleable) -->
<div class="overlay-top-left">
${this.showNavigation && this.isNavigationOpen && this.navigationController
? this.navigationController.render()
: ''}
</div>
<!-- Top Left: Empty (navigation moved to sidebar) -->
<div class="overlay-top-left"></div>
<!-- Top Right: Empty now (controls moved to header) -->
<!-- Top Right: Empty (controls in header) -->
<div class="overlay-top-right"></div>
<!-- Bottom Left: Traffic Legend + Feature Count -->
@@ -873,10 +887,15 @@ export class DeesGeoMap extends DeesElement {
` : ''}
</div>
<!-- Bottom Right: Empty now (zoom moved to header) -->
<!-- Bottom Right: Empty (zoom in header) -->
<div class="overlay-bottom-right"></div>
</div>
</div>
<!-- Right Sidebar: Draw Panel -->
<div class="right-sidebar ${!this.showToolbar || !this.isDrawPanelOpen ? 'collapsed' : ''}">
${this.showToolbar && this.isDrawPanelOpen ? this.renderDrawPanel() : ''}
</div>
</div>
`;
}
@@ -884,11 +903,16 @@ export class DeesGeoMap extends DeesElement {
private renderHeaderToolbar(showTrafficControls: boolean): TemplateResult {
return html`
<div class="header-toolbar">
<!-- Left: Draw Tools -->
<!-- Left: Navigation Panel Toggle -->
<div class="toolbar-left">
${this.showToolbar ? html`
${this.renderDrawTools()}
<div class="toolbar-divider"></div>
${this.showNavigation ? html`
<button
class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
title="Toggle Navigation Panel"
@click=${() => this.toggleNavigation()}
>
${renderIcon('navigation')}
</button>
` : ''}
</div>
@@ -899,15 +923,15 @@ export class DeesGeoMap extends DeesElement {
: ''}
</div>
<!-- Right: Navigation Toggle + Traffic Toggle + Zoom Controls -->
<!-- Right: Draw Panel Toggle + Traffic Toggle + Zoom Controls -->
<div class="toolbar-right">
${this.showNavigation ? html`
${this.showToolbar ? html`
<button
class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
title="Navigation"
@click=${() => this.toggleNavigation()}
class="tool-button ${this.isDrawPanelOpen ? 'active' : ''}"
title="Toggle Draw Tools"
@click=${() => this.toggleDrawPanel()}
>
${renderIcon('navigation')}
${renderIcon('polygon')}
</button>
` : ''}
${showTrafficControls && this.trafficController
@@ -933,7 +957,7 @@ export class DeesGeoMap extends DeesElement {
`;
}
private renderDrawTools(): TemplateResult {
private renderDrawPanel(): TemplateResult {
const tools: { id: TDrawTool; icon: string; label: string }[] = [
{ id: 'point', icon: 'point', label: 'Point' },
{ id: 'linestring', icon: 'line', label: 'Line' },
@@ -944,33 +968,51 @@ export class DeesGeoMap extends DeesElement {
];
return html`
${tools.map(tool => html`
<button
class="tool-button ${this.activeTool === tool.id ? 'active' : ''}"
title="${tool.label}"
@click=${() => this.handleToolClick(tool.id)}
?disabled=${!this.isMapReady}
>
${renderIcon(tool.icon)}
</button>
`)}
<div class="toolbar-divider"></div>
<button
class="tool-button ${this.activeTool === 'select' ? 'active' : ''}"
title="Select & Edit"
@click=${() => this.handleToolClick('select')}
?disabled=${!this.isMapReady}
>
${renderIcon('select')}
</button>
<button
class="tool-button"
title="Clear All"
@click=${this.handleClearClick}
?disabled=${!this.isMapReady}
>
${renderIcon('trash')}
</button>
<div class="draw-panel">
<div class="draw-panel-header">
<div class="draw-panel-header-icon">
${renderIcon('polygon')}
</div>
<div class="draw-panel-header-title">Draw Tools</div>
</div>
<div class="draw-tools-grid">
${tools.map(tool => html`
<button
class="draw-tool-button ${this.activeTool === tool.id ? 'active' : ''}"
title="${tool.label}"
@click=${() => this.handleToolClick(tool.id)}
?disabled=${!this.isMapReady}
>
${renderIcon(tool.icon)}
<span class="draw-tool-button-label">${tool.label}</span>
</button>
`)}
</div>
<div class="draw-panel-divider"></div>
<div class="draw-panel-actions">
<button
class="draw-action-button ${this.activeTool === 'select' ? 'active' : ''}"
title="Select & Edit"
@click=${() => this.handleToolClick('select')}
?disabled=${!this.isMapReady}
>
${renderIcon('select')}
<span>Select & Edit</span>
</button>
<button
class="draw-action-button danger"
title="Clear All"
@click=${this.handleClearClick}
?disabled=${!this.isMapReady}
>
${renderIcon('trash')}
<span>Clear All</span>
</button>
</div>
</div>
`;
}

3
ts_web/elements/00group-map/dees-geo-map/geo-map.icons.ts
View File

@@ -37,6 +37,9 @@ export const GEO_MAP_ICONS: Record<string, TemplateResult> = {
ruler: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3c-1 1-2.5 1-3.4 0l-2.6-2.6c-1-1-1-2.5 0-3.4L15.3 2.7c1-1 2.5-1 3.4 0l2.6 2.6c1 1 1 2.5 0 3.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>`,
error: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>`,
// Arrows
arrowLeft: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>`,
// Traffic
traffic: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="2"/><circle cx="12" cy="7" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="17" r="1.5" fill="currentColor"/></svg>`,
trafficLight: html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5"/><path d="M15 7h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5"/><path d="M12 4v4"/><path d="M12 16v4"/><circle cx="12" cy="12" r="3"/></svg>`,

112
ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
View File

@@ -96,6 +96,9 @@ export class NavigationController {
// Mode
public navigationMode: TNavigationMode = 'driving';
// View mode: 'planning' for route input, 'directions' for turn-by-turn
public viewMode: 'planning' | 'directions' = 'planning';
// Internal
private callbacks: INavigationControllerCallbacks;
private navSearchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
@@ -198,6 +201,9 @@ export class NavigationController {
// Fit map to route bounds
this.fitToRoute(routeToRender);
// Switch to directions view after successful route calculation
this.viewMode = 'directions';
}
} catch (error) {
this.navigationState = {
@@ -272,6 +278,7 @@ export class NavigationController {
this.navStartSearchResults = [];
this.navEndSearchResults = [];
this.navClickMode = null;
this.viewMode = 'planning';
// Remove markers
if (this.startMarker) {
@@ -516,6 +523,20 @@ export class NavigationController {
map.fitBounds(bounds, { padding: 80 });
}
/**
* Fly to a specific navigation step location
*/
public flyToStep(step: IOSRMStep): void {
const map = this.callbacks.getMap();
if (!map) return;
map.flyTo({
center: step.maneuver.location,
zoom: 17,
duration: 1000,
});
}
// ─── Search within Navigation ───────────────────────────────────────────────
/**
@@ -763,6 +784,14 @@ export class NavigationController {
}
}
/**
* Switch between planning and directions view
*/
public setViewMode(mode: 'planning' | 'directions'): void {
this.viewMode = mode;
this.callbacks.onRequestUpdate();
}
// ─── Cleanup ────────────────────────────────────────────────────────────────
/**
@@ -790,7 +819,18 @@ export class NavigationController {
* @param extraClass - Optional CSS class to add to the panel for positioning
*/
public render(extraClass?: string): TemplateResult {
const { route, isLoading, error, startPoint, endPoint } = this.navigationState;
// If we have a route and we're in directions view, show that
if (this.viewMode === 'directions' && this.navigationState.route) {
return this.renderDirectionsView(extraClass);
}
return this.renderPlanningView(extraClass);
}
/**
* Render the route planning view (inputs, mode selector, actions)
*/
private renderPlanningView(extraClass?: string): TemplateResult {
const { isLoading, error, startPoint, endPoint } = this.navigationState;
const canCalculate = startPoint && endPoint && !isLoading;
return html`
@@ -858,35 +898,55 @@ export class NavigationController {
<span>Calculating route...</span>
</div>
` : ''}
</div>
`;
}
${route && !isLoading ? html`
<div class="nav-summary">
<div class="nav-summary-item">
${renderIcon('ruler')}
<span>${this.formatDistance(route.distance)}</span>
</div>
<div class="nav-summary-item">
${renderIcon('clock')}
<span>${this.formatDuration(this.navigationState.trafficRoute?.duration ?? route.duration)}</span>
</div>
/**
* Render the directions view (back button, summary, turn-by-turn steps)
*/
private renderDirectionsView(extraClass?: string): TemplateResult {
const { route, trafficRoute } = this.navigationState;
if (!route) {
// Shouldn't happen, but fallback to planning view
return this.renderPlanningView(extraClass);
}
return html`
<div class="navigation-panel nav-directions-view ${extraClass || ''}">
<div class="nav-directions-header">
<button
class="nav-back-btn"
@click=${() => this.setViewMode('planning')}
title="Back to route planning"
>
${renderIcon('arrowLeft')}
</button>
<div class="nav-directions-summary">
${renderIcon('ruler')}
<span>${this.formatDistance(route.distance)}</span>
<span class="nav-directions-separator">•</span>
${renderIcon('clock')}
<span>${this.formatDuration(trafficRoute?.duration ?? route.duration)}</span>
</div>
</div>
${this.navigationState.trafficRoute ? html`
<div class="nav-traffic-info ${this.navigationState.trafficRoute.congestionLevel}">
<span class="nav-traffic-indicator ${this.navigationState.trafficRoute.congestionLevel}"></span>
<span class="nav-traffic-text">${this.getCongestionLabel(this.navigationState.trafficRoute.congestionLevel)}</span>
${this.navigationState.trafficRoute.duration > this.navigationState.trafficRoute.durationWithoutTraffic ? html`
<span class="nav-traffic-delay">
+${this.formatDuration(this.navigationState.trafficRoute.duration - this.navigationState.trafficRoute.durationWithoutTraffic)} due to traffic
</span>
` : ''}
</div>
` : ''}
<div class="nav-steps">
${this.renderTurnByTurn(route)}
${trafficRoute ? html`
<div class="nav-traffic-info ${trafficRoute.congestionLevel}">
<span class="nav-traffic-indicator ${trafficRoute.congestionLevel}"></span>
<span class="nav-traffic-text">${this.getCongestionLabel(trafficRoute.congestionLevel)}</span>
${trafficRoute.duration > trafficRoute.durationWithoutTraffic ? html`
<span class="nav-traffic-delay">
+${this.formatDuration(trafficRoute.duration - trafficRoute.durationWithoutTraffic)} due to traffic
</span>
` : ''}
</div>
` : ''}
<div class="nav-steps">
${this.renderTurnByTurn(route)}
</div>
</div>
`;
}
@@ -975,7 +1035,7 @@ export class NavigationController {
const distance = this.formatDistance(step.distance);
return html`
<div class="nav-step">
<div class="nav-step" @click=${() => this.flyToStep(step)}>
<div class="nav-step-icon">${icon}</div>
<div class="nav-step-content">
<div class="nav-step-instruction">${instruction}</div>