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

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>