RouteNav - OpenStreetMap Navigation

A modern, interactive navigation website powered by OpenStreetMap with turn-by-turn directions.

Features

• 🗺️ Interactive Map Interface - Powered by Leaflet.js and OpenStreetMap
• 🧭 Turn-by-Turn Navigation - Detailed directions using OSRM routing API
• 🎨 Modern UI - Glassmorphic design with dark theme and smooth animations
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• 🚗 Multiple Travel Modes - Driving, cycling, and walking routes
• 📊 Trip Verbalization - Clear summary of distance and duration
• ⚡ Fast & Lightweight - No backend required, purely client-side

Quick Start

Prerequisites

• Python 3.x (for local development server)

Local Development

1. Clone or navigate to the project directory:

   cd d:\Internship\allstate

2. Activate virtual environment:

   .\venv\Scripts\activate

3. Start the development server:

   python -m http.server 3000

4. Open your browser: Navigate to http://localhost:3000

Usage

1. Enter the start coordinates (latitude and longitude)
2. Enter the end coordinates (latitude and longitude)
3. Select your preferred travel mode (driving, cycling, or walking)
4. Click "Get Directions"
5. View the route on the map and follow the turn-by-turn instructions

Example Coordinates

Try these coordinates to test the application:

• Delhi, India

  • Start: 28.6139, 77.2090
  • End: 28.7041, 77.1025

• New York, USA

  • Start: 40.7128, -74.0060
  • End: 40.7580, -73.9855

Deployment to Vercel

1. Install Vercel CLI (if not already installed):

   npm install -g vercel

2. Deploy:

   vercel

3. Follow the prompts to link your project and deploy.

Alternatively, you can deploy via GitHub:

1. Push your code to a GitHub repository
2. Import the repository in Vercel dashboard
3. Vercel will automatically detect the configuration and deploy

Technology Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Map Library: Leaflet.js 1.9.4
• Map Tiles: OpenStreetMap (via CARTO Dark theme)
• Routing API: OSRM (Open Source Routing Machine)
• Deployment: Vercel (static hosting)

Project Structure

d:/Internship/allstate/
├── index.html              # Main HTML file
├── css/
│   └── style.css          # Styles with glassmorphism and animations
├── js/
│   ├── map.js             # Leaflet map initialization
│   ├── routing.js         # OSRM routing integration
│   └── navigation.js      # UI controls and navigation logic
├── assets/
│   └── icons/             # Custom icons
├── venv/                  # Python virtual environment
├── package.json           # NPM configuration
├── vercel.json            # Vercel deployment config
└── README.md              # This file

API Information

This application uses the OSRM public demo server for routing:

• Base URL: https://router.project-osrm.org
• Note: The public server has rate limits. For production use, consider:
  • Hosting your own OSRM instance
  • Using a commercial routing API (GraphHopper, Mapbox, etc.)

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT

Acknowledgments

• OpenStreetMap contributors
• OSRM Project
• Leaflet.js
• CARTO for map tiles