Amazon Location Service

import {
  GeoRoutesClient,
  CalculateRoutesCommand,
} from "@aws-sdk/client-geo-routes";
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";

// Create authentication helper and client
const authHelper = withAPIKey("your-api-key", "us-west-2");
const client = new GeoRoutesClient(authHelper.getClientConfig());

// Make requests (no Key parameter needed)
const response = await client.send(
  new CalculateRoutesCommand({
    Origin: [-97.7431, 30.2672],
    Destination: [-97.7723, 30.2672],
    TravelMode: "Car",
  }),
);

import {
  GeoRoutesClient,
  CalculateRoutesCommand,
} from "@aws-sdk/client-geo-routes";
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";

// Create an authentication helper instance using an API key
const authHelper = withAPIKey("your-api-key", "us-west-2");

// Configure the client to use API keys when making supported requests
const client = new GeoRoutesClient(authHelper.getClientConfig());

const params = {
  Origin: [-97.7431, 30.2672], // [longitude, latitude] - Downtown Austin
  Destination: [-97.7723, 30.2672], // [longitude, latitude] - Zilker Park
  TravelMode: "Car", // Required: Car, Truck, Scooter, Pedestrian
};

const command = new CalculateRoutesCommand(params);
const response = await client.send(command);

console.log(`Distance: ${response.Routes[0].Summary.Distance} meters`);
console.log(`Duration: ${response.Routes[0].Summary.Duration} seconds`);

// HTML setup (include in <head>)
// <link href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" rel="stylesheet">
// <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5"></script>

import {
  GeoRoutesClient,
  CalculateRoutesCommand,
} from "@aws-sdk/client-geo-routes";
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";

const API_KEY = "your-api-key";
const REGION = "us-west-2";

// Create an authentication helper instance
const authHelper = withAPIKey(API_KEY, REGION);

// Initialize map
const styleUrl = `https://maps.geo.${REGION}.amazonaws.com/v2/styles/Standard/descriptor?key=${API_KEY}`;

const map = new maplibregl.Map({
  container: "map",
  style: styleUrl,
  center: [-97.7431, 30.2672],
  zoom: 12,
  validateStyle: false,
});

async function calculateAndDisplayRoute(origin, destination) {
  // Configure the client with authentication
  const client = new GeoRoutesClient(authHelper.getClientConfig());

  const params = {
    Origin: origin,
    Destination: destination,
    TravelMode: "Car",
    LegGeometryFormat: "Simple", // Returns coordinate arrays for mapping
  };

  const command = new CalculateRoutesCommand(params);
  const response = await client.send(command);

  const route = response.Routes[0];
  const leg = route.Legs[0];

  // Extract route coordinates
  const routeCoordinates = leg.Geometry.LineString;

  // Wait for map to load
  map.on("load", () => {
    // Add route line to map
    map.addSource("route", {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: routeCoordinates,
        },
      },
    });

    // Style the route line
    map.addLayer({
      id: "route-line",
      type: "line",
      source: "route",
      layout: {
        "line-join": "round",
        "line-cap": "round",
      },
      paint: {
        "line-color": "#3b82f6", // Blue route line
        "line-width": 5,
        "line-opacity": 0.8,
      },
    });

    // Add start marker (green)
    new maplibregl.Marker({ color: "#22c55e" })
      .setLngLat(origin)
      .setPopup(new maplibregl.Popup().setHTML("<strong>Start</strong>"))
      .addTo(map);

    // Add end marker (red)
    new maplibregl.Marker({ color: "#ef4444" })
      .setLngLat(destination)
      .setPopup(new maplibregl.Popup().setHTML("<strong>Destination</strong>"))
      .addTo(map);

    // Fit map to show entire route
    const bounds = routeCoordinates.reduce(
      (bounds, coord) => {
        return bounds.extend(coord);
      },
      new maplibregl.LngLatBounds(routeCoordinates[0], routeCoordinates[0]),
    );

    map.fitBounds(bounds, {
      padding: { top: 50, bottom: 50, left: 50, right: 50 },
    });
  });

  // Display route summary
  const distanceKm = (route.Summary.Distance / 1000).toFixed(1);
  const durationMin = Math.round(route.Summary.Duration / 60);

  console.log(`Route: ${distanceKm} km, ${durationMin} minutes`);

  return route;
}

