MapLine

Renders a path between map locations

Props

Parameter	Type	Default	Description
coordinates	[number, number][]	—	[longitude, latitude][]
cartesian?	boolean	false	Treat coordinates as local SVG points and skip map projection
custom?	boolean	false	Render using d3-shape line instead of default
curve?	CurveFactory | CurveFactoryLineOnly	curveNatural	Any d3-shape curve. Works only with custom or cartesian
midpoint?	[lengthwise: number, crosswise: number]	—	Adds a point between each coordinate pair. Value sets position relative to the line center in % from its length.
styles?	MapObject['styles']	—	See styling guide

You can also use native SVG attrs like stroke, strokeWidth right on the MapLine

midpoint usage

Line bend depending on midpoint[1] value

Line direction	Positive	Negative
→	Up	Down
←	Down	Up
↓	Left	Right
↑	Right	Left

Usage

Custom curves and edges

Curves

By default renders a great arc using d3-geo path with 'LineString' (looks ok usually).
To control line bending use custom + midpoint + curve. See interactive curve examples

Edges ←→

Use native attributes marker-start and marker-end to make an arrow or any other custom form.

👀 See both in connections example

<template>
  <MapBase :data="mapData">
    <MapFeatures />
    <MapLine
      :coordinates="[
        [-122.4194, 37.7749],
        [-98.5795, 39.8283],
        [-73.935242, 40.73061],
      ]"
      custom
      :curve="curveBasis"
    />
  </MapBase>
</template>

<script setup lang="ts">
import { curveBasis } from 'd3-shape'
</script>