SDKs · React & Next.js

Step 4 — Shapes

Lines, polygons and meter-radius circles.

Shapes

<UbHubMap
  style={{ height: 480 }}
  polylines={[{ points: route, color: "#2563eb", width: 5 }]}
  polygons={[{ rings: [ring], fillColor: "rgba(37,99,235,0.2)", strokeColor: "#2563eb", strokeWidth: 2 }]}
  circles={[{ center: { latitude: 47.9184, longitude: 106.9177 }, radiusMeters: 300, strokeColor: "#2563eb", strokeWidth: 2 }]}
/>;

Each shape carries its own color and width. A circle uses a meter radius and scales with the map. The route prop stays as a convenience single line.