// Usage
const origin = [-97.7431, 30.2672]; // Downtown Austin
const destination = [-97.7723, 30.2672]; // Zilker Park
calculateAndDisplayRoute(origin, destination);

Geometry: {
  LineString: [
    [-97.7431, 30.2672],
    [-97.7445, 30.2678],
    [-97.7459, 30.2684],
    // ... hundreds more coordinates
  ];
}

Geometry: {
  LineString: "BFoz5xJ67i1BU1B7PzIhaxL7Y"; // Requires decoding
}

// Desktop users on broadband/WiFi - bandwidth isn't a concern
const params = {
  Origin: [-97.7431, 30.2672],
  Destination: [-97.7723, 30.2672],
  TravelMode: "Car",
  LegGeometryFormat: "Simple", // No decoder needed, works immediately
};

// Calculating one route per session - minimal data transfer
async function showDirections(origin, destination) {
  const response = await calculateRoute(origin, destination, "Simple");
  displayOnMap(response.Routes[0].Legs[0].Geometry.LineString);
}

// Backend service calculating routes for internal use
app.post("/api/calculate-route", async (req, res) => {
  const route = await calculateRoute(
    req.body.origin,
    req.body.destination,
    "Simple", // Fast AWS network, immediate coordinate access
  );

  // Process coordinates directly without decoding
  const simplified = simplifyRoute(route.Legs[0].Geometry.LineString);
  res.json(simplified);
});

// Need to modify coordinates programmatically
const coordinates = leg.Geometry.LineString;

// Add waypoint markers every 1km
const markers = coordinates.filter((_, i) => i % 50 === 0);

// Simplify geometry for overview display
const simplified = coordinates.filter((_, i) => i % 5 === 0);

// Extract bounding box
const bounds = coordinates.reduce(
  (bbox, [lng, lat]) => {
    return {
      minLng: Math.min(bbox.minLng, lng),
      maxLng: Math.max(bbox.maxLng, lng),
      minLat: Math.min(bbox.minLat, lat),
      maxLat: Math.max(bbox.maxLat, lat),
    };
  },
  { minLng: Infinity, maxLng: -Infinity, minLat: Infinity, maxLat: -Infinity },
);

// Mobile users on cellular networks - minimize data usage
const params = {
  Origin: origin,
  Destination: destination,
  TravelMode: "Car",
  LegGeometryFormat: "FlexiblePolyline", // 5-10x smaller responses
};

// Recalculating routes every 2 minutes based on traffic
setInterval(async () => {
  const updatedRoute = await client.send(
    new CalculateRoutesCommand({
      Origin: currentLocation,
      Destination: destination,
      TravelMode: "Car",
      LegGeometryFormat: "FlexiblePolyline", // Fast updates with minimal data
    }),
  );

  updateMapRoute(
    polyline.decodeToLineStringFeature(
      updatedRoute.Routes[0].Legs[0].Geometry.LineString,
    ),
  );
}, 120000);

// Comparing 5 alternative routes - bandwidth adds up quickly
// Simple format: 100-125 KB total
// FlexiblePolyline: 10-20 KB total (10x savings)

const alternativeRoutes = await Promise.all([
  calculateRoute(origin, destination, { avoid: "Tolls" }),
  calculateRoute(origin, destination, { optimize: "ShortestRoute" }),
  calculateRoute(origin, destination, { avoid: "Ferries" }),
  calculateRoute(origin, destination, { travelMode: "Pedestrian" }),
  calculateRoute(origin, destination, { travelMode: "Scooter" }),
]);

// Decode all routes for display
const decodedRoutes = alternativeRoutes.map((route) =>
  polyline.decodeToLineStringFeature(route.Legs[0].Geometry.LineString),
);

// Store routes in IndexedDB or localStorage
// FlexiblePolyline saves 80-90% storage space

