Dividing objects in array, according to two identical objects, which will be first and last in new array

Question

I need help. I have problem with array in Javascript. I have array of objects which represents a corrdinates for drawing areas on map but there are multipolygons.

Here is example array given to draw:

Array(884) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
​
0: Object { lat: 54.625115217034, lng: -1.230014164405 }
1: Object { lat: 54.62510382394, lng: -1.2299049064841 }
2: Object { lat: 54.625112383301, lng: -1.2300137052116 }

... many more

And to form a polygon there need to be duplicate of objects to be beggining and end of polygon. In this array are sometimes many of this cases and I need to divide them to can drawing many polygons on map not one with single line which causes this: (https://i.sstatic.net/8bvex.png)

Here is code:

 var data = [];

        @foreach ($coordinates as $item)
            data.push({
                lat: {{ $item['lat'] }},
                lng: {{ $item['lng'] }}
            });
        @endforeach

        var flightPlanCoordinates = data;
    
        var flightPath = new google.maps.Polygon({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            strokeWeight: 3,
            strokeOpacity: 0.8
        });

        var bounds = new google.maps.LatLngBounds();
        flightPath.getPath().forEach(function(e) {
            bounds.extend(e);
        })
        map.fitBounds(bounds);

        flightPath.setMap(map);

I try many times to iterate on array in way to if there is duplicate of one element then loop will stop and items will be added to other array the loop will set nest as first and added next items until find next duplicate of new first item.

Answer 1

You might have tried this but just to make sure I understand what you are trying to achieve. You have a list of coordinates in which ideally at some point you should have a close loop which should create a polygon e.g. to simplify the coordinates I'm using letters lets say your list should be something like this: {A, B, C, F, G, A, H, K, L, M, H} this list should create two polygons one for the A loop and one for the H loop is that correct? The other assumption I'm making is the first item will have a close loop or the all thing will be just one polygon.

If this is the case your method should be written in the following order, this is a rough script I haven't tested but it will give you an idea of how to do it

var newPolygon = 1; -set a flag every time you need to start a new polygon
var data;
var startLat;
var startLng;
@foreach ($coordinates as $item)
  if(newPolygon){
     data= [];
     newPolygon = 0;
     var startLat = $item['lat'];
     var startLng = $item['lng'];

        data.push({
            lat: {{ $item['lat'] }},
            lng: {{ $item['lng'] }}
        });
  }
  else{
        data.push({
            lat: {{ $item['lat'] }},
            lng: {{ $item['lng'] }}
        });
      if (startLat == $item['lat'] and startLng == $item['lng']){
         newPolygon = 0;

    var flightPlanCoordinates = data;

    var flightPath = new google.maps.Polygon({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        fillColor: '#FF0000',
        strokeWeight: 3,
        strokeOpacity: 0.8
    });

    var bounds = new google.maps.LatLngBounds();
    flightPath.getPath().forEach(function(e) {
        bounds.extend(e);
    })
    map.fitBounds(bounds);

    flightPath.setMap(map);
    }
  }

@endforeach