Adding Line & Arrow Markers

Besides point and area markers, you can add line and arrow markers to your locator map. Arrow makers always have a start and end; they consist of two coordinates (but can be curved, as we'll later see). Line markers can connect more than two coordinates on your map with a visible path.

Creating and styling line markers

Here's an example for defining a line marker:

curl --request PUT \
     --url https://api.datawrapper.de/v3/charts/<ID>/data \
     --header 'Authorization: Bearer <YOUR_TOKEN_HERE>' \
     --header 'content-type: application/json' \
     --data '{
    "markers": [
        {
            "id":"m1",
            "title": "Line Marker",
            "type":"line",
            "visibility": {
                "enabled": true
            },
            "properties":{
                "stroke":"red",
                "stroke-width":3,
                "stroke-opacity":1
            },
            "feature": {
                "type":"Feature",
                "properties":[],
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-74.006, 40.7128],
                        [-80.2994982, 25.7823907]
                    ]
                }
            }
        }
    ]
}'

This dataset adds a simple line marker that connects two coordinates: in this case, it displays a straight straight from New York to Miami:

The line geometry itself is included in the feature property. Apart from that, you can control other properties that affect the display of the resulting map. The properties are similar to the ones configurable for area markers.

Creating and styling arrow markers

Here's an example for defining a line marker:

curl --request PUT \
     --url https://api.datawrapper.de/v3/charts/<ID>/data \
     --header 'Authorization: Bearer <YOUR_TOKEN_HERE>' \
     --header 'content-type: application/json' \
     --data '{
    "markers": [
        {
            "title": "Arrow Marker",
            "type": "arrow",
              "title": "Arrow marker",
              "coordinates": {
                "tip": [10, 20],
                "tail": [-20, 20]
              },
              "color": "red",
              "opacity": 1,
              "gradient": true,
              "arrowType": "flow",
              "head": "triangle",
              "lineWeight": 2,
              "flowWeight": 14,
              "taper": {
                "direction": "tail",
                "tailStrength": 0.9,
                "headStrength": 1.5
              },
              "curve": {
                "angle": -90,
                "offset": 0.5
              },
              "visibility": {
                "enabled": true
              }
        }
    ]
}'

This dataset creates a red, curved flow marker in Africa:

Arrow marker properties

Arrow markers have the following styling properties. Not all of them apply to every arrow type:

Only for flow arrows (arrowType: "flow"), you can define the gradient, flowWeight, taper.direction and the taper.headStrength and taper.tailStrength .
Only for line arrows (arrowType: "line"), you can define head and bidirectional.

Property	Type	Description
`type`	String	Defines if the marker is a point, area, line or arrow markers
`title`	String	Marker title displayed in the marker list in the editor
`coordinates.tip`	Array of numbers	Coordinates of the tip of the arrow head
`coordinates.tail`	Array of numbers	Coordinates of the tail of the arrow
`color`	String	Color of the arrow. Default: #333333
`opacity`	Number	Opacity of the arrow, number from 0-1. Default: 1
`arrowType`	String	Defines the shape of the arrow. Can be “line” or “flow”. Default: “line”
`gradient`	Boolean	Defines if a flow arrow should fade from transparent at the tail to solid at the tip. Default: false
`head`	String	Defines the shape of the arrow head. Can be “triangle” or “lines” for line arrows, but only "triangle" for flow arrows. Default: “lines” for line arrows, “triangle” for flow arrows.
`bidirectional`	Boolean	When `true`, the arrow head of line arrows is shown on both sides.
`lineWeight`	String	Defines the arrow thickness for line arrows. Can be "style0" (2px), "style1" (3px), "style2" (4px), "style3" (5px). Default: "style0".
`flowWeight`	Number	Defines the arrow thickness for flow arrows. Can be a number between 1 and 50. Default: 14
`taper.direction`	String	Point at which the arrow shaft should be more narrow. Can be “head” or “tail”. Default: “tail”
`taper.headStrength`	Number	The amount of tapering when `taper.direction` is “head”. Can be a number between 0-6. Default: 1.5.
`taper.tailStrength`	Number	The amount of tapering when `taper.direction` is “tail”. Can be a number between 0-1. Default: 0.9.
`curve.angle`	Number	Determines how much the arrow curves. Can be a number between -180 and 180. Default: 0.
`curve.offset`	Number	Determines the point on the arrow at which the curve reaches its highest point. Can be a number between -2 and 2. Default: 0.5
`visibility.enabled`	Boolean	When `true`, the marker is visible.