javascriptreactjsmapstopojsonreact-simple-maps

React simple maps renders the inverted polygon from the topojson

When I add a polygon, the entire area of the map is filled, and the polygon is "cut" out of it. I expect a simple polygon to be rendered. Here is a live example https://codesandbox.io/s/lsz8qh This is my topojson `

{
  "type": "Topology",
  "objects": {
    "collection": {
      "type": "GeometryCollection",
      "geometries": [{ "type": "Polygon", "arcs": [[0]] }]
    }
  },
  "arcs": [
    [
      [-12.260535998018383, 62.14792267500428],
      [-13.974493697178218, 35.17713854785707],
      [10.820761017340033, 35.82827731956981],
      [48.070775012424235, 43.55191645077076],
      [43.9572765344397, 70.27381439382373],
      [17.105272580928016, 71.36229082737557],
      [-12.260535998018383, 62.14792267500428]
    ]
  ]
}

rendering now enter image description here

what polygon i expect to see enter image description here

Solution

  • Because the coordinates in the array are counterclockwise
    if positioned clockwise, the polygon will be drawn correctly

    "arcs": [
  [
    [-12.260535998018383, 62.14792267500428],
    [17.105272580928016, 71.36229082737557],
    [43.9572765344397, 70.27381439382373],
    [48.070775012424235, 43.55191645077076],
    [10.820761017340033, 35.82827731956981],
    [-13.974493697178218, 35.17713854785707],
    [-12.260535998018383, 62.14792267500428]
  ]
]