Vehicle Telemetry Web Component

A React-based web component that displays vehicle telemetry information including a vehicle selector, map location, and telemetry data.

Features

• Vehicle selection via Material-UI combobox
• Google Maps integration showing vehicle location in Santiago, Chile
• Real-time telemetry data display

Installation

1. Clone the repository
2. Install dependencies:

npm install

3. Add your Google Maps API key in src/components/VehicleTelemetryComponent.jsx

Usage in Angular 8 (Lazy Loading)

1. Add CUSTOM_ELEMENTS_SCHEMA to your app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

2. Create a new component for lazy loading:

// telemetry-wrapper.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-telemetry-wrapper',
  template: '<vehicle-telemetry></vehicle-telemetry>'
})
export class TelemetryWrapperComponent implements OnInit {
  async ngOnInit() {
    // Load React and ReactDOM
    await Promise.all([
      import('https://unpkg.com/react@18/umd/react.production.min.js'),
      import('https://unpkg.com/react-dom@18/umd/react-dom.production.min.js')
    ]);
    
    // Load our web component
    await import('@your-scope/vehicle-telemetry-component');
  }
}

3. Set up lazy routing:

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'telemetry',
    loadChildren: () => import('./telemetry/telemetry.module').then(m => m.TelemetryModule)
  }
];

4. Create the feature module:

// telemetry.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TelemetryWrapperComponent } from './telemetry-wrapper.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [TelemetryWrapperComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: TelemetryWrapperComponent
      }
    ])
  ]
})
export class TelemetryModule { }

Development

Run the development server:

npm start

Building the Web Component

Build the web component for production:

npm run build:webcomponent

The built web component will be available in the dist directory.

Usage in Other Projects

1. Copy the built files from the dist directory to your project
2. Include the script in your HTML:

<script src="path/to/vehicle-telemetry.js"></script>

3. Use the web component in your HTML:

<vehicle-telemetry></vehicle-telemetry>

Requirements

• Node.js 14+
• Google Maps API key

Note

Remember to replace YOUR_GOOGLE_MAPS_API_KEY in the component with your actual Google Maps API key before building.