Directions and routing

import polyline from "@mapbox/polyline";
import { baatoRequest } from "./baato";

export async function getDirections(points, mode = "car") {
  const params = new URLSearchParams({
    key: baatoToken,
    mode,
    instructions: "true",
    alternatives: "true",
  });

  // points[] is repeated once per waypoint, each as "lat,lon"
  points.forEach(([lat, lon]) => params.append("points[]", `${lat},${lon}`));

  const response = await fetch(`https://api.baato.io/api/v1/directions?${params}`);
  const { data } = await response.json();

  return data.map((route) => ({
    ...route,
    geojson: polyline.toGeoJSON(route.encodedPolyline),
  }));
}

<MapLibreGL.ShapeSource id="routeSource" shape={route.geojson}>
  <MapLibreGL.LineLayer
    id="routeLine"
    style={{
      lineColor: "#008148",
      lineWidth: 6,
      lineJoin: "round",
      lineCap: "round",
    }}
  />
</MapLibreGL.ShapeSource>

import { bbox } from "@turf/bbox";

const [minLon, minLat, maxLon, maxLat] = bbox(route.geojson);

camera.current?.fitBounds([minLon, minLat], [maxLon, maxLat], 50, 800);

const km = (route.distanceInMeters / 1000).toFixed(1);
const minutes = Math.round(route.timeInMs / 1000 / 60);

setSummary(`${km} km · ${minutes} min`);