Adding Area Markers

Similar to adding point markers, you can also add area markers to your locator map. 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: text/csv' \
     --data '{
  "markers": [
    {
      "id": "m1",
      "type": "area",
      "visible": 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.

Apart from the feature itself, there are multiple other properties you can use to control the display of your area:

Name

Type

Description

type

String

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

visible

Boolean

When true, the area 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.

exactShape

Boolean

When set to true, it will display the geometry in the exact shape uploaded, without applying any simplification.

fill

Boolean

Controls whether the area is displayed with a fill color.

stroke

Boolean

Controls whether the area is displayed with a visible outer stroke.

Result

The resulting map will look like this: