angulargoogle-mapsagm

agm-polygon not updating when additional points are added

Edit: I added a stackblitz for this. It is my first so I hope it works.

https://stackblitz.com/edit/angular-dlabgk

I've been using google maps for several years and recently migrating every to AgmMaps. Recently I've seen a few questions about polygon drawing on the map and wanted to create a very simple demo. I added this to a working map project:

<agm-polygon [strokeColor]="'red'" [strokeWeight]="4" [paths]="polygonPts">
</agm-polygon>

Declared my array like this:

polygonPts: Array<google.maps.LatLng>[] = [];

Then in my mapReady function I added some valid points:

this.polygonPts = [
    new google.maps.LatLng(34.85052636946416, -117.40498588867183),
    new google.maps.LatLng(36.28034702299417,-112.48311088867183),
    new google.maps.LatLng(39.87662851819041, -114.76826713867183),
    new google.maps.LatLng(38.03141086161898,-121.18428276367183)
];

All worked as expected as it drew a polygon in the SW part of the USA. Next step was to extend it a bit so I could click on the map and add points. I added a handler on the agm-map element for mapClick:

(mapClick)="mapClick($event)"

And then added points to the array: 

mapClick(e) {
    let latlng = new google.maps.LatLng(e.coords.lat, e.coords.lng);
    this.polygonPts.push(latlng);
    this.ptsString = JSON.stringify(this.polygonPts);
}

I add the ptsString to the template so I could visually see that my array was growing but can't seem to get the map to update. I checked NgZone to make sure I'm in zone and also tried this.zone.run to no avail. The docs seem very clear that you can do this stating in the paths section: "Inserting or removing LatLngs from the Array will automatically update the polygon on the map."

I went through the example on StackBlitz (https://stackblitz.com/edit/agm-polygon?file=app%2Fapp.component.html) but that seemed really complicated and was trying to do it with a lot less code. Is that the only way or am I missing something?

Solution

  • After some experiments I narrowed the problem to using the push function on the array. I wish I could explain why using push was a problem but changing to the spread operator to add items to the array cured the issue.

    I updated the mapClick() function to this:

    let ll = new google.maps.LatLng(event.coords.lat, event.coords.lng);
this.polygonPts = [...this.polygonPts, ll];
this.ptsList = JSON.stringify(this.polygonPts);

    I also updated the stackbltiz: https://stackblitz.com/edit/angular-dlabgk