Angular-google-maps: Expose polygon path in polygon directive

[seanmcoleman]

We're in need of a way to access a polygon's path(s) that a user would create and/or edit through the polygon directive. After reviewing the code, it was clear this functionality doesn't exist yet.

We forked and built this functionality by exposing the polygon in PolygonManager and then exposing a custom event in the polygon directive for when the polygon is changed, which emits the polygon.

Our solution is bare bones and only supports our use case:

• Only handles a single, non-intersecting path.
• Only exposes an array of points and not the entire polygon itself.
• The directive detects the mouseup event to fire a pathChanged event.

For a generalized solution, there may be different design goals. I imagine we would want to handle an arbitrary set of possibly intersecting paths and even possibly return the entire polygon instead of just the points. The mouseup event was the best event we could find to bind to since I didn't see that Google Maps supports a true event for if a polygon changed. The mouseup event guarantees that the pathChanged event will fire for all changes, but will also fire when it hasn't changed.

As a first step, I'd like to get a pulse on if this feature makes sense to include in the library (I strongly believe so). Is this the best approach for the functionality? If so, we can invest time in more specific requirements aiming to merge a pull request.

[carloscba]

@seanmcoleman Can you share the code for got the path? I have same problem.

[seanmcoleman]

@carloscba https://github.com/drawbackwards/angular2-google-maps

[carloscba]

@seanmcoleman I've installed your version of agm and works fine for me.

View:

    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="13" [mapTypeControl] = "true">
      <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
      <agm-polygon [editable] = "true" [polyDraggable]="true" [paths] = "paths" (pathChanged)="onPathChanged($event)"></agm-polygon>
    </agm-map>

Controller:

  onPathChanged($event){
    console.log('$event', $event.then((e)=>{

      e.map((item, index) => {
        console.log(item.lat(), item.lng());
      })

    }));
  }

Thanks for your help.

[chromacoma]

@seanmcoleman Thanks so much for this! But your code wasn't working with multiple polygons on the map, so IYI, I've forked the current agm and applied your changes with my own at https://github.com/chromacoma/angular-google-maps

[seanmcoleman]

@chromacoma you're right, our use-case only required one polygon so I didn't even consider multiple which was one of the big limitations. Nice fork!

[agustinbcu01]

Please create a Pull request.

[ghost]

823

[Methodician]

@chromacoma I downloaded your fork and I keep getting a compile error in polygon-manager.ts

ERROR in node_modules/@agm/dummy/packages/core/services/managers/polygon-manager.ts(31,30): error TS2345: Argument of type 'Promise' is not assignable to parameter of type 'Promise'. Type 'Polyline' is not assignable to type 'Polygon'.
Property 'getPaths' is missing in type 'Polyline'.

Tried the easy way out by just changing createPolygon to return Promise but then I just get more scary errors. I really need the functionality you've implemented!

EDIT: When I tried to fix it on that branch, other things broke. Instead I downloaded the dev files from this repo and added in your changes. Seems to be compiling

[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.

[commoncoder-02]

(pathChanged)="onPathChanged($event) its not triggering.now its not working. i have used (polyPathsChange) it also not working..any help

[ghost]

@commoncoder-02 duplicate of #1801

how are you using the event? how are you triggering it? it only works for editable polylines

[ghost]

and how are you triggering it? by dragging and dropping points or by modifying the underlying array?

[commoncoder-02]

modiying the polygon by dragging

[ghost]

the event is called polyPathsChange not pathsChanged. Also, can you provide a stackblitz, it would be helpful as I was unable to reproduce.