Spaces:
Running
Running
| // Configuration - Replace with your API keys or run in demo mode | |
| const CONFIG = { | |
| DEMO_MODE: true, | |
| MAP_TILES_KEY: 'pk.yourmapboxkeyhere', | |
| GEOCODING_KEY: 'yourgeocodingkeyhere', | |
| ROUTING_KEY: 'yourroutingkeyhere', | |
| TRAFFIC_KEY: 'yourtraffickeyhere', | |
| WEATHER_KEY: 'yourweatherapikeyhere', | |
| DEFAULT_MIATA_COLOR: '#EF4444', // Tailwind red-500 | |
| OFFLINE_REGIONS: ['ontario'], // Default offline regions | |
| REROUTE_THRESHOLD: 5, // minutes | |
| ROUTE_PREFERENCES: { | |
| avoidTolls: false, | |
| avoidHighways: false, | |
| avoidFerries: true, | |
| preferScenic: false | |
| } | |
| }; | |
| // Voice Commands System | |
| class VoiceNavigation { | |
| constructor() { | |
| this.commands = { | |
| 'take me home': () => this.navigateTo('home'), | |
| 'add stop for gas': () => this.addStop('gas station'), | |
| 'avoid highways': () => this.setPreference('avoidHighways', true), | |
| 'find coffee': () => this.searchAlongRoute('coffee'), | |
| 'mute guidance': () => this.toggleVoice(false) | |
| }; | |
| } | |
| processCommand(command) { | |
| const handler = this.commands[command.toLowerCase()]; | |
| if (handler) handler(); | |
| } | |
| // Command implementations would go here | |
| // (Actual implementations would interact with routing system) | |
| } | |
| // Demo Map Initialization | |
| function initDemoMap() { | |
| if (CONFIG.DEMO_MODE) { | |
| // Mock map initialization for demo purposes | |
| document.getElementById('map').innerHTML = ` | |
| <div class="absolute inset-0 bg-gray-900 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-semibold mb-2">Miata Nav OS</div> | |
| <div class="text-gray-400">Running in Demo Mode</div> | |
| <div class="mt-4 text-sm text-gray-500">Connect to internet for live maps</div> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| mapboxgl.accessToken = CONFIG.MAP_TILES_KEY; | |
| const map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/dark-v10', | |
| center: [-73.985664, 40.748514], // Default center (NYC) | |
| zoom: 14, | |
| pitch: 45, | |
| antialias: true | |
| }); | |
| // Add Miata navigation marker | |
| const el = document.createElement('div'); | |
| el.className = 'miata-icon'; | |
| el.style.width = '40px'; | |
| el.style.height = '40px'; | |
| el.style.backgroundImage = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><path fill="${encodeURIComponent(CONFIG.DEFAULT_MIATA_COLOR)}" d="M85,25c0,10-35,15-35,15S15,35,15,25s35-15,35-15S85,15,85,25z"/></svg>')`; | |
| el.style.backgroundSize = 'contain'; | |
| el.style.backgroundRepeat = 'no-repeat'; | |
| new mapboxgl.Marker(el) | |
| .setLngLat([-73.985664, 40.748514]) | |
| .addTo(map); | |
| } | |
| } | |
| // Event Listeners Setup | |
| function setupEventListeners() { | |
| // Simulate offline mode toggle for demo | |
| setTimeout(() => { | |
| document.getElementById('offline-indicator').classList.toggle('hidden'); | |
| }, 3000); | |
| // Navigation buttons | |
| document.querySelectorAll('.nav-icon').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.querySelectorAll('.nav-icon').forEach(btn => btn.classList.remove('active')); | |
| button.classList.add('active'); | |
| // In a real app, this would switch between views | |
| }); | |
| }); | |
| } | |
| // Mock API functions for demo mode | |
| function getRouteSuggestions(destination) { | |
| return [ | |
| { id: 1, name: "Fastest", time: "32 min", distance: "15.2 mi", trafficDelay: "3 min", backroadScore: 2 }, | |
| { id: 2, name: "Scenic", time: "38 min", distance: "18.7 mi", trafficDelay: "1 min", backroadScore: 8 }, | |
| { id: 3, name: "Efficient", time: "35 min", distance: "16.5 mi", trafficDelay: "2 min", backroadScore: 5 } | |
| ]; | |
| } |