Adding point markers

Here's how to add point markers to a locator map with the Datawrapper API and control their styling, coordinates, and visibility.

To add markers, you first need to understand the difference between the properties and the data when it comes to locator maps:

  • https://api.datawrapper.de/v3/charts/<ID>/data contains all information about markers: marker symbols, marker text, marker text formatting, coordinates, connector lines. In Datawrapper's editor, that's everything you set in step 1: Add markers.

  • https://api.datawrapper.de/v3/charts/<ID> contains all information about the general map, like the settings for the title, inset map, the zoom and design of your locator map. In Datawrapper's editor, that's everything you set in step 2: Design map and step 3: Annotate.

Every time you upload data, it overwrites the old data file

To add a marker, you'll need to upload information about it with a PUT request. This will replace your data file. The PUT request needs to include all the markers you'd like to see on the map.

curl --request PUT \
     --url https://api.datawrapper.de/v3/charts/<ID>/data \
     --header 'Authorization: Bearer <YOUR_TOKEN_HERE>' \
     --header 'content-type: text/csv' \
     --data '{
  "markers": [
    {
      "type": "point",
      "title": "Buckingham Palace",
      "icon": {
        "path": "M1000 350a500 500 0 0 0-500-500 500 500 0 0 0-500 500 500 500 0 0 0 500 500 500 500 0 0 0 500-500z",
        "height": 700,
        "width": 1000
      },
      "scale": 1,
      "markerColor": "#cc0000",
      "anchor": "bottom-right",
      "offsetY": 0,
      "offsetX": 0,
      "text": {
        "color": "#333333",
        "fontSize": 15,
        "halo": "#f2f3f0"
      },
      "rotate": 0,
      "visibility": {
        "enabled": true
      },
      "coordinates": [
        -0.140634,
        51.501476
      ],
      "tooltip": {
      	"text": "Some information about Buckingham Palace that shows up when hovering over the marker"
      }
    }
  ]
}'

The resulting map will look like this:

There are many more properties you can define:

Name

Type

Description

type

String

Defines if the marker is a point, area or line marker.

title

String

Marker text (displayed next to the marker symbol). You can use HTML tags like <strong> or <br> in the marker text.

icon.path

String

SVG path of the marker symbol. To get the SVG path of a certain marker, create a locator map in the Datawrapper app and use a GET request.

icon.height

Number

Height of the marker symbol

icon.width

Number

Width of the marker symbol

scale

Number

Size of the marker symbol. The bigger the number, the bigger the symbol.

markerColor

String

Color of the marker symbol.

anchor

String

Defines where the marker text sits relative to the marker symbol. Possible options: bottom-left, bottom-center, bottom-right, middle-left, middle-center, middle-right, top-left, top-center, top-right.

offsetY

Number

Vertical distance between the marker text and the marker symbol (can be a negative value).

offsetX

Number

Horizontal distance between the marker text and the marker symbol (can be a negative value).

text.color

String

Color of the marker text. Default: #333333.

text.fontSize

Number

Font size of the marker text. Default: 14.

text.halo

String

Outline around the marker text. Default: #f2f3f0

rotate

Number

Defines the rotation of the marker text. Default: 0.

visibility.enabled

Boolean

When true, the marker is visible.

visibility.viewport

String or false

Set to "desktop" or "mobile" to show the point marker only in that viewport. Default: false, which means no specific viewport is set.

coordinates

Array of numbers

Coordinates of the marker, e.g. [-74.00597073114699, 40.71217116089093].

tooltip.text

String

Text that will appear in a popup when hovering over the marker.