944 lines
28 KiB
TypeScript
944 lines
28 KiB
TypeScript
import { html, type TemplateResult } from '@design.estate/dees-element';
|
||
import maplibregl from 'maplibre-gl';
|
||
import { renderIcon } from './geo-map.icons.js';
|
||
import { type INominatimResult } from './geo-map.search.js';
|
||
|
||
// ─── Navigation/Routing Types ────────────────────────────────────────────────
|
||
|
||
export type TNavigationMode = 'driving' | 'walking' | 'cycling';
|
||
|
||
export interface IOSRMRoute {
|
||
geometry: GeoJSON.LineString;
|
||
distance: number; // meters
|
||
duration: number; // seconds
|
||
legs: IOSRMLeg[];
|
||
}
|
||
|
||
export interface IOSRMLeg {
|
||
steps: IOSRMStep[];
|
||
distance: number;
|
||
duration: number;
|
||
}
|
||
|
||
export interface IOSRMStep {
|
||
geometry: GeoJSON.LineString;
|
||
maneuver: {
|
||
type: string; // 'turn', 'depart', 'arrive', etc.
|
||
modifier?: string; // 'left', 'right', 'straight', etc.
|
||
location: [number, number];
|
||
};
|
||
name: string; // Street name
|
||
distance: number;
|
||
duration: number;
|
||
driving_side: string;
|
||
}
|
||
|
||
export interface INavigationState {
|
||
startPoint: [number, number] | null;
|
||
endPoint: [number, number] | null;
|
||
startAddress: string;
|
||
endAddress: string;
|
||
route: IOSRMRoute | null;
|
||
isLoading: boolean;
|
||
error: string | null;
|
||
}
|
||
|
||
export interface IRouteCalculatedEvent {
|
||
route: IOSRMRoute;
|
||
startPoint: [number, number];
|
||
endPoint: [number, number];
|
||
mode: TNavigationMode;
|
||
}
|
||
|
||
/**
|
||
* Callbacks for NavigationController events
|
||
*/
|
||
export interface INavigationControllerCallbacks {
|
||
onRouteCalculated: (event: IRouteCalculatedEvent) => void;
|
||
onRequestUpdate: () => void;
|
||
getMap: () => maplibregl.Map | null;
|
||
}
|
||
|
||
/**
|
||
* Controller for A-to-B navigation functionality
|
||
* Handles routing, markers, search inputs, and turn-by-turn directions
|
||
*/
|
||
export class NavigationController {
|
||
// State
|
||
public navigationState: INavigationState = {
|
||
startPoint: null,
|
||
endPoint: null,
|
||
startAddress: '',
|
||
endAddress: '',
|
||
route: null,
|
||
isLoading: false,
|
||
error: null,
|
||
};
|
||
|
||
// Navigation search state
|
||
public navStartSearchQuery: string = '';
|
||
public navEndSearchQuery: string = '';
|
||
public navStartSearchResults: INominatimResult[] = [];
|
||
public navEndSearchResults: INominatimResult[] = [];
|
||
public navActiveInput: 'start' | 'end' | null = null;
|
||
public navClickMode: 'start' | 'end' | null = null;
|
||
public navHighlightedIndex: number = -1;
|
||
|
||
// Mode
|
||
public navigationMode: TNavigationMode = 'driving';
|
||
|
||
// Internal
|
||
private callbacks: INavigationControllerCallbacks;
|
||
private navSearchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
|
||
private startMarker: maplibregl.Marker | null = null;
|
||
private endMarker: maplibregl.Marker | null = null;
|
||
|
||
constructor(callbacks: INavigationControllerCallbacks) {
|
||
this.callbacks = callbacks;
|
||
}
|
||
|
||
// ─── Routing ────────────────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Fetch a route from OSRM API
|
||
*/
|
||
public async fetchRoute(
|
||
start: [number, number],
|
||
end: [number, number],
|
||
mode: TNavigationMode
|
||
): Promise<IOSRMRoute | null> {
|
||
const profile = mode === 'cycling' ? 'bike' : mode === 'walking' ? 'foot' : 'car';
|
||
const coords = `${start[0]},${start[1]};${end[0]},${end[1]}`;
|
||
const url = `https://router.project-osrm.org/route/v1/${profile}/${coords}?geometries=geojson&steps=true&overview=full`;
|
||
|
||
try {
|
||
const response = await fetch(url);
|
||
if (!response.ok) {
|
||
throw new Error(`OSRM API error: ${response.status}`);
|
||
}
|
||
const data = await response.json();
|
||
|
||
if (data.code !== 'Ok' || !data.routes || data.routes.length === 0) {
|
||
throw new Error(data.message || 'No route found');
|
||
}
|
||
|
||
const route = data.routes[0];
|
||
return {
|
||
geometry: route.geometry,
|
||
distance: route.distance,
|
||
duration: route.duration,
|
||
legs: route.legs,
|
||
};
|
||
} catch (error) {
|
||
console.error('Route fetch error:', error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Calculate and display route
|
||
*/
|
||
public async calculateRoute(): Promise<void> {
|
||
const { startPoint, endPoint } = this.navigationState;
|
||
|
||
if (!startPoint || !endPoint) {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
error: 'Please set both start and end points',
|
||
};
|
||
this.callbacks.onRequestUpdate();
|
||
return;
|
||
}
|
||
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
isLoading: true,
|
||
error: null,
|
||
};
|
||
this.callbacks.onRequestUpdate();
|
||
|
||
try {
|
||
const route = await this.fetchRoute(startPoint, endPoint, this.navigationMode);
|
||
|
||
if (route) {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
route,
|
||
isLoading: false,
|
||
};
|
||
|
||
this.renderRouteOnMap(route);
|
||
|
||
// Dispatch route-calculated event
|
||
this.callbacks.onRouteCalculated({
|
||
route,
|
||
startPoint,
|
||
endPoint,
|
||
mode: this.navigationMode,
|
||
});
|
||
|
||
// Fit map to route bounds
|
||
this.fitToRoute(route);
|
||
}
|
||
} catch (error) {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
isLoading: false,
|
||
error: error instanceof Error ? error.message : 'Failed to calculate route',
|
||
};
|
||
}
|
||
this.callbacks.onRequestUpdate();
|
||
}
|
||
|
||
// ─── Point Management ───────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Set navigation start point
|
||
*/
|
||
public setNavigationStart(coords: [number, number], address?: string): void {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
startPoint: coords,
|
||
startAddress: address || `${coords[1].toFixed(5)}, ${coords[0].toFixed(5)}`,
|
||
error: null,
|
||
};
|
||
this.navStartSearchQuery = this.navigationState.startAddress;
|
||
this.navStartSearchResults = [];
|
||
this.updateNavigationMarkers();
|
||
this.callbacks.onRequestUpdate();
|
||
|
||
// Auto-calculate if both points are set
|
||
if (this.navigationState.endPoint) {
|
||
this.calculateRoute();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Set navigation end point
|
||
*/
|
||
public setNavigationEnd(coords: [number, number], address?: string): void {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
endPoint: coords,
|
||
endAddress: address || `${coords[1].toFixed(5)}, ${coords[0].toFixed(5)}`,
|
||
error: null,
|
||
};
|
||
this.navEndSearchQuery = this.navigationState.endAddress;
|
||
this.navEndSearchResults = [];
|
||
this.updateNavigationMarkers();
|
||
this.callbacks.onRequestUpdate();
|
||
|
||
// Auto-calculate if both points are set
|
||
if (this.navigationState.startPoint) {
|
||
this.calculateRoute();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Clear all navigation state
|
||
*/
|
||
public clearNavigation(): void {
|
||
this.navigationState = {
|
||
startPoint: null,
|
||
endPoint: null,
|
||
startAddress: '',
|
||
endAddress: '',
|
||
route: null,
|
||
isLoading: false,
|
||
error: null,
|
||
};
|
||
this.navStartSearchQuery = '';
|
||
this.navEndSearchQuery = '';
|
||
this.navStartSearchResults = [];
|
||
this.navEndSearchResults = [];
|
||
this.navClickMode = null;
|
||
|
||
// Remove markers
|
||
if (this.startMarker) {
|
||
this.startMarker.remove();
|
||
this.startMarker = null;
|
||
}
|
||
if (this.endMarker) {
|
||
this.endMarker.remove();
|
||
this.endMarker = null;
|
||
}
|
||
|
||
// Remove route layer and source
|
||
const map = this.callbacks.getMap();
|
||
if (map) {
|
||
if (map.getLayer('route-layer')) {
|
||
map.removeLayer('route-layer');
|
||
}
|
||
if (map.getLayer('route-outline-layer')) {
|
||
map.removeLayer('route-outline-layer');
|
||
}
|
||
if (map.getSource('route-source')) {
|
||
map.removeSource('route-source');
|
||
}
|
||
}
|
||
this.callbacks.onRequestUpdate();
|
||
}
|
||
|
||
/**
|
||
* Clear a specific navigation point
|
||
*/
|
||
public clearNavPoint(pointType: 'start' | 'end'): void {
|
||
if (pointType === 'start') {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
startPoint: null,
|
||
startAddress: '',
|
||
route: null,
|
||
};
|
||
this.navStartSearchQuery = '';
|
||
if (this.startMarker) {
|
||
this.startMarker.remove();
|
||
this.startMarker = null;
|
||
}
|
||
} else {
|
||
this.navigationState = {
|
||
...this.navigationState,
|
||
endPoint: null,
|
||
endAddress: '',
|
||
route: null,
|
||
};
|
||
this.navEndSearchQuery = '';
|
||
if (this.endMarker) {
|
||
this.endMarker.remove();
|
||
this.endMarker = null;
|
||
}
|
||
}
|
||
|
||
// Remove route display
|
||
const map = this.callbacks.getMap();
|
||
if (map) {
|
||
if (map.getLayer('route-layer')) {
|
||
map.removeLayer('route-layer');
|
||
}
|
||
if (map.getLayer('route-outline-layer')) {
|
||
map.removeLayer('route-outline-layer');
|
||
}
|
||
if (map.getSource('route-source')) {
|
||
map.removeSource('route-source');
|
||
}
|
||
}
|
||
this.callbacks.onRequestUpdate();
|
||
}
|
||
|
||
// ─── Map Interaction ────────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Handle map click for navigation point selection
|
||
*/
|
||
public handleMapClickForNavigation(e: maplibregl.MapMouseEvent): void {
|
||
if (!this.navClickMode) return;
|
||
|
||
const coords: [number, number] = [e.lngLat.lng, e.lngLat.lat];
|
||
|
||
if (this.navClickMode === 'start') {
|
||
this.setNavigationStart(coords);
|
||
} else if (this.navClickMode === 'end') {
|
||
this.setNavigationEnd(coords);
|
||
}
|
||
|
||
// Exit click mode
|
||
this.navClickMode = null;
|
||
|
||
// Re-enable map interactions
|
||
const map = this.callbacks.getMap();
|
||
if (map) {
|
||
map.getCanvas().style.cursor = '';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Toggle map click mode for setting navigation points
|
||
*/
|
||
public toggleNavClickMode(mode: 'start' | 'end'): void {
|
||
const map = this.callbacks.getMap();
|
||
|
||
if (this.navClickMode === mode) {
|
||
// Cancel click mode
|
||
this.navClickMode = null;
|
||
if (map) {
|
||
map.getCanvas().style.cursor = '';
|
||
}
|
||
} else {
|
||
this.navClickMode = mode;
|
||
if (map) {
|
||
map.getCanvas().style.cursor = 'crosshair';
|
||
}
|
||
}
|
||
this.callbacks.onRequestUpdate();
|
||
}
|
||
|
||
/**
|
||
* Update navigation markers on the map
|
||
*/
|
||
public updateNavigationMarkers(): void {
|
||
const map = this.callbacks.getMap();
|
||
if (!map) return;
|
||
|
||
// Update start marker
|
||
if (this.navigationState.startPoint) {
|
||
if (!this.startMarker) {
|
||
const el = document.createElement('div');
|
||
el.className = 'nav-marker nav-marker-start';
|
||
el.innerHTML = `<svg viewBox="0 0 24 24" fill="#22c55e" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>`;
|
||
el.style.cssText = 'width: 24px; height: 24px; cursor: pointer;';
|
||
this.startMarker = new maplibregl.Marker({ element: el, anchor: 'center' })
|
||
.setLngLat(this.navigationState.startPoint)
|
||
.addTo(map);
|
||
} else {
|
||
this.startMarker.setLngLat(this.navigationState.startPoint);
|
||
}
|
||
} else if (this.startMarker) {
|
||
this.startMarker.remove();
|
||
this.startMarker = null;
|
||
}
|
||
|
||
// Update end marker
|
||
if (this.navigationState.endPoint) {
|
||
if (!this.endMarker) {
|
||
const el = document.createElement('div');
|
||
el.className = 'nav-marker nav-marker-end';
|
||
el.innerHTML = `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>`;
|
||
el.style.cssText = 'width: 24px; height: 24px; cursor: pointer;';
|
||
this.endMarker = new maplibregl.Marker({ element: el, anchor: 'center' })
|
||
.setLngLat(this.navigationState.endPoint)
|
||
.addTo(map);
|
||
} else {
|
||
this.endMarker.setLngLat(this.navigationState.endPoint);
|
||
}
|
||
} else if (this.endMarker) {
|
||
this.endMarker.remove();
|
||
this.endMarker = null;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Render route on the map
|
||
*/
|
||
public renderRouteOnMap(route: IOSRMRoute): void {
|
||
const map = this.callbacks.getMap();
|
||
if (!map) return;
|
||
|
||
const sourceId = 'route-source';
|
||
const layerId = 'route-layer';
|
||
const outlineLayerId = 'route-outline-layer';
|
||
|
||
// Remove existing layers/source
|
||
if (map.getLayer(layerId)) {
|
||
map.removeLayer(layerId);
|
||
}
|
||
if (map.getLayer(outlineLayerId)) {
|
||
map.removeLayer(outlineLayerId);
|
||
}
|
||
if (map.getSource(sourceId)) {
|
||
map.removeSource(sourceId);
|
||
}
|
||
|
||
// Add route source
|
||
map.addSource(sourceId, {
|
||
type: 'geojson',
|
||
data: {
|
||
type: 'Feature',
|
||
properties: {},
|
||
geometry: route.geometry,
|
||
},
|
||
});
|
||
|
||
// Add outline layer (for border effect)
|
||
map.addLayer({
|
||
id: outlineLayerId,
|
||
type: 'line',
|
||
source: sourceId,
|
||
layout: {
|
||
'line-join': 'round',
|
||
'line-cap': 'round',
|
||
},
|
||
paint: {
|
||
'line-color': '#1e40af',
|
||
'line-width': 8,
|
||
'line-opacity': 0.8,
|
||
},
|
||
});
|
||
|
||
// Add main route layer
|
||
map.addLayer({
|
||
id: layerId,
|
||
type: 'line',
|
||
source: sourceId,
|
||
layout: {
|
||
'line-join': 'round',
|
||
'line-cap': 'round',
|
||
},
|
||
paint: {
|
||
'line-color': '#3b82f6',
|
||
'line-width': 5,
|
||
'line-opacity': 1,
|
||
},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Fit map to show the entire route
|
||
*/
|
||
public fitToRoute(route: IOSRMRoute): void {
|
||
const map = this.callbacks.getMap();
|
||
if (!map || !route.geometry.coordinates.length) return;
|
||
|
||
const bounds = new maplibregl.LngLatBounds();
|
||
for (const coord of route.geometry.coordinates) {
|
||
bounds.extend(coord as [number, number]);
|
||
}
|
||
|
||
map.fitBounds(bounds, { padding: 80 });
|
||
}
|
||
|
||
// ─── Search within Navigation ───────────────────────────────────────────────
|
||
|
||
/**
|
||
* Search Nominatim API for addresses
|
||
*/
|
||
private async searchNominatim(query: string): Promise<INominatimResult[]> {
|
||
if (query.length < 3) return [];
|
||
|
||
const params = new URLSearchParams({
|
||
q: query,
|
||
format: 'json',
|
||
limit: '5',
|
||
addressdetails: '1',
|
||
});
|
||
|
||
const response = await fetch(`https://nominatim.openstreetmap.org/search?${params}`, {
|
||
headers: {
|
||
'User-Agent': 'dees-geo-map/1.0',
|
||
},
|
||
});
|
||
|
||
if (!response.ok) return [];
|
||
return response.json();
|
||
}
|
||
|
||
/**
|
||
* Handle navigation input search
|
||
*/
|
||
public handleNavSearchInput(event: Event, inputType: 'start' | 'end'): void {
|
||
const input = event.target as HTMLInputElement;
|
||
const query = input.value;
|
||
|
||
if (inputType === 'start') {
|
||
this.navStartSearchQuery = query;
|
||
} else {
|
||
this.navEndSearchQuery = query;
|
||
}
|
||
|
||
this.navActiveInput = inputType;
|
||
this.navHighlightedIndex = -1;
|
||
|
||
// Clear previous debounce
|
||
if (this.navSearchDebounceTimer) {
|
||
clearTimeout(this.navSearchDebounceTimer);
|
||
}
|
||
|
||
if (query.length < 3) {
|
||
if (inputType === 'start') {
|
||
this.navStartSearchResults = [];
|
||
} else {
|
||
this.navEndSearchResults = [];
|
||
}
|
||
this.callbacks.onRequestUpdate();
|
||
return;
|
||
}
|
||
|
||
// Debounce API calls
|
||
this.navSearchDebounceTimer = setTimeout(async () => {
|
||
const results = await this.searchNominatim(query);
|
||
if (inputType === 'start') {
|
||
this.navStartSearchResults = results;
|
||
} else {
|
||
this.navEndSearchResults = results;
|
||
}
|
||
this.callbacks.onRequestUpdate();
|
||
}, 500);
|
||
}
|
||
|
||
/**
|
||
* Handle navigation search result selection
|
||
*/
|
||
public selectNavSearchResult(result: INominatimResult, inputType: 'start' | 'end'): void {
|
||
const lng = parseFloat(result.lon);
|
||
const lat = parseFloat(result.lat);
|
||
const coords: [number, number] = [lng, lat];
|
||
const address = result.display_name;
|
||
|
||
if (inputType === 'start') {
|
||
this.setNavigationStart(coords, address);
|
||
this.navStartSearchResults = [];
|
||
} else {
|
||
this.setNavigationEnd(coords, address);
|
||
this.navEndSearchResults = [];
|
||
}
|
||
|
||
this.navActiveInput = null;
|
||
}
|
||
|
||
/**
|
||
* Handle keyboard navigation in search results
|
||
*/
|
||
public handleNavSearchKeydown(event: KeyboardEvent, inputType: 'start' | 'end'): void {
|
||
const results = inputType === 'start' ? this.navStartSearchResults : this.navEndSearchResults;
|
||
|
||
if (results.length === 0) return;
|
||
|
||
switch (event.key) {
|
||
case 'ArrowDown':
|
||
event.preventDefault();
|
||
this.navHighlightedIndex = Math.min(this.navHighlightedIndex + 1, results.length - 1);
|
||
this.callbacks.onRequestUpdate();
|
||
break;
|
||
case 'ArrowUp':
|
||
event.preventDefault();
|
||
this.navHighlightedIndex = Math.max(this.navHighlightedIndex - 1, -1);
|
||
this.callbacks.onRequestUpdate();
|
||
break;
|
||
case 'Enter':
|
||
event.preventDefault();
|
||
if (this.navHighlightedIndex >= 0 && results[this.navHighlightedIndex]) {
|
||
this.selectNavSearchResult(results[this.navHighlightedIndex], inputType);
|
||
}
|
||
break;
|
||
case 'Escape':
|
||
event.preventDefault();
|
||
if (inputType === 'start') {
|
||
this.navStartSearchResults = [];
|
||
} else {
|
||
this.navEndSearchResults = [];
|
||
}
|
||
this.navActiveInput = null;
|
||
this.callbacks.onRequestUpdate();
|
||
break;
|
||
}
|
||
}
|
||
|
||
// ─── Formatting Utilities ───────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Format distance for display
|
||
*/
|
||
public formatDistance(meters: number): string {
|
||
if (meters < 1000) {
|
||
return `${Math.round(meters)} m`;
|
||
}
|
||
return `${(meters / 1000).toFixed(1)} km`;
|
||
}
|
||
|
||
/**
|
||
* Format duration for display
|
||
*/
|
||
public formatDuration(seconds: number): string {
|
||
if (seconds < 60) {
|
||
return `${Math.round(seconds)} sec`;
|
||
}
|
||
if (seconds < 3600) {
|
||
return `${Math.round(seconds / 60)} min`;
|
||
}
|
||
const hours = Math.floor(seconds / 3600);
|
||
const mins = Math.round((seconds % 3600) / 60);
|
||
return mins > 0 ? `${hours} hr ${mins} min` : `${hours} hr`;
|
||
}
|
||
|
||
/**
|
||
* Get maneuver icon for turn type
|
||
*/
|
||
public getManeuverIcon(type: string, modifier?: string): string {
|
||
const icons: Record<string, string> = {
|
||
'depart': '⬆️',
|
||
'arrive': '🏁',
|
||
'turn-left': '↰',
|
||
'turn-right': '↱',
|
||
'turn-slight left': '↖',
|
||
'turn-slight right': '↗',
|
||
'turn-sharp left': '⬅',
|
||
'turn-sharp right': '➡',
|
||
'continue-straight': '⬆️',
|
||
'continue': '⬆️',
|
||
'roundabout': '🔄',
|
||
'rotary': '🔄',
|
||
'merge': '⤵️',
|
||
'fork-left': '↖',
|
||
'fork-right': '↗',
|
||
'end of road-left': '↰',
|
||
'end of road-right': '↱',
|
||
'new name': '⬆️',
|
||
'notification': 'ℹ️',
|
||
};
|
||
|
||
const key = modifier ? `${type}-${modifier}` : type;
|
||
return icons[key] || icons[type] || '➡';
|
||
}
|
||
|
||
/**
|
||
* Format step instruction for display
|
||
*/
|
||
public formatStepInstruction(step: IOSRMStep): string {
|
||
const { type, modifier } = step.maneuver;
|
||
const name = step.name || 'unnamed road';
|
||
|
||
switch (type) {
|
||
case 'depart':
|
||
return `Head ${modifier || 'forward'} on ${name}`;
|
||
case 'arrive':
|
||
return modifier === 'left'
|
||
? `Arrive at your destination on the left`
|
||
: modifier === 'right'
|
||
? `Arrive at your destination on the right`
|
||
: `Arrive at your destination`;
|
||
case 'turn':
|
||
return `Turn ${modifier || ''} onto ${name}`;
|
||
case 'continue':
|
||
return `Continue on ${name}`;
|
||
case 'merge':
|
||
return `Merge ${modifier || ''} onto ${name}`;
|
||
case 'fork':
|
||
return `Take the ${modifier || ''} fork onto ${name}`;
|
||
case 'roundabout':
|
||
case 'rotary':
|
||
return `At the roundabout, take the exit onto ${name}`;
|
||
case 'end of road':
|
||
return `At the end of the road, turn ${modifier || ''} onto ${name}`;
|
||
case 'new name':
|
||
return `Continue onto ${name}`;
|
||
default:
|
||
return `${type} ${modifier || ''} on ${name}`.trim();
|
||
}
|
||
}
|
||
|
||
// ─── Mode ───────────────────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Change navigation mode and recalculate route if exists
|
||
*/
|
||
public setNavigationMode(mode: TNavigationMode): void {
|
||
this.navigationMode = mode;
|
||
this.callbacks.onRequestUpdate();
|
||
|
||
// Recalculate route if we have both points
|
||
if (this.navigationState.startPoint && this.navigationState.endPoint) {
|
||
this.calculateRoute();
|
||
}
|
||
}
|
||
|
||
// ─── Cleanup ────────────────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Clean up markers and resources
|
||
*/
|
||
public cleanup(): void {
|
||
if (this.startMarker) {
|
||
this.startMarker.remove();
|
||
this.startMarker = null;
|
||
}
|
||
if (this.endMarker) {
|
||
this.endMarker.remove();
|
||
this.endMarker = null;
|
||
}
|
||
if (this.navSearchDebounceTimer) {
|
||
clearTimeout(this.navSearchDebounceTimer);
|
||
this.navSearchDebounceTimer = null;
|
||
}
|
||
}
|
||
|
||
// ─── Rendering ──────────────────────────────────────────────────────────────
|
||
|
||
/**
|
||
* Render the navigation panel
|
||
*/
|
||
public render(): TemplateResult {
|
||
const { route, isLoading, error, startPoint, endPoint } = this.navigationState;
|
||
const canCalculate = startPoint && endPoint && !isLoading;
|
||
|
||
return html`
|
||
<div class="navigation-panel">
|
||
<div class="nav-header">
|
||
<div class="nav-header-icon">${renderIcon('navigation')}</div>
|
||
<span class="nav-header-title">Navigation</span>
|
||
</div>
|
||
|
||
<div class="nav-mode-selector">
|
||
<button
|
||
class="nav-mode-btn ${this.navigationMode === 'driving' ? 'active' : ''}"
|
||
@click=${() => this.setNavigationMode('driving')}
|
||
title="Driving"
|
||
>
|
||
${renderIcon('car')}
|
||
</button>
|
||
<button
|
||
class="nav-mode-btn ${this.navigationMode === 'walking' ? 'active' : ''}"
|
||
@click=${() => this.setNavigationMode('walking')}
|
||
title="Walking"
|
||
>
|
||
${renderIcon('walk')}
|
||
</button>
|
||
<button
|
||
class="nav-mode-btn ${this.navigationMode === 'cycling' ? 'active' : ''}"
|
||
@click=${() => this.setNavigationMode('cycling')}
|
||
title="Cycling"
|
||
>
|
||
${renderIcon('bike')}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="nav-inputs">
|
||
${this.renderNavInput('start', 'Start point', this.navStartSearchQuery, this.navStartSearchResults)}
|
||
${this.renderNavInput('end', 'End point', this.navEndSearchQuery, this.navEndSearchResults)}
|
||
</div>
|
||
|
||
<div class="nav-actions">
|
||
<button
|
||
class="nav-action-btn primary"
|
||
?disabled=${!canCalculate}
|
||
@click=${() => this.calculateRoute()}
|
||
>
|
||
Get Route
|
||
</button>
|
||
<button
|
||
class="nav-action-btn secondary"
|
||
@click=${() => this.clearNavigation()}
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
|
||
${error ? html`
|
||
<div class="nav-error">
|
||
${renderIcon('error')}
|
||
<span>${error}</span>
|
||
</div>
|
||
` : ''}
|
||
|
||
${isLoading ? html`
|
||
<div class="nav-loading">
|
||
${renderIcon('spinner')}
|
||
<span>Calculating route...</span>
|
||
</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(route.duration)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-steps">
|
||
${this.renderTurnByTurn(route)}
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* Render a navigation input field
|
||
*/
|
||
private renderNavInput(
|
||
inputType: 'start' | 'end',
|
||
placeholder: string,
|
||
query: string,
|
||
results: INominatimResult[]
|
||
): TemplateResult {
|
||
const hasValue = inputType === 'start'
|
||
? this.navigationState.startPoint !== null
|
||
: this.navigationState.endPoint !== null;
|
||
const isClickMode = this.navClickMode === inputType;
|
||
|
||
return html`
|
||
<div class="nav-input-group">
|
||
<div class="nav-input-marker ${inputType}"></div>
|
||
<div class="nav-input-wrapper">
|
||
<input
|
||
type="text"
|
||
class="nav-input ${hasValue ? 'has-value' : ''}"
|
||
placeholder="${placeholder}"
|
||
.value=${query}
|
||
@input=${(e: Event) => this.handleNavSearchInput(e, inputType)}
|
||
@keydown=${(e: KeyboardEvent) => this.handleNavSearchKeydown(e, inputType)}
|
||
@focus=${() => { this.navActiveInput = inputType; this.callbacks.onRequestUpdate(); }}
|
||
/>
|
||
${hasValue ? html`
|
||
<button
|
||
class="nav-input-clear"
|
||
@click=${() => this.clearNavPoint(inputType)}
|
||
title="Clear"
|
||
>
|
||
${renderIcon('close')}
|
||
</button>
|
||
` : ''}
|
||
<button
|
||
class="nav-set-map-btn ${isClickMode ? 'active' : ''}"
|
||
@click=${() => this.toggleNavClickMode(inputType)}
|
||
title="Click on map"
|
||
>
|
||
${renderIcon('mapPin')}
|
||
</button>
|
||
|
||
${results.length > 0 && this.navActiveInput === inputType ? html`
|
||
<div class="nav-search-results">
|
||
${results.map((result, index) => html`
|
||
<div
|
||
class="nav-search-result ${index === this.navHighlightedIndex ? 'highlighted' : ''}"
|
||
@click=${() => this.selectNavSearchResult(result, inputType)}
|
||
@mouseenter=${() => { this.navHighlightedIndex = index; this.callbacks.onRequestUpdate(); }}
|
||
>
|
||
<span class="nav-search-result-name">${result.display_name}</span>
|
||
<span class="nav-search-result-type">${result.type}</span>
|
||
</div>
|
||
`)}
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
/**
|
||
* Render turn-by-turn directions
|
||
*/
|
||
private renderTurnByTurn(route: IOSRMRoute): TemplateResult {
|
||
if (!route.legs || route.legs.length === 0) {
|
||
return html`<div class="nav-empty-steps">No turn-by-turn directions available</div>`;
|
||
}
|
||
|
||
const steps = route.legs.flatMap(leg => leg.steps);
|
||
|
||
if (steps.length === 0) {
|
||
return html`<div class="nav-empty-steps">No turn-by-turn directions available</div>`;
|
||
}
|
||
|
||
return html`
|
||
${steps.map(step => {
|
||
const icon = this.getManeuverIcon(step.maneuver.type, step.maneuver.modifier);
|
||
const instruction = this.formatStepInstruction(step);
|
||
const distance = this.formatDistance(step.distance);
|
||
|
||
return html`
|
||
<div class="nav-step">
|
||
<div class="nav-step-icon">${icon}</div>
|
||
<div class="nav-step-content">
|
||
<div class="nav-step-instruction">${instruction}</div>
|
||
<div class="nav-step-distance">${distance}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
})}
|
||
`;
|
||
}
|
||
}
|