Creating an OpenLayers 5 MultiPolygon feature from a turf.js MultiPolygon

Question

In OpenLayers 5.3.0, I've created a MultiPolygon using the 'difference' tool in turf.js. The turf.js MultiPolygon looks fine when I examine the JSON, but when I try to use that to create a feature in OpenLayers, I get "Uncaught TypeError: t.addEventListener is not a function".

I've tried many combinations of JSON.stringify, JSON.parse, GeoJSON.readFeatures, .getCoordinates()... I tried adding the turf.js MultiPolygon as a feature directly via source.addFeature(multiPolygonGeometry), but then I get 'Uncaught TypeError: e.getId is not a function'. I also tried source.addFeatures(multiPolygonGeometry) (note the plural 'addFeatures'), and that didn't give me any errors, but also didn't appear to add anything to the source.

Relevant lines in my code are as follows:

multiPolygonGeometry = turf.difference(largeArea,maskAreas);
multiPolygonFeature = new ol.Feature({
  geometry: multiPolygonGeometry,
  id: 'multiPolygonFeature1'
});

multiPolygonGeometry looks like this in the console:

{
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [
            140.9716711384525,
            -36.97645228850101
          ],
          [
            140.97418321565786,
            -36.97679331852701
          ],
          [
            140.9741163253784,
            -36.97713531664132
          ],
          [
            140.9740304946899,
            -36.97903805606076
          ],
          [
            140.97437381744382,
            -36.98025509866784
          ],
          [
            140.97594864874696,
            -36.98127512642501
          ],
          [
            140.9714880598484,
            -36.9804459718428
          ],
          [
            140.9714500775476,
            -36.97642733756345
          ],
          [
            140.9716711384525,
            -36.97645228850101
          ]
        ]
      ],
      [
        [
          [
            140.97455248763328,
            -36.97684309230892
          ],
          [
            140.97751071844857,
            -36.97723786980259
          ],
          [
            140.97749308140382,
            -36.977304276099005
          ],
          [
            140.97715289421623,
            -36.97770848336402
          ],
          [
            140.97661807025068,
            -36.97969050789806
          ],
          [
            140.97628355026242,
            -36.97958658471583
          ],
          [
            140.97634792327878,
            -36.97900377288852
          ],
          [
            140.9764981269836,
            -36.97866094031662
          ],
          [
            140.97510337829587,
            -36.97727245260485
          ],
          [
            140.97455248763328,
            -36.97684309230892
          ]
        ]
      ],
      [
        [
          [
            140.97628420893903,
            -36.98092777726751
          ],
          [
            140.97617893060388,
            -36.98131793226549
          ],
          [
            140.97596635572492,
            -36.98127841787872
          ],
          [
            140.97628420893903,
            -36.98092777726751
          ]
        ]
      ]
    ]
  },
  "ol_lm": {
    "change": []
  }
}

And then I get this message:

events.js:174 Uncaught TypeError: t.addEventListener is not a function
    at v (events.js:174)
    at e.handleGeometryChanged_ (Feature.js:210)
    at e (events.js:41)
    at e.dispatchEvent (Target.js:101)
    at e.notify (Object.js:151)
    at e.set (Object.js:170)
    at e.setProperties (Object.js:186)
    at new e (Feature.js:108)
    at getPolygon (maskedPolygon.js:319) <-- this is the second line in my code sample above
    at <anonymous>:1:1

What am I doing wrong here? I'm sure it's something simple but I just can't seem to crack this.

Mike Mike · Accepted Answer · 2019-10-13T11:49:24

Turf works with GeoJSON features so your "multiPolygonGeometry" is a GeoJSON feature which can be parsed by OpenLayers then given an Id:

multiPolygonFeature = new ol.format.GeoJSON().readFeature(multiPolygonGeometry);
multiPolygonFeature.setId('multiPolygonFeature1');

Creating an OpenLayers 5 MultiPolygon feature from a turf.js MultiPolygon

1 Answers