union of googlemaps polygons with clipper.js

Question

I'm trying to merge 2 polygons (green) on Google maps (API v3 Javascript) with clipper.js.

before : http://jsfiddle.net/kevdiho/tc53Y/

My goal is to have only 1 polygon (red). The problem is that the final polygon is not exactly follow the path and sometime it's even worst.

after : http://jsfiddle.net/kevdiho/uF6ec/

to merge the 2 green polygons i used clipper.js and this function ClipperLib.ClipType.ctUnion

var clipType = ClipperLib.ClipType.ctUnion;
function mergePolygon()
  {
      for(j=0;j<array_polygon.length;j++){
          array_polygon_clipper = createarray_clipper_polygon(array_polygon[j]);
          subj_polygons.push(array_polygon_clipper);
      }
      cpr.AddPolygons(subj_polygons, ClipperLib.PolyType.ptSubject);
      var succeeded = cpr.Execute(clipType, solution_polygons);
      return solution_polygons;
  }

How can i solve this problem? Clipper.js is a good answer or there are other libraries to work with googlemaps polygons?

This SO question might help: http://stackoverflow.com/questions/15052430/how-can-i-combine-polygons-and-remove-the-overlap/15259663#15259663 — geocodezip, Nov 22 '13 at 16:05

score 4 · Accepted Answer · answered Jan 19 '14 at 19:14

Your example could work if you upscale the coordinates before AddPolygons call and downscale them after union operation, eg. by 1000000000000. The scaling is needed to maintain precision, when floats are used, because Clipper uses integers innerly. This has a downside that the operation is slow, because Clipper uses big integer library, if coordinates are upscaled heavily.

To overcome the slowness (and precision) issue, there is available a new (though still experimental) "floats" Clipper: http://jsclipper.sourceforge.net/6.1.3.1_fpoint/clipper.js http://jsclipper.sourceforge.net/6.1.3.1_fpoint/clipper_unminified.js

Clipper 6 has some things changed, which you have to take into account when migrating from Clipper 5 to 6: https://sourceforge.net/p/jsclipper/wiki/migration5to6/

I made a change for you: http://jsfiddle.net/uF6ec/2/

function dummy(){}

Fine! Because floats Clipper is for now experimental, I'll appreciate any feedback to help fixing possible bugs in the library. — Timo Kähkönen, Jan 24 '14 at 18:12
Can you help me maybe? I basically want the same thing as @madiknight asked for, but i dont want the hole in the overlap so I want a full outline, any ideas on how to do this with clipper? — NAJ, May 20 '15 at 10:03

score 3 · Answer 2 · edited May 23 '17 at 12:23

Here is a way to make a non-hole union that NAJ asked in the comment to the answer. The image below shows two polygons unioned so that the hole is missing:

enter image description here

FIDDLE: http://jsfiddle.net/uF6ec/121/

The reason for a hole is different orientations of subject polygons. We have to detect if the area is negative and reverse the orientation:

if (ClipperLib.JS.AreaOfPolygon(array_polygon_clipper) < 0)
{
    array_polygon_clipper.reverse();
}

(You could also make the exact opposite to achieve the same solution, by reversing all polygons whose area is positive.)

And then use pftNonZero filling rule in Execute():

var succeeded = cpr.Execute(ClipperLib.ClipType.ctUnion,
solution_polygons, ClipperLib.PolyFillType.pftNonZero, 
ClipperLib.PolyFillType.pftNonZero);

You can read more about fill rules and ReversePath.

Thanks so much Timo, been trying to work this out for a while! — NAJ, May 26 '15 at 08:30
If someone else finds this, it is important to pass all of the polygons to new google.maps.Polygon in a single call if you have "holes" in any of your polygons. Otherwise, the holes are drawn twice. — Matthew Kolb, Aug 17 '15 at 21:30

union of googlemaps polygons with clipper.js

2 Answers2