search

angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API
http://angular-ui.github.io/angular-google-maps
2.52k stars 1.07k forks source link

Directive to create a polygon with multiple paths? #1475

Open lexi-lambda opened 9 years ago

lexi-lambda commented 9 years ago

I need to create a polygon with multiple paths so that I can have a "cutout" of a path. Specifically, I'm using two paths: one rectangular path to cover the whole map, and one circular path drawn counterclockwise to create a hole in the rectangle. This ends up looking like this:

circle = approximateCircle()
rect = [
  new google.maps.LatLng(-90, -180)
  new google.maps.LatLng( 90, -180)
  new google.maps.LatLng( 90,  180)
  new google.maps.LatLng(-90,  180)
]
new google.maps.Polygon
  map: mapControl.getGMap()
  paths: [rect, circle.reverse()]

This works, but it obviously doesn't use the Angular interface, which I'd prefer if possible. Do any of the directives allow this? If not, would it make sense to add a paths option to the polygon and polygons directives?

nmccready commented 9 years ago

Yes, read the docs. polygons

lexi-lambda commented 9 years ago

Okay, I saw polygons, but the docs seem unclear about whether it creates multiple polygons or a single polygon with multiple paths. The docs say:

this is a performance plural directive for many Polygons

which would seem to indicate that it is the former. Perhaps that can be clarified?

nmccready commented 9 years ago

A polygon always consists of multiple paths otherwise it would be a point. So when we say multiple I mean n number of polygons. So any plural directive would be for many if whatever. If your using it for a fixed number of polygons and it is under say 20 or so then polygon might be ok w/ ng-repeat.

lexi-lambda commented 9 years ago

No, it looks like my initial instincts were correct. The polygons directive does not do what I want. This is what I get using google.maps.Polygon directly:

...but this is what I get using the polygons directive:

See these two plunkers for examples demonstrating the difference:

lexi-lambda commented 9 years ago

@nmccready Could you reopen this issue? It's clearly not fixed, as I've demonstrated. I might be willing to work on it and submit a pull request if you give some feedback on how it should be integrated with the existing API.

nmccready commented 9 years ago

sure dig in