MapAnnotation

Anchors arbitrary SVG content to a map point with a connector line path.
Use when you need a callout, label, or badge offset from the original location

Props

Parameter	Type	Default	Description
coordinates	[number, number]	—	Anchor coordinates [longitude, latitude]
length?	number	30	Connector length in screen pixels
angle?	number	-90	Connector angle in degrees
margin?	number	0	Gap between the anchor point and the connector start
curve?	CurveFactory | CurveFactoryLineOnly	curveNatural	See MapLine.curve
midpoint?	[lengthwise: number, crosswise: number]	—	See MapLine.midpoint
styles?	MapObject['styles']	—	See styling guide

styles and native attributes are bound to the connector <path>.
Interaction state is tracked on the wrapper <g>.

Usage

<template>
  <MapBase :data="mapData">
    <MapFeatures />
    <MapAnnotation
      :coordinates="[2.3522, 48.8566]"
      :length="40"
      :angle="-90"
      :margin="2"
      :midpoint="[0, -50]"
      stroke="#ff6f26"
      :stroke-width="2"
    >
      <text
        font-size="12"
        text-anchor="middle"
        y="-6"
      >Paris</text>
    </MapAnnotation>
  </MapBase>
</template>

See annotations example for a few callout layouts