<div id="map" style="height: 400px"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map('map').setView([1.357, 103.85], 12);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors',
  }).addTo(map);

  async function drawRoute() {
    const res = await fetch(
      'https://api.justrouting.tech/route/v1/driving/' +
      '103.708362,1.357371;103.984748,1.352212' +
      '?geometries=geojson&overview=full',
      { headers: { Authorization: 'Bearer ' + API_KEY } }
    );
    const data = await res.json();
    if (data.code !== 'Ok') throw new Error(data.code);

    const geometry = data.routes[0].geometry; // GeoJSON LineString
    L.geoJSON(geometry, { style: { color: '#4f46e5', weight: 5 } }).addTo(map);
    map.fitBounds(L.geoJSON(geometry).getBounds());
  }
</script>

const res = await fetch(
  'https://api.justrouting.tech/route/v1/driving/' +
  '103.708362,1.357371;103.984748,1.352212?geometries=geojson&overview=full',
  { headers: { Authorization: 'Bearer ' + API_KEY } }
);
const data = await res.json();

map.addSource('route', {
  type: 'geojson',
  data: { type: 'Feature', properties: {}, geometry: data.routes[0].geometry },
});
map.addLayer({
  id: 'route',
  type: 'line',
  source: 'route',
  layout: { 'line-join': 'round', 'line-cap': 'round' },
  paint: { 'line-color': '#4f46e5', 'line-width': 5 },
});

import { MapContainer, TileLayer, Polyline } from 'react-leaflet';
import polyline from '@mapbox/polyline';

export function RouteMap({ route }: { route: any }) {
  // polyline format: decode to [lat, lng][]
  const positions = polyline.decode(route.geometry).map(([lat, lng]) => [lat, lng]);
  return (
    <MapContainer center={positions[0]} zoom={12} style={{ height: '400px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Polyline positions={positions} pathOptions={{ color: '#4f46e5', weight: 5 }} />
    </MapContainer>
  );
}