Create polygons and check if they are intersecting each other

googleMapsPoligonsInteresection1.txt

<apex:page showHeader="true" sidebar="true">
	 <style>
			#map-canvas {
			    width:100%;
			    height:500px;
			}
			#map_canvas {
			    width:100%;
			    height:500px;
			}
      #fd_map{
          width:100%;
          height:500px;
      }
      #description {
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
        }

        #infowindow-content .title {
          font-weight: bold;
        }

        #infowindow-content {
          display: none;
        }

        #map #infowindow-content {
          display: inline;
        }

        .pac-card {
          margin: 10px 10px 5 5;
          border-radius: 5px 0 0 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          background-color: #fff;
          font-family: Roboto;
        }

        #pac-container {
          padding-bottom: 12px;
          margin-right: 12px;
        }

        .pac-controls {
          display: inline-block;
          padding: 5px 11px;
        }

        .pac-controls label {
          font-family: Roboto;
          font-size: 13px;
          font-weight: 300;
        }

        #pac-input {
          background-color: #fff;
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
          margin-left: 12px;
          padding: 0 11px 0 13px;
          text-overflow: ellipsis;
          width: 400px;
        }

        #pac-input:focus {
          border-color: #4d90fe;
        }

        #title {
          color: #fff;
          background-color: #4d90fe;
          font-size: 12px;
          font-weight: 500;
          padding: 10px 10px;
        }
		</style>

    <div id="map-canvas"></div>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu2tuR85uIKaToyL1mUs4AjLGyzbR1Ego&libraries=drawing,geometry,places"></script>
    <script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"/>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script>
        
        var drawingManager;
        var selectedShape;
        var all_overlays = [];
        var gmarkers = Array();
        var polygons = Array();
        
        function setSelection(shape) {
            clearSelection();
            selectedShape = shape;
            shape.setEditable(true);
        }
        
        function clearSelection() {
            if (selectedShape) {
                selectedShape.setEditable(false);
                selectedShape = null;
            }
        }
    
    
        function initialize() {
            
            //init in mexico           
            var myLatlng1 = new google.maps.LatLng(19.39068, -99.2836961);
            
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 10,
                center: myLatlng1,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                zoomControl: true
            });
          
            var polyOptions = {
                fillColor: '#0099FF',
                fillOpacity: 0.7,
                strokeColor: '#AA2143',
                strokeWeight: 2,
                editable: true
            };
            
            drawingManager = new google.maps.drawing.DrawingManager({
                drawingControlOptions: {
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON
                    ]
                },
                polygonOptions: polyOptions,
                map: map
            });
        
            google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {

                e.overlay.getPaths().forEach(function(path, index){

                    google.maps.event.addListener(path, 'insert_at', function(){
                        // New point
                        console.log('new point');
                        calcIntersection(e.overlay, all_overlays);
                        all_overlays.push(e.overlay);
                    });

                    google.maps.event.addListener(path, 'remove_at', function(){
                        // Point was removed
                        console.log('point removed');
                    });

                    google.maps.event.addListener(path, 'set_at', function(){
                        // Point was moved
                        console.log('point was moved');
                        calcIntersection(e.overlay, all_overlays);
                        all_overlays.push(e.overlay);
                    });

                });


                calcIntersection(e.overlay, all_overlays);
                all_overlays.push(e.overlay);
            });        
        }
        
        function calcIntersection(newOverlay, allOverlays) {
            //ensure the polygon contains enought vertices 
            if(newOverlay.getPath().getLength() < 3){
                alert("The polygon was not closed");
                return;
            }
        
            var geometryFactory = new jsts.geom.GeometryFactory();
            var newPolygon = createJstsPolygon(geometryFactory, newOverlay);

            //iterate existing polygons and find if a new polygon intersects any of them
            var result = allOverlays.filter(function (currentOverlay) {
                var curPolygon = createJstsPolygon(geometryFactory, currentOverlay);
                var intersection = newPolygon.intersection(curPolygon);
                return intersection.isEmpty() == false;
            });
        
            //if new polygon intersects any of exiting ones, draw it with green color
            if(result.length > 0){
                console.log('over a Polygon');

                swal({
                    title: "Would you like to continue?",
                    text: "The polygon is over an existing one.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        swal("Polygon was created correctly", {
                            icon: "success",
                        });
                        newOverlay.setOptions({strokeWeight: 2.0, fillColor: 'green'});    
                    } 
                    else {
                        swal("Canceled");
                    }
                });
            }
            else{
                console.log('is not over a polygon');
            }
        }
        
        function createJstsPolygon(geometryFactory, overlay) {
            var path = overlay.getPath();
            var coordinates = path.getArray().map(function name(coord) {
                return new jsts.geom.Coordinate(coord.lat(), coord.lng());
            });
          
            coordinates.push(coordinates[0]);
            
            var shell = geometryFactory.createLinearRing(coordinates);
          
            return geometryFactory.createPolygon(shell);
        }


        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</apex:page>