Angular-google-maps: Editable Polygon Path should be two-way Binded

[Salahuddin]

I think it would be good if editable polygon could change path array upon changes to the polygon itself.
Or there should be an event like pathChange (similar to centerChange in circle)
Or at least there should be some way to read the coords/edges of polygon after editing.

Thank you.

[TaiPhamD]

anyone successful in getting 1 way binding to work? I tried the example code and added a function to insert a new LatLngLiteral into the paths array each time a marker is clicked to see if it know how to automatically update but doesn't appear to do so. However, it did correctly show the polygon on startup but just doens't refresh with the newly added points.

HTML:

Typescript:

markerClicked(i){
this.paths.push({lat: 32.8+ Math.random().3, lng: -119.6 + Math.random().5});
console.log(this.paths);
}

[alan345]

I think is is linked #843

[NShulzhenko]

Yes, we need this functionality while editing selected territories.

[ryan-morris]

If a shape is set to editable how do you get the values out at all right now? I would prefer 2 way binding but for this example how do I know what the new polygon path is when a user moves or changes the points?

[anusreejaivi]

I have the same question. I need the new co-ordinates of the edittable and draggable polygon

[ghost]

+1

[Nathan-Ryan]

Any progress on this? The polygon paths seem to support the required events to achieve this functionality.

[Nathan-Ryan]

Dirty hack for anyone interested.

I have implemented this workaround for the missing pathsChange output on the AgmPolygon.
Obviously this is not ideal, but it does allow you to react to user edits of the polygon.

Hoping this is properly implemented soon lol.

    private _poly: AgmPolygon;

    @ViewChild(AgmPolygon)
    public set setPoly(poly: AgmPolygon) {
        if (poly != null) {
            this.getPolygon(poly)
                .then(polygon => {
                    let path = polygon.getPath();

                    google.maps.event.addListener(path, "insert_at", (vertex: number) => {
                        this._ngZone.run(() => {
                            this.updateGeographyPointsFromPath(this.geography.points[0], path);
                        });
                    });

                    google.maps.event.addListener(path, "set_at", (vertex: number) => {
                        this._ngZone.run(() => {
                            this.updateGeographyPointsFromPath(this.geography.points[0], path);
                        });
                    });
                });
        }
        else {
            this.getPolygon(this._poly)
                .then(polygon => {
                    let path = polygon.getPath();

                    google.maps.event.clearListeners(path, "insert_at");
                    google.maps.event.clearListeners(path, "set_at");
                });
        }

        this._poly = poly;         
    }

    // HACK: get actual polygon until two-way binding of paths is available
    // https://github.com/SebastianM/angular-google-maps/issues/823
    private getPolygon(poly: AgmPolygon): Promise<google.maps.Polygon> {

        let polyAsAny = <any>poly;
        let polygonMap = polyAsAny
            ._polygonManager
            ._polygons
            .get(poly);

        return polygonMap as Promise<google.maps.Polygon>;
    }

    private updateGeographyPointsFromPath(points: PointModel[], path: google.maps.MVCArray<google.maps.LatLng>) {
        points.length = 0;
        path.forEach(latLng => {
            points.push({
                lat: latLng.lat(),
                lng: latLng.lng()
            });
        });
    }

[daanvanrobays]

Is there any progress on this subject?

[codeunifier]

Would really love some progress on this...facing this issue as well.

[vguleaev]

I want it to be released asap 👍

[ghost]

@SebastianM this is marked as P1, so what's the situation with the issue?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ghost]

no way, stale bot, we are still working on this

[ghost]

Done

[doczoidberg]

is there an example how I can bind polygons and get the updated object? Paths are always the same for me:

    <div *ngFor="let p of polys">
            <agm-polygon #cmp [paths]="$any(p.getPath()).i" [fillColor]="'blue'" [draggable]="true" [editable]="true"
              [polyDraggable]="true" (polyPathsChange)="polytest($event,p)">
            </agm-polygon>
          </div>