arc

The great-circle route between two places on a region map, the shortest way over the earth.

arcNode
A world map with a teal great-circle arc from London to Tokyo, the markers at each end drawn over it.A world map with a teal great-circle arc from London to Tokyo, the markers at each end drawn over it.

#Attributes

fromRequiredImplicitAnimatable
One end: a coordinate written latitude first, or #id naming a marker placed with at: in the same environment — from: #london. An anchored end follows its marker. Parametised and animatable.
region-anchor
Can be written as shorthand: arc:value
toRequiredAnimatable
The other end, in the same two forms.
region-anchor
colourAnimatable
The arc's hue.
colour
Also written: color
Defaultteal
widthAnimatable
Stroke width in pixels.
parametised-number
Default2
opacityAnimatable
How solid the stroke is, 0 to 1.
number
Default1
label
Rich inline label set at the arc's midpoint.
rich-text
hiddenAnimatable
Declared but not drawn. Animatable, so hidden: true !cue.to{false}(at: 2) is the overlay's reveal.
boolean
Defaultfalse

#Derived attributes

Computed while the element renders — read one with #id.name in attribute position or {{#id.name}} in prose, never set.

lengthDerived
The great-circle length from from to to in kilometres, on the mean earth sphere (radius 6371.0088 km); a dash until both ends resolve to places.

#Allowed in

cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }region { }

#Examples

A world map with the great-circle route from London to Tokyo, labelled with its length in kilometres.A world map with the great-circle route from London to Tokyo, labelled with its length in kilometres.
region:world{
    arc#route(from: 51.47, -0.46; to: 35.55, 139.78; label: {{round(#route.length, 0)}} km)
}
Three frames of the second step: the route from New York to Singapore drawing in across the map.Three frames of the second step: the route from New York to Singapore drawing in across the map.
region:world{
    cue.draw{
        arc(from: 40.64, -73.78; to: 1.36, 103.99)
    }(
        in: 2
        in-duration: 1200ms
    )
}

#Notes

  • On a mercator map the London–Tokyo arc bends far north of the straight line between them.
  • Wrapped in a cue.draw, the route draws itself along its length.

Last updated