Adding area markers

Here's how to add area markers to a locator map with the Datawrapper API using GeoJSON and display properties.

Let's look at an example:

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",
      "type": "area",
      "visibility": {
        "enabled": true
      },
      "exactShape": true,
      "fill": true,
      "stroke": true,
      "properties": {
        "fill": "#15607a",
        "fill-opacity": 0.2,
        "stroke": "#15607a",
        "stroke-width": 1,
        "stroke-opacity": 1,
        "stroke-dasharray": "100000",
        "pattern": "solid",
        "pattern-line-width": 2,
        "pattern-line-gap": 2
      },
      "feature": {
        "type": "Feature",
        "properties": [],
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [ ... ]
        }
      }
    }
  ]
}'

The above example sets a dataset with an area marker. The marker payload contains the area geometry in the GeoJSON format in the feature property. Since it's a lot of data, it's truncated in the above example, but you can find the full example payload here.

The resulting map will look like this:

There are multiple other properties you can use to control the display of your area:

Copy link to this heading Area properties