How do I merge polygons (latitude & longitude)?

Question

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

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);

Answer 1

You can use the JSTS library

proof of concept fiddle

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="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.0.2/jsts.min.js"></script>
<div id="map_canvas"></div>