Polygon holes not working

[chrillewoodz]

This official Google examples for how to create holes in a polygon doesn't work:

https://developers.google.com/maps/documentation/javascript/examples/polygon-hole

       const outerCoords = [
          Position.positionFromLatLng(25.774, -80.190),
          Position.positionFromLatLng(18.466, -66.118),
          Position.positionFromLatLng(32.321, -64.757)
        ];

        // Define the LatLng coordinates for the polygon's inner path.
        // Note that the points forming the inner path are wound in the
        // opposite direction to those in the outer path, to form the hole.
        const innerCoords = [
          Position.positionFromLatLng(28.745, -70.579),
          Position.positionFromLatLng(29.570, -67.514),
          Position.positionFromLatLng(27.339, -66.668)
        ];

        const polygon = new Polygon();
        polygon.addPoints([outerCoords, innerCoords]);
         this.mapView.addPolygon(polygon);

When I look at the type of addPoints it expects Position[] so therefore it doesn't work. And putting the coordinates in the same array doesn't work either because that gives you very strange results.

Can this be fixed please? I'd do it myself but idk how to do it.

EDIT:

I found the Android/IOS equivalents to the web solution:

Android:

    mMap.addPolygon(new PolygonOptions()
        .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(3, 0), new LatLng(0, 0))
        .addHole(new LatLng(1, 1), new LatLng(1, 2), new LatLng(2, 2), new LatLng(2, 1), new LatLng(1, 1))
        .fillColor(Color.BLUE));

IOS (Swift):

override func loadView() {
  let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude: 151.21135)
  let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
  let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
  mapView.animate(to: camera)

  let hydePark = "tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD"
  let archibaldFountain = "tlvmEqq|y[NNCXSJQOB[TI"
  let reflectionPool = "bewmEwk|y[Dm@zAPEj@{AO"

  let polygon = GMSPolygon()
  polygon.path = GMSPath(fromEncodedPath: hydePark)
  polygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
  polygon.fillColor = UIColor(colorLiteralRed: 1.0, green: 0.0, blue: 0.0, alpha: 0.2)
  polygon.strokeColor = UIColor(colorLiteralRed: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
  polygon.strokeWidth = 2
  polygon.map = mapView
  view = mapView
}

The Android version should be pretty straightforward to implement but the IOS one I don't understand at all, it doesn't seem to work with straight coordinates..

[chrillewoodz]

@SittingFox Since you made the original Polygon implementation, can you also help on this one? Please 😄

[Digizard]

I recommend finding the Android and iPhone equivalents to that JavaScript example you've posted, as that would help someone solve this. Although Nativescript uses Typescript, you have to code these features with the languages native to the OSs.

I used a separate library at the time to generate shapes with holes based on coordinates. Haven't really used Nativescript in over a year.

[chrillewoodz]

@SittingFox Which library was that?

[georgaberg]

I have now implemented this. Please check #329