async function cacheRoute(routeId, origin, destination) {
  const response = await client.send(
    new CalculateRoutesCommand({
      Origin: origin,
      Destination: destination,
      TravelMode: "Car",
      LegGeometryFormat: "FlexiblePolyline", // Efficient storage
    }),
  );

  // Store compressed format
  const cachedData = {
    routeId,
    encodedGeometry: response.Routes[0].Legs[0].Geometry.LineString,
    summary: response.Routes[0].Summary,
    timestamp: Date.now(),
  };

  await db.routes.put(cachedData);
}

// Retrieve and decode when needed
async function loadCachedRoute(routeId) {
  const cached = await db.routes.get(routeId);
  return polyline.decodeToLineStringFeature(cached.encodedGeometry);
}

// Offline-capable apps that sync route data
// Smaller payloads = faster sync, less storage

self.addEventListener("sync", async (event) => {
  if (event.tag === "sync-routes") {
    event.waitUntil(syncRoutes());
  }
});

async function syncRoutes() {
  const pendingRoutes = await getPendingRoutes();

  // Calculate all routes with compressed format
  const results = await Promise.all(
    pendingRoutes.map((r) =>
      calculateRoute(r.origin, r.destination, {
        LegGeometryFormat: "FlexiblePolyline", // Efficient sync
      }),
    ),
  );

  // Store compressed for offline use
  await storeRoutesLocally(results);
}

// Calculating hundreds of routes for analysis
// FlexiblePolyline makes large-scale operations practical

async function analyzeDeliveryRoutes(stops) {
  const routes = [];

  for (let i = 0; i < stops.length - 1; i++) {
    const response = await client.send(
      new CalculateRoutesCommand({
        Origin: stops[i],
        Destination: stops[i + 1],
        LegGeometryFormat: "FlexiblePolyline", // Keep total data manageable
      }),
    );

    routes.push({
      segment: `${i} -> ${i + 1}`,
      distance: response.Routes[0].Summary.Distance,
      duration: response.Routes[0].Summary.Duration,
      geometry: response.Routes[0].Legs[0].Geometry.LineString,
    });
  }

  return routes;
}

npm install @aws/polyline

<script src="https://cdn.jsdelivr.net/npm/@aws/polyline/dist/polyline.min.js"></script>

import {
  GeoRoutesClient,
  CalculateRoutesCommand,
} from "@aws-sdk/client-geo-routes";
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
import * as polyline from "@aws/polyline";

// Create an authentication helper instance
const authHelper = withAPIKey("your-api-key", "us-west-2");
const client = new GeoRoutesClient(authHelper.getClientConfig());

async function calculateAndDisplayRoute(origin, destination) {
  // Request FlexiblePolyline format
  const response = await client.send(
    new CalculateRoutesCommand({
      Origin: origin,
      Destination: destination,
      TravelMode: "Car",
      LegGeometryFormat: "FlexiblePolyline",
    }),
  );

  const encodedGeometry = response.Routes[0].Legs[0].Geometry.LineString;

  // Decode to GeoJSON Feature - ready for MapLibre
  const geoJsonFeature = polyline.decodeToLineStringFeature(encodedGeometry);

  // Add directly to map
  map.addSource("route", {
    type: "geojson",
    data: geoJsonFeature, // Feature with LineString geometry
  });

  map.addLayer({
    id: "route-line",
    type: "line",
    source: "route",
    paint: {
      "line-color": "#3b82f6",
      "line-width": 5,
      "line-opacity": 0.8,
    },
  });

  // Access coordinates if needed for bounds calculation
  const coordinates = geoJsonFeature.geometry.coordinates;
  fitMapToBounds(coordinates);
}

// Get raw coordinate array instead of GeoJSON Feature
const coordinates = polyline.decodeToLngLatArray(encodedGeometry);
// Returns: [[lng, lat], [lng, lat], ...]

// Get GeoJSON LineString geometry only (no Feature wrapper)
const geometry = polyline.decodeToLineString(encodedGeometry);
// Returns: { type: "LineString", coordinates: [[lng, lat], ...] }

class RouteService {
  constructor(isMobile, hasOfflineMode) {
    this.isMobile = isMobile;
    this.hasOfflineMode = hasOfflineMode;
  }

