Search code examples
typescriptgeojsonturfjs

How to build polygons with Observable and turf.js?


I am in the process of building polygons with coordinates coming from database. I have subscribed to an Observable to get all the coordinates (This is an Array). I push each array of coordinates in an upper Array to be able to build my polygons:

this.customerApi.getLocations(this.currentUser.id)
    .subscribe((response) => {
      this.locations = response;
      this.polygonsArray.push(this.locations);
      this.locations.forEach(element 
      => {this.polygons.push(element.geoDefinition.features['0'].geometry.coordinates);
       });

getLocations returns 3 Arrays:

enter image description here

and I push these arrays in an upper one called this.polygons:

enter image description here

My issue is that when I am calling const varpolygon = turf.polygon(this.polygons);

I am getting the following error:

 Uncaught (in promise): Error: Each LinearRing of a Polygon must have 4 or more Positions.
Error: Each LinearRing of a Polygon must have 4 or more Positions.

I think my array structure is fine as Polygons is an Array of Arrays of coordinates Arrays. Type is number[][][] like turf.polygon.

The structure of my validated GEOJSON is:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              5.379856000000018,
              43.252967
            ],
            [
              5.422988000000032,
              43.249466
            ],
            [
              5.425048000000061,
              43.245153
            ],
            [
              5.383804000000055,
              43.239838
            ],
            [
              5.399856,
              43.212967
            ],
            [
              5.379856000000018,
              43.252967
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              5.390139999999974,
              43.279295
            ],
            [
              5.393068999999969,
              43.279249
            ],
            [
              5.391814000000068,
              43.278421
            ],
            [
              5.390709000000015,
              43.278749
            ],
            [
              5.390899999999988,
              43.2785
            ],
            [
              5.390139999999974,
              43.279295
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -0.6070509999999558,
              44.840753
            ],
            [
              -0.5437080000000378,
              44.832962
            ],
            [
              -0.5222499999999854,
              44.820544
            ],
            [
              -0.5663670000000138,
              44.808853
            ],
            [
              -0.5863669999999956,
              44.788853
            ],
            [
              -0.6070509999999558,
              44.840753
            ]
          ]
        ]
      },
      "properties": {}
    }
  ]
}

Could someone tell me what I did wrong if this is the case and help me?

I thank you in advance for your help.


Solution

  • this.polygons is an array of polygons and hence its not a single polygon

    for(var i;i<this.polygons.length;i++){
        polygon = turf.polygon(this.polygons[i]);
    }
    

    In this way you can create seperate turf polygons for each different polygons.

    Or if you want to create a single turf polygon what you need to do is create a turf multipolygon

    var turfpolygon = turf.multiPolygon(this.polygons);