Arcs

<MapArc data={flightRoutes} />

<MapArc data={flightRoutes} />

Installation

pnpm add @notion-kit/map

pnpm add @notion-kit/map

Builds curved LineString features between coordinate pairs and renders them as a MapLibre line layer with an invisible hit layer for interactions.

Prop	Type	Default	Description
`data`*	`MapArcDatum[]`	-	Arcs with `id`, `from`, and `to` coordinates.
`id`	`string`	-	Optional source and layer id prefix.
`curvature`	`number`	`0.2`	How far each arc bows from a straight line.
`samples`	`number`	`64`	Number of samples used for the curve.
`paint`	`LineLayerSpecification["paint"]`	-	MapLibre paint properties for the arc layer.
`layout`	`LineLayerSpecification["layout"]`	-	MapLibre layout properties for the arc layer.
`hoverPaint`	`LineLayerSpecification["paint"]`	-	Paint applied to the currently hovered arc.
`onClick`	`(event: MapArcEvent) => void`	-	Called when an arc is clicked.
`onHover`	`(event: MapArcEvent \| null) => void`	-	Called when the hovered arc changes.
`interactive`	`boolean`	`true`	Enables arc mouse events.
`beforeId`	`string`	-	Layer id to insert before for z-order control.

Describes one arc rendered by MapArc.

Prop	Type	Default	Description
`id`*	`string \| number`	-	Unique arc id used for events/hover state.
`from`*	`[number, number]`	-	Start coordinate as `[longitude, latitude]`.
`to`*	`[number, number]`	-	End coordinate as `[longitude, latitude]`.

Payload passed to onClick and onHover callbacks.

Prop	Type	Default	Description
`arc`*	`MapArcDatum`	-	The arc datum under the pointer.
`longitude`*	`number`	-	Pointer longitude.
`latitude`*	`number`	-	Pointer latitude.
`originalEvent`*	`MapMouseEvent`	-	The original MapLibre mouse event.