Route Optimization Map

Appearance

What is Route Optimization Map? ​

Route Optimization Map is a universal TypeScript library for visualizing delivery routes and optimized stops on interactive maps. It provides a consistent API across React, Vue, and Vanilla JavaScript, making it easy to build route optimization interfaces for any web application.

Why Route Optimization Map? ​

🎯 Framework Agnostic ​

Works seamlessly with React, Vue 3, Vanilla JavaScript, or any framework. Choose the package that fits your stack:

  • @route-optimization/react - React hooks and components
  • @route-optimization/vue - Vue 3 Composition API composables
  • @route-optimization/vanilla - Pure JavaScript, zero framework dependencies
  • @route-optimization/core - Use with any framework

🚀 Production Ready ​

  • 160+ Tests - Comprehensive test coverage across all packages
  • TypeScript Strict Mode - Full type safety and IntelliSense support
  • 95% Code Coverage - Thoroughly tested components and utilities
  • Battle-tested - Built for real-world delivery and logistics applications

📦 Lightweight ​

Small bundle sizes with tree-shaking support:

  • Core: ~13KB
  • React: ~11KB
  • Vue: ~7KB
  • Vanilla: ~6KB
  • Converter: ~8KB

🔄 Cross-Platform Compatible ​

Convert routes between different formats with the Converter package:

typescript
import { toDirectionsResult, fromDirectionsResult } from '@route-optimization/converter';

// Convert your Route to Google Maps DirectionsResult
const directionsResult = toDirectionsResult(route);

// Or parse DirectionsResult back to Route
const route = fromDirectionsResult(directionsResult);

Use Cases ​

Perfect for building:

  • Delivery Management Systems - Visualize pickup and delivery routes
  • Fleet Tracking Dashboards - Display vehicle routes and stops in real-time
  • Route Planning Tools - Show optimized routes with multiple waypoints
  • Logistics Analytics - Display route metrics and performance data
  • Last-Mile Delivery Apps - Build customer-facing delivery tracking

Core Features ​

Routes & Stops ​

Define routes with multiple stops, each with location, type, and metadata:

typescript
const route: Route = {
  id: 'route-1',
  vehicleId: 'vehicle-1',
  stops: [
    { id: 'depot', location: { lat: 13.7563, lng: 100.5018 }, type: 'START' },
    { id: 'delivery-1', location: { lat: 13.7467, lng: 100.5342 }, type: 'DELIVERY' },
    { id: 'delivery-2', location: { lat: 13.7244, lng: 100.5255 }, type: 'DELIVERY' },
  ],
  totalDistance: 15000, // meters
  totalDuration: 1800, // seconds
};

Interactive Maps ​

Full Google Maps integration with customizable markers, polylines, and controls:

  • Custom marker icons and labels
  • Polyline styling and animations
  • Zoom and pan controls
  • Auto-fit bounds to show entire route
  • Click handlers for stops

Type Safety ​

Complete TypeScript definitions for all packages:

typescript
import type { Route, Stop, Vehicle, LatLng } from '@route-optimization/core';
import type { RouteMapViewProps } from '@route-optimization/react';
import type { RouteMapConfig } from '@route-optimization/vanilla';

Architecture ​

The library is organized as a monorepo with specialized packages:

@route-optimization/
├── core       # Types, adapters, and utilities
├── react      # React hooks and components
├── vue        # Vue 3 composables and components
├── vanilla    # Vanilla JavaScript wrapper
└── converter  # DirectionsResult conversion

Each package is:

  • Independently versioned
  • Published to npm
  • Fully documented
  • Thoroughly tested

Browser Support ​

  • Chrome/Edge: Latest 2 versions
  • Firefox: Latest 2 versions
  • Safari: Latest 2 versions
  • Mobile browsers supported

License ​

MIT © 2025 ks-arm

Next Steps ​

Released under the MIT License.

Copyright © 2025 ks-arm