Getting Started
This guide will help you get started with Route Optimization Map in your project.
What You'll Need
- Node.js 18 or higher
- A Google Maps API key (Get one here)
- Basic knowledge of your chosen framework (React, Vue, or Vanilla JS)
Installation
Choose the package that matches your framework:
bash
# Using npm
npm install @route-optimization/react @route-optimization/core
# Using pnpm
pnpm add @route-optimization/react @route-optimization/core
# Using yarn
yarn add @route-optimization/react @route-optimization/corebash
# Using npm
npm install @route-optimization/vue @route-optimization/core
# Using pnpm
pnpm add @route-optimization/vue @route-optimization/core
# Using yarn
yarn add @route-optimization/vue @route-optimization/corebash
# Using npm
npm install @route-optimization/vanilla
# Using pnpm
pnpm add @route-optimization/vanilla
# Using yarn
yarn add @route-optimization/vanillaQuick Start
React
tsx
import { RouteMapView } from '@route-optimization/react';
import type { Route } from '@route-optimization/core';
function App() {
const route: Route = {
id: 'route-1',
vehicleId: 'vehicle-1',
metadata: {
startTime: new Date().toISOString(),
},
stops: [
{
id: 'depot',
location: { lat: 13.7563, lng: 100.5018 },
type: 'START',
sequence: 0,
},
{
id: 'customer-1',
location: { lat: 13.7467, lng: 100.5342 },
type: 'DELIVERY',
label: 'Customer #1',
sequence: 1,
},
],
totalDistance: 5420,
totalDuration: 900,
};
return (
<div style={{ width: '100%', height: '600px' }}>
<RouteMapView
apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY!}
route={route}
autoFitBounds
/>
</div>
);
}
export default App;Vue
vue
<script setup lang="ts">
import { RouteMapView } from '@route-optimization/vue';
import type { Route } from '@route-optimization/core';
import { ref } from 'vue';
const route = ref<Route>({
id: 'route-1',
vehicleId: 'vehicle-1',
metadata: {
startTime: new Date().toISOString(),
},
stops: [
{
id: 'depot',
location: { lat: 13.7563, lng: 100.5018 },
type: 'START',
sequence: 0,
},
{
id: 'customer-1',
location: { lat: 13.7467, lng: 100.5342 },
type: 'DELIVERY',
label: 'Customer #1',
sequence: 1,
},
],
totalDistance: 5420,
totalDuration: 900,
});
</script>
<template>
<div style="width: 100%; height: 600px">
<RouteMapView
:api-key="import.meta.env.VITE_GOOGLE_MAPS_API_KEY"
:route="route"
auto-fit-bounds
/>
</div>
</template>Vanilla JavaScript
html
<!DOCTYPE html>
<html>
<head>
<title>Route Map Example</title>
<style>
#map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import { RouteMap } from '@route-optimization/vanilla';
const routeMap = new RouteMap({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
container: 'map',
center: { lat: 13.7563, lng: 100.5018 },
zoom: 12,
});
await routeMap.initialize();
const route = {
id: 'route-1',
vehicleId: 'vehicle-1',
metadata: {
startTime: new Date().toISOString(),
},
stops: [
{
id: 'depot',
location: { lat: 13.7563, lng: 100.5018 },
type: 'START',
sequence: 0,
},
{
id: 'customer-1',
location: { lat: 13.7467, lng: 100.5342 },
type: 'DELIVERY',
label: 'Customer #1',
sequence: 1,
},
],
totalDistance: 5420,
totalDuration: 900,
};
routeMap.renderRoute(route);
</script>
</body>
</html>Next Steps
Map Visualization
- Learn about Routes and Stops
- Explore Map Adapters
- Check out Customization
Route Optimization
- Set up Authentication for production use
- Learn about Route Calculation
- Understand Performance optimization
API & Examples
- Explore API Reference
- Check out Examples
- Read Type System documentation
Need Help?
- Check the Troubleshooting Guide
- Visit the GitHub Repository
- Open an issue for bugs or feature requests