Polyline to React svg

gistfile1.txt

var polyline = require("@mapbox/polyline")

const Trace = ({mapPolyline}) => {
  const coordinates = polyline.decode(mapPolyline).map(coordinate => ({
    lat: coordinate[0],
    lng: coordinate[1],
  }))

  const minLat = coordinates.reduce(
    (min, coordinate) => (coordinate.lat < min ? coordinate.lat : min),
    coordinates[0].lat
  )
  const maxLat = coordinates.reduce(
    (max, coordinate) => (coordinate.lat > max ? coordinate.lat : max),
    coordinates[0].lat
  )
  const minLng = coordinates.reduce(
    (min, coordinate) => (coordinate.lng < min ? coordinate.lng : min),
    coordinates[0].lng
  )
  const maxLng = coordinates.reduce(
    (max, coordinate) => (coordinate.lng > max ? coordinate.lng : max),
    coordinates[0].lng
  )

  return (
      <svg
        height="100%"
        viewBox={`
          ${minLat}
          ${minLng}
          ${maxLat - minLat}
          ${maxLng - minLng}
        `}
        style={{transform: "rotate(-90deg)"}}
      >
        <polyline
          points={coordinates.reduce(
            (acc, coordinate) =>
              `${acc} ${coordinate.lat},${coordinate.lng}`.trim(),
            ""
          )}
          fill="none"
          stroke="black"
          strokeWidth="20"
        />
        <path
          d={coordinates.reduce(
            (acc, coordinate) =>
              `${acc} L ${coordinate.lat},${coordinate.lng}`.trim(),
            `M ${coordinates[0].lat},${coordinates[0].lng}`
          )}
          fill="none"
          stroke="#fc4c02"
          strokeWidth="20"
          strokeLinejoin="round"
        />
      </svg>
  )
}