Adding Line & Arrow Markers

Add line and arrow markers to a locator map with the Datawrapper API and define their geometry and styling.

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 line 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 an arrow 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",
            "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.