CODEWITHSUNDEEP
angulargoogle-mapsangular-google-mapsgoogle-polylineagm
KLTR
KLTR

Reputation: 1334

agm polyline get point of new edge

I have an agm-polyline with 2 agm-polyline-points. When moving the edge of the line (the middle point) I want the save the new line with 3 points. The problem is, when moving the edge to a new location, the event returns the wrong coordinates / or just coordinates of something else. 

    <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng" style="height: 500px">
      <agm-polyline [editable]="true" (lineMouseUp)="addEdge($event)">
        <agm-polyline-point 
        *ngFor="let point of points" [latitude]="point.lat" [longitude]="point.lng"></agm-polyline-point>
      </agm-polyline>
    </agm-map>

  lat: number = 32.0795723;
  lng: number = 34.7757089;
  zoom: number = 16;
  @ViewChild('line') polyLine : AgmPolyline;
  points = [
    {lat: 32.0795723, lng: 34.7757089},
    {lat: 32.0780565, lng: 34.7798036}
  ]
  addEdge(event){
    let point = {lat: event.latLng.lat(), lng: event.latLng.lng()};
    if (event.vertex !== undefined) {
      this.points[event.vertex] = point;
    } else if (event.edge !== undefined) {
      this.points.splice(event.edge + 1, 0, point);
    }
    console.log(this.points)
  }

take a look at the stackblitz.

Upvotes: 1

Views: 1615

Answers (1)

rhavelka
rhavelka

Reputation: 2396

New Answer

My previous answer needed Mercator Projection calculations which is not fun. Looking into it further, there is a polyPathChange event that fires when someone updates the line. You will need to update your agm and rxjs to use this event. I have a working example in this stackblitz. Note that I hide/show the line because the polyPathChange only fires once, so hiding/showing re-initializes the line. so the event fires again. Is there a solution that doesn't require hiding/showing the line? Maybe, but I don't know how to do that.

Old Answer

I know this is a little late, but no formal answer was given to this question.

After playing with this a long time, I finally figured out what is going. The lat/lng on the event that is returning from the (lineMouseUp) is not the node of the line, but it is the new midpoint. So it's not a random number, it's (pointA.lat + pointB.lat)/2. The way to get around this is the following equations before you splice it into the array:

point.lat = (point.lat - this.points[event.edge].lat) * 2 + this.points[event.edge].lat;
point.lng = (point.lng - this.points[event.edge].lng) * 2 + this.points[event.edge].lng;

Note that this may not work in all hemispheres (I don't know, I didn't test that much out), so you may need check if lat/lng are positive/negative and adjust the equation. Here is a working stackblitz

Upvotes: 1

Related Questions