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: