[@nativescript/google-maps] Adding a ground overlay

[tommag21]

Hi, I'm struggling to add a ground overlay and I can't find examples in the documentation or other threads. I'm testing on Android.

This is what I have tested so far:

map.addGroundOverlay({
  visible: true,
  image: await ImageSource.fromUrl("https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"),
  bearing: 0,
  zIndex: 10,
  // transparency: 0,
  bounds: {
    northeast: { lat: 40.773941, lng: -74.12544 },
    southwest: { lat: 40.712216, lng: -74.22655 }
  }
});

If I specify bounds I get this exception: "java.lang.IllegalArgumentException: Options doesn't specify a position".

map.addGroundOverlay({
  visible: true,
  image: await ImageSource.fromUrl("https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"),
  bearing: 0,
  zIndex: 10,
  // transparency: 0,
  position: { lat: 40.773941, lng: -74.12544 },
  anchorU: 0,
  anchorV: 1,
  height: 1000,
  width: 1000
});

If instead I specify position, anchorU, anchorV, height and width, I get: "Error: java.lang.IllegalArgumentException: Location must be specified".

What is the correct way to initialise a ground overlay?

[tommag21]

I tried editing the method intoNativeGroundOverlayOptions (link) and now I am able to add a ground overlay through bounds or position.

@nativescript/google-maps/utils/index.android.js:203:1

export function intoNativeGroundOverlayOptions(options) {
    var _a, _b;
    const opts = new com.google.android.gms.maps.model.GroundOverlayOptions();
    if (options === null || options === void 0 ? void 0 : options.position) {
        const coords = options.position;
        opts.position(new com.google.android.gms.maps.model.LatLng(coords.lat, coords.lng), options.width);
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.width) === 'number') {
        opts.position(opts.getLocation(), options.width);
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.height) === 'number') {
        opts.position(opts.getLocation(), opts.getWidth(), options.height);
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.bounds) === 'object') {
        opts.positionFromBounds(new com.google.android.gms.maps.model.LatLngBounds(
            new com.google.android.gms.maps.model.LatLng(options.bounds.southwest.lat, options.bounds.southwest.lng),
            new com.google.android.gms.maps.model.LatLng(options.bounds.northeast.lat, options.bounds.northeast.lng)
        ))
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.transparency)) {
        opts.transparency(options.transparency);
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.anchorU) === 'number' || typeof (options === null || options === void 0 ? void 0 : options.anchorV) === 'number') {
        opts.anchor((_a = options === null || options === void 0 ? void 0 : options.anchorU) !== null && _a !== void 0 ? _a : opts.getAnchorU(), (_b = options === null || options === void 0 ? void 0 : options.anchorV) !== null && _b !== void 0 ? _b : opts.getAnchorV());
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.tappable) === 'boolean') {
        opts.clickable(options.tappable);
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.tappable) === 'boolean') {
        opts.clickable(options.tappable);
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.bearing) === 'number') {
        opts.bearing(options.bearing);
    }
    if ((options === null || options === void 0 ? void 0 : options.image) instanceof android.graphics.Bitmap) {
        opts.image(com.google.android.gms.maps.model.BitmapDescriptorFactory.fromBitmap(options === null || options === void 0 ? void 0 : options.image));
    }
    else if ((options === null || options === void 0 ? void 0 : options.image) instanceof ImageSource) {
        opts.image(com.google.android.gms.maps.model.BitmapDescriptorFactory.fromBitmap(options === null || options === void 0 ? void 0 : options.image.android));
    }
    if (typeof (options === null || options === void 0 ? void 0 : options.zIndex) === 'number') {
        opts.zIndex(options.zIndex);
    }
    return opts;
}

Now I will try on iOS.

[tommag21]

Consulting iOS documentation it seems that a ground overlay can only be added with bounds, so I added these lines to the intoNativeGroundOverlayOptions iOS function (link).

@nativescript/google-maps/utils/index.ios.js:202:5

if (typeof (options === null || options === void 0 ? void 0 : options.bounds) === 'object') {
    let southWest = CLLocationCoordinate2DMake(options.bounds.southwest.lat, options.bounds.southwest.lng);
    let northEast = CLLocationCoordinate2DMake(options.bounds.northeast.lat, options.bounds.northeast.lng);
    opts.bounds = new GMSCoordinateBounds(southWest, northEast);
}

Works on iOS 15.5 simulator.

[tommag21]

@triniwiz you might want to check this out. Should I create a pull request?

[triniwiz]

@tommag21 LGTM 😄