Guides

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

NameTypeDescription
typeStringDefines if the marker is a point, area or line marker.
titleStringMarker text (displayed next to the marker symbol). You can use HTML tags like <strong> or <br> in the marker text.
icon.pathStringSVG 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.heightNumberHeight of the marker symbol
icon.widthNumberHeight of the marker symbol
scaleNumberSize of the marker symbol. The bigger the number, the bigger the symbol.
markerColorStringColor of the marker symbol.
anchorStringDefines 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.
offsetYNumberVertical distance between the marker text and the marker symbol (can be a negative value).
offsetXNumberHorizontal distance between the marker text and the marker symbol (can be a negative value).
text.colorStringColor of the marker text. Default: #333333.
text.fontSizeNumberFont size of the marker text. Default: 14.
text.haloStringOutline around the marker text. Default: #f2f3f0
rotateNumberDefines the rotation of the marker text. Default: 0.
visibleBooleanWhen true, the marker is visible.
visibility.mobileBooleanWhen true, the marker is visible on mobile devices.
visibility.desktopBooleanWhen true, the marker is visible on desktop devices.
coordinatesArray of numbersCoordinates of the marker, e.g. [-74.00597073114699, 40.71217116089093].
tooltip.textStringText that will appear in a popup when hovering over the marker.

Result

The resulting map will look like this:

1040

Updated almost 2 years ago