How do I merge polygons (latitude & longitude)?

I have polygons defined on a map with latitude & longitude as the coordinate system. I want to merge all overlapping polygons. enter image description here

From this question Question

I found this software: Software

I downloaded the code an it works great for Cartesian coordinates. But, I have no idea how to utilize it for latitude & longitude.

Whats the best way to approach this problem?

For example here are the polygons I want to merge:

        var polyA = new List<GpsLocation>();
        var pA1 = new GpsLocation(0, 0);
        polyA.Add(pA1);
        var pA2 = GpsHelper.CreateLocationBasedOnBearingDistance(pA1, 5, 100);
        polyA.Add(pA2);
        var pA3 = GpsHelper.CreateLocationBasedOnBearingDistance(pA2, 95, 100);
        polyA.Add(pA3);
        var pA4 = GpsHelper.CreateLocationBasedOnBearingDistance(pA3, 185, 100);
        polyA.Add(pA4);

        var polyB = new List<GpsLocation>();

        var pB1 = GpsHelper.CreateLocationBasedOnBearingDistance(pA1, 95, 50);
        polyB.Add(pB1);
        var pB2 = GpsHelper.CreateLocationBasedOnBearingDistance(pB1, 5, 100);
        polyB.Add(pB2);
        var pB3 = GpsHelper.CreateLocationBasedOnBearingDistance(pB2, 95, 100);
        polyB.Add(pB3);
        var pB4 = GpsHelper.CreateLocationBasedOnBearingDistance(pB3, 185, 100);
        polyB.Add(pB4);


ANSWERS:


You can use the JSTS library

proof of concept fiddle

screenshot of merged polygon

code snippet:

var googleMaps2JSTS = function(boundaries) {
  var coordinates = [];
  for (var i = 0; i < boundaries.getLength(); i++) {
    coordinates.push(new jsts.geom.Coordinate(
      boundaries.getAt(i).lat(), boundaries.getAt(i).lng()));
  }
  return coordinates;
};
var jsts2googleMaps = function(geometry) {
  var coordArray = geometry.getCoordinates();
  GMcoords = [];
  for (var i = 0; i < coordArray.length; i++) {
    GMcoords.push(new google.maps.LatLng(coordArray[i].x, coordArray[i].y));
  }
  return GMcoords;
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var poly1 = new google.maps.Polygon({
    // map: map,
    paths: [polyPath1]
  });
  for (var i = 0; i < polyPath1.length; i++) {
    bounds.extend(new google.maps.LatLng(polyPath1[i].lat, polyPath1[i].lng));
  }
  var poly2 = new google.maps.Polygon({
    // map: map,
    paths: [polyPath2]
  });
  for (var i = 0; i < polyPath2.length; i++) {
    bounds.extend(new google.maps.LatLng(polyPath2[i].lat, polyPath2[i].lng));
  }
  map.fitBounds(bounds);
  var geometryFactory = new jsts.geom.GeometryFactory();
  var JSTSpoly1 = geometryFactory.createPolygon(geometryFactory.createLinearRing(googleMaps2JSTS(poly1.getPath())));
  JSTSpoly1.normalize();
  var JSTSpoly2 = geometryFactory.createPolygon(geometryFactory.createLinearRing(googleMaps2JSTS(poly2.getPath())));
  JSTSpoly2.normalize();

  var JSTSpolyUnion = JSTSpoly1.union(JSTSpoly2);
  var outputPath = jsts2googleMaps(JSTSpolyUnion);

  var unionPoly = new google.maps.Polygon({
    map: map,
    paths: outputPath,
    strokeColor: '#0000FF',
    strokeOpacity: 0.3,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.8
  });
}
google.maps.event.addDomListener(window, "load", initialize);

var polyPath1 = [{
  lat: 51.510291630150256,
  lng: -0.18530845642089844
}, {
  lat: 51.51045188624856,
  lng: -0.171661376953125
}, {
  lat: 51.50227810647597,
  lng: -0.17131805419921875
}, {
  lat: 51.5019575362143,
  lng: -0.18479347229003906
}, {
  lat: 51.510291630150256,
  lng: -0.18530845642089844
}];
var polyPath2 = [{
  lat: 51.51600708249261,
  lng: -0.17844200134277344
}, {
  lat: 51.50746034612787,
  lng: -0.17844200134277344
}, {
  lat: 51.507353501776365,
  lng: -0.16393661499023438
}, {
  lat: 51.51611390655047,
  lng: -0.1641082763671875
}, {
  lat: 51.51600708249261,
  lng: -0.17844200134277344
}];
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src=""></script>
<script src=""></script>
<div id="map_canvas"></div>


 MORE:


 ? Google maps and Angular material design dialog full width
 ? Google maps key with different google play account
 ? Adding Markers in Maps during app is running unsuccessful
 ? toggle button in google map API
 ? Google Places Autocomplete boundaries doesn't always work
 ? I want google maps marker to stay in the centre of the map while camera position can change iOS SDK
 ? Google maps - keep center when zooming
 ? Type 'Promise<void>' is not assignable to type 'Marker'. Property '_objectInstance' is missing in type 'Promise<void>'. Ionic 2
 ? Google Map is not showing on live site using Avada theme
 ? Adding google tiles with R