Skip to main content

​
Route Finding

The Route Finding feature provides traffic-aware route calculations with real-time adjustments based on Poway’s traffic dataset. Users can find optimal routes between any two locations with support for multiple travel modes.

​
Overview

Route estimates are dynamically adjusted using real traffic data from Poway’s dataset, providing accurate travel time predictions that account for current road conditions.

​
How to Use

1

Enter Origin Location

Input your starting point in the Origin field. This can be an address, intersection, or landmark.
2

Enter Destination

Specify where you want to go in the Destination field.
3

Select Travel Mode

Choose your preferred mode of transportation:
  • Driving - Car routes with traffic adjustments
  • Walking - Pedestrian paths
  • Bicycling - Bike-friendly routes
  • Transit - Public transportation options
4

Find Routes

Click the “Find Routes” button to calculate available routes.
5

Review Results

Compare multiple route options with:
  • Total distance
  • Traffic-adjusted estimated time
  • Step-by-step directions
  • Visual route display on the map

​
API Integration

The route finder uses the following API endpoint: 
const apiUrl = `${pythonURI}/api/get_routes`;

​
Request Format

const response = await fetch(apiUrl, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ origin, destination, mode }),
});

​
Request Parameters

ParameterTypeDescription
originstringStarting location
destinationstringEnd destination
modestringTravel mode: driving, walking, bicycling, or transit

​
Map Visualization

Routes are displayed on an interactive Leaflet map with the following features:

Automatic Centering

Map automatically centers on your current location using geolocation

Route Highlighting

Primary route shown in blue, alternative routes in gray

Polyline Decoding

Routes rendered using encoded polyline geometry

Bounds Fitting

Map view adjusts to show entire route

​
Map Initialization

const map = L.map('map').setView([32.7157, -117.1611], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors',
}).addTo(map);
The default map center is set to coordinates [32.7157, -117.1611] with a zoom level of 12, which centers on the Poway area.

​
Geolocation Support

The map automatically detects your current location: 
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    map.setView([lat, lon], 13);
  });
}

​
Route Display

When routes are returned, they are processed and displayed: 
routes.forEach((route, idx) => {
  const header = document.createElement('h4');
  header.textContent = `Route ${idx + 1} - ${route.total_distance} - Est. Time: ${route.traffic_adjusted_duration || route.total_duration}`;
  resultDiv.appendChild(header);

  const ul = document.createElement('ul');
  route.details.forEach(step => {
    const li = document.createElement('li');
    li.innerHTML = `${step.instruction} - ${step.distance} (${step.duration})`;
    ul.appendChild(li);
  });
  resultDiv.appendChild(ul);
});

​
Response Structure

Each route contains:
  • total_distance - Total route distance
  • total_duration - Base estimated time
  • traffic_adjusted_duration - Time adjusted for current traffic
  • details - Array of step-by-step instructions
  • geometry - Encoded polyline for map rendering

​
Polyline Rendering

Routes are drawn on the map using decoded polyline geometry: 
import polyline from 'https://cdn.skypack.dev/@mapbox/polyline';

if (route.geometry) {
  const decoded = polyline.decode(route.geometry);
  const polylineLayer = L.polyline(decoded, {
    color: idx === 0 ? 'blue' : 'gray',
    weight: 4,
    opacity: 0.8,
  }).addTo(map);
  polylines.push(polylineLayer);
  if (idx === 0) map.fitBounds(polylineLayer.getBounds());
}
The first route (index 0) is highlighted in blue and the map automatically zooms to fit its bounds. Alternative routes are shown in gray.

​
Error Handling

The system includes validation and error handling: 
if (!origin || !destination) {
  alert('Please enter both origin and destination.');
  return;
}

if (!Array.isArray(routes)) {
  resultDiv.innerHTML = `<p>Error: ${routes.error || 'No routes found'}</p>`;
  return;
}

​
Traffic-Aware Features

Routes are calculated with base duration times, then adjusted using real-time traffic data from Poway’s dataset. The traffic_adjusted_duration field provides the most accurate estimate of actual travel time.
Multiple routes are returned for each query, allowing users to compare:
  • Different paths to the same destination
  • Traffic conditions on each route
  • Total distance vs. time trade-offs

​
UI Components

The route finder interface includes: 
<div class="route-form">
  <h2>Traffic-Aware Route Finder</h2>
  <p style="font-size: 14px; color: gray;">
    Route estimates are dynamically adjusted using real traffic data from Poway's dataset.
  </p>
  <div class="input-group">
    <label for="origin">Origin:</label>
    <input type="text" id="origin" placeholder="Enter starting point">
  </div>
  <div class="input-group">
    <label for="destination">Destination:</label>
    <input type="text" id="destination" placeholder="Enter destination">
  </div>
  <div class="input-group">
    <label for="mode">Travel Mode:</label>
    <select id="mode">
      <option value="driving">Driving</option>
      <option value="walking">Walking</option>
      <option value="bicycling">Bicycling</option>
      <option value="transit">Transit</option>
    </select>
  </div>
  <button id="fetch_routes_btn">Find Routes</button>
</div>
Make sure to allow location permissions in your browser to enable automatic map centering to your current position.

Build docs developers (and LLMs) love

Get started for freeTalk to us