  async calculateRoute(origin, destination, forDisplay = true) {
    // Choose format based on context
    const format = this.shouldUseCompression(forDisplay)
      ? "FlexiblePolyline"
      : "Simple";

    const response = await client.send(
      new CalculateRoutesCommand({
        Origin: origin,
        Destination: destination,
        TravelMode: "Car",
        LegGeometryFormat: format,
      }),
    );

    // Cache compressed version if offline mode enabled
    if (this.hasOfflineMode && format === "FlexiblePolyline") {
      await this.cacheRoute(origin, destination, response);
    }

    // Decode if necessary
    const geometry =
      format === "FlexiblePolyline"
        ? polyline.decodeToLineStringFeature(
            response.Routes[0].Legs[0].Geometry.LineString,
          )
        : this.convertToGeoJSON(response.Routes[0].Legs[0].Geometry.LineString);

    return { route: response.Routes[0], geometry };
  }

  shouldUseCompression(forDisplay) {
    // Always compress for mobile
    if (this.isMobile) return true;

    // Always compress for offline caching
    if (this.hasOfflineMode) return true;

    // Use Simple for desktop display (convenience)
    return !forDisplay;
  }

  convertToGeoJSON(coordinates) {
    return {
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates,
      },
    };
  }
}

// Usage
const routeService = new RouteService(isMobileDevice(), hasOfflineFeature());

const { route, geometry } = await routeService.calculateRoute(
  origin,
  destination,
);
displayOnMap(geometry);

map.addLayer({
  id: "route-line",
  type: "line",
  source: "route",
  paint: {
    "line-color": "#3b82f6", // Route color
    "line-width": 5, // Line thickness (pixels)
    "line-opacity": 0.8, // Transparency (0-1)
    "line-dasharray": [2, 2], // Optional: dashed line pattern
  },
});

const params = {
  Origin: [-97.7431, 30.2672],
  Destination: [-97.7723, 30.2672],
  TravelMode: "Car",
  Avoid: {
    Tolls: true, // Avoid toll roads
    Ferries: true, // Avoid ferries
    CarShuttleTrains: true, // Avoid car shuttle trains
  },
};

const params = {
  // ... other params
  LegAdditionalFeatures: ["Summary", "Tolls", "TravelStepInstructions"],
  SpanAdditionalFeatures: ["SpeedLimit", "RoadName"],
};

{
  Routes: [
    {
      Summary: {
        Distance: 7845, // Total distance in meters
        Duration: 1023, // Total duration in seconds
        RouteBBox: [
          // Bounding box [minLng, minLat, maxLng, maxLat]
          -97.7723, 30.2672, -97.7431, 30.2672,
        ],
      },
      Legs: [
        // Array of route segments
        {
          Geometry: {
            LineString: [
              // Array of [lng, lat] coordinates
              [-97.7431, 30.2672],
              [-97.7445, 30.2678],
              // ... more coordinates
            ],
          },
          Summary: {
            /* leg-specific summary */
          },
          TravelSteps: [
            /* navigation instructions */
          ],
        },
      ],
    },
  ];
}

TravelSteps: [
  {
    Type: "Turn",
    Instruction: "Turn right onto Pine St",
    Distance: 150, // Distance to next instruction (meters)
    Duration: 30, // Time to next instruction (seconds)
    GeometryOffset: 0, // Index in LineString where step begins
  },
  {
    Type: "Continue",
    Instruction: "Continue on Pine St for 0.5 miles",
    Distance: 804,
    Duration: 120,
    GeometryOffset: 12,
  },
];

{
  TravelMode: "Car",
  TravelModeOptions: {
    Car: {
      LicensePlate: {
        LastCharacter: "A"       // For region-specific restrictions
      }
    }
  }
}

{
  TravelMode: "Truck",
  TravelModeOptions: {
    Truck: {
      GrossWeight: 12000,         // Vehicle weight in kilograms
      Height: 400,                // Height in centimeters
      Length: 1200,               // Length in centimeters
      Width: 250,                 // Width in centimeters
      AxleCount: 3,               // Number of axles
      TruckType: "StraightTruck", // StraightTruck or Tractor
      HazardousCargos: ["Explosive"]
    }
  }
}

{
  TravelMode: "Pedestrian",
  TravelModeOptions: {
    Pedestrian: {
      Speed: 5.0                  // Walking speed in km/h (default: 5.0)
    }
  }
}

