How to get the new coordinates from Angular Google Maps? (Angular 6)

Question

Background:

Hello everyone, for the last days I am struggling with angular google maps (AGM) API. I am building something pretty simple, I have list of coordinates ( longitude and latitude ) which I am passing to AGM directive, everything work fine and I am able to see the points on the map, check out the image (line image and polygon image):

Line Image:

Polygon Image:

This is my angular code to display the line and display the polygons.

<agm-map #agmMap class="d-agm-map-container" [zoom]="zoom" [latitude]="latitude" [longitude]="longitude">

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length === 2">
    <agm-polyline [strokeColor]="'red'" [editable]="true" (lineMouseUp)="lineChange($event)">
      <ng-container *ngFor="let point of shape.Points">
        <agm-polyline-point [latitude]="point.lat" [longitude]="point.lng">
        </agm-polyline-point>
      </ng-container>
    </agm-polyline>
  </span>

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length > 2">
    <agm-polygon [paths]="shape.Points" [fillOpacity]="0.1" [strokeOpacity]="0.5" [fillColor]="'red'"
      [strokeWeight]="1" [visible]="true" [zIndex]="1" [editable]="true" (polyMouseUp)="polygonChanged($event)"></agm-polygon>
  </span>

</agm-map>

The problem starts when I am changing a point, the first problem is that my original list of points doesn't change and I definitely can understand why, so I started checking AGM documentations, after searching for a while I saw that there is a function called "getPoints()" but only for lines, I tried it and it seems like even after I am changing the points the function returns list of the original points and not the new points.

so I kept searching for polygon API and there is nothing that actually helps, there is some build in function that returns list of points but unfortunately it's not the changed coordinates, it's the the old coordinates ( original one ).

---

Searching ways for solution:

I started checking for the event emitters of the directive and it seems to be more helpful, I added event emitter for the line and event emitter for the polygon, the result that I receive from them are the following:

Polygon Edit:

So with the eventemitter when "mouse up" I get new coordinates and the changed vertex, well that seems to work better, I can build some simple algorithm to place the new vertex or edge in the right order in my list and get done with it, but is there any simple way to get the points? am I missing something?

Line Edit:

Same thing happens with line, I can build also here a simple algorithm that knows how to perform according the new event emitters, but again, is it the right way to do it? is there some simple function or technique to get the list of points from the directive?

---

End of question:

I also googled for a solution and there is nothing that helps, some of the solutions are for angularJS or the other solutions doesn't work, thank you very much for reading this and if anything have the same problem I will be happy if you can share how you would handle this.

Additional information: Polygon Docs Line Docs

Answer 1

So I had to solve this problem and this is my solution for now, just implement simple if statement and add the new emitted coordinates and insert them into my list at the correct position, eventually it seems like it's not a big deal after all.

My solution for this problem is like this, every time we get event emit from AGM Directive, we need to detect 2 important things, if we got 'vertex' or 'edge', if we got vertex in our object therefore the user has moved some exist vertex, therefore we will access to our list of coordinates and update the coordinate.

If we got edge in our object therefore the user wants to add new point to the shape, therefore we will insert the new point in our list at index (edge + 1).

In my example, this is my shape model, which contains list of points.

export class ShapeModel {
    //#region Members
    public ID: number;
    public Title: string;
    public Points: PointModel[];
    //#endregion
}

export class PointModel {
    //#region Members
    public ID: number;
    public lat: number;
    public lng: number;
    public Order: number;
    //#endregion
}

---

And this is the code that works for this problem.

TypeScript:

  public shape: ShapeModel;

  public coordinateChangeDetected($event): void {
    console.log('coordinateChangeDetected($event)', $event);

    if (this.isObjectNullOrUndefined($event) || this.isObjectNullOrUndefined($event.latLng)) {
      console.error('No event has emitted through the AGM Directive.');
      return;
    }

    const newLatitude = $event.latLng.lat();
    const newLongitude = $event.latLng.lng();

    if ($event.vertex !== undefined) {
      this.shape.Points[$event.vertex].lat = newLatitude;
      this.shape.Points[$event.vertex].lng = newLongitude;
    } else if ($event.edge !== undefined) {
      const point = new PointModel();
      point.lat = newLatitude;
      point.lng = newLongitude;
      this.shape.Points.splice($event.edge + 1, 0, point);
    }
  }

HTML:

<agm-map #agmMap class="d-agm-map-container" [zoom]="zoom" [latitude]="latitude" [longitude]="longitude">

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length === 2">
    <agm-polyline [strokeColor]="'red'" [editable]="true" (lineMouseUp)="coordinateChangeDetected($event)">
      <ng-container *ngFor="let point of shape.Points">
        <agm-polyline-point [latitude]="point.lat" [longitude]="point.lng">
        </agm-polyline-point>
      </ng-container>
    </agm-polyline>
  </span>

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length > 2">
    <agm-polygon [paths]="shape.Points" [fillOpacity]="0.1" [strokeOpacity]="0.5" [fillColor]="'red'"
      [strokeWeight]="1" [visible]="true" [zIndex]="1" [editable]="true" (polyMouseUp)="coordinateChangeDetected($event)"></agm-polygon>
  </span>

</agm-map>