Adding Point Markers

Adding point markers

Your map is empty so far – so let's add some markers. To do so, 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 entails 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> entails 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 them with a PUT request. This will replace your data file. The PUT request needs to entail all the markers you'd like to see on the map.

Let's use the following PUT request to add the first marker to 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,
      "visible": true,
      "visibility": {
        "mobile": true,
        "desktop": true
      },
      "coordinates": [
        -0.140634,
        51.501476
      ],
      "tooltip": {
      	"text": "Some information about Buckingham Palace that shows up when hovering over the marker"
      }
    }
  ]
}'

There are many more properties you can define – but let's look at these basic ones in detail:

Point marker properties

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	Height 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`.
`visible`	Boolean	When `true`, the marker is visible.
`visibility.mobile`	Boolean	When `true`, the marker is visible on mobile devices.
`visibility.desktop`	Boolean	When `true`, the marker is visible on desktop devices.
`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.

Result

The resulting map will look like this:

Adding point markers

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

Point marker properties

Result

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