{
  TravelMode: "Scooter",
  TravelModeOptions: {
    Scooter: {
      MaxSpeed: 25.0,             // Maximum speed in km/h
      Occupancy: 1                // Number of passengers
    }
  }
}

const params = {
  Origin: [-97.7431, 30.2672], // Downtown Austin
  Destination: [-97.7431, 30.2862], // UT Tower
  Waypoints: [
    { Position: [-97.7453, 30.2639] }, // Lady Bird Lake Trail
    { Position: [-97.7494, 30.2515] }, // South Congress
  ],
  TravelMode: "Car",
};

Waypoints: [
  {
    Position: [-97.7453, 30.2639],
    StopDuration: 300, // Stop for 5 minutes (in seconds)
  },
  {
    Position: [-97.7494, 30.2515],
    PassThrough: true, // Just pass through, don't stop
  },
];

async function displayMultiStopRoute(origin, waypoints, destination) {
  const params = {
    Origin: origin,
    Destination: destination,
    Waypoints: waypoints.map((pos) => ({ Position: pos })),
    TravelMode: "Car",
    LegGeometryFormat: "Simple",
  };

  const response = await client.send(new CalculateRoutesCommand(params));
  const route = response.Routes[0];

  map.on("load", () => {
    // Combine all leg geometries into single line
    const allCoordinates = route.Legs.flatMap((leg) => leg.Geometry.LineString);

    map.addSource("route", {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: allCoordinates,
        },
      },
    });

    map.addLayer({
      id: "route-line",
      type: "line",
      source: "route",
      paint: {
        "line-color": "#3b82f6",
        "line-width": 5,
      },
    });

    // Add markers for all points
    new maplibregl.Marker({ color: "#22c55e" })
      .setLngLat(origin)
      .setPopup(new maplibregl.Popup().setHTML("<strong>Start</strong>"))
      .addTo(map);

    waypoints.forEach((wp, i) => {
      new maplibregl.Marker({ color: "#f59e0b" })
        .setLngLat(wp)
        .setPopup(
          new maplibregl.Popup().setHTML(`<strong>Stop ${i + 1}</strong>`),
        )
        .addTo(map);
    });

    new maplibregl.Marker({ color: "#ef4444" })
      .setLngLat(destination)
      .setPopup(new maplibregl.Popup().setHTML("<strong>Destination</strong>"))
      .addTo(map);
  });
}

import {
  GeoRoutesClient,
  CalculateRoutesCommand,
} from "@aws-sdk/client-geo-routes";
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";

// Create an authentication helper instance
const authHelper = withAPIKey("your-api-key", "us-west-2");
const client = new GeoRoutesClient(authHelper.getClientConfig());

const params = {
  Origin: [-97.7431, 30.2672],
  Destination: [-97.7723, 30.2672],
  TravelMode: "Car",
  LegAdditionalFeatures: ["TravelStepInstructions"],
};

const response = await client.send(new CalculateRoutesCommand(params));
const leg = response.Routes[0].Legs[0];

// Display turn-by-turn instructions
leg.TravelSteps.forEach((step, i) => {
  const distanceMiles = (step.Distance * 0.000621371).toFixed(1);
  console.log(`${i + 1}. ${step.Instruction} (${distanceMiles} mi)`);
});

const params = {
  Origin: [-97.7431, 30.2672],
  Destination: [-97.6789, 30.4383],
  TravelMode: "Car",
  Avoid: {
    Tolls: true,
    Ferries: true,
  },
  OptimizeRoutingFor: "FastestRoute",
};

const response = await client.send(new CalculateRoutesCommand(params));
const route = response.Routes[0];

console.log(
  `Toll-free route: ${route.Summary.Distance}m, ${route.Summary.Duration}s`,
);

const params = {
  Origin: [-97.7431, 30.2672],
  Destination: [-97.6889, 30.2244],
  TravelMode: "Truck",
  TravelModeOptions: {
    Truck: {
      GrossWeight: 15000, // 15 metric tons
      Height: 420, // 4.2 meters
      Length: 1200, // 12 meters
      Width: 250, // 2.5 meters
      AxleCount: 4,
      TruckType: "StraightTruck",
      HazardousCargos: ["Flammable"],
    },
  },
  LegAdditionalFeatures: ["Summary"],
};

