turfjs unexpected shapes with polygon difference()

Question

After difference() implementation for my polygon map, I find out, that when I zoom in map some unexpected shapes appear or disappear which shouldn't be there. There are MultyPolygon and Polygon type polygons and I compare them and even checking the length of polygon coordinates, but that didn't help.

let previousFeature = {}
let x    
for(x = 0;x < second_features.length; x++){
 if (x === 0) {
  previousFeature = second_features[x]
 } else {
 if (previousFeature.geometry.coordinates.length === 
  second_features[x].geometry.coordinates.length)
 {
  second_features[x - 1] = difference(previousFeature.geometry, second_features[x].geometry)
 }
  second_features[x - 1].properties.time_distance = previousFeature.properties.time_distance
  second_features[x - 1].properties.gid = previousFeature.properties.gid
  previousFeature = second_features[x]
}

Unexpected shape appears which crosses through polygons while doing zoom in and zoom out.

Do you have more examples/code about this? Its very hard to find the error with these 15 lines of code — kpalatzky, Jan 17 '20 at 22:59
Please elaborate a bit what exactly is unexpected, and what you actually wanted to achieve (as desired result). Also - what exact library are you using? A link would be helpful... — B--rian, Jan 20 '20 at 14:56
Another follow-up: What do you mean by *basically tiles are changes when you zoom in or zoom out.*? — B--rian, Jan 20 '20 at 15:03

B--rian · Answer 1 · 2020-01-21T09:48:19.137

I did find the the geographic location on OSM, but I did not manage to guess which kind of white lines and blue polygons you overlay onto this map. If you talk about "unexpected shape", I suppose you are referring to the dark-blue triangle which crosses through the white lines?

Some (general) guesses why polygons may look differently than expected:

Could it be that you are observing an artifact of the rendering procedure? Some rendering procedures automatically simplify polygons by removing ever x-th supporting point, with x being larger the higher the zoom factor: In other words: For maximal zoom, no points are removed, when you zoom out a bit, more and more points of the polygon are removed. What could be the case is that you see only at maximal zoom level the real shape of the polygon.
Maybe you did not close your polygon(s)? This also may lead to strange effects when rendering for some libraries.

turfjs unexpected shapes with polygon difference()

1 Answers1

Further reading