Build beautiful route optimization interfaces for React, Vue, and Vanilla JavaScript
npm install @route-optimization/react @route-optimization/corepnpm add @route-optimization/react @route-optimization/coreyarn add @route-optimization/react @route-optimization/coreimport { RouteMapView } from '@route-optimization/react';
function App() {
const route = {
id: 'route-1',
vehicleId: 'vehicle-1',
stops: [
{
id: 'start',
location: { lat: 13.7563, lng: 100.5018 },
type: 'START',
sequence: 0,
},
{
id: 'delivery',
location: { lat: 13.7467, lng: 100.5342 },
type: 'DELIVERY',
sequence: 1,
},
],
};
return <RouteMapView apiKey="YOUR_GOOGLE_MAPS_API_KEY" route={route} autoFitBounds />;
}<script setup>
import { RouteMapView } from '@route-optimization/vue';
import { ref } from 'vue';
const route = ref({
id: 'route-1',
vehicleId: 'vehicle-1',
stops: [
{
id: 'start',
location: { lat: 13.7563, lng: 100.5018 },
type: 'START',
sequence: 0,
},
{
id: 'delivery',
location: { lat: 13.7467, lng: 100.5342 },
type: 'DELIVERY',
sequence: 1,
},
],
});
</script>
<template>
<RouteMapView api-key="YOUR_GOOGLE_MAPS_API_KEY" :route="route" auto-fit-bounds />
</template>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',
stops: [
{
id: 'start',
location: { lat: 13.7563, lng: 100.5018 },
type: 'START',
sequence: 0,
},
{
id: 'delivery',
location: { lat: 13.7467, lng: 100.5342 },
type: 'DELIVERY',
sequence: 1,
},
],
};
routeMap.renderRoute(route);| Package | Version | Bundle Size | Description |
|---|---|---|---|
| @route-optimization/core | 0.1.0 | ~13KB | Core types and adapters |
| @route-optimization/react | 0.1.0 | ~11KB | React hooks and components |
| @route-optimization/vue | 0.1.0 | ~7KB | Vue 3 composables |
| @route-optimization/vanilla | 0.1.0 | ~6KB | Vanilla JavaScript wrapper |
| @route-optimization/converter | 0.1.0 | ~8KB | DirectionsResult converter |
MIT © 2025 ks-arm