const response = await client.send(new CalculateRoutesCommand(params));
console.log("Truck-safe route calculated with weight and size restrictions");

async function calculateWalkingRoute() {
  const origin = [-97.7453, 30.2639]; // Lady Bird Lake Trail
  const destination = [-97.7431, 30.2862]; // UT Tower

  const params = {
    Origin: origin,
    Destination: destination,
    TravelMode: "Pedestrian",
    LegGeometryFormat: "Simple",
    LegAdditionalFeatures: ["Summary"],
  };

  const response = await client.send(new CalculateRoutesCommand(params));
  const route = response.Routes[0];
  const leg = route.Legs[0];

  // Display on map
  map.on("load", () => {
    map.addSource("walking-route", {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: leg.Geometry.LineString,
        },
      },
    });

    // Dashed line for walking route
    map.addLayer({
      id: "walking-route-line",
      type: "line",
      source: "walking-route",
      paint: {
        "line-color": "#10b981",
        "line-width": 4,
        "line-dasharray": [2, 2],
      },
    });

    // Add walking markers
    new maplibregl.Marker({ color: "#10b981" }).setLngLat(origin).addTo(map);

    new maplibregl.Marker({ color: "#10b981" })
      .setLngLat(destination)
      .addTo(map);
  });

  const distanceKm = (route.Summary.Distance / 1000).toFixed(2);
  const durationMin = Math.round(route.Summary.Duration / 60);

  console.log(`Walking: ${distanceKm} km, about ${durationMin} minutes`);
}

try {
  const response = await client.send(new CalculateRoutesCommand(params));
  displayRoute(response.Routes[0]);
} catch (error) {
  if (error.name === "ResourceNotFoundException") {
    console.error("Invalid API key or insufficient permissions");
  } else if (error.name === "ValidationException") {
    console.error("Invalid request parameters:", error.message);
  } else {
    console.error("Route calculation failed:", error.message);
  }
  // Show fallback UI or alternative route options
}

// ❌ Requesting everything (slower)
LegAdditionalFeatures: ["Summary", "Tolls", "TravelStepInstructions"],
SpanAdditionalFeatures: ["SpeedLimit", "RoadName", "Regions"]

// ✅ Request only what you need (faster)
LegAdditionalFeatures: ["Summary"]  // For basic route display

const routeCache = new Map();

async function getCachedRoute(origin, destination) {
  const cacheKey = `${origin.join(",")}-${destination.join(",")}`;

  // Cache routes for 5 minutes (routes can change with traffic)
  if (routeCache.has(cacheKey)) {
    const cached = routeCache.get(cacheKey);
    if (Date.now() - cached.timestamp < 5 * 60 * 1000) {
      return cached.route;
    }
  }

  const route = await calculateRoute(origin, destination);
  routeCache.set(cacheKey, { route, timestamp: Date.now() });

  return route;
}

async function getAlternativeRoutes() {
  const baseParams = {
    Origin: [-97.7431, 30.2672],
    Destination: [-97.7723, 30.2672],
    TravelMode: "Car",
  };

  // Route 1: Fastest
  const fastest = await client.send(
    new CalculateRoutesCommand({
      ...baseParams,
      OptimizeRoutingFor: "FastestRoute",
    }),
  );

  // Route 2: Avoid tolls
  const noTolls = await client.send(
    new CalculateRoutesCommand({
      ...baseParams,
      OptimizeRoutingFor: "FastestRoute",
      Avoid: { Tolls: true },
    }),
  );

  // Route 3: Shortest distance
  const shortest = await client.send(
    new CalculateRoutesCommand({
      ...baseParams,
      OptimizeRoutingFor: "ShortestRoute",
    }),
  );

  return { fastest, noTolls, shortest };
}

function fitMapToRoute(map, routeCoordinates) {
  const bounds = new maplibregl.LngLatBounds();

  routeCoordinates.forEach((coord) => bounds.extend(coord));

  map.fitBounds(bounds, {
    padding: {
      top: 100,
      bottom: 100,
      left: 100,
      right: 100,
    },
    maxZoom: 15, // Don't zoom in too close on short routes